Comparison of main from start of React 18 upgrade project to latest

.eslintignore

@@ -1,5 +1,6 @@
 fixtures/
 packages/components/core
+ui/theme/src/tokens.ts
 
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
@@ -47,4 +48,7 @@ core
 
 lerna-debug.log
 
-**/*.spec.js
+**/*.spec.js
+
+#temp
+ui

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     "plugin:testing-library/dom",
     "plugin:jest-dom/recommended",
     "plugin:storybook/recommended",
+    "plugin:react/jsx-runtime",
   ],
   overrides: [
     {
@@ -36,12 +37,16 @@ module.exports = {
       rules: {
         "react/prop-types": "off",
         "@washingtonpost/wpds/theme-colors": "warn",
-        "no-restricted-syntax": [
-          "error",
+      },
+    },
+    // warning  'React' is defined but never used  @typescript-eslint/no-unused-vars -- allow unused React
+    {
+      files: ["**/*.tsx"],
+      rules: {
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
           {
-            selector:
-              "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
-            message: "Default React import not allowed",
+            varsIgnorePattern: "React",
           },
         ],
       },

.github/workflows/playwright.yml

@@ -9,7 +9,9 @@ jobs:
   test:
     if: github.event.deployment_status.state == 'success' && !contains(github.event.deployment_status.target_url, 'storybook') && !contains(github.event.deployment_status.target_url, 'vitejs')
     runs-on: ubuntu-latest
-    timeout-minutes: 20
+    container:
+      image: mcr.microsoft.com/playwright:v1.40.1-jammy
+    timeout-minutes: 25
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
@@ -25,6 +27,14 @@ jobs:
           always-auth: true
           cache: npm
 
+      - name: Cache playwright binaries
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: cache-playwright-linux-1.40.1
+
       - name: Cache node_modules
         id: cache-node_modules
         uses: actions/cache@v3
@@ -44,18 +54,12 @@ jobs:
           TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
 
       - name: Install Playwright Browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: npx playwright install --with-deps
 
       - name: Run Playwright tests
-        run: npx playwright test
+        run: npm run playwright
         env:
           BASEURL: "${{ github.event.deployment_status.target_url }}"
           TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-
-      # - uses: actions/upload-artifact@v3
-      #   if: always()
-      #   with:
-      #     name: playwright-report
-      #     path: playwright-report/
-      #     retention-days: 30
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}

.gitignore

@@ -126,7 +126,7 @@ yalc.lock
 # ignore build site vscode
 build.washingtonpost.com/.vscode/
 
-# ignore the storybook build 
+# ignore the storybook build
 build.washingtonpost.com/public/storybook/**/*
 
 .env
@@ -135,3 +135,6 @@ build.washingtonpost.com/public/storybook/**/*
 /test-results/
 /playwright-report/
 /playwright/.cache/
+.turbo
+
+.idea/*

.prettierignore

@@ -9,3 +9,4 @@ out
 jest-coverage
 plop-templates
 /ui/theme/src/tokens.ts
+/packages/kit/src/theme/tokens.ts

.storybook/main.js

@@ -1,36 +1,49 @@
+import { dirname, join } from "path";
 // add process.env
 require("dotenv").config();
 
 module.exports = {
-  stories: ["../ui/(**|!(node_modules))/src/*.stories.@(ts|tsx|js|jsx)"],
+  stories: ["../packages/kit/src/**/*.stories.tsx"],
   exclude: ["node_modules", "dist"],
+
   addons: [
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-a11y",
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-a11y"),
   ],
+
   previewBody: (body) => `${body}`,
+
   features: {
     storyStoreV7: true,
     interactionsDebugger: true,
   },
-  framework: "@storybook/react",
-  core: {
-    builder: "webpack5",
+
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
   },
-  typescript: {
-    check: true,
-    reactDocgen: "react-docgen-typescript",
-    reactDocgenTypescriptOptions: {
-      shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop) =>
-        prop.parent
-          ? /@radix-ui/.test(prop.parent.fileName) ||
-            !/node_modules/.test(prop.parent.fileName)
-          : true,
-      compilerOptions: {
-        allowSyntheticDefaultImports: false,
-      },
-    },
+
+  // typescript: {
+  //   reactDocgen: "react-docgen-typescript",
+  //   reactDocgenTypescriptOptions: {
+  //     shouldExtractLiteralValuesFromEnum: true,
+  //     propFilter: (prop) =>
+  //       prop.parent
+  //         ? /@radix-ui/.test(prop.parent.fileName) ||
+  //           !/node_modules/.test(prop.parent.fileName)
+  //         : true,
+  //     compilerOptions: {
+  //       allowSyntheticDefaultImports: false,
+  //     },
+  //   },
+  // },
+
+  docs: {
+    autodocs: true,
   },
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/preview.js

@@ -56,7 +56,7 @@ const Panel = styled("div", {
 
 function GlobalStyles(props) {
   globalStyles();
-  return <Panel>{props.children}</Panel>;
+  return <Panel css={props.css}>{props.children}</Panel>;
 }
 
 function DarkPanel(props) {
@@ -72,7 +72,11 @@ function DarkPanel(props) {
 export const decorators = [
   (Story, Context) => {
     if (Context.story.includes("Interactions")) {
-      return <Story theme="light" />;
+      return (
+        <GlobalStyles css={{ width: "auto" }}>
+          <Story theme="light" />
+        </GlobalStyles>
+      );
     }
 
     return (