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) => (