From 7ed9d03936f2f25d5a53d0fa30031dcb74b62a70 Mon Sep 17 00:00:00 2001 From: unix Date: Fri, 15 May 2020 21:31:57 +0800 Subject: [PATCH 1/5] build: supprot esm bundle chore: ignore esm folder --- .eslintignore | 1 + .gitignore | 1 + .nowignore | 3 +++ .prettierignore | 1 + package.json | 3 +++ scripts/babel.config.js | 19 +++++++++++++++++++ yarn.lock | 37 ++++++++++++++++++++++++++++++++++--- 7 files changed, 62 insertions(+), 3 deletions(-) create mode 100644 scripts/babel.config.js diff --git a/.eslintignore b/.eslintignore index 6ddc99c..547c236 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,6 +2,7 @@ .next/* examples/* dist/* +esm/* public/* scripts/* tests/* diff --git a/.gitignore b/.gitignore index ce3447d..7945eaf 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,4 @@ yarn-error.log* .now dist +esm diff --git a/.nowignore b/.nowignore index 411ea2b..c1434a6 100644 --- a/.nowignore +++ b/.nowignore @@ -3,4 +3,7 @@ .DS_Store .env examples +esm +dist +coverage .circleci diff --git a/.prettierignore b/.prettierignore index fe59788..1f0f8b3 100644 --- a/.prettierignore +++ b/.prettierignore @@ -5,6 +5,7 @@ dist coverage public +esm *.mdx *.md *.json diff --git a/package.json b/package.json index 141d3bd..bd27fe8 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "test-update": "jest --config .jest.config.js --no-cache --update-snapshot", "coverage": "yarn test --coverage", "now-build": "yarn run docs-build", + "build:esm": "babel --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" ./components --out-dir ./build/esm --ignore \"**/__tests__/**/*,**/*.d.ts\"", "build": "yarn run clear && webpack --config scripts/webpack.config.js && tsc -p ./scripts", "release": "yarn run build && yarn publish --access public --non-interactive" }, @@ -45,8 +46,10 @@ "/dist" ], "devDependencies": { + "@babel/cli": "^7.8.4", "@babel/plugin-transform-runtime": "^7.9.0", "@babel/preset-typescript": "^7.8.3", + "@babel/runtime": "^7.9.6", "@mapbox/rehype-prism": "^0.4.0", "@mdx-js/loader": "^1.5.7", "@next/mdx": "^9.4.0", diff --git a/scripts/babel.config.js b/scripts/babel.config.js new file mode 100644 index 0000000..1c3a952 --- /dev/null +++ b/scripts/babel.config.js @@ -0,0 +1,19 @@ +module.exports = { + presets: [ + [ + '@babel/preset-env', + { + bugfixes: true, + modules: false, + }, + ], + '@babel/preset-react', + '@babel/preset-typescript', + ], + plugins: [ + 'styled-jsx/babel', + ['@babel/plugin-proposal-object-rest-spread', { loose: true }], + ['@babel/plugin-transform-runtime', { useESModules: true }], + ], + ignore: [/@babel[\\|/]runtime/], +} diff --git a/yarn.lock b/yarn.lock index 763d8f9..0f9a01b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -45,6 +45,22 @@ dependencies: cross-fetch "3.0.4" +"@babel/cli@^7.8.4": + version "7.8.4" + resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.8.4.tgz#505fb053721a98777b2b175323ea4f090b7d3c1c" + integrity sha512-XXLgAm6LBbaNxaGhMAznXXaxtCWfuv6PIDJ9Alsy9JYTOh+j2jJz+L/162kkfU1j/pTSxK1xGmlwI4pdIMkoag== + dependencies: + commander "^4.0.1" + convert-source-map "^1.1.0" + fs-readdir-recursive "^1.1.0" + glob "^7.0.0" + lodash "^4.17.13" + make-dir "^2.1.0" + slash "^2.0.0" + source-map "^0.5.0" + optionalDependencies: + chokidar "^2.1.8" + "@babel/code-frame@7.8.3", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e" @@ -974,7 +990,7 @@ core-js-pure "^3.0.0" regenerator-runtime "^0.13.4" -"@babel/runtime@7.9.6", "@babel/runtime@^7.5.4", "@babel/runtime@^7.8.4": +"@babel/runtime@7.9.6", "@babel/runtime@^7.5.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.6": version "7.9.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f" integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ== @@ -2881,6 +2897,11 @@ commander@^2.19.0, commander@^2.20.0: resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== +commander@^4.0.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068" + integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA== + commondir@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" @@ -4335,6 +4356,11 @@ fs-minipass@^2.0.0: dependencies: minipass "^3.0.0" +fs-readdir-recursive@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27" + integrity sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA== + fs-write-stream-atomic@^1.0.8: version "1.0.10" resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9" @@ -4448,7 +4474,7 @@ glob-to-regexp@^0.4.1: resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e" integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw== -glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: +glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: version "7.1.6" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== @@ -6063,7 +6089,7 @@ magic-string@^0.25.1: dependencies: sourcemap-codec "^1.4.4" -make-dir@^2.0.0: +make-dir@^2.0.0, make-dir@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5" integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA== @@ -8484,6 +8510,11 @@ sisteransi@^1.0.4: resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg== +slash@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44" + integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A== + slash@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" From c30436504b74ed30592f36868e4008481db7497c Mon Sep 17 00:00:00 2001 From: unix Date: Fri, 15 May 2020 21:44:33 +0800 Subject: [PATCH 2/5] build(pkg): include esm module files when publishing --- package.json | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index bd27fe8..97ee9a8 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@zeit-ui/react", "version": "1.4.2", "main": "dist/index.js", - "module": "dist/index.js", + "module": "esm/index.js", "types": "dist/index.d.ts", "unpkg": "dist/index.min.js", "license": "MIT", @@ -31,19 +31,22 @@ "docs-start": "next start", "docs-collect": "node scripts/collect-meta.js", "contributor-collect": "node scripts/collect-contributors.js", - "clear": "rm -rf dist", + "clear": "rm -rf ./dist ./esm", "lint": "eslint \"{components,lib}/**/*.{js,ts,tsx}\"", "prettier": "prettier --write .", "test": "jest --config .jest.config.js --no-cache", "test-update": "jest --config .jest.config.js --no-cache --update-snapshot", "coverage": "yarn test --coverage", "now-build": "yarn run docs-build", - "build:esm": "babel --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" ./components --out-dir ./build/esm --ignore \"**/__tests__/**/*,**/*.d.ts\"", - "build": "yarn run clear && webpack --config scripts/webpack.config.js && tsc -p ./scripts", - "release": "yarn run build && yarn publish --access public --non-interactive" + "build:esm": "babel --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" ./components --out-dir ./esm --ignore \"**/__tests__/**/*,**/*.d.ts\"", + "build:webpack": "webpack --config scripts/webpack.config.js", + "build:types": "tsc -p ./scripts", + "build": "yarn clear && yarn build:esm && yarn build:webpack && yarn build:types", + "release": "yarn build && yarn publish --access public --non-interactive" }, "files": [ - "/dist" + "/dist", + "/esm" ], "devDependencies": { "@babel/cli": "^7.8.4", From 9e8e3f3476a170d02d3271d42d23b2b8a4b182a4 Mon Sep 17 00:00:00 2001 From: unix Date: Fri, 15 May 2020 22:38:30 +0800 Subject: [PATCH 3/5] refactor: rename the modules to make sure tree-shaking works --- components/css-baseline-deprecated/index.ts | 6 ++++++ .../__tests__/baseline.test.tsx | 14 +++++++------- .../{styles => }/css-baseline/css-baseline.tsx | 10 +++++----- .../index.tsx => css-baseline/index.ts} | 0 components/index.ts | 6 ++++-- components/zeit-provider-deprecated/index.ts | 9 +++++++++ components/zeit-provider/index.ts | 3 +++ .../zeit-provider.tsx} | 4 ++-- 8 files changed, 36 insertions(+), 16 deletions(-) create mode 100644 components/css-baseline-deprecated/index.ts rename components/{styles => css-baseline}/__tests__/baseline.test.tsx (60%) rename components/{styles => }/css-baseline/css-baseline.tsx (96%) rename components/{styles/css-baseline/index.tsx => css-baseline/index.ts} (100%) create mode 100644 components/zeit-provider-deprecated/index.ts create mode 100644 components/zeit-provider/index.ts rename components/{providers/zeit-ui-provider.tsx => zeit-provider/zeit-provider.tsx} (92%) diff --git a/components/css-baseline-deprecated/index.ts b/components/css-baseline-deprecated/index.ts new file mode 100644 index 0000000..8cf79db --- /dev/null +++ b/components/css-baseline-deprecated/index.ts @@ -0,0 +1,6 @@ +import CssBaseline from '../css-baseline' +import useWarning from '../utils/use-warning' + +useWarning('Module "CSSBaseline" is deprecated. Use `CssBaseline` instead of it.', 'CSSBaseline') + +export default CssBaseline diff --git a/components/styles/__tests__/baseline.test.tsx b/components/css-baseline/__tests__/baseline.test.tsx similarity index 60% rename from components/styles/__tests__/baseline.test.tsx rename to components/css-baseline/__tests__/baseline.test.tsx index f13afc0..a7ae002 100644 --- a/components/styles/__tests__/baseline.test.tsx +++ b/components/css-baseline/__tests__/baseline.test.tsx @@ -1,22 +1,22 @@ import React from 'react' import { render } from 'enzyme' -import { CSSBaseline, ZEITUIProvider } from 'components' +import { CssBaseline, ZeitProvider } from 'components' describe('CSSBaseline', () => { it('should render correctly', () => { const wrapper = render( - - - , + + + , ) expect(wrapper).toMatchSnapshot() }) it('should render dark mode correctly', () => { const wrapper = render( - - - , + + + , ) expect(wrapper).toMatchSnapshot() }) diff --git a/components/styles/css-baseline/css-baseline.tsx b/components/css-baseline/css-baseline.tsx similarity index 96% rename from components/styles/css-baseline/css-baseline.tsx rename to components/css-baseline/css-baseline.tsx index 4deeda9..3eeadfb 100644 --- a/components/styles/css-baseline/css-baseline.tsx +++ b/components/css-baseline/css-baseline.tsx @@ -1,9 +1,9 @@ import React from 'react' -import useTheme from '../use-theme' +import useTheme from '../styles/use-theme' import flush from 'styled-jsx/server' import flushToReact from 'styled-jsx/server' -const CSSBaseline: React.FC> = ({ children }) => { +const CssBaseline: React.FC> = ({ children }) => { const theme = useTheme() return ( @@ -305,9 +305,9 @@ type MemoCssBaselineComponent

= React.NamedExoticComponent

& { flush: typeof flushToReact } -const MemoCSSBaseline = React.memo(CSSBaseline) as MemoCssBaselineComponent< +const MemoCssBaseline = React.memo(CssBaseline) as MemoCssBaselineComponent< React.PropsWithChildren<{}> > -MemoCSSBaseline.flush = flush +MemoCssBaseline.flush = flush -export default MemoCSSBaseline +export default MemoCssBaseline diff --git a/components/styles/css-baseline/index.tsx b/components/css-baseline/index.ts similarity index 100% rename from components/styles/css-baseline/index.tsx rename to components/css-baseline/index.ts diff --git a/components/index.ts b/components/index.ts index d721655..24679e3 100644 --- a/components/index.ts +++ b/components/index.ts @@ -3,12 +3,14 @@ export * from './styles/themes' export { default as Utils } from './utils-shared/index' export { default as useTheme } from './styles/use-theme' -export { default as ZEITUIProvider } from './providers/zeit-ui-provider' +export { default as ZEITUIProvider } from './zeit-provider-deprecated' +export { default as ZeitProvider } from './zeit-provider' +export { default as CSSBaseline } from './css-baseline-deprecated' +export { default as CssBaseline } from './css-baseline' export { default as useToasts } from './toast' export { default as useInput } from './input/use-input' export { default as useModal } from './modal/use-modal' export { default as useTabs } from './tabs/use-tabs' -export { default as CSSBaseline } from './styles/css-baseline' export { default as Avatar } from './avatar' export { default as Text } from './text' export { default as Note } from './note' diff --git a/components/zeit-provider-deprecated/index.ts b/components/zeit-provider-deprecated/index.ts new file mode 100644 index 0000000..0e8b3d9 --- /dev/null +++ b/components/zeit-provider-deprecated/index.ts @@ -0,0 +1,9 @@ +import ZeitProvider from '../zeit-provider' +import useWarning from '../utils/use-warning' + +useWarning( + 'Module "ZEITUIProvider" is deprecated. Use `ZeitProvider` instead of it.', + 'ZEITUIProvider', +) + +export default ZeitProvider diff --git a/components/zeit-provider/index.ts b/components/zeit-provider/index.ts new file mode 100644 index 0000000..cfc46cf --- /dev/null +++ b/components/zeit-provider/index.ts @@ -0,0 +1,3 @@ +import ZeitProvider from './zeit-provider' + +export default ZeitProvider diff --git a/components/providers/zeit-ui-provider.tsx b/components/zeit-provider/zeit-provider.tsx similarity index 92% rename from components/providers/zeit-ui-provider.tsx rename to components/zeit-provider/zeit-provider.tsx index d46741d..ae124a4 100644 --- a/components/providers/zeit-ui-provider.tsx +++ b/components/zeit-provider/zeit-provider.tsx @@ -13,7 +13,7 @@ export interface Props { theme?: ThemeParam } -const ZEITUIProvider: React.FC> = ({ theme, children }) => { +const ZeitProvider: React.FC> = ({ theme, children }) => { const [toasts, setToasts, toastsRef] = useCurrentState>([]) const [toastHovering, setToastHovering] = useState(false) const updateToasts: UpdateToastsFunction = ( @@ -48,4 +48,4 @@ const ZEITUIProvider: React.FC> = ({ theme, children }) ) } -export default ZEITUIProvider +export default ZeitProvider From 935bd76e92b368a2b8dbe84b6796475e185285b1 Mon Sep 17 00:00:00 2001 From: unix Date: Fri, 15 May 2020 23:10:02 +0800 Subject: [PATCH 4/5] refactor: export all hooks functions directly from main module refactor: rename the modules to make sure tree-shaking works --- components/index.ts | 11 +++++-- components/page/__tests__/index.test.tsx | 6 ++-- components/snippet/snippet.tsx | 2 +- .../styles/__tests__/theme-provider.test.tsx | 10 +++---- components/tooltip/__test__/index.test.tsx | 6 ++-- .../__snapshots__/index.test.tsx.snap | 0 .../__tests__/index.test.tsx | 2 +- components/{file-tree => tree}/index.ts | 0 .../{file-tree => tree}/tree-context.ts | 0 .../{file-tree => tree}/tree-file-icon.tsx | 0 components/{file-tree => tree}/tree-file.tsx | 0 .../{file-tree => tree}/tree-folder-icon.tsx | 0 .../{file-tree => tree}/tree-folder.tsx | 0 components/{file-tree => tree}/tree-help.ts | 0 .../{file-tree => tree}/tree-indents.tsx | 0 .../{file-tree => tree}/tree-status-icon.tsx | 0 components/{file-tree => tree}/tree.tsx | 2 +- .../__tests__/body-scroll.test.tsx | 2 +- components/use-body-scroll/index.ts | 3 ++ .../use-body-scroll.ts | 0 .../__tests__/click-away.test.tsx | 2 +- components/use-click-away/index.ts | 3 ++ .../use-click-away.ts | 0 .../__tests__/clipboard.test.tsx | 2 +- components/use-clipboard/index.ts | 3 ++ .../use-clipboard.ts | 0 .../__tests__/current-state.test.tsx | 2 +- components/use-current-state/index.ts | 3 ++ .../use-current-state.ts | 0 .../__tests__/media-query.test.tsx | 3 +- components/use-media-query/index.ts | 3 ++ .../use-media-query.ts | 0 .../__snapshots__/index.test.tsx.snap | 0 .../__tests__/index.test.tsx | 30 +++++++++---------- components/{toast => use-toasts}/index.ts | 0 .../{toast => use-toasts}/toast-container.tsx | 0 .../{toast => use-toasts}/toast-item.tsx | 0 .../{toast => use-toasts}/use-toast.tsx | 0 components/utils-shared-deprecated/index.ts | 19 ++++++++++++ components/utils-shared/index.ts | 13 -------- components/utils/use-body-scroll.ts | 2 +- components/utils/use-click-away.ts | 2 +- components/utils/use-clipboard.ts | 2 +- components/utils/use-current-state.ts | 2 +- components/utils/use-zeit-ui-context.ts | 2 +- components/zeit-provider/zeit-provider.tsx | 2 +- 46 files changed, 82 insertions(+), 57 deletions(-) rename components/{file-tree => tree}/__tests__/__snapshots__/index.test.tsx.snap (100%) rename components/{file-tree => tree}/__tests__/index.test.tsx (97%) rename components/{file-tree => tree}/index.ts (100%) rename components/{file-tree => tree}/tree-context.ts (100%) rename components/{file-tree => tree}/tree-file-icon.tsx (100%) rename components/{file-tree => tree}/tree-file.tsx (100%) rename components/{file-tree => tree}/tree-folder-icon.tsx (100%) rename components/{file-tree => tree}/tree-folder.tsx (100%) rename components/{file-tree => tree}/tree-help.ts (100%) rename components/{file-tree => tree}/tree-indents.tsx (100%) rename components/{file-tree => tree}/tree-status-icon.tsx (100%) rename components/{file-tree => tree}/tree.tsx (97%) rename components/{utils-shared => use-body-scroll}/__tests__/body-scroll.test.tsx (99%) create mode 100644 components/use-body-scroll/index.ts rename components/{utils-shared => use-body-scroll}/use-body-scroll.ts (100%) rename components/{utils-shared => use-click-away}/__tests__/click-away.test.tsx (95%) create mode 100644 components/use-click-away/index.ts rename components/{utils-shared => use-click-away}/use-click-away.ts (100%) rename components/{utils-shared => use-clipboard}/__tests__/clipboard.test.tsx (97%) create mode 100644 components/use-clipboard/index.ts rename components/{utils-shared => use-clipboard}/use-clipboard.ts (100%) rename components/{utils-shared => use-current-state}/__tests__/current-state.test.tsx (96%) create mode 100644 components/use-current-state/index.ts rename components/{utils-shared => use-current-state}/use-current-state.ts (100%) rename components/{utils-shared => use-media-query}/__tests__/media-query.test.tsx (96%) create mode 100644 components/use-media-query/index.ts rename components/{utils-shared => use-media-query}/use-media-query.ts (100%) rename components/{toast => use-toasts}/__tests__/__snapshots__/index.test.tsx.snap (100%) rename components/{toast => use-toasts}/__tests__/index.test.tsx (92%) rename components/{toast => use-toasts}/index.ts (100%) rename components/{toast => use-toasts}/toast-container.tsx (100%) rename components/{toast => use-toasts}/toast-item.tsx (100%) rename components/{toast => use-toasts}/use-toast.tsx (100%) create mode 100644 components/utils-shared-deprecated/index.ts delete mode 100644 components/utils-shared/index.ts diff --git a/components/index.ts b/components/index.ts index 24679e3..4194409 100644 --- a/components/index.ts +++ b/components/index.ts @@ -1,16 +1,21 @@ /// export * from './styles/themes' -export { default as Utils } from './utils-shared/index' +export { default as Utils } from './utils-shared-deprecated/index' export { default as useTheme } from './styles/use-theme' export { default as ZEITUIProvider } from './zeit-provider-deprecated' export { default as ZeitProvider } from './zeit-provider' export { default as CSSBaseline } from './css-baseline-deprecated' export { default as CssBaseline } from './css-baseline' -export { default as useToasts } from './toast' +export { default as useToasts } from './use-toasts' export { default as useInput } from './input/use-input' export { default as useModal } from './modal/use-modal' export { default as useTabs } from './tabs/use-tabs' +export { default as useBodyScroll } from './use-body-scroll' +export { default as useClickAway } from './use-click-away' +export { default as useClipboard } from './use-clipboard' +export { default as useCurrentState } from './use-current-state' +export { default as useMediaQuery } from './use-media-query' export { default as Avatar } from './avatar' export { default as Text } from './text' export { default as Note } from './note' @@ -39,7 +44,7 @@ export { default as Radio } from './radio' export { default as Select } from './select' export { default as Tabs } from './tabs' export { default as Progress } from './progress' -export { default as Tree } from './file-tree' +export { default as Tree } from './tree' export { default as Badge } from './badge' export { default as AutoComplete } from './auto-complete' export { default as Collapse } from './collapse' diff --git a/components/page/__tests__/index.test.tsx b/components/page/__tests__/index.test.tsx index d48eafa..cd686bb 100644 --- a/components/page/__tests__/index.test.tsx +++ b/components/page/__tests__/index.test.tsx @@ -1,7 +1,7 @@ import React from 'react' import ReactDom from 'react-dom/server' import { mount } from 'enzyme' -import { Page, ZEITUIProvider } from 'components' +import { Page, ZeitProvider } from 'components' describe('Page', () => { it('should render correctly', () => { @@ -48,9 +48,9 @@ describe('Page', () => { it('should disable dot style when in dark mode', () => { const wrapper = mount( - + - , + , ) expect(wrapper.html()).not.toContain('global(body)') }) diff --git a/components/snippet/snippet.tsx b/components/snippet/snippet.tsx index f4e6095..b7dda7b 100644 --- a/components/snippet/snippet.tsx +++ b/components/snippet/snippet.tsx @@ -5,7 +5,7 @@ import { SnippetTypes, CopyTypes } from '../utils/prop-types' import { getStyles } from './styles' import SnippetIcon from './snippet-icon' import useClipboard from '../utils/use-clipboard' -import useToasts from '../toast/use-toast' +import useToasts from '../use-toasts' interface Props { text?: string | string[] diff --git a/components/styles/__tests__/theme-provider.test.tsx b/components/styles/__tests__/theme-provider.test.tsx index 7c65045..c3bf711 100644 --- a/components/styles/__tests__/theme-provider.test.tsx +++ b/components/styles/__tests__/theme-provider.test.tsx @@ -2,7 +2,7 @@ import React from 'react' import { render, mount } from 'enzyme' import { deepMergeObject } from '../theme-provider/theme-provider' import DefaultThemes from '../themes/default' -import { ZEITUIProvider, ZeitUIThemes, Text } from 'components' +import { ZeitProvider, ZeitUIThemes, Text } from 'components' import { DeepPartial } from 'components/utils/types' describe('ThemeProvider', () => { @@ -51,9 +51,9 @@ describe('ThemeProvider', () => { } } const wrapper = render( - + hello - , + , ) expect(wrapper).toMatchSnapshot() }) @@ -62,9 +62,9 @@ describe('ThemeProvider', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}) const customFunc = () => 0 as DeepPartial const wrapper = mount( - +

test

- , + , ) expect(errorSpy).toHaveBeenCalled() diff --git a/components/tooltip/__test__/index.test.tsx b/components/tooltip/__test__/index.test.tsx index 8018932..d6018fd 100644 --- a/components/tooltip/__test__/index.test.tsx +++ b/components/tooltip/__test__/index.test.tsx @@ -1,6 +1,6 @@ import React from 'react' import { mount, ReactWrapper } from 'enzyme' -import { Button, Tooltip, ZEITUIProvider } from 'components' +import { Button, Tooltip, ZeitProvider } from 'components' import { nativeEvent, updateWrapper } from 'tests/utils' import { act } from 'react-dom/test-utils' @@ -15,9 +15,9 @@ const expectTooltipIsHidden = (wrapper: ReactWrapper) => { describe('Tooltip', () => { it('should render correctly', async () => { const wrapper = mount( - + custom-content

}>some tips - , + , ) expectTooltipIsHidden(wrapper) diff --git a/components/file-tree/__tests__/__snapshots__/index.test.tsx.snap b/components/tree/__tests__/__snapshots__/index.test.tsx.snap similarity index 100% rename from components/file-tree/__tests__/__snapshots__/index.test.tsx.snap rename to components/tree/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/file-tree/__tests__/index.test.tsx b/components/tree/__tests__/index.test.tsx similarity index 97% rename from components/file-tree/__tests__/index.test.tsx rename to components/tree/__tests__/index.test.tsx index f213c64..cde7557 100644 --- a/components/file-tree/__tests__/index.test.tsx +++ b/components/tree/__tests__/index.test.tsx @@ -2,7 +2,7 @@ import React from 'react' import { mount } from 'enzyme' import { Tree } from 'components' import { nativeEvent } from 'tests/utils' -import { FileTreeValue } from 'components/file-tree/tree' +import { FileTreeValue } from 'components/tree/tree' const mockFiles: Array = [ { diff --git a/components/file-tree/index.ts b/components/tree/index.ts similarity index 100% rename from components/file-tree/index.ts rename to components/tree/index.ts diff --git a/components/file-tree/tree-context.ts b/components/tree/tree-context.ts similarity index 100% rename from components/file-tree/tree-context.ts rename to components/tree/tree-context.ts diff --git a/components/file-tree/tree-file-icon.tsx b/components/tree/tree-file-icon.tsx similarity index 100% rename from components/file-tree/tree-file-icon.tsx rename to components/tree/tree-file-icon.tsx diff --git a/components/file-tree/tree-file.tsx b/components/tree/tree-file.tsx similarity index 100% rename from components/file-tree/tree-file.tsx rename to components/tree/tree-file.tsx diff --git a/components/file-tree/tree-folder-icon.tsx b/components/tree/tree-folder-icon.tsx similarity index 100% rename from components/file-tree/tree-folder-icon.tsx rename to components/tree/tree-folder-icon.tsx diff --git a/components/file-tree/tree-folder.tsx b/components/tree/tree-folder.tsx similarity index 100% rename from components/file-tree/tree-folder.tsx rename to components/tree/tree-folder.tsx diff --git a/components/file-tree/tree-help.ts b/components/tree/tree-help.ts similarity index 100% rename from components/file-tree/tree-help.ts rename to components/tree/tree-help.ts diff --git a/components/file-tree/tree-indents.tsx b/components/tree/tree-indents.tsx similarity index 100% rename from components/file-tree/tree-indents.tsx rename to components/tree/tree-indents.tsx diff --git a/components/file-tree/tree-status-icon.tsx b/components/tree/tree-status-icon.tsx similarity index 100% rename from components/file-tree/tree-status-icon.tsx rename to components/tree/tree-status-icon.tsx diff --git a/components/file-tree/tree.tsx b/components/tree/tree.tsx similarity index 97% rename from components/file-tree/tree.tsx rename to components/tree/tree.tsx index e339459..eecf68d 100644 --- a/components/file-tree/tree.tsx +++ b/components/tree/tree.tsx @@ -3,7 +3,7 @@ import TreeFile from './tree-file' import TreeFolder from './tree-folder' import { TreeContext } from './tree-context' import { tuple } from '../utils/prop-types' -import { sortChildren } from '../file-tree/tree-help' +import { sortChildren } from './/tree-help' const FileTreeValueType = tuple('directory', 'file') diff --git a/components/utils-shared/__tests__/body-scroll.test.tsx b/components/use-body-scroll/__tests__/body-scroll.test.tsx similarity index 99% rename from components/utils-shared/__tests__/body-scroll.test.tsx rename to components/use-body-scroll/__tests__/body-scroll.test.tsx index dfdb7ac..988e9c0 100644 --- a/components/utils-shared/__tests__/body-scroll.test.tsx +++ b/components/use-body-scroll/__tests__/body-scroll.test.tsx @@ -1,5 +1,5 @@ import React, { RefObject } from 'react' -import useBodyScroll from '../use-body-scroll' +import { useBodyScroll } from 'components' import { act, renderHook } from '@testing-library/react-hooks' describe('UseBodyScroll', () => { diff --git a/components/use-body-scroll/index.ts b/components/use-body-scroll/index.ts new file mode 100644 index 0000000..f65551d --- /dev/null +++ b/components/use-body-scroll/index.ts @@ -0,0 +1,3 @@ +import useBodyScroll from './use-body-scroll' + +export default useBodyScroll diff --git a/components/utils-shared/use-body-scroll.ts b/components/use-body-scroll/use-body-scroll.ts similarity index 100% rename from components/utils-shared/use-body-scroll.ts rename to components/use-body-scroll/use-body-scroll.ts diff --git a/components/utils-shared/__tests__/click-away.test.tsx b/components/use-click-away/__tests__/click-away.test.tsx similarity index 95% rename from components/utils-shared/__tests__/click-away.test.tsx rename to components/use-click-away/__tests__/click-away.test.tsx index c8f38ad..ef9661f 100644 --- a/components/utils-shared/__tests__/click-away.test.tsx +++ b/components/use-click-away/__tests__/click-away.test.tsx @@ -1,6 +1,6 @@ import React from 'react' import { renderHook } from '@testing-library/react-hooks' -import useClickAway from '../use-click-away' +import { useClickAway } from 'components' const simulateNativeClick = (el: Element) => { el.dispatchEvent( diff --git a/components/use-click-away/index.ts b/components/use-click-away/index.ts new file mode 100644 index 0000000..83cf129 --- /dev/null +++ b/components/use-click-away/index.ts @@ -0,0 +1,3 @@ +import useClickAway from './use-click-away' + +export default useClickAway diff --git a/components/utils-shared/use-click-away.ts b/components/use-click-away/use-click-away.ts similarity index 100% rename from components/utils-shared/use-click-away.ts rename to components/use-click-away/use-click-away.ts diff --git a/components/utils-shared/__tests__/clipboard.test.tsx b/components/use-clipboard/__tests__/clipboard.test.tsx similarity index 97% rename from components/utils-shared/__tests__/clipboard.test.tsx rename to components/use-clipboard/__tests__/clipboard.test.tsx index e5484b5..720f1aa 100644 --- a/components/utils-shared/__tests__/clipboard.test.tsx +++ b/components/use-clipboard/__tests__/clipboard.test.tsx @@ -1,4 +1,4 @@ -import useClipboard from '../use-clipboard' +import { useClipboard } from 'components' import { renderHook } from '@testing-library/react-hooks' describe('UseClipboard', () => { diff --git a/components/use-clipboard/index.ts b/components/use-clipboard/index.ts new file mode 100644 index 0000000..3c09962 --- /dev/null +++ b/components/use-clipboard/index.ts @@ -0,0 +1,3 @@ +import useClipboard from './use-clipboard' + +export default useClipboard diff --git a/components/utils-shared/use-clipboard.ts b/components/use-clipboard/use-clipboard.ts similarity index 100% rename from components/utils-shared/use-clipboard.ts rename to components/use-clipboard/use-clipboard.ts diff --git a/components/utils-shared/__tests__/current-state.test.tsx b/components/use-current-state/__tests__/current-state.test.tsx similarity index 96% rename from components/utils-shared/__tests__/current-state.test.tsx rename to components/use-current-state/__tests__/current-state.test.tsx index 2114150..8f90c12 100644 --- a/components/utils-shared/__tests__/current-state.test.tsx +++ b/components/use-current-state/__tests__/current-state.test.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from 'react' import { mount } from 'enzyme' -import useCurrentState from '../use-current-state' +import { useCurrentState } from 'components' import { renderHook, act } from '@testing-library/react-hooks' describe('UseCurrentState', () => { diff --git a/components/use-current-state/index.ts b/components/use-current-state/index.ts new file mode 100644 index 0000000..b563a37 --- /dev/null +++ b/components/use-current-state/index.ts @@ -0,0 +1,3 @@ +import useCurrentState from './use-current-state' + +export default useCurrentState diff --git a/components/utils-shared/use-current-state.ts b/components/use-current-state/use-current-state.ts similarity index 100% rename from components/utils-shared/use-current-state.ts rename to components/use-current-state/use-current-state.ts diff --git a/components/utils-shared/__tests__/media-query.test.tsx b/components/use-media-query/__tests__/media-query.test.tsx similarity index 96% rename from components/utils-shared/__tests__/media-query.test.tsx rename to components/use-media-query/__tests__/media-query.test.tsx index 25a574d..e46fe6a 100644 --- a/components/utils-shared/__tests__/media-query.test.tsx +++ b/components/use-media-query/__tests__/media-query.test.tsx @@ -1,8 +1,7 @@ -import { Utils } from 'components' +import { useMediaQuery } from 'components' import { renderHook } from '@testing-library/react-hooks' // @ts-ignore import mediaQuery from 'css-mediaquery' -const { useMediaQuery } = Utils const mediaListMock = (width: number) => { ;(window as any).listeners = [] as Array diff --git a/components/use-media-query/index.ts b/components/use-media-query/index.ts new file mode 100644 index 0000000..0a6879a --- /dev/null +++ b/components/use-media-query/index.ts @@ -0,0 +1,3 @@ +import useMediaQuery from './use-media-query' + +export default useMediaQuery diff --git a/components/utils-shared/use-media-query.ts b/components/use-media-query/use-media-query.ts similarity index 100% rename from components/utils-shared/use-media-query.ts rename to components/use-media-query/use-media-query.ts diff --git a/components/toast/__tests__/__snapshots__/index.test.tsx.snap b/components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap similarity index 100% rename from components/toast/__tests__/__snapshots__/index.test.tsx.snap rename to components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/toast/__tests__/index.test.tsx b/components/use-toasts/__tests__/index.test.tsx similarity index 92% rename from components/toast/__tests__/index.test.tsx rename to components/use-toasts/__tests__/index.test.tsx index 778f8e5..db32b67 100644 --- a/components/toast/__tests__/index.test.tsx +++ b/components/use-toasts/__tests__/index.test.tsx @@ -1,6 +1,6 @@ import React from 'react' import { mount, ReactWrapper } from 'enzyme' -import { useToasts, ZEITUIProvider } from 'components' +import { useToasts, ZeitProvider } from 'components' import { nativeEvent, updateWrapper } from 'tests/utils' const MockToast: React.FC<{}> = () => { @@ -41,9 +41,9 @@ const expectToastIsHidden = (wrapper: ReactWrapper) => { describe('UseToast', () => { it('should render correctly', async () => { const wrapper = mount( - + - , + , ) expectToastIsHidden(wrapper) @@ -54,9 +54,9 @@ describe('UseToast', () => { it('should work with different types', async () => { const wrapper = mount( - + - , + , ) expectToastIsHidden(wrapper) @@ -68,9 +68,9 @@ describe('UseToast', () => { it('should close toast', async () => { const wrapper = mount( - + - , + , ) expectToastIsHidden(wrapper) @@ -85,9 +85,9 @@ describe('UseToast', () => { it('the removeal should be delayed when hover is triggerd', async () => { const wrapper = mount( - + - , + , ) expectToastIsHidden(wrapper) @@ -111,9 +111,9 @@ describe('UseToast', () => { it('should render different actions', async () => { const wrapper = mount( - + - , + , ) const actions = [ { @@ -135,9 +135,9 @@ describe('UseToast', () => { it('should close toast when action triggered', async () => { const wrapper = mount( - + - , + , ) const actions = [ { @@ -160,9 +160,9 @@ describe('UseToast', () => { it('should work with multiple toasts', async () => { const wrapper = mount( - + - , + , ) expectToastIsHidden(wrapper) diff --git a/components/toast/index.ts b/components/use-toasts/index.ts similarity index 100% rename from components/toast/index.ts rename to components/use-toasts/index.ts diff --git a/components/toast/toast-container.tsx b/components/use-toasts/toast-container.tsx similarity index 100% rename from components/toast/toast-container.tsx rename to components/use-toasts/toast-container.tsx diff --git a/components/toast/toast-item.tsx b/components/use-toasts/toast-item.tsx similarity index 100% rename from components/toast/toast-item.tsx rename to components/use-toasts/toast-item.tsx diff --git a/components/toast/use-toast.tsx b/components/use-toasts/use-toast.tsx similarity index 100% rename from components/toast/use-toast.tsx rename to components/use-toasts/use-toast.tsx diff --git a/components/utils-shared-deprecated/index.ts b/components/utils-shared-deprecated/index.ts new file mode 100644 index 0000000..1862cea --- /dev/null +++ b/components/utils-shared-deprecated/index.ts @@ -0,0 +1,19 @@ +import useBodyScroll from '../use-body-scroll' +import useClipboard from '../use-clipboard' +import useCurrentState from '../use-current-state' +import useClickAway from '../use-click-away' +import useMediaQuery from '../use-media-query' +import useWarning from '../utils/use-warning' + +useWarning( + 'Module "Utils" is deprecated. All hooks are now exported directly from the main module.', + 'Utils', +) + +export default { + useBodyScroll, + useClipboard, + useCurrentState, + useClickAway, + useMediaQuery, +} diff --git a/components/utils-shared/index.ts b/components/utils-shared/index.ts deleted file mode 100644 index 0fe42ee..0000000 --- a/components/utils-shared/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { default as useBodyScroll } from './use-body-scroll' -import { default as useClipboard } from './use-clipboard' -import { default as useCurrentState } from './use-current-state' -import { default as useClickAway } from './use-click-away' -import { default as useMediaQuery } from './use-media-query' - -export default { - useBodyScroll, - useClipboard, - useCurrentState, - useClickAway, - useMediaQuery, -} diff --git a/components/utils/use-body-scroll.ts b/components/utils/use-body-scroll.ts index c6a70aa..f129f05 100644 --- a/components/utils/use-body-scroll.ts +++ b/components/utils/use-body-scroll.ts @@ -1,3 +1,3 @@ -import useBodyScroll from '../utils-shared/use-body-scroll' +import useBodyScroll from '../utils-shared-deprecated/use-body-scroll' export default useBodyScroll diff --git a/components/utils/use-click-away.ts b/components/utils/use-click-away.ts index cf1e7b1..d26d56c 100644 --- a/components/utils/use-click-away.ts +++ b/components/utils/use-click-away.ts @@ -1,3 +1,3 @@ -import { default as useClickAway } from '../utils-shared/use-click-away' +import { default as useClickAway } from '../utils-shared-deprecated/use-click-away' export default useClickAway diff --git a/components/utils/use-clipboard.ts b/components/utils/use-clipboard.ts index 360793f..279d4dc 100644 --- a/components/utils/use-clipboard.ts +++ b/components/utils/use-clipboard.ts @@ -1,3 +1,3 @@ -import useClipboard from '../utils-shared/use-clipboard' +import useClipboard from '../utils-shared-deprecated/use-clipboard' export default useClipboard diff --git a/components/utils/use-current-state.ts b/components/utils/use-current-state.ts index f606510..10f3ec0 100644 --- a/components/utils/use-current-state.ts +++ b/components/utils/use-current-state.ts @@ -1,3 +1,3 @@ -import useCurrentState from '../utils-shared/use-current-state' +import useCurrentState from '../utils-shared-deprecated/use-current-state' export default useCurrentState diff --git a/components/utils/use-zeit-ui-context.ts b/components/utils/use-zeit-ui-context.ts index a8e5bea..d761cf2 100644 --- a/components/utils/use-zeit-ui-context.ts +++ b/components/utils/use-zeit-ui-context.ts @@ -1,5 +1,5 @@ import React from 'react' -import { ToastWithID } from '../toast/toast-container' +import { ToastWithID } from '../use-toasts/toast-container' export type UpdateToastsFunction = (fn: (toasts: Array) => Array) => any diff --git a/components/zeit-provider/zeit-provider.tsx b/components/zeit-provider/zeit-provider.tsx index ae124a4..fd63281 100644 --- a/components/zeit-provider/zeit-provider.tsx +++ b/components/zeit-provider/zeit-provider.tsx @@ -7,7 +7,7 @@ import { import ThemeProvider from '../styles/theme-provider' import { ThemeParam } from '../styles/theme-provider/theme-provider' import useCurrentState from '../utils/use-current-state' -import ToastContainer, { ToastWithID } from '../toast/toast-container' +import ToastContainer, { ToastWithID } from '../use-toasts/toast-container' export interface Props { theme?: ThemeParam From 2886531306c5d8cd735d44db84891be3d459203a Mon Sep 17 00:00:00 2001 From: unix Date: Fri, 15 May 2020 23:17:28 +0800 Subject: [PATCH 5/5] fix(utils): fix module paths chore: update snapshots --- .../__tests__/__snapshots__/baseline.test.tsx.snap | 0 components/utils/use-body-scroll.ts | 2 +- components/utils/use-click-away.ts | 2 +- components/utils/use-clipboard.ts | 2 +- components/utils/use-current-state.ts | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) rename components/{styles => css-baseline}/__tests__/__snapshots__/baseline.test.tsx.snap (100%) diff --git a/components/styles/__tests__/__snapshots__/baseline.test.tsx.snap b/components/css-baseline/__tests__/__snapshots__/baseline.test.tsx.snap similarity index 100% rename from components/styles/__tests__/__snapshots__/baseline.test.tsx.snap rename to components/css-baseline/__tests__/__snapshots__/baseline.test.tsx.snap diff --git a/components/utils/use-body-scroll.ts b/components/utils/use-body-scroll.ts index f129f05..083bdcd 100644 --- a/components/utils/use-body-scroll.ts +++ b/components/utils/use-body-scroll.ts @@ -1,3 +1,3 @@ -import useBodyScroll from '../utils-shared-deprecated/use-body-scroll' +import useBodyScroll from '../use-body-scroll' export default useBodyScroll diff --git a/components/utils/use-click-away.ts b/components/utils/use-click-away.ts index d26d56c..3f652b3 100644 --- a/components/utils/use-click-away.ts +++ b/components/utils/use-click-away.ts @@ -1,3 +1,3 @@ -import { default as useClickAway } from '../utils-shared-deprecated/use-click-away' +import { default as useClickAway } from '../use-click-away' export default useClickAway diff --git a/components/utils/use-clipboard.ts b/components/utils/use-clipboard.ts index 279d4dc..6324fdb 100644 --- a/components/utils/use-clipboard.ts +++ b/components/utils/use-clipboard.ts @@ -1,3 +1,3 @@ -import useClipboard from '../utils-shared-deprecated/use-clipboard' +import useClipboard from '../use-clipboard' export default useClipboard diff --git a/components/utils/use-current-state.ts b/components/utils/use-current-state.ts index 10f3ec0..834f217 100644 --- a/components/utils/use-current-state.ts +++ b/components/utils/use-current-state.ts @@ -1,3 +1,3 @@ -import useCurrentState from '../utils-shared-deprecated/use-current-state' +import useCurrentState from '../use-current-state' export default useCurrentState