From 946983b338631e4f5bb870328e0351b50af268b6 Mon Sep 17 00:00:00 2001 From: Malcolm Kee Date: Wed, 28 Jun 2023 23:35:22 +1000 Subject: [PATCH 1/4] feat: replace with tailwind --- .changeset/khaki-boats-fail.md | 9 + .eslintrc.js | 5 +- .github/workflows/build.yaml | 33 +- docs/components/component-doc-route.tsx | 88 +- docs/docs/component-playground.mdx | 4 +- docs/docs/component-playground.tsx | 27 +- .../component-playground/control-options.mdx | 2 +- docs/docs/index.tsx | 10 +- docs/package.json | 21 +- docs/react-showroom.config.js | 21 +- examples/client-only-example/package.json | 8 +- examples/cra-example/package.json | 7 +- examples/react-example/docs/provider.tsx | 2 +- examples/react-example/package.json | 36 +- .../react-example/src/components/button.mdx | 18 +- .../react-example/src/components/index.ts | 2 +- .../tests/react-example-props-editor.spec.ts | 6 +- .../tests/react-example-third-party.spec.ts | 6 +- examples/subpath-example/package.json | 10 +- .../subpath-example/tests/subpath.spec.ts | 29 +- package.json | 19 +- packages/bundles/README.md | 2 +- packages/bundles/package.json | 45 +- packages/bundles/rollup.config.js | 69 - packages/bundles/rollup.config.mjs | 84 + packages/bundles/src/query.ts | 2 +- packages/core/package.json | 8 +- packages/core/src/code-block-overrides.ts | 19 + packages/core/src/compile-script.spec.ts | 4 +- packages/core/src/index.ts | 11 +- packages/core/src/react.ts | 24 +- packages/device-frames/package.json | 8 +- packages/device-frames/src/iphone.tsx | 8 +- packages/measure/package.json | 6 +- packages/react-showroom/.eslintrc.js | 6 + .../react-showroom/client/app/preview-app.tsx | 6 +- .../client/app/preview-client-entry.tsx | 15 +- .../client/app/preview-server-entry.tsx | 17 +- .../client/app/showroom-app.tsx | 19 +- .../client/app/showroom-client-entry.tsx | 15 +- .../client/app/showroom-server-entry.tsx | 17 +- .../client/components/a11y-result-item.tsx | 193 +- .../a11y-result-panel-for-frames.tsx | 1 - .../client/components/a11y-result-panel.tsx | 177 +- .../client/components/a11y-summary.tsx | 131 +- .../client/components/article.tsx | 33 +- .../client/components/audience-toggle.tsx | 56 +- .../react-showroom/client/components/base.tsx | 30 +- .../client/components/browser-window.tsx | 137 +- .../client/components/checkbox-dropdown.tsx | 13 +- .../components/code-advanced-editor.tsx | 8 +- .../client/components/code-block.tsx | 75 +- .../client/components/code-editor.tsx | 13 +- .../client/components/code-highlight.tsx | 1 - .../client/components/code-live-editor.tsx | 97 +- .../client/components/code-playground.tsx | 76 +- .../client/components/code-preview-frame.tsx | 50 +- .../client/components/code-preview-iframe.tsx | 118 +- .../client/components/code-preview.tsx | 2 + .../components/component-doc-article.tsx | 42 +- .../component-doc-standalone-editor.tsx | 7 +- .../client/components/component-meta.tsx | 195 +- .../client/components/console-panel.tsx | 154 +- .../components/details-page-container.tsx | 24 +- .../client/components/doc-placeholder.tsx | 93 +- .../client/components/generic-link.tsx | 2 +- .../client/components/header.tsx | 135 +- .../client/components/language-tag.tsx | 23 +- .../components/link-to-standalone-view.tsx | 27 +- .../client/components/markdown-article.tsx | 32 +- .../client/components/measuring-button.tsx | 5 +- .../client/components/page-fallback.tsx | 1 - .../client/components/props-editor-panel.tsx | 7 +- .../client/components/props-editor.tsx | 256 +- .../client/components/radio-dropdown.tsx | 3 +- .../client/components/sidebar.tsx | 213 +- .../standalone-code-live-editor-comment.tsx | 4 +- ...tandalone-code-live-editor-copy-button.tsx | 60 +- .../standalone-code-live-editor-preview.tsx | 20 +- .../standalone-code-live-editor.tsx | 181 +- .../client/components/table-of-content.tsx | 250 +- .../client/components/title.tsx | 29 - packages/react-showroom/client/index.tsx | 4 +- .../client/lib/code-block-import-overrides.ts | 10 + .../client/lib/code-imports-context.tsx | 22 +- .../client/lib/frame-message.ts | 79 +- .../client/lib/get-search-result.tsx | 10 +- packages/react-showroom/client/lib/lazy.tsx | 10 +- .../client/lib/use-props-editor.tsx | 10 +- .../client/pages/component-doc-route.tsx | 1 - .../react-showroom/client/pages/index.tsx | 2 - .../client/pages/markdown-route.tsx | 1 - .../react-showroom/client/pages/offline.tsx | 85 +- .../react-showroom/client/route-mapping.tsx | 4 +- packages/react-showroom/client/theme.ts | 23 +- packages/react-showroom/client/type-def.d.ts | 14 - packages/react-showroom/package.json | 76 +- packages/react-showroom/postcss.config.js | 1 + .../src/config/create-webpack-config.ts | 27 +- .../src/lib/generate-showroom-data.ts | 105 +- packages/react-showroom/src/lib/get-config.ts | 51 +- packages/react-showroom/src/lib/prerender.ts | 28 +- ...owroom-remark-codeblocks-imports-loader.ts | 8 +- packages/react-showroom/tailwind.config.js | 13 + packages/react-showroom/tsconfig.client.json | 5 +- packages/ui/package.json | 42 +- packages/ui/postcss.config.js | 9 + packages/ui/src/components/alert.mdx | 28 + packages/ui/src/components/alert.tsx | 84 +- packages/ui/src/components/bare-button.ts | 10 - packages/ui/src/components/breadcrumbs.mdx | 15 + packages/ui/src/components/breadcrumbs.tsx | 77 +- packages/ui/src/components/button.mdx | 21 + packages/ui/src/components/button.tsx | 51 +- packages/ui/src/components/checkbox.mdx | 15 + packages/ui/src/components/checkbox.tsx | 68 +- packages/ui/src/components/collapsible.mdx | 20 + packages/ui/src/components/collapsible.tsx | 136 +- packages/ui/src/components/color-input.mdx | 3 + packages/ui/src/components/color-input.tsx | 76 +- packages/ui/src/components/copy-button.tsx | 15 +- packages/ui/src/components/dialog.tsx | 21 +- packages/ui/src/components/dropdown-menu.tsx | 1 - packages/ui/src/components/file-input.tsx | 4 +- packages/ui/src/components/icons.tsx | 46 +- packages/ui/src/components/number-input.tsx | 2 +- packages/ui/src/components/popover.tsx | 1 + packages/ui/src/components/search-dialog.tsx | 294 +- packages/ui/src/components/select.mdx | 7 + packages/ui/src/components/select.tsx | 42 +- packages/ui/src/components/shortcut-key.tsx | 39 +- packages/ui/src/components/tabs.tsx | 78 +- packages/ui/src/components/text-highlight.tsx | 8 +- packages/ui/src/components/text-input.tsx | 39 +- packages/ui/src/components/textarea.mdx | 3 + packages/ui/src/components/textarea.tsx | 30 +- packages/ui/src/index.ts | 9 +- packages/ui/src/lib/tw.ts | 31 + packages/ui/src/shared-styles.ts | 3 + packages/ui/src/stitches.config.ts | 4 - packages/ui/tailwind.config.js | 48 + packages/ui/tsconfig.json | 5 +- packages/ui/tsup.config.ts | 8 + pnpm-lock.yaml | 17745 +++++++--------- 144 files changed, 10600 insertions(+), 12849 deletions(-) create mode 100644 .changeset/khaki-boats-fail.md delete mode 100644 packages/bundles/rollup.config.js create mode 100644 packages/bundles/rollup.config.mjs create mode 100644 packages/core/src/code-block-overrides.ts delete mode 100644 packages/react-showroom/client/components/title.tsx create mode 100644 packages/react-showroom/client/lib/code-block-import-overrides.ts create mode 100644 packages/react-showroom/postcss.config.js create mode 100644 packages/react-showroom/tailwind.config.js create mode 100644 packages/ui/postcss.config.js create mode 100644 packages/ui/src/components/alert.mdx delete mode 100644 packages/ui/src/components/bare-button.ts create mode 100644 packages/ui/src/components/breadcrumbs.mdx create mode 100644 packages/ui/src/components/button.mdx create mode 100644 packages/ui/src/components/checkbox.mdx create mode 100644 packages/ui/src/components/collapsible.mdx create mode 100644 packages/ui/src/components/color-input.mdx create mode 100644 packages/ui/src/components/select.mdx create mode 100644 packages/ui/src/components/textarea.mdx create mode 100644 packages/ui/src/lib/tw.ts create mode 100644 packages/ui/src/shared-styles.ts create mode 100644 packages/ui/tailwind.config.js create mode 100644 packages/ui/tsup.config.ts diff --git a/.changeset/khaki-boats-fail.md b/.changeset/khaki-boats-fail.md new file mode 100644 index 00000000..dedfdcd0 --- /dev/null +++ b/.changeset/khaki-boats-fail.md @@ -0,0 +1,9 @@ +--- +'@showroomjs/bundles': major +'@showroomjs/device-frames': major +'@showroomjs/measure': major +'react-showroom': major +'@showroomjs/ui': major +--- + +Remove support of React 17 diff --git a/.eslintrc.js b/.eslintrc.js index eedba8f7..9f1b1b41 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -14,10 +14,13 @@ module.exports = { env: { node: true, }, - files: ['.eslintrc.{js,cjs}'], + files: ['.eslintrc.{js,cjs}', '*.config.js'], parserOptions: { sourceType: 'script', }, + rules: { + '@typescript-eslint/no-var-requires': 'off', + }, }, ], parser: '@typescript-eslint/parser', diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml index 4b0114a3..b3db96c9 100644 --- a/.github/workflows/build.yaml +++ b/.github/workflows/build.yaml @@ -9,39 +9,28 @@ jobs: strategy: matrix: node-version: [16] - react-version: [17, 18] + react-version: [18] steps: - name: Branch Name run: echo Running on branch ${GITHUB_REF##*/} - name: Begin CI... - uses: actions/checkout@v2 - - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v2 - with: - node-version: ${{ matrix.node-version }} - - - name: Cache pnpm modules - uses: actions/cache@v2 - with: - path: ~/.pnpm-store - key: ${{ runner.os }}-node${{ matrix.node-version }}-react${{ matrix.react-version }}-${{ hashFiles('**/pnpm-lock.yaml') }} + uses: actions/checkout@v3 - name: Setup pnpm - uses: pnpm/action-setup@v2.0.1 + uses: pnpm/action-setup@v2 with: - version: 7 - run_install: true + version: 8 - - name: Install React ${{ matrix.react-version }} at Root - if: matrix.react-version != 18 - run: pnpm -w -D add react@^${{ matrix.react-version }} react-dom@^${{ matrix.react-version }} + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + cache: 'pnpm' - - name: Install React ${{ matrix.react-version }} at Examples - if: matrix.react-version != 18 - run: pnpm --filter="./examples/**" --filter="react-showroom-docs" add react@^${{ matrix.react-version }} react-dom@^${{ matrix.react-version }} @testing-library/react@^12 @testing-library/user-event@^13 + - name: Install dependencies + run: pnpm install - name: Install Playwright run: npx playwright install --with-deps diff --git a/docs/components/component-doc-route.tsx b/docs/components/component-doc-route.tsx index 28aa9156..ad500eb0 100644 --- a/docs/components/component-doc-route.tsx +++ b/docs/components/component-doc-route.tsx @@ -3,12 +3,12 @@ import { ComponentDataProvider, ComponentDocArticle, ComponentDocStandaloneEditor, - deviceDimensionsByName, MemoryRouter, PageFallback, Route, Routes, Suspense, + deviceDimensionsByName, } from 'react-showroom/client'; import { BrowserWindowInRouter } from './browser-window-in-router'; import { cssVariables } from './css-variables'; @@ -21,45 +21,47 @@ export const ComponentDocRoute = ( props: Omit & { slug: string; } -) => ( - - - - }> - - - - - } - /> - - - - } - /> - - - - - -); +) => { + return ( + + + + }> + + + + + } + /> + + + + } + /> + + + + + + ); +}; diff --git a/docs/docs/component-playground.mdx b/docs/docs/component-playground.mdx index 6ed2615f..d67b4f23 100644 --- a/docs/docs/component-playground.mdx +++ b/docs/docs/component-playground.mdx @@ -3,7 +3,7 @@ description: Learn how to create playground to modify component props --- import { - ColorControl, + ColorInput, FileInput, ObjectValueEditor, Select, @@ -69,7 +69,7 @@ Currently, we support the following control types: | `date` | | | `file` | | | `object` | | -| `color` | | +| `color` | | Notes: diff --git a/docs/docs/component-playground.tsx b/docs/docs/component-playground.tsx index 3bae4435..7c14da5a 100644 --- a/docs/docs/component-playground.tsx +++ b/docs/docs/component-playground.tsx @@ -32,7 +32,14 @@ import { useSetCompilationCaches } from './set-compilation-caches'; const allMetadata = Object.values(allComponentsMetadata); -const buttonData = allMetadata.find((m) => m.displayName === 'Button')!; +const buttonData = allMetadata.find((m) => m.displayName === 'Button'); + +if (!buttonData) { + throw new Error( + 'buttonData not defined in component playground source code.' + ); +} + const { pre: Pre, code: Code } = mdxComponents; const mockLoadDts = () => Promise.resolve({ default: {} }); @@ -44,6 +51,7 @@ const playgroundContent = { codeblocks: playgroundCodeBlocks, Component: Button, loadDts: mockLoadDts, + editUrl: null, }; export const PlaygroundSource = () => { @@ -81,6 +89,7 @@ const playgroundContent2 = { codeblocks: playgroundCodeBlocks2, Component: Button, loadDts: mockLoadDts, + editUrl: null, }; export const PlaygroundSource2 = () => { @@ -113,6 +122,7 @@ const controlOptionsContent = { codeblocks: controlOptionsCodeBlocks, Component: Button, loadDts: mockLoadDts, + editUrl: null, }; export const ControlOptionsSource = () => { @@ -153,9 +163,7 @@ export const NumberInputDemo = () => { ); @@ -177,16 +185,7 @@ export const SelectDemo = () => { return ( <> - {options.map((opt) => (