refactor variables names and files names

packages/react-json-tree/README.md

@@ -137,13 +137,13 @@ Their full signatures are:
 - `labelRenderer: function(keyPath, nodeType, expanded, expandable)`
 - `valueRenderer: function(valueAsString, value, ...keyPath)`
 
-#### Customize Expandable Buttons
+#### Customize "Expand All/Collapse All" Buttons
 
-Passing the `expandable` props will activate in the top right corner of the JSONTree component the `expand all/collapse all` buttons. You can pass a JSON to customize the expand all/collapse all icons. The default icons are from [FontAwesome](https://fontawesome.com/).
+Passing the `expandCollapseAll` props will activate in the top right corner of the JSONTree component the `expand all/collapse all` buttons. You can pass a JSON to customize the expand all/collapse all icons. The default icons are from [FontAwesome](https://fontawesome.com/).
 
 ```jsx
 <JSONTree
-  expandable={{
+  expandCollapseAll={{
     defaultValue: 'expand',
     expandIcon: /* your custom expand icon */,
     collapseIcon: /* your custom collapse icon */,

packages/react-json-tree/src/JSONNestedNode.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import ItemRange from './ItemRange';
 import JSONArrow from './JSONArrow';
 import JSONNode from './JSONNode';
-import { useExpandableButtonContext } from './expandableButtonsContext';
+import { useExpandCollapseAllContext } from './expandCollapseContext';
 import getCollectionEntries from './getCollectionEntries';
 import type { CircularCache, CommonInternalProps } from './types';
 
@@ -114,7 +114,7 @@ export default function JSONNestedNode(props: Props) {
     styling,
   } = props;
   const { expandAllState, setExpandAllState, setEnableDefaultButton } =
-    useExpandableButtonContext();
+    useExpandCollapseAllContext();
 
   const [defaultExpanded] = useState<boolean>(
     // calculate individual node expansion if necessary

packages/react-json-tree/src/expandCollapseButtons.tsx

@@ -5,12 +5,12 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { ReactNode } from 'react';
-import { Expandable } from '.';
-import { useExpandableButtonContext } from './expandableButtonsContext';
+import { ExpandCollapseAll } from '.';
+import { useExpandCollapseAllContext } from './expandCollapseContext';
 import { StylingFunction } from 'react-base16-styling';
 
-interface ExpandableButtonsProps {
-  expandable: Expandable;
+interface Props {
+  expandCollapseAll: ExpandCollapseAll;
   styling: StylingFunction;
 }
 
@@ -28,25 +28,25 @@ interface DefaultButtonProps {
   defaultIcon?: ReactNode;
 }
 
-function ExpandableButtons({ expandable, styling }: ExpandableButtonsProps) {
-  const { enableDefaultButton } = useExpandableButtonContext();
+function ExpandCollapseButtons({ expandCollapseAll, styling }: Props) {
+  const { enableDefaultButton } = useExpandCollapseAllContext();
 
-  const expandableDefaultValue = expandable?.defaultValue || 'expand';
+  const expandableDefaultValue = expandCollapseAll?.defaultValue || 'expand';
 
   return (
     <div {...styling('expandable')}>
       {enableDefaultButton && (
-        <DefaultButton defaultIcon={expandable?.defaultIcon} />
+        <DefaultButton defaultIcon={expandCollapseAll?.defaultIcon} />
       )}
 
       <ExpandButton
         expandableDefaultValue={expandableDefaultValue}
-        expandIcon={expandable?.expandIcon}
+        expandIcon={expandCollapseAll?.expandIcon}
       />
 
       <CollapseButton
-        expandableDefaultValue={expandable?.defaultValue}
-        collapseIcon={expandable?.collapseIcon}
+        expandableDefaultValue={expandCollapseAll?.defaultValue}
+        collapseIcon={expandCollapseAll?.collapseIcon}
       />
     </div>
   );
@@ -57,7 +57,7 @@ function ExpandButton({
   expandIcon,
 }: ExpandButtonProps) {
   const { expandAllState, setExpandAllState, setEnableDefaultButton } =
-    useExpandableButtonContext();
+    useExpandCollapseAllContext();
 
   const onExpand = () => {
     setExpandAllState('expand');
@@ -85,7 +85,7 @@ function CollapseButton({
   collapseIcon,
 }: CollapseButtonProps) {
   const { expandAllState, setExpandAllState, setEnableDefaultButton } =
-    useExpandableButtonContext();
+    useExpandCollapseAllContext();
 
   const onCollapse = () => {
     setExpandAllState('collapse');
@@ -110,7 +110,7 @@ function CollapseButton({
 
 function DefaultButton({ defaultIcon }: DefaultButtonProps) {
   const { setExpandAllState, setEnableDefaultButton } =
-    useExpandableButtonContext();
+    useExpandCollapseAllContext();
 
   const onDefaultCollapse = () => {
     setExpandAllState('default');
@@ -126,4 +126,4 @@ function DefaultButton({ defaultIcon }: DefaultButtonProps) {
   return <></>;
 }
 
-export default ExpandableButtons;
+export default ExpandCollapseButtons;

packages/react-json-tree/src/expandCollapseContext.tsx

@@ -5,8 +5,8 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { Expandable } from '.';
-import ExpandableButtons from './expandableButtons';
+import { ExpandCollapseAll } from '.';
+import ExpandCollapseButtons from './expandCollapseButtons';
 import { StylingFunction } from 'react-base16-styling';
 
 interface Context {
@@ -18,14 +18,14 @@ interface Context {
 
 interface Props {
   children: ReactNode;
-  expandable?: Expandable;
+  expandCollapseAll?: ExpandCollapseAll;
   styling: StylingFunction;
 }
 
-const ExpandableButtonsContext = createContext<Context>({} as Context);
+const ExpandCollapseAllContext = createContext<Context>({} as Context);
 
-function ExpandableButtonsContextProvider({
-  expandable,
+function ExpandCollapseAllContextProvider({
+  expandCollapseAll,
   children,
   styling,
 }: Props) {
@@ -43,16 +43,19 @@ function ExpandableButtonsContextProvider({
   );
 
   return (
-    <ExpandableButtonsContext.Provider value={value}>
+    <ExpandCollapseAllContext.Provider value={value}>
       {children}
-      {expandable && (
-        <ExpandableButtons expandable={expandable} styling={styling} />
+      {expandCollapseAll && (
+        <ExpandCollapseButtons
+          expandCollapseAll={expandCollapseAll}
+          styling={styling}
+        />
       )}
-    </ExpandableButtonsContext.Provider>
+    </ExpandCollapseAllContext.Provider>
   );
 }
 
-export const useExpandableButtonContext = () =>
-  useContext(ExpandableButtonsContext);
+export const useExpandCollapseAllContext = () =>
+  useContext(ExpandCollapseAllContext);
 
-export default ExpandableButtonsContextProvider;
+export default ExpandCollapseAllContextProvider;

packages/react-json-tree/src/index.tsx

@@ -8,7 +8,7 @@ import JSONNode from './JSONNode';
 import createStylingFromTheme from './createStylingFromTheme';
 import { invertTheme } from 'react-base16-styling';
 import type { StylingValue, Theme } from 'react-base16-styling';
-import ExpandableButtonsContext from './expandableButtonsContext';
+import ExpandCollapseAllButtonsContext from './expandCollapseContext';
 
 import type {
   CommonExternalProps,
@@ -22,10 +22,10 @@ interface Props extends Partial<CommonExternalProps> {
   data: unknown;
   theme?: Theme;
   invertTheme?: boolean;
-  expandable?: Expandable;
+  expandCollapseAll?: ExpandCollapseAll;
 }
 
-interface Expandable {
+interface ExpandCollapseAll {
   defaultValue?: 'expand' | 'collapse';
   expandIcon?: ReactNode;
   collapseIcon?: ReactNode;
@@ -51,7 +51,7 @@ export function JSONTree({
   labelRenderer = defaultLabelRenderer,
   valueRenderer = identity,
   shouldExpandNodeInitially = expandRootNode,
-  expandable,
+  expandCollapseAll,
   hideRoot = false,
   getItemString = defaultItemString,
   postprocessValue = identity,
@@ -67,7 +67,10 @@ export function JSONTree({
 
   return (
     <ul {...styling('tree')}>
-      <ExpandableButtonsContext expandable={expandable} styling={styling}>
+      <ExpandCollapseAllButtonsContext
+        expandCollapseAll={expandCollapseAll}
+        styling={styling}
+      >
         <JSONNode
           keyPath={hideRoot ? [] : keyPath}
           value={postprocessValue(value)}
@@ -82,7 +85,7 @@ export function JSONTree({
           collectionLimit={collectionLimit}
           sortObjectKeys={sortObjectKeys}
         />
-      </ExpandableButtonsContext>
+      </ExpandCollapseAllButtonsContext>
     </ul>
   );
 }
@@ -100,4 +103,4 @@ export type {
   Styling,
   CommonExternalProps,
 } from './types';
-export type { Expandable, StylingValue };
+export type { ExpandCollapseAll, StylingValue };

packages/react-json-tree/test/index.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { createRenderer } from 'react-test-renderer/shallow';
 
 import { JSONTree } from '../src/index';
-import ExpandableButtonsContextProvider from '../src/expandableButtonsContext';
+import ExpandCollapseAllContext from '../src/expandCollapseContext';
 
 const BASIC_DATA = { a: 1, b: 'c' };
 
@@ -17,8 +17,6 @@ describe('JSONTree', () => {
     const result = render(<JSONTree data={BASIC_DATA} />);
 
     expect(result.type).toBe('ul');
-    expect(result.props.children.type.name).toBe(
-      ExpandableButtonsContextProvider.name
-    );
+    expect(result.props.children.type.name).toBe(ExpandCollapseAllContext.name);
   });
 });