Migrate to tailwind

.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

.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',

.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

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<ComponentDataProviderProps, 'children'> & {
     slug: string;
   }
-) => (
-  <MemoryRouter>
-    <BrowserWindowInRouter className="mb-4">
-      <ComponentDataProvider {...props}>
-        <Suspense fallback={<PageFallback />}>
-          <Routes>
-            <Route
-              path="_standalone/:codeHash"
-              element={
-                <div
-                  className="flex flex-col min-h-[500px]"
-                  style={cssVariables}
-                >
-                  <ComponentDocStandaloneEditor
-                    codeFrameDimensions={[
-                      deviceDimensionsByName['iPhone 6/7/8'],
-                      deviceDimensionsByName.iPad,
-                      deviceDimensionsByName['Macbook Air'],
-                    ]}
-                    showDeviceFrame
-                  />
-                </div>
-              }
-            />
-            <Route
-              path="*"
-              element={
-                <div className="px-6 pb-6" style={cssVariables}>
-                  <ComponentDocArticle
-                    slug={props.slug}
-                    content={props.content}
-                    metadata={props.metadata}
-                  />
-                </div>
-              }
-            />
-          </Routes>
-        </Suspense>
-      </ComponentDataProvider>
-    </BrowserWindowInRouter>
-  </MemoryRouter>
-);
+) => {
+  return (
+    <MemoryRouter>
+      <BrowserWindowInRouter className="mb-4">
+        <ComponentDataProvider {...props}>
+          <Suspense fallback={<PageFallback />}>
+            <Routes>
+              <Route
+                path="_standalone/:codeHash"
+                element={
+                  <div
+                    className="flex flex-col min-h-[500px]"
+                    style={cssVariables}
+                  >
+                    <ComponentDocStandaloneEditor
+                      codeFrameDimensions={[
+                        deviceDimensionsByName['iPhone 6/7/8'],
+                        deviceDimensionsByName.iPad,
+                        deviceDimensionsByName['Macbook Air'],
+                      ]}
+                      showDeviceFrame
+                    />
+                  </div>
+                }
+              />
+              <Route
+                path="*"
+                element={
+                  <div className="px-6 pb-6" style={cssVariables}>
+                    <ComponentDocArticle
+                      slug={props.slug}
+                      content={props.content}
+                      metadata={props.metadata}
+                    />
+                  </div>
+                }
+              />
+            </Routes>
+          </Suspense>
+        </ComponentDataProvider>
+      </BrowserWindowInRouter>
+    </MemoryRouter>
+  );
+};

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`     | <TextInput type="date" />               |
 | `file`     | <FileInput />                           |
 | `object`   | <ObjectValueEditor />                   |
-| `color`    | <ColorControl />                        |
+| `color`    | <ColorInput />                          |
 
 Notes:
 

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 = () => {
     <NumberInput
       value={value}
       onValue={setValue}
-      css={{
-        maxWidth: '20rem',
-      }}
+      className="max-w-xs"
       allowNegative
     />
   );
@@ -177,16 +185,7 @@ export const SelectDemo = () => {
 
   return (
     <>
-      <Select
-        value={value}
-        onValue={setValue}
-        css={{
-          maxWidth: '36rem',
-          '@lg': {
-            display: 'none',
-          },
-        }}
-      >
+      <Select value={value} onValue={setValue} className="max-w-xl lg:hidden">
         {options.map((opt) => (
           <option value={opt.value} key={opt.value}>
             {opt.label}

docs/docs/component-playground/control-options.mdx

@@ -1,6 +1,6 @@
 ```jsx
 import { usePropsEditor } from 'react-showroom/client';
-import { PencilIcon } from '@heroicons/react/solid';
+import { PencilIcon } from '@heroicons/react/20/solid';
 
 const childrenOptions = [
   {

docs/docs/index.tsx

@@ -1,9 +1,9 @@
 import {
   BookOpenIcon,
-  CloudDownloadIcon,
-  CodeIcon,
-  ExternalLinkIcon,
-} from '@heroicons/react/outline';
+  CloudArrowDownIcon as CloudDownloadIcon,
+  CodeBracketIcon as CodeIcon,
+  ArrowTopRightOnSquareIcon as ExternalLinkIcon,
+} from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { Link, styled } from 'react-showroom/client';
 
@@ -36,7 +36,7 @@ export const HomePage = () => {
           <a
             href="https://github.com/malcolm-kee/react-showroom"
             target="_blank"
-            rel="noopener"
+            rel="noopener noreferrer"
             className="inline-flex items-center gap-2 px-6 py-2 rounded-2xl text-gray-700 hover:bg-gray-200"
           >
             GitHub

docs/package.json

@@ -4,10 +4,11 @@
   "license": "MIT",
   "version": "1.1.42",
   "dependencies": {
-    "@babel/runtime": "^7.18.9",
-    "@heroicons/react": "^1.0.6",
-    "classnames": "^2.3.1",
-    "esbuild-loader": "^2.19.0",
+    "@babel/runtime": "^7.21.5",
+    "@heroicons/react": "^2.0.18",
+    "@showroomjs/ui": "workspace:*",
+    "classnames": "^2.3.2",
+    "esbuild-loader": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.34.0",
@@ -19,13 +20,13 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.2",
-    "autoprefixer": "^10.4.8",
-    "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^4.0.0",
-    "mini-css-extract-plugin": "^2.6.1",
+    "autoprefixer": "^10.4.14",
+    "css-loader": "^6.7.4",
+    "css-minimizer-webpack-plugin": "^5.0.0",
+    "mini-css-extract-plugin": "^2.7.6",
     "postcss": "^8.4.16",
-    "postcss-loader": "^7.0.1",
-    "style-loader": "^3.3.1",
+    "postcss-loader": "^7.3.0",
+    "style-loader": "^3.3.3",
     "tailwindcss": "^3.1.8"
   }
 }

docs/react-showroom.config.js

@@ -4,7 +4,11 @@ const libPackageJson = require('react-showroom/package.json');
 
 module.exports = defineConfig({
   url: 'https://react-showroom.js.org',
-  require: ['tailwindcss/tailwind.css', './docs/styles.css'],
+  require: [
+    'tailwindcss/tailwind.css',
+    '@showroomjs/ui/dist/index.css',
+    './docs/styles.css',
+  ],
   items: [
     {
       type: 'content',
@@ -122,6 +126,21 @@ module.exports = defineConfig({
         },
       ],
     },
+    {
+      type: 'group',
+      title: 'Internal API',
+      collapsible: 'collapse-by-default',
+      items: [
+        {
+          type: 'components',
+          title: '@showroomjs/ui',
+          path: 'internal/components',
+          components: './node_modules/@showroomjs/ui/src/components/*.tsx',
+          collapsible: 'expand-by-default',
+        },
+      ],
+      hideFromSearch: true,
+    },
   ],
   theme: {
     title: 'React Showroom',

examples/client-only-example/package.json

@@ -8,17 +8,17 @@
     "build-showroom": "react-showroom build"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.9",
-    "classnames": "^2.3.1",
+    "@babel/runtime": "^7.21.5",
+    "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-showroom": "workspace:*"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.8",
+    "autoprefixer": "^10.4.14",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.1.8",
     "typescript": "~4.6.4",
-    "webpack": "^5.74.0"
+    "webpack": "^5.84.0"
   }
 }