diff --git a/.eslintrc.json b/.eslintrc.json index c8813d5bbf6..d491b8590ba 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -23,8 +23,6 @@ // Packages. `react` related packages come first. // Also, put `react-icons` in sorting order not with `react` ["^react(?!-.)$", "^\\w", "^@\\w"], - // The Chakra theme directory if imported to story file or other places - ["^@/@chakra-ui"], // From the `types` directory. ["^@/lib/types", "^@/lib/interfaces"], // From the `components` directory. diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 3054c265b98..7422a81a40f 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -15,7 +15,6 @@ on: - "src/components/**/*" - "src/pages/**/*" - "src/layouts/**/*" - - "src/@chakra-ui/**/*" - ".storybook/**/*" - "tailwind.config.ts" - "src/styles/**/*" diff --git a/.storybook/ChakraDecorator.tsx b/.storybook/ChakraDecorator.tsx deleted file mode 100644 index dbde5985d55..00000000000 --- a/.storybook/ChakraDecorator.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { useEffect, useMemo, useState } from "react" -import { - ChakraBaseProvider, - extendBaseTheme, - useColorMode, -} from "@chakra-ui/react" -import type { Decorator } from "@storybook/react" - -import theme from "../src/@chakra-ui/theme" - -import i18n from "./i18next" - -type DecoratorProps = Parameters - -const ColorModeSync = ({ context }: { context: DecoratorProps[1] }) => { - const { setColorMode } = useColorMode() - - useEffect(() => { - const isDarkMode = localStorage.getItem("chakra-ui-color-mode") === "dark" - - context.globals.colorMode = isDarkMode ? "dark" : "light" - }, []) - - useEffect(() => { - setColorMode(context.globals.colorMode) - }, [setColorMode, context]) - - return null -} - -/** - * This is a custom local setup of the official Chakra UI Storybook addon. - * - * A local version was created in response to provide a better sync between - * updated local direction to the Chakra theme. - * - * (This would most likely not be updated in the addon due to ongoing creation of Chakra v3 at the time this - * setup was created.) - * - * Will be deprecated and removed when Chakra v3 is available for migration. - * - */ -export const ChakraDecorator: Decorator = (getStory, context) => { - const [dir, updateDir] = useState<"ltr" | "rtl">() - - i18n.on("languageChanged", (locale) => { - const direction = i18n.dir(locale) - document.documentElement.dir = direction - updateDir(direction) - }) - - const themeWithDirectionOverride = useMemo(() => { - return extendBaseTheme({ direction: dir }, theme) - }, [dir]) - - return ( - - <> - - {getStory(context)} - - - ) -} diff --git a/.storybook/main.ts b/.storybook/main.ts index f7b4b280d24..f61e8bfbb0e 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,5 +1,4 @@ import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin" -import { propNames } from "@chakra-ui/react" import type { StorybookConfig } from "@storybook/nextjs" /** @@ -41,11 +40,6 @@ const config: StorybookConfig = { docs: { autodocs: "tag", }, - refs: { - "@chakra-ui/react": { - disable: true, - }, - }, webpackFinal: async (config) => { config.module = config.module || {} config.module.rules = config.module.rules || [] @@ -79,23 +73,6 @@ const config: StorybookConfig = { typescript: { reactDocgenTypescriptOptions: { shouldExtractLiteralValuesFromEnum: true, - /** - * For handling bloated controls table of Chakra Props - * - * https://github.com/chakra-ui/chakra-ui/issues/2009#issuecomment-852793946 - */ - propFilter: (prop) => { - const excludedPropNames = propNames.concat([ - "as", - "apply", - "sx", - "__css", - ]) - const isStyledSystemProp = excludedPropNames.includes(prop.name) - const isHTMLElementProp = - prop.parent?.fileName.includes("node_modules") ?? false - return !(isStyledSystemProp || isHTMLElementProp) - }, }, reactDocgen: "react-docgen-typescript", diff --git a/.storybook/types.ts b/.storybook/types.ts deleted file mode 100644 index 1b8116ee78a..00000000000 --- a/.storybook/types.ts +++ /dev/null @@ -1,83 +0,0 @@ -import type { StyleConfig, ThemingProps } from "@chakra-ui/react" -import type { ArgTypes } from "@storybook/react" - -// Type declarations below pulled directly from `@chakra-ui/storybook-addon` -// with some alteration -// (Subject to deprecation and removal upon release of Chakra v3) - -/** - * `keyof` alternative which omits non-string keys - */ -type KeyOf = [T] extends [never] - ? never - : T extends object - ? Extract - : never - -export type ThemingArgTypeKey = "variant" | "size" - -/** - * Create Storybook controls based on a Chakra UI theme component. - * - * @example - * export default { - * title: "Components / Forms / Button", - * argTypes: getThemingArgTypes(theme, "Button"), - * } - * - * @example full example - * import { Meta, StoryFn } from "@storybook/react" - * import { getThemingArgTypes } from "@chakra-ui/storybook-addon" - * import { theme } from "" - * - * export default { - * title: "Components / Forms / Button", - * argTypes: { - * ...getThemingArgTypes(theme, "Button"), - * children: "string" - * }, - * args: { children: "Button" }, - * } as Meta - * - * interface StoryProps extends ThemingProps<"Button"> { - * children?: React.ReactNode - * } - * - * export const Basic: StoryFn = (props) =>