diff --git a/packages/core/.eslintrc.js b/packages/core/.eslintrc.js index de90d218e7..95865259ed 100644 --- a/packages/core/.eslintrc.js +++ b/packages/core/.eslintrc.js @@ -17,7 +17,7 @@ const commonRules = { "no-underscore-dangle": "off", "import/prefer-default-export": "off", "no-plusplus": "off", - "react/react-in-jsx-scope": 0, + "react/react-in-jsx-scope": "error", "react/no-danger": "error", "react/jsx-one-expression-per-line": "off", "react/prop-types": 0, @@ -110,6 +110,19 @@ module.exports = { "react-hooks/rules-of-hooks": "off", "react/jsx-key": "off" } + }, + // TODO This entire block should be removed and fixed, unless we move to React 17+ + { + files: [ + "**/__stories__/**/*.{js,jsx,ts,tsx}", + "src/storybook/stand-alone-documentaion/**/*.{js,jsx,ts,tsx}", + "src/storybook/patterns/**/*.{js,jsx,ts,tsx}", + "src/storybook/components/**/*.{js,jsx,ts,tsx}", + "src/storybook/decorators/**/*.{js,jsx,ts,tsx}" + ], + rules: { + "react/react-in-jsx-scope": "off" + } } ], env: { diff --git a/packages/core/.storybook/preview.d.ts b/packages/core/.storybook/preview.d.ts deleted file mode 100644 index 22a6c190ce..0000000000 --- a/packages/core/.storybook/preview.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Preview } from "@storybook/react"; -import "monday-ui-style/dist/index.min.css"; -import "vibe-storybook-components/index.css"; -declare const preview: Preview; -export default preview; diff --git a/packages/core/.storybook/preview.tsx b/packages/core/.storybook/preview.tsx index 48b0e9286b..18976087e0 100644 --- a/packages/core/.storybook/preview.tsx +++ b/packages/core/.storybook/preview.tsx @@ -1,7 +1,7 @@ import React from "react"; -import * as VibeComponents from "../src/components/index"; +import * as VibeComponents from "../src/components"; import * as VibeComponentsNext from "../src/next"; -import * as VibeIcons from "../src/components/Icon/Icons/index"; +import * as VibeIcons from "../src/components/Icon/Icons"; import { Preview } from "@storybook/react"; import isChromatic from "chromatic/isChromatic"; import { DocsContainer, DocsPage, Unstyled } from "@storybook/blocks"; @@ -25,7 +25,6 @@ import { UsageGuidelines, withMemoryStats, RelatedComponent, - MultipleStoryElementsWrapper, StorybookLink } from "vibe-storybook-components"; import CanvasWrapper from "../src/storybook/components/canvas-wrapper/CanvasWrapper"; @@ -147,7 +146,7 @@ const preview: Preview = { } } }, - + loaders: isChromatic() && document.fonts ? [fontLoader] : [] }; diff --git a/packages/core/.storybook/tsconfig.json b/packages/core/.storybook/tsconfig.json new file mode 100644 index 0000000000..6b21f65983 --- /dev/null +++ b/packages/core/.storybook/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../tsconfig.base.json", + "compilerOptions": { + "resolveJsonModule": true + }, + "include": ["**/*.ts", "**/*.tsx", "**/*.json"] +} diff --git a/packages/core/plop/component/index.js b/packages/core/plop/component/index.js index d2059554ee..e16e04e04c 100644 --- a/packages/core/plop/component/index.js +++ b/packages/core/plop/component/index.js @@ -58,7 +58,7 @@ module.exports = plop => { }, { type: "append", - path: "src/components/index.js", + path: "src/components/index.ts", pattern: /(\n$)/gm, separator: "", template: diff --git a/packages/core/rollup.config.js b/packages/core/rollup.config.js index 778ff2a6b6..50cf4fd6ee 100644 --- a/packages/core/rollup.config.js +++ b/packages/core/rollup.config.js @@ -77,9 +77,8 @@ export default { extensions: [...EXTENSIONS, ".json", ".css"] }), typescript({ - tsconfig: path.join(ROOT_PATH, "tsconfig.esm.json"), tsconfigOverride: { - exclude: ["**/__tests__", "**/__stories__"] + exclude: ["**/__tests__", "**/__stories__", path.join(SRC_PATH, "storybook")] } }), babel({ diff --git a/packages/core/scripts/build-utils.js b/packages/core/scripts/build-utils.js index 36fbd5f513..df8e8a7e39 100644 --- a/packages/core/scripts/build-utils.js +++ b/packages/core/scripts/build-utils.js @@ -49,7 +49,7 @@ function buildComponentsTypesIndexFile() { function buildStorybookComponentsIndexFile() { const imports = ["import 'vibe-storybook-components/index.css';"]; const exports = ["export * from 'vibe-storybook-components'"]; - convertExportsToFile(imports.concat(exports), "storybook/index.js"); + convertExportsToFile(imports.concat(exports), "storybook/index.ts"); } module.exports = { diff --git a/packages/core/src/components/Accordion/AccordionItem/__tests__/accordionItem-tests.test.tsx b/packages/core/src/components/Accordion/AccordionItem/__tests__/accordionItem-tests.test.tsx index 2f5354997b..6fc1563427 100644 --- a/packages/core/src/components/Accordion/AccordionItem/__tests__/accordionItem-tests.test.tsx +++ b/packages/core/src/components/Accordion/AccordionItem/__tests__/accordionItem-tests.test.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { fireEvent, render, screen } from "@testing-library/react"; import Accordion from "../../Accordion/Accordion"; import AccordionItem from "../AccordionItem"; diff --git a/packages/core/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.tsx b/packages/core/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.tsx index fa7b827f45..4194307290 100644 --- a/packages/core/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.tsx +++ b/packages/core/src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.tsx @@ -1,9 +1,9 @@ -import { FC } from "react"; +import React from "react"; import styles from "./AttentionBoxLink.module.scss"; import Link, { LinkProps } from "../../Link/Link"; import cx from "classnames"; -const AttentionBoxLink: FC = ({ +const AttentionBoxLink: React.FC = ({ href, text, // TODO: use Link's target default in next major diff --git a/packages/core/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.tsx b/packages/core/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.tsx index 52066b69f6..bbdf361a70 100644 --- a/packages/core/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.tsx +++ b/packages/core/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.tsx @@ -1,3 +1,4 @@ +import React from "react"; import cx from "classnames"; import styles from "./StickyCategoryHeader.module.scss"; import comboboxStyles from "../../Combobox.module.scss"; diff --git a/packages/core/src/components/Counter/__tests__/counter-snapshot-tests.test.tsx b/packages/core/src/components/Counter/__tests__/counter-snapshot-tests.test.tsx index 68d2fa5f3f..e911aeae6f 100644 --- a/packages/core/src/components/Counter/__tests__/counter-snapshot-tests.test.tsx +++ b/packages/core/src/components/Counter/__tests__/counter-snapshot-tests.test.tsx @@ -1,3 +1,4 @@ +import React from "react"; import renderer from "react-test-renderer"; import Counter from "../Counter"; diff --git a/packages/core/src/components/Counter/__tests__/counter-tests.test.tsx b/packages/core/src/components/Counter/__tests__/counter-tests.test.tsx index dbb032075f..bcd038444b 100644 --- a/packages/core/src/components/Counter/__tests__/counter-tests.test.tsx +++ b/packages/core/src/components/Counter/__tests__/counter-tests.test.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { render } from "@testing-library/react"; import Counter from "../Counter"; diff --git a/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx b/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx index 84c2e1efc2..dab8568671 100644 --- a/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx +++ b/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx @@ -1,3 +1,4 @@ +import React from "react"; import Button from "../../Button/Button"; import styles from "./YearPicker.module.scss"; diff --git a/packages/core/src/components/Dialog/__tests__/Dialog.test.js b/packages/core/src/components/Dialog/__tests__/Dialog.test.js index c8b64857bf..8af24b02ed 100644 --- a/packages/core/src/components/Dialog/__tests__/Dialog.test.js +++ b/packages/core/src/components/Dialog/__tests__/Dialog.test.js @@ -1,3 +1,4 @@ +import React from "react"; import userEvent from "@testing-library/user-event"; import { render, screen } from "@testing-library/react"; import Dialog from "../Dialog"; diff --git a/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.jsx b/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.jsx index ef308a1ece..0269beb6f4 100644 --- a/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.jsx +++ b/packages/core/src/components/Dropdown/components/ChildrenContent/ChildrenContent.jsx @@ -1,6 +1,6 @@ +import React, { useCallback } from "react"; import Avatar from "../../../Avatar/Avatar"; import Icon from "../../../Icon/Icon"; -import { useCallback } from "react"; import styles from "./ChildrenContent.module.scss"; import { getTestId } from "../../../../tests/test-ids-utils"; import { ComponentDefaultTestId } from "../../../../tests/constants"; diff --git a/packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.js b/packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.js index 06adc03991..6c2dc0b897 100644 --- a/packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.js +++ b/packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.js @@ -1,3 +1,4 @@ +import React from "react"; import { act, cleanup, renderHook } from "@testing-library/react-hooks"; import userEvent from "@testing-library/user-event"; import { NavDirections } from "../../../hooks/useFullKeyboardListeners"; diff --git a/packages/core/src/components/Icon/__tests__/all-icons-tests.test.ts b/packages/core/src/components/Icon/__tests__/all-icons-tests.test.ts index 4df4629621..e86b291d74 100644 --- a/packages/core/src/components/Icon/__tests__/all-icons-tests.test.ts +++ b/packages/core/src/components/Icon/__tests__/all-icons-tests.test.ts @@ -27,7 +27,7 @@ describe("All icons", () => { }); // Make sure all icons are also exported in allIcons if (missingIcons.length > 0) { - console.error("Missing exported icons in components/Icon/Icons/index.js", missingIcons); + console.error("Missing exported icons in components/Icon/Icons/index.ts", missingIcons); } expect(missingIcons).toEqual([]); }); diff --git a/packages/core/src/components/Label/Leg.tsx b/packages/core/src/components/Label/Leg.tsx index aca08c485d..1c81d6aed4 100644 --- a/packages/core/src/components/Label/Leg.tsx +++ b/packages/core/src/components/Label/Leg.tsx @@ -1,3 +1,5 @@ +import React from "react"; + const Leg = () => ( = ({ +const TipseenBasicContent: React.FC = ({ title, children = null, titleClassName, diff --git a/packages/core/src/components/Tipseen/TipseenImage.tsx b/packages/core/src/components/Tipseen/TipseenImage.tsx index 49d2505ac5..a52bfe4c94 100644 --- a/packages/core/src/components/Tipseen/TipseenImage.tsx +++ b/packages/core/src/components/Tipseen/TipseenImage.tsx @@ -1,5 +1,5 @@ import cx from "classnames"; -import { FC } from "react"; +import React from "react"; import styles from "./TipseenImage.module.scss"; import TipseenMedia from "./TipseenMedia/TipseenMedia"; @@ -12,7 +12,7 @@ export interface TipseenImageProps { tipseenMediaClassName?: string; } -const TipseenImage: FC = ({ src, alt, className, tipseenMediaClassName }) => { +const TipseenImage: React.FC = ({ src, alt, className, tipseenMediaClassName }) => { return ( // TODO future breaking change where we remove the TipseenMedia component and we remove TipseenImage? diff --git a/packages/core/src/components/index.js b/packages/core/src/components/index.ts similarity index 100% rename from packages/core/src/components/index.js rename to packages/core/src/components/index.ts diff --git a/packages/core/src/storybook/components/index.js b/packages/core/src/storybook/components/index.ts similarity index 100% rename from packages/core/src/storybook/components/index.js rename to packages/core/src/storybook/components/index.ts diff --git a/packages/core/src/storybook/index.js b/packages/core/src/storybook/index.ts similarity index 100% rename from packages/core/src/storybook/index.js rename to packages/core/src/storybook/index.ts diff --git a/packages/core/tsconfig.base.json b/packages/core/tsconfig.base.json new file mode 100644 index 0000000000..b64ce9843d --- /dev/null +++ b/packages/core/tsconfig.base.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "lib": ["esnext", "dom"], + "target": "es6", + "moduleResolution": "node", + "esModuleInterop": true, + "jsx": "react", + "skipLibCheck": true, + "noImplicitAny": true, + "baseUrl": "." + } +} diff --git a/packages/core/tsconfig.cjs.json b/packages/core/tsconfig.cjs.json new file mode 100644 index 0000000000..7048c297c8 --- /dev/null +++ b/packages/core/tsconfig.cjs.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS" + } +} diff --git a/packages/core/tsconfig.esm.json b/packages/core/tsconfig.esm.json deleted file mode 100644 index d29969f797..0000000000 --- a/packages/core/tsconfig.esm.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "./tsconfig.json", - "include": ["src/**/*", "types/**/*"], - "compilerOptions": { - "module": "ESNext" - } -} diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json index 95338c5b37..0aa0351c29 100644 --- a/packages/core/tsconfig.json +++ b/packages/core/tsconfig.json @@ -1,24 +1,14 @@ { - "include": ["src/**/*", "types/**/*"], + "extends": "./tsconfig.base.json", "compilerOptions": { - "rootDirs": ["./src", "./.storybook"], - "lib": ["esnext", "dom"], - "allowJs": true, - "target": "es6", - "module": "CommonJS", - "sourceMap": true, - "moduleResolution": "node", - "resolveJsonModule": true, - "declarationDir": "dist/types", - "experimentalDecorators": true, - "emitDecoratorMetadata": true, + "module": "ESNext", "declaration": true, - "skipLibCheck": true, - "noImplicitAny": true, - "baseUrl": ".", + "declarationDir": "dist/types", + "sourceMap": true, + "allowJs": true, + "rootDir": "src", "allowSyntheticDefaultImports": true, - "jsx": "react-jsx", - "plugins": [{ "name": "typescript-plugin-css-modules" }], - "esModuleInterop": true - } + "plugins": [{ "name": "typescript-plugin-css-modules" }] + }, + "include": ["src/**/*", "types/**/*"] } diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js index 07cc717d24..a21b76a837 100644 --- a/packages/core/webpack.config.js +++ b/packages/core/webpack.config.js @@ -79,6 +79,7 @@ module.exports = () => { { loader: "ts-loader", options: { + configFile: "tsconfig.cjs.json", onlyCompileBundledFiles: true } }