refactor: move ChakraProvider to its own package

hiroppy · Aug 19, 2021 · 26f875c · 26f875c
1 parent a0c2ef9
commit 26f875c
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 96 deletions.
diff --git a/packages/provider/index.ts b/packages/provider/index.ts
@@ -0,0 +1 @@
+export * from "./src"
diff --git a/packages/provider/package.json b/packages/provider/package.json
@@ -0,0 +1,80 @@
+{
+  "name": "@chakra-ui/provider",
+  "version": "1.6.6",
+  "description": "Theme and components agnostic ChakraProvider",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "start": "nodemon --watch src --exec yarn build -e ts,tsx",
+    "build": "concurrently yarn:build:*",
+    "test": "jest --env=jsdom --passWithNoTests",
+    "lint": "concurrently yarn:lint:*",
+    "version": "yarn build",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "test:cov": "yarn test --coverage",
+    "lint:src": "eslint src --ext .ts,.tsx --config ../../.eslintrc",
+    "lint:types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@chakra-ui/css-reset": "1.0.0",
+    "@chakra-ui/hooks": "1.5.5",
+    "@chakra-ui/system": "1.7.2",
+    "@chakra-ui/utils": "1.8.2"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "framer-motion": "3.x || 4.x",
+    "react": ">=16.8.6",
+    "react-dom": ">=16.8.6"
+  },
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "license": "MIT",
+  "homepage": "https://chakra-ui.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/chakra-ui",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "design-system",
+    "react-components",
+    "uikit",
+    "accessible",
+    "components",
+    "emotion",
+    "library",
+    "design-system"
+  ],
+  "storybook": {
+    "title": "Chakra UI",
+    "url": "https://chakra-ui.netlify.app"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.1.4",
+    "@emotion/styled": "^11.0.0",
+    "framer-motion": "^4.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}
diff --git a/packages/provider/src/chakra-provider.tsx b/packages/provider/src/chakra-provider.tsx
@@ -0,0 +1,99 @@
+import CSSReset from "@chakra-ui/css-reset"
+import { PortalManager } from "@chakra-ui/portal"
+import {
+  ColorModeProvider,
+  ColorModeProviderProps,
+  GlobalStyle,
+  ThemeProvider,
+  ThemeProviderProps,
+} from "@chakra-ui/system"
+import { Dict } from "@chakra-ui/utils"
+import {
+  EnvironmentProvider,
+  EnvironmentProviderProps,
+} from "@chakra-ui/react-env"
+import * as React from "react"
+import { IdProvider } from "@chakra-ui/hooks"
+
+export interface ChakraProviderProps
+  extends Pick<ThemeProviderProps, "cssVarsRoot"> {
+  /**
+   * a theme. if omitted, uses the default theme provided by chakra
+   */
+  theme?: Dict
+  /**
+   * Common z-index to use for `Portal`
+   *
+   * @default undefined
+   */
+  portalZIndex?: number
+  /**
+   * If `true`, `CSSReset` component will be mounted to help
+   * you reset browser styles
+   *
+   * @default true
+   */
+  resetCSS?: boolean
+  /**
+   * manager to persist a users color mode preference in
+   *
+   * omit if you don't render server-side
+   * for SSR: choose `cookieStorageManager`
+   *
+   * @default localStorageManager
+   */
+  colorModeManager?: ColorModeProviderProps["colorModeManager"]
+  /**
+   * Your application content
+   */
+  children?: React.ReactNode
+  /**
+   * The environment (`window` and `document`) to be used by
+   * all components and hooks.
+   *
+   * By default, we smartly determine the ownerDocument and defaultView
+   * based on where `ChakraProvider` is rendered.
+   */
+  environment?: EnvironmentProviderProps["environment"]
+}
+
+/**
+ * The global provider that must be added to make all Chakra components
+ * work correctly
+ */
+export const ChakraProvider: React.FC<ChakraProviderProps> = (props) => {
+  const {
+    children,
+    colorModeManager,
+    portalZIndex,
+    resetCSS = true,
+    theme = {},
+    environment,
+    cssVarsRoot,
+  } = props
+
+  const _children = (
+    <EnvironmentProvider environment={environment}>
+      {children}
+    </EnvironmentProvider>
+  )
+
+  return (
+    <IdProvider>
+      <ThemeProvider theme={theme as Dict} cssVarsRoot={cssVarsRoot}>
+        <ColorModeProvider
+          colorModeManager={colorModeManager}
+          options={theme.config}
+        >
+          {resetCSS && <CSSReset />}
+          <GlobalStyle />
+          {portalZIndex ? (
+            <PortalManager zIndex={portalZIndex}>{_children}</PortalManager>
+          ) : (
+            _children
+          )}
+        </ColorModeProvider>
+      </ThemeProvider>
+    </IdProvider>
+  )
+}
diff --git a/packages/provider/src/index.tsx b/packages/provider/src/index.tsx
@@ -0,0 +1 @@
+export * from "./chakra-provider"
diff --git a/packages/provider/tsconfig.json b/packages/provider/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"],
+  "exclude": [
+    "src/tests",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*/*.stories.tsx"
+  ]
+}
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -61,6 +61,7 @@
     "@chakra-ui/popper": "2.2.1",
     "@chakra-ui/portal": "1.2.8",
     "@chakra-ui/progress": "1.1.12",
+    "@chakra-ui/provider": "1.6.6",
     "@chakra-ui/radio": "1.3.9",
     "@chakra-ui/react-env": "1.0.6",
     "@chakra-ui/select": "1.1.13",

diff --git a/packages/react/src/chakra-provider.tsx b/packages/react/src/chakra-provider.tsx
@@ -1,100 +1,8 @@
-import CSSReset from "@chakra-ui/css-reset"
-import { PortalManager } from "@chakra-ui/portal"
-import {
-  ColorModeProvider,
-  ColorModeProviderProps,
-  GlobalStyle,
-  ThemeProvider,
-  ThemeProviderProps,
-} from "@chakra-ui/system"
+import { ChakraProvider as BaseChakraProvider } from "@chakra-ui/provider"
 import defaultTheme from "@chakra-ui/theme"
-import { Dict } from "@chakra-ui/utils"
-import {
-  EnvironmentProvider,
-  EnvironmentProviderProps,
-} from "@chakra-ui/react-env"
-import * as React from "react"
-import { IdProvider } from "@chakra-ui/hooks"
 
-export interface ChakraProviderProps
-  extends Pick<ThemeProviderProps, "cssVarsRoot"> {
-  /**
-   * a theme. if omitted, uses the default theme provided by chakra
-   */
-  theme?: Dict
-  /**
-   * Common z-index to use for `Portal`
-   *
-   * @default undefined
-   */
-  portalZIndex?: number
-  /**
-   * If `true`, `CSSReset` component will be mounted to help
-   * you reset browser styles
-   *
-   * @default true
-   */
-  resetCSS?: boolean
-  /**
-   * manager to persist a users color mode preference in
-   *
-   * omit if you don't render server-side
-   * for SSR: choose `cookieStorageManager`
-   *
-   * @default localStorageManager
-   */
-  colorModeManager?: ColorModeProviderProps["colorModeManager"]
-  /**
-   * Your application content
-   */
-  children?: React.ReactNode
-  /**
-   * The environment (`window` and `document`) to be used by
-   * all components and hooks.
-   *
-   * By default, we smartly determine the ownerDocument and defaultView
-   * based on where `ChakraProvider` is rendered.
-   */
-  environment?: EnvironmentProviderProps["environment"]
-}
-
-/**
- * The global provider that must be added to make all Chakra components
- * work correctly
- */
-export const ChakraProvider = (props: ChakraProviderProps) => {
-  const {
-    children,
-    colorModeManager,
-    portalZIndex,
-    resetCSS = true,
-    theme = defaultTheme,
-    environment,
-    cssVarsRoot,
-  } = props
-
-  const _children = (
-    <EnvironmentProvider environment={environment}>
-      {children}
-    </EnvironmentProvider>
-  )
+export const ChakraProvider = BaseChakraProvider
 
-  return (
-    <IdProvider>
-      <ThemeProvider theme={theme} cssVarsRoot={cssVarsRoot}>
-        <ColorModeProvider
-          colorModeManager={colorModeManager}
-          options={theme.config}
-        >
-          {resetCSS && <CSSReset />}
-          <GlobalStyle />
-          {portalZIndex ? (
-            <PortalManager zIndex={portalZIndex}>{_children}</PortalManager>
-          ) : (
-            _children
-          )}
-        </ColorModeProvider>
-      </ThemeProvider>
-    </IdProvider>
-  )
+ChakraProvider.defaultProps = {
+  theme: defaultTheme,
 }