fix(typescript): Refactor carbon/react index.js to index.ts to expose…

… new typescript typings (#12787) * refactor: add build support for TS * refactor: convert Checkbox and Text to typescript * refactor: add ts extensions to jest * refactor: add ts extensions to jsTransform.js * refactor: add type exports to barrels * refactor: do not convert TextDirectionContext to TS * chore: add comment * refactor: update Text with context * refactor: use @type jsdoc assertion * refactor: fix build and turn off explicit any rule * chore: yarn dedup * chore: run install withh yarn 3.2.4 * refactor: convert main index.js to ts. Always export named exports * chore: dedupe and merge fix * chore: update to yarn 3.3.0 * chore: remove new-line * chore: add Checkbox export * chore: run yarn test * chore: update test snap * chore: review comments * chore: fix typo Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
carbon-design-system · Jan 6, 2023 · 7dc8160 · 7dc8160
1 parent b115fef
commit 7dc8160
Show file tree

Hide file tree

Showing 108 changed files with 535 additions and 296 deletions.
diff --git a/packages/react/__tests__/PublicAPI-test.js b/packages/react/__tests__/PublicAPI-test.js
@@ -129,15 +129,31 @@ test('Public API should only change with a semver change', () => {
   const CarbonReact = require('../src');
   const PublicAPI = new Map();
 
-  Object.keys(CarbonReact).forEach((name) => {
+  // Sort alphabetically
+  const CarbonReactOrdered = Object.keys(CarbonReact)
+    .sort()
+    .reduce((obj, key) => {
+      obj[key] = CarbonReact[key];
+      return obj;
+    }, {});
+
+  Object.keys(CarbonReactOrdered).forEach((name) => {
     const Component = CarbonReact[name];
     PublicAPI.set(name, mapComponentToAPI(Component));
   });
 
   function mapComponentToAPI(Component) {
     const api = {};
 
-    Object.keys(Component).forEach((key) => {
+    // Sort alphabetically
+    const ComponentOrdered = Object.keys(Component)
+      .sort()
+      .reduce((obj, key) => {
+        obj[key] = Component[key];
+        return obj;
+      }, {});
+
+    Object.keys(ComponentOrdered).forEach((key) => {
       // There are a couple of properties on components that we don't believe
       // are part of our API, such as `_` prefixed variables, or capture details
       // that are internal to a library-specific piece of functionality. For

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3590,6 +3590,11 @@ Map {
       },
     },
   },
+  "FormContext" => Object {
+    "$$typeof": Symbol(react.context),
+    "Consumer": "React.Consumer",
+    "Provider": "React.Provider",
+  },
   "FormGroup" => Object {
     "defaultProps": Object {
       "invalid": false,
@@ -5678,6 +5683,11 @@ Map {
     },
     "render": [Function],
   },
+  "PrefixContext" => Object {
+    "$$typeof": Symbol(react.context),
+    "Consumer": "React.Consumer",
+    "Provider": "React.Provider",
+  },
   "PrimaryButton" => Object {},
   "ProgressBar" => Object {
     "propTypes": Object {
@@ -8283,6 +8293,11 @@ Map {
       },
     },
   },
+  "ThemeContext" => Object {
+    "$$typeof": Symbol(react.context),
+    "Consumer": "React.Consumer",
+    "Provider": "React.Provider",
+  },
   "Tile" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
@@ -8973,6 +8988,20 @@ Map {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
+  "types" => Object {
+    "0": "red",
+    "1": "magenta",
+    "10": "high-contrast",
+    "11": "outline",
+    "2": "purple",
+    "3": "blue",
+    "4": "cyan",
+    "5": "teal",
+    "6": "green",
+    "7": "gray",
+    "8": "cool-gray",
+    "9": "warm-gray",
+  },
   "unstable_FeatureFlags" => Object {
     "propTypes": Object {
       "children": Object {
@@ -9826,182 +9855,6 @@ Map {
       },
     },
   },
-  "unstable__FluidNumberInput" => Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "propTypes": Object {
-      "allowEmpty": Object {
-        "type": "bool",
-      },
-      "className": Object {
-        "type": "string",
-      },
-      "defaultValue": Object {
-        "args": Array [
-          Array [
-            Object {
-              "type": "number",
-            },
-            Object {
-              "type": "string",
-            },
-          ],
-        ],
-        "type": "oneOfType",
-      },
-      "disableWheel": Object {
-        "type": "bool",
-      },
-      "disabled": Object {
-        "type": "bool",
-      },
-      "iconDescription": Object {
-        "type": "string",
-      },
-      "id": Object {
-        "isRequired": true,
-        "type": "string",
-      },
-      "invalid": Object {
-        "type": "bool",
-      },
-      "invalidText": Object {
-        "type": "node",
-      },
-      "label": Object {
-        "type": "node",
-      },
-      "max": Object {
-        "type": "number",
-      },
-      "min": Object {
-        "type": "number",
-      },
-      "onChange": Object {
-        "type": "func",
-      },
-      "onClick": Object {
-        "type": "func",
-      },
-      "onKeyUp": Object {
-        "type": "func",
-      },
-      "step": Object {
-        "type": "number",
-      },
-      "translateWithId": Object {
-        "type": "func",
-      },
-      "value": Object {
-        "args": Array [
-          Array [
-            Object {
-              "type": "number",
-            },
-            Object {
-              "type": "string",
-            },
-          ],
-        ],
-        "type": "oneOfType",
-      },
-      "warn": Object {
-        "type": "bool",
-      },
-      "warnText": Object {
-        "type": "node",
-      },
-    },
-    "render": [Function],
-  },
-  "unstable__FluidNumberInputSkeleton" => Object {
-    "propTypes": Object {
-      "className": Object {
-        "type": "string",
-      },
-    },
-  },
-  "unstable__FluidSearch" => Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "defaultProps": Object {
-      "autoComplete": "off",
-      "closeButtonLabelText": "Clear search input",
-      "role": "searchbox",
-      "type": "text",
-    },
-    "propTypes": Object {
-      "autoComplete": Object {
-        "type": "string",
-      },
-      "className": Object {
-        "type": "string",
-      },
-      "closeButtonLabelText": Object {
-        "type": "string",
-      },
-      "defaultValue": Object {
-        "args": Array [
-          Array [
-            Object {
-              "type": "string",
-            },
-            Object {
-              "type": "number",
-            },
-          ],
-        ],
-        "type": "oneOfType",
-      },
-      "disabled": Object {
-        "type": "bool",
-      },
-      "id": Object {
-        "type": "string",
-      },
-      "labelText": Object {
-        "isRequired": true,
-        "type": "node",
-      },
-      "onChange": Object {
-        "type": "func",
-      },
-      "onClear": Object {
-        "type": "func",
-      },
-      "onKeyDown": Object {
-        "type": "func",
-      },
-      "placeholder": Object {
-        "type": "string",
-      },
-      "role": Object {
-        "type": "string",
-      },
-      "type": Object {
-        "type": "string",
-      },
-      "value": Object {
-        "args": Array [
-          Array [
-            Object {
-              "type": "string",
-            },
-            Object {
-              "type": "number",
-            },
-          ],
-        ],
-        "type": "oneOfType",
-      },
-    },
-    "render": [Function],
-  },
-  "unstable__FluidSearchSkeleton" => Object {
-    "propTypes": Object {
-      "className": Object {
-        "type": "string",
-      },
-    },
-  },
   "unstable__FluidSelect" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -66,6 +66,7 @@ describe('Carbon Components React', () => {
         "FlexGrid",
         "FluidForm",
         "Form",
+        "FormContext",
         "FormGroup",
         "FormItem",
         "FormLabel",
@@ -113,6 +114,7 @@ describe('Carbon Components React', () => {
         "PasswordInput",
         "Popover",
         "PopoverContent",
+        "PrefixContext",
         "PrimaryButton",
         "ProgressBar",
         "ProgressIndicator",
@@ -197,6 +199,7 @@ describe('Carbon Components React', () => {
         "TextInput",
         "TextInputSkeleton",
         "Theme",
+        "ThemeContext",
         "Tile",
         "TileAboveTheFoldContent",
         "TileBelowTheFoldContent",
@@ -217,6 +220,7 @@ describe('Carbon Components React', () => {
         "TreeView",
         "UnorderedList",
         "VStack",
+        "types",
         "unstable_FeatureFlags",
         "unstable_LayoutDirection",
         "unstable_Menu",
@@ -239,10 +243,6 @@ describe('Carbon Components React', () => {
         "unstable__FluidDropdownSkeleton",
         "unstable__FluidMultiSelect",
         "unstable__FluidMultiSelectSkeleton",
-        "unstable__FluidNumberInput",
-        "unstable__FluidNumberInputSkeleton",
-        "unstable__FluidSearch",
-        "unstable__FluidSearchSkeleton",
         "unstable__FluidSelect",
         "unstable__FluidSelectSkeleton",
         "unstable__FluidTextArea",

diff --git a/packages/react/src/components/Accordion/Accordion.Skeleton.js b/packages/react/src/components/Accordion/Accordion.Skeleton.js
@@ -95,3 +95,4 @@ function AccordionSkeletonItem() {
 }
 
 export default AccordionSkeleton;
+export { AccordionSkeleton };
diff --git a/packages/react/src/components/Accordion/index.js b/packages/react/src/components/Accordion/index.js
@@ -8,5 +8,6 @@
 import Accordion from './Accordion';
 
 export default Accordion;
+export { Accordion };
 export { default as AccordionItem } from './AccordionItem';
 export { default as AccordionSkeleton } from './Accordion.Skeleton';
diff --git a/packages/react/src/components/AccordionItem/index.js b/packages/react/src/components/AccordionItem/index.js
@@ -8,3 +8,4 @@
 // Alias for import paths for build tools that rely on this
 import { AccordionItem } from '../Accordion';
 export default AccordionItem;
+export { AccordionItem };
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js b/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js
@@ -41,3 +41,4 @@ BreadcrumbSkeleton.propTypes = {
 };
 
 export default BreadcrumbSkeleton;
+export { BreadcrumbSkeleton };
diff --git a/packages/react/src/components/Button/Button.Skeleton.js b/packages/react/src/components/Button/Button.Skeleton.js
@@ -78,3 +78,4 @@ ButtonSkeleton.propTypes = {
 };
 
 export default ButtonSkeleton;
+export { ButtonSkeleton };
diff --git a/packages/react/src/components/Button/index.js b/packages/react/src/components/Button/index.js
@@ -5,5 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import Button from './Button';
+
+export default Button;
+export { Button };
 export { default as ButtonSkeleton } from './Button.Skeleton';
-export default from './Button';
diff --git a/packages/react/src/components/ButtonSet/index.js b/packages/react/src/components/ButtonSet/index.js
@@ -5,4 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export default from './ButtonSet';
+import ButtonSet from './ButtonSet';
+export { ButtonSet };
+export default ButtonSet;
diff --git a/packages/react/src/components/Checkbox/Checkbox.Skeleton.tsx b/packages/react/src/components/Checkbox/Checkbox.Skeleton.tsx
@@ -41,3 +41,4 @@ CheckboxSkeleton.propTypes = {
 };
 
 export default CheckboxSkeleton;
+export { CheckboxSkeleton };
diff --git a/packages/react/src/components/Checkbox/index.ts b/packages/react/src/components/Checkbox/index.ts
@@ -5,7 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { default as CheckboxSkeleton } from './Checkbox.Skeleton';
 import Checkbox, { CheckboxProps } from './Checkbox';
-export type { CheckboxProps };
+
+export { default as CheckboxSkeleton } from './Checkbox.Skeleton';
 export default Checkbox;
+
+export { Checkbox };
+
+export type { CheckboxProps };
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.Skeleton.js b/packages/react/src/components/CodeSnippet/CodeSnippet.Skeleton.js
@@ -59,3 +59,4 @@ CodeSnippetSkeleton.propTypes = {
 };
 
 export default CodeSnippetSkeleton;
+export { CodeSnippetSkeleton };
diff --git a/packages/react/src/components/CodeSnippet/index.js b/packages/react/src/components/CodeSnippet/index.js
@@ -5,5 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import CodeSnippet from './CodeSnippet';
+
+export default CodeSnippet;
+export { CodeSnippet };
 export { default as CodeSnippetSkeleton } from './CodeSnippet.Skeleton';
-export default from './CodeSnippet';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -95,3 +95,4 @@ function AccordionSkeletonItem() {
		}

		export default AccordionSkeleton;
		export { AccordionSkeleton };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,3 +41,4 @@ BreadcrumbSkeleton.propTypes = {
		};

		export default BreadcrumbSkeleton;
		export { BreadcrumbSkeleton };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -78,3 +78,4 @@ ButtonSkeleton.propTypes = {
		};

		export default ButtonSkeleton;
		export { ButtonSkeleton };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,3 +41,4 @@ CheckboxSkeleton.propTypes = {
		};

		export default CheckboxSkeleton;
		export { CheckboxSkeleton };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -59,3 +59,4 @@ CodeSnippetSkeleton.propTypes = {
		};

		export default CodeSnippetSkeleton;
		export { CodeSnippetSkeleton };