Convert folder Shared to TypeScript

build/babel.config.js

@@ -24,7 +24,7 @@ module.exports = {
         [
             "@babel/preset-react",
             {
-                // runtime: "automatic",
+                runtime: "automatic",
                 useBuiltIns: true,
                 development: !IS_PRODUCTION
             }
@@ -49,7 +49,6 @@ module.exports = {
             }
         ],
         "babel-plugin-jsx-control-statements",
-        "babel-plugin-react-require",
         IS_PRODUCTION && "babel-plugin-jsx-remove-data-test-id",
         !IS_TEST && [
             "babel-plugin-named-asset-import",

jest/jest.config.js

@@ -4,7 +4,7 @@ module.exports = {
     rootDir: path.resolve(__dirname, ".."),
     roots: ["<rootDir>/packages/react-components"],
     transform: {
-        "^.+\\.(js|jsx)$": path.resolve("jest/babel-transform.js")
+        "^.+\\.(js|jsx|ts|tsx)$": path.resolve("jest/babel-transform.js")
     },
     // https://github.com/facebook/jest/issues/6229#issuecomment-403539460
     transformIgnorePatterns: [

package.json

@@ -34,9 +34,9 @@
     "delete-yarn-lock:root": "rimraf yarn.lock",
     "delete-yarn-lock:storybook": "cd storybook && rimraf yarn.lock",
     "eslint": "run-s \"eslint:* --max-warnings={1:--1}\"",
-    "eslint:pkg": "eslint --ext .js,.jsx packages",
-    "eslint:sb": "eslint --ext .js,.jsx storybook",
-    "eslint-fix": "eslint --ext .js,.jsx . --fix",
+    "eslint:pkg": "eslint --ext .js,.jsx,.ts,.tsx packages",
+    "eslint:sb": "eslint --ext .js,.jsx,.ts,.tsx storybook",
+    "eslint-fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
     "install:pkg": "yarn install --ignore-scripts",
     "install:sb": "cd storybook && yarn install",
     "lint": "run-s eslint stylelint check-types",
@@ -82,16 +82,19 @@
     "@babel/preset-typescript": "7.12.7",
     "@sharegate/browserslist-config-recommended": "1.0.1",
     "@sharegate/eslint-config-lodash": "1.0.2",
-    "@sharegate/eslint-config-react": "2.0.0",
+    "@sharegate/eslint-config-react": "2.1.0",
     "@sharegate/eslint-config-recommended": "1.1.0",
     "@sharegate/eslint-config-sort-imports": "1.0.2",
+    "@sharegate/eslint-config-typescript": "1.3.0",
     "@sharegate/stylelint-config-recommended": "2.0.0",
     "@types/lodash": "4.14.168",
     "@types/react-with-styles": "4.0.5",
     "@types/react-dates": "21.8.1",
     "@types/react-dom": "17.0.0",
     "@types/react": "17.0.0",
-    "@sharegate/eslint-config-typescript": "1.0.0",
+    "@types/react-is": "17.0.0",
+    "@types/resize-observer-browser": "0.1.5",
+    "@typescript-eslint/parser": "4.15.0",
     "@storybook/addon-essentials": "6.1.8",
     "@storybook/react": "6.1.8",
     "@svgr/webpack": "5.5.0",
@@ -104,7 +107,6 @@
     "babel-plugin-jsx-control-statements": "4.1.0",
     "babel-plugin-jsx-remove-data-test-id": "2.1.3",
     "babel-plugin-named-asset-import": "0.3.7",
-    "babel-plugin-react-require": "3.1.3",
     "browserslist": "4.14.7",
     "chalk": "4.1.0",
     "chromatic": "5.4.0",

packages/react-components/.eslintrc.js

@@ -37,20 +37,22 @@ module.exports = {
             }
         },
         {
-            files: ["*.tsx"],
+            files: ["*.ts?(x)"],
             extends:[
                 "@sharegate/eslint-config-typescript"
             ],
             rules: {
-                "@typescript-eslint/explicit-function-return-type": "off",
-                "@typescript-eslint/explicit-module-boundary-types": "off",
-                "@typescript-eslint/no-use-before-define": ["error", { "functions": false, "classes": true, "variables": false }]
+                "no-param-reassign": "off",
+                "@typescript-eslint/no-explicit-any": "off",
+
+                "jsx-control-statements/jsx-jcs-no-undef": "off",
+                "@typescript-eslint/explicit-function-return-type": ["warn", { allowExpressions: true }]
             }
         }
     ],
     rules: {
         "no-param-reassign": "off",
-        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".mdx"] }],
+        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx",".ts", ".tsx", ".mdx"] }],
         "react/destructuring-assignment": "off",
         "jsx-control-statements/jsx-use-if-tag": "off"
     }

packages/react-components/src/shared/src/OLD_resolvePopperPosition.ts

@@ -0,0 +1,3 @@
+export function resolvePopperPosition(upward: boolean, direction: "left" | "right"): string {
+    return `${upward ? "top" : "bottom"}-${direction === "left" ? "end" : "start"}`;
+}

packages/react-components/src/shared/src/arrayify.js → packages/react-components/src/shared/src/arrayify.ts

@@ -1,3 +1,3 @@
-export function arrayify(value) {
+export function arrayify<T>(value: T | T[]): T[] {
     return Array.isArray(value) ? value : [value];
 }

packages/react-components/src/shared/src/assertion.js → packages/react-components/src/shared/src/assertion.ts

@@ -3,6 +3,6 @@
 
 import { isNil } from "lodash";
 
-export function isNilOrEmpty(value) {
+export function isNilOrEmpty(value: any): value is null | undefined | "" {
     return isNil(value) || value === "";
 }

packages/react-components/src/shared/src/augmentElement.tsx

@@ -0,0 +1,37 @@
+import { ElementType, HTMLAttributes, ReactElement, RefAttributes, cloneElement } from "react";
+import { isString } from "lodash";
+import { isValidElementType } from "react-is";
+import { mergeProps } from "./mergeProps";
+import { normalizeSize } from "./normalizeSize";
+import type { SizeAdapter } from "./createSizeAdapter";
+
+export function augmentElement(element: ReactElement & RefAttributes<any>, newProps: Record<string, any>): ReactElement {
+    const augmentedProps = mergeProps({ ...element.props, ref: element.ref }, newProps);
+
+    return cloneElement(element, augmentedProps);
+}
+
+export function createOrAugmentElement<T extends string, P extends HTMLAttributes<T>>(element: ReactElement<P, T> | ElementType, props: P): ReactElement {
+    if (isValidElementType(element) && !isString(element)) {
+        const Type = element;
+
+        return <Type {...props} />;
+    }
+
+    // The isString in the previous condition assume it can be possible that element is a string. however, if its the case, cloneElement does not support string, so it does not make sense
+    // Therefore, since we are only typing the code and i don't want to introduce regression bugs, i will disable the ts compiler for that line
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return augmentElement(element, props);
+}
+
+export function createEmbeddableAdapter(sizeAdapter: SizeAdapter) {
+    return <P extends Record<string, any>>(element: ReactElement<P, any>, { size, ...props }: P) => {
+        const newProps = {
+            ...props,
+            size: sizeAdapter[normalizeSize(size)]
+        };
+
+        return augmentElement(element, newProps);
+    };
+}

packages/react-components/src/shared/src/checkable.js → packages/react-components/src/shared/src/checkable.ts

@@ -1,9 +1,14 @@
 import { createContext, useContext } from "react";
 import { isNil } from "lodash";
 
-export const CheckableContext = createContext();
+interface CheckableContextProps {
+    checkedValue?: boolean;
+    [x: string]: any;
+}
+
+export const CheckableContext = createContext<CheckableContextProps>(undefined);
 
-export function useCheckableContext() {
+export function useCheckableContext(): [CheckableContextProps, boolean] {
     const context = useContext(CheckableContext);
 
     if (!isNil(context)) {
@@ -13,7 +18,7 @@ export function useCheckableContext() {
     return [context, false];
 }
 
-export function useCheckableProps({ value }) {
+export function useCheckableProps({ value }: { value: boolean }): [{ checked: boolean } & any, boolean] {
     const [context, isCheckable] = useCheckableContext();
 
     if (isCheckable) {

packages/react-components/src/shared/src/createSizeAdapter.ts

@@ -0,0 +1,12 @@
+import { normalizeSize } from "./normalizeSize";
+import type { Size } from "./size";
+
+export type SizeAdapter = Record<Size, Size>;
+
+export function createSizeAdapter(adapter: SizeAdapter): (size: Size) => Size {
+    return (size: Size) => adapter[normalizeSize(size)];
+}
+
+export function adaptSize(size: Size, adapter: SizeAdapter): Size {
+    return adapter[normalizeSize(size)];
+}

packages/react-components/src/shared/src/cssModule.js → packages/react-components/src/shared/src/cssModule.ts

@@ -1,4 +1,4 @@
-export function cssModule(moduleName, ...values) {
+export function cssModule(moduleName: string, ...values: (false | string)[]): string {
     const classes = values
         .filter(Boolean)
         .map(x => `${moduleName}-${x}`);

packages/react-components/src/shared/src/focusTarget.ts

@@ -0,0 +1,4 @@
+export enum FocusTarget {
+    first = "first",
+    last = "last"
+}

packages/react-components/src/shared/src/focusableTreeWalker.js → packages/react-components/src/shared/src/focusableTreeWalker.ts

@@ -20,15 +20,19 @@ export const FocusableElementSelector = [...FocusableElement, "[tabindex]"].join
 
 export const TabbableElementSelector = [...FocusableElement, "[tabindex]:not([tabindex=\"-1\"])"].join(":not([tabindex=\"-1\"]),");
 
-export function createFocusableTreeWalker(root, { tabbable } = {}) {
+interface FocusableTreeWalkerOptions {
+    tabbable?: boolean;
+}
+
+export function createFocusableTreeWalker(root: HTMLElement, { tabbable }: FocusableTreeWalkerOptions = {}): TreeWalker {
     const selector = tabbable ? TabbableElementSelector : FocusableElementSelector;
 
     const walker = document.createTreeWalker(
         root,
         NodeFilter.SHOW_ELEMENT,
         {
             acceptNode(node) {
-                if (node.matches(selector)) {
+                if ((node as HTMLElement).matches(selector)) {
                     return NodeFilter.FILTER_ACCEPT;
                 }
 
@@ -41,6 +45,6 @@ export function createFocusableTreeWalker(root, { tabbable } = {}) {
     return walker;
 }
 
-export function walkFocusableElements(root, onElement) {
+export function walkFocusableElements(root: HTMLElement, onElement: (element: Element, index?: number) => void): void {
     root.querySelectorAll(FocusableElementSelector).forEach((x, index) => onElement(x, index));
 }

packages/react-components/src/shared/src/keys.ts

@@ -0,0 +1,14 @@
+export enum Keys {
+    backspace = 8,
+    tab = 9,
+    enter = 13,
+    esc = 27,
+    space = 32,
+    end = 35,
+    home = 36,
+    left = 37,
+    up = 38,
+    right = 39,
+    down = 40,
+    delete = 46
+}

packages/react-components/src/shared/src/match.js → packages/react-components/src/shared/src/match.ts

@@ -1,7 +1,7 @@
 import { isFunction, isNil } from "lodash";
 
 // Took from https://github.com/tailwindlabs/headlessui/blob/develop/packages/%40headlessui-react/src/utils/match.ts
-export function match(value, lookup, ...args) {
+export function match<TValue extends string | number = string, TReturnValue = unknown>(value: TValue, lookup: Record<TValue, TReturnValue | ((...arg: any[]) => TReturnValue)>, ...args: any[]): TReturnValue {
     const handler = lookup[value];
 
     if (!isNil(handler)) {

packages/react-components/src/shared/src/mergeClasses.ts

@@ -0,0 +1,13 @@
+export function mergeClasses(...values: (string | false)[]): string {
+    const deduped = (values
+        .filter(Boolean) as string[])
+        .reduce((set, x) => {
+            x.split(" ").forEach(y => {
+                set.add(y);
+            });
+
+            return set;
+        }, new Set<string>());
+
+    return Array.from(deduped).join(" ");
+}