Convert packages/react storybook to typescript. Convert checkbox story to tsx

config/eslint-config-carbon/plugins/react.js

@@ -44,6 +44,11 @@ module.exports = {
     ],
   },
   overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      plugins: ['@typescript-eslint'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+    },
     // Sometimes we'll want to define a quick component in a story to use as a
     // wrapper for a component we're documenting. For example:
     //

examples/codesandbox-with-sass-compilation/src/App.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Button } from '@carbon/react';
 
 function App() {

examples/codesandbox/src/App.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Button } from '@carbon/react';
 
 /**

packages/react/.storybook/.babelrc.js

@@ -8,5 +8,5 @@
 'use strict';
 
 module.exports = {
-  presets: ['babel-preset-carbon'],
+  presets: ['babel-preset-carbon', '@babel/preset-typescript'],
 };

packages/react/.storybook/main.js → packages/react/.storybook/main.ts

@@ -4,19 +4,16 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import fs from 'fs';
+import glob from 'fast-glob';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import path from 'path';
 
-'use strict';
-
-const fs = require('fs');
-const glob = require('fast-glob');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const path = require('path');
-
-const stories = glob
+const stories: string[] = glob
   .sync(
     [
       './Welcome/Welcome.stories.js',
-      '../src/**/*.stories.js',
+      '../src/**/*.stories.@(js|tsx|ts)',
       '../src/**/*.stories.mdx',
       '../src/**/next/*.stories.js',
       '../src/**/next/**/*.stories.js',
@@ -30,7 +27,7 @@ const stories = glob
   // Filters the stories by finding the paths that have a story file that ends
   // in `-story.js` and checks to see if they also have a `.stories.js`,
   // if so then defer to the `.stories.js`
-  .filter((match) => {
+  .filter((match: string) => {
     const filepath = path.resolve(__dirname, match);
     const basename = path.basename(match, '.js');
     const denylist = new Set([
@@ -92,9 +89,10 @@ module.exports = {
   },
   framework: '@storybook/react',
   stories,
-  webpack(config) {
-    const babelLoader = config.module.rules.find((rule) => {
-      return rule.use.some(({ loader }) => {
+  // TODO: Fix typings for this function
+  webpack(config: any) {
+    const babelLoader = config.module.rules.find((rule: any) => {
+      return rule.use.some(({ loader }: { loader: string }) => {
         return loader.includes('babel-loader');
       });
     });

packages/react/package.json

@@ -88,6 +88,7 @@
     "@storybook/manager-webpack5": "^6.5.6",
     "@storybook/react": "^6.5.6",
     "@storybook/theming": "^6.5.6",
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-dev-expression": "^0.2.3",
@@ -116,6 +117,7 @@
     "storybook-readme": "^5.0.9",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
+    "typescript": "^4.7.4",
     "webpack": "^5.65.0",
     "webpack-dev-server": "^4.7.4"
   },

packages/react/src/components/Checkbox/Checkbox.Skeleton.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent, HTMLAttributes } from 'react';
+
+declare const CheckboxSkeleton: FunctionComponent<
+  HTMLAttributes<HTMLDivElement>
+>;
+
+export default CheckboxSkeleton;

packages/react/src/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ForwardRefReturn, ReactInputAttr } from '../../typings/shared';
+
+type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type';
+
+export interface CheckboxProps
+  extends Omit<ReactInputAttr, ExcludedAttributes> {
+  /**
+   * Provide an `id` to uniquely identify the Checkbox input
+   */
+  id: string;
+
+  /**
+   * Provide a label to provide a description of the Checkbox input that you are
+   * exposing to the user
+   */
+  labelText: NonNullable<React.ReactNode>;
+
+  /**
+   * Specify whether the underlying input should be checked by default
+   */
+  defaultChecked?: boolean;
+
+  /**
+   * Specify whether the Checkbox should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Specify whether the Checkbox is in an indeterminate state
+   */
+  indeterminate?: boolean;
+
+  /**
+   * Provide an optional handler that is called when the internal state of
+   * Checkbox changes. This handler is called with event and state info.
+   * `(event, { checked, id }) => void`
+   */
+  onChange?: (
+    evt: React.ChangeEvent<HTMLInputElement>,
+    data: { checked: boolean; id: string }
+  ) => void;
+}
+
+declare const Checkbox: ForwardRefReturn<HTMLInputElement, CheckboxProps>;
+
+export default Checkbox;

packages/react/src/components/Checkbox/Checkbox.stories.js → packages/react/src/components/Checkbox/Checkbox.stories.tsx

@@ -6,8 +6,10 @@
  */
 
 import React from 'react';
-import { default as Checkbox, CheckboxSkeleton } from './';
+import { default as Checkbox, CheckboxSkeleton } from '.';
+import { ComponentStory } from '@storybook/react';
 import mdx from './Checkbox.mdx';
+import { CheckboxProps } from './Checkbox';
 
 const prefix = 'cds';
 
@@ -24,7 +26,7 @@ export default {
   },
 };
 
-export const CheckboxStory = () => {
+export const CheckboxStory: ComponentStory<typeof Checkbox> = () => {
   return (
     <fieldset className={`${prefix}--fieldset`}>
       <legend className={`${prefix}--label`}>Group label</legend>
@@ -38,11 +40,22 @@ CheckboxStory.storyName = 'Checkbox';
 
 export const Skeleton = () => <CheckboxSkeleton />;
 
-export const Playground = (args) => (
+export const Playground = ({
+  labelText,
+  ...args
+}: Omit<CheckboxProps, 'id'>) => (
   <fieldset className={`${prefix}--fieldset`}>
     <legend className={`${prefix}--label`}>Group label</legend>
-    <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" {...args} />
-    <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" {...args} />
+    <Checkbox
+      labelText={labelText ?? 'Checkbox label'}
+      id="checkbox-label-1"
+      {...args}
+    />
+    <Checkbox
+      labelText={labelText ?? 'Checkbox label'}
+      id="checkbox-label-2"
+      {...args}
+    />
   </fieldset>
 );
 

packages/react/src/components/Checkbox/index.d.ts

@@ -0,0 +1,5 @@
+import Checkbox from './Checkbox';
+import CheckboxSkeleton from './Checkbox.Skeleton';
+
+export { Checkbox, CheckboxSkeleton };
+export default Checkbox;

packages/react/src/components/Notification/Notification-test.js

@@ -1,3 +1,4 @@
+/* eslint-disable jest/no-standalone-expect */
 /**
  * Copyright IBM Corp. 2016, 2018
  *

packages/react/src/custom.d.ts

@@ -0,0 +1,5 @@
+// Ambient module to allow the importing of .mdx files in storybook .tsx files
+declare module '*.mdx' {
+  const content: any;
+  export default content;
+}

packages/react/src/typings/shared.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+
+export type ReactAttr<T = HTMLElement> = React.HTMLAttributes<T>;
+export type ReactAnchorAttr<T = HTMLAnchorElement> =
+  React.AnchorHTMLAttributes<T>;
+export type ReactButtonAttr<T = HTMLButtonElement> =
+  React.ButtonHTMLAttributes<T>;
+export type ReactDivAttr = ReactAttr<HTMLDivElement>;
+export type ReactInputAttr<T = HTMLInputElement> = React.InputHTMLAttributes<T>;
+export type ReactLabelAttr<T = HTMLLabelElement> = React.LabelHTMLAttributes<T>;
+export type ReactLIAttr<T = HTMLLIElement> = React.LiHTMLAttributes<T>;
+
+// export type ShapeOf<
+//   B extends object,
+//   E extends object = { [key: string]: any }
+// > = (E extends never ? {} : E) & B;
+// export type Overwrite<T, U> = [T] extends [never] ? U : Omit<T, keyof U> & U;
+
+export type VerticalDirection = 'bottom' | 'top';
+export type HorizontalDirection = 'left' | 'right';
+export type Direction = HorizontalDirection | VerticalDirection;
+export type ListBoxBaseItemType = object | string;
+export type TooltipAlignment = 'center' | 'end' | 'start';
+export type TooltipPosition = Direction;
+export type CarbonSize = 'lg' | 'sm' | 'xs';
+export type CarbonInputSize = 'sm' | 'lg' | 'xl';
+
+//
+// In retrospect, it may not always be a good idea to lump shared props into a common reused interface.
+// There's no real relation between components that share these types and they could diverge causing painful refactors.
+// This approach should probably be left for more complicated types such as those that involve generics.
+//
+
+export interface DownshiftTypedProps<ItemType> {
+  itemToString?(item: ItemType): string;
+}
+
+export interface InternationalProps<
+  MID = string,
+  ARGS = Record<string, unknown>
+> {
+  translateWithId?(messageId: MID, args?: ARGS): string;
+}
+
+export interface MenuOffsetData {
+  left?: number | undefined;
+  top?: number | undefined;
+}
+
+export interface RenderIconProps<P = any> {
+  renderIcon?: React.ComponentType<P> | undefined;
+}
+
+export interface RequiresChildrenProps<T = React.ReactNode> {
+  children: NonNullable<T>;
+}
+
+export interface RequiresIdProps<T = ReactAttr['id']> {
+  id: NonNullable<T>;
+}
+
+export interface SizingProps {
+  small?: boolean | undefined;
+}
+
+export interface SideNavSharedProps {
+  isSideNavExpanded?: boolean | undefined;
+}
+
+export interface SideNavSizingProps {
+  large?: boolean | undefined;
+}
+
+//
+// aliases for some React types that it doesn't export directly. They are needed to make sure we match the signatures
+// as close as possible.
+//
+// reference patterns:
+//  function component with no generics: export declare const Comp: React.FC<PropsInterface>;
+//  function component with generics: export declare function Comp<T extends SomeType>(props: FCProps<PropsInterface<T>>): FCReturn;
+//  forwardRef component with no generics: export declare const Comp: ForwardRefReturn<HTMLElement, PropsInterface>;
+//  forwardRef component with generics: export declare function Comp<T extends SomeType>(props: ForwardRefProps<HTMLElement, PropsInterface<T>>): FCReturn;
+//
+export type FCProps<P = unknown> = Parameters<React.FC<P>>[0];
+export type FCReturn = ReturnType<React.FC>;
+export type ForwardRefProps<T, P = unknown> = React.PropsWithoutRef<
+  React.PropsWithChildren<P>
+> &
+  React.RefAttributes<T>;
+export type ForwardRefReturn<T, P = unknown> = React.ForwardRefExoticComponent<
+  ForwardRefProps<T, P>
+>;
+
+export type JSXIntrinsicElementProps<
+  K extends keyof JSX.IntrinsicElements,
+  REF extends boolean = false
+> = REF extends true
+  ? JSX.IntrinsicElements[K]
+  : Omit<JSX.IntrinsicElements[K], 'ref'>;
+
+// for "as" props
+export type ReactComponentConstructor<P> =
+  | ((props: P) => FCReturn)
+  | (new (props: P) => React.Component<unknown, any>);

packages/react/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "sourceMap": true,
+    "declaration": true,
+    // use linting instead
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "incremental": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "build"]
+}