Merge pull request #527 from strapi/1.0.0

1.0.0

Author: HichamELBSI

.github/workflows/playwright-ci.yml

@@ -1,7 +1,7 @@
 name: Playwright tests
 on:
   pull_request:
-    branches: ["main"]
+    branches: "*"
   workflow_dispatch:
 
 jobs:
@@ -32,6 +32,9 @@ jobs:
       - name: Install yarn dependencies
         run: yarn global add http-server && yarn
 
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
       - name: Link locale packages and install their dependencies
         run: yarn bootstrap
 

.specifyrc.json

@@ -34,8 +34,8 @@
       ]
     },
     {
-      "name": "Design Tokens / colors",
-      "path": "packages/strapi-design-system/src/themes/colors.js",
+      "name": "Design Tokens / light colors",
+      "path": "packages/strapi-design-system/src/themes/lightTheme/light-colors.js",
       "filter": {
         "types": ["color"]
       },
@@ -71,7 +71,54 @@
               "shadowFormat": "string"
             },
             "formatConfig": {
-              "jssObjectName": "colorTokenObject",
+              "jssObjectName": "lightColorTokenObject",
+              "exportDefault": false,
+              "tabWidth": 2,
+              "singleQuote": true
+            }
+          }
+        }
+      ]
+    },
+    {
+      "name": "Design Tokens / dark colors",
+      "path": "packages/strapi-design-system/src/themes/darkTheme/dark-colors.js",
+      "filter": {
+        "types": ["color"]
+      },
+      "parsers": [
+        {
+          "name": "filter",
+          "options": {
+            "key": "name",
+            "regex": {
+              "pattern": "Dark mode/",
+              "flags": "g"
+            }
+          }
+        },
+        {
+          "name": "replace-string",
+          "options": {
+            "keys": ["name"],
+            "regex": {
+              "pattern": "Dark mode/",
+              "flags": "g"
+            },
+            "trim": true
+          }
+        },
+        {
+          "name": "to-jss",
+          "options": {
+            "formatName": "camelCase",
+            "formatTokens": {
+              "colorFormat": "hex6",
+              "fontSizeUnit": "px",
+              "shadowFormat": "string"
+            },
+            "formatConfig": {
+              "jssObjectName": "darkColorTokenObject",
               "exportDefault": false,
               "tabWidth": 2,
               "singleQuote": true

README.md

@@ -20,7 +20,7 @@
   </a>
 </p>
 
-# Welcome! 👋
+# Welcome! 👋👋👋
 
 Strapi Design System provides guidelines and tools to help anyone make Strapi's contributions more cohesive and to build plugins more efficiently.
 
@@ -29,11 +29,11 @@ Strapi Design System provides guidelines and tools to help anyone make Strapi's
 Install Strapi Design System and its peer dependencies:
 
 ```sh
-$ yarn add @strapi/design-system @strapi/icons styled-components react-router-dom
+$ yarn add @strapi/design-system @strapi/icons styled-components
 
 # or
 
-$ npm i @strapi/design-system @strapi/icons styled-components react-router-dom
+$ npm i @strapi/design-system @strapi/icons styled-components
 ```
 
 ## Usage

packages/strapi-design-system/.gitignore

@@ -1,4 +1,6 @@
 node_modules
 dist
 storybook-static
-.DS_Store
+.DS_Store
+test-results/
+playwright-report/

packages/strapi-design-system/.storybook/preview.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { parse } from 'qs';
 import { ThemeProvider } from '../src/ThemeProvider';
 import { VisuallyHidden } from '../src/VisuallyHidden';
-import { lightTheme } from '../src/themes/light-theme';
+import { Box } from '../src/Box';
+import { lightTheme } from '../src/themes/lightTheme';
+import { darkTheme } from '../src/themes/darkTheme';
 
 export const parameters = {
   options: {
@@ -14,18 +16,23 @@ export const parameters = {
 };
 
 export const decorators = [
-  (Story) => (
-    <MemoryRouter>
-      <ThemeProvider theme={lightTheme}>
-        <main>
-          <VisuallyHidden>
-            {/* Necessary in order to prevent axe core from providing errors on main / heading */}
-            <h1>Storybook story</h1>
-          </VisuallyHidden>
+  (Story) => {
+    const themeQueryURL = parse(document.location.search).theme;
 
-          <Story />
-        </main>
-      </ThemeProvider>
-    </MemoryRouter>
-  ),
+    return (
+      <>
+        <ThemeProvider theme={themeQueryURL === 'dark' ? darkTheme : lightTheme}>
+          <main>
+            <VisuallyHidden>
+              {/* Necessary in order to prevent axe core from providing errors on main / heading */}
+              <h1>Storybook story</h1>
+            </VisuallyHidden>
+            <Box background={themeQueryURL === "dark" ? 'neutral100' : 'neutral0'} height="100%" padding={2}>
+              <Story />
+            </Box>
+          </main>
+        </ThemeProvider>
+      </>
+    )
+  },
 ];

packages/strapi-design-system/codemod/playwright_runner_test_files.js

@@ -0,0 +1,58 @@
+// jscodeshift can take a parser, like "babel", "babylon", "flow", "ts", or "tsx"
+// Read more: https://github.com/facebook/jscodeshift#parser
+export const parser = 'babel';
+
+// Press ctrl+space for code completion
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  let result;
+
+  const importPlaywright = j.importDeclaration(
+    [j.importSpecifier(j.identifier('test'))],
+    j.literal('@playwright/test'),
+  );
+  const imports = root.find(j.ImportDeclaration);
+  const importsLength = imports.length;
+
+  if (importsLength) {
+    j(imports.at(importsLength - 1).get()).insertAfter(importPlaywright);
+  } else {
+    root.get().node.program.body.unshift(importPlaywright);
+  }
+
+  const newAsyncArrowFunction = (params, body) => {
+    const arrowFunc = j.arrowFunctionExpression(params, body);
+    arrowFunc.async = true;
+    return arrowFunc;
+  };
+
+  result = root
+    .find(j.ArrowFunctionExpression)
+    .forEach((path) => {
+      if (path.value.async) {
+        j(path).replaceWith(
+          newAsyncArrowFunction(
+            [{ type: 'ObjectPattern', properties: [{ type: 'Identifier', name: 'page' }] }],
+            path.value.body,
+          ),
+        );
+      }
+    })
+    .toSource();
+
+  result = root
+    .find(j.Identifier)
+    .forEach((path) => {
+      if (['describe', 'beforeEach', 'afterEach', 'beforeAll', 'afterAll'].includes(path.node.name)) {
+        j(path).replaceWith(j.identifier('test.' + path.node.name));
+      }
+      if (path.node.name == 'it') {
+        j(path).replaceWith(j.identifier('test'));
+      }
+    })
+    .toSource();
+
+  return result;
+}

packages/strapi-design-system/jest.e2e.js

@@ -9,6 +9,7 @@
     "@babel/preset-env": "^7.13.0",
     "@babel/preset-react": "^7.12.13",
     "@figspec/react": "^0.1.5",
+    "@playwright/test": "^1.19.1",
     "@storybook/addon-actions": "^6.4.0",
     "@storybook/addon-essentials": "^6.4.0",
     "@storybook/addon-links": "^6.4.0",
@@ -25,17 +26,14 @@
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
-    "expect-playwright": "^0.3.3",
     "intl": "^1.2.5",
     "jest": "^26.6.3",
-    "jest-playwright-preset": "^1.5.2",
     "jest-styled-components": "^7.0.4",
-    "playwright": "^1.18.0",
     "prettier": "^2.2.1",
+    "qs": "^6.10.3",
     "react": "^17.0.1",
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
     "styled-components": "^5.2.1",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.5.0"
@@ -44,7 +42,6 @@
     "@strapi/icons": "^0.0.1-alpha.73",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
     "styled-components": "^5.2.1"
   },
   "dependencies": {
@@ -66,10 +63,10 @@
     "storybook": "start-storybook -p 6006",
     "test": "jest -c jest.config.js",
     "test:watch": "jest -c jest.config.js --watchAll",
-    "test:e2e": "jest -c jest.e2e.js",
+    "test:e2e": "playwright test",
+    "test:e2e:ci": "cross-env CI=true playwright test",
     "test:e2e:watch": "jest -c jest.e2e.js --watchAll",
-    "test:e2e:debug": "cross-env PWDEBUG=1 jest -c jest.e2e.js",
-    "test:e2e:ci": "jest -c jest.e2e.js"
+    "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
   "gitHead": "bf52e690f743703a47f768ba83ebff55a3a12795"
 }

packages/strapi-design-system/package.json

@@ -0,0 +1,39 @@
+const { devices } = require('@playwright/test');
+
+const config = {
+  testMatch: '**/__tests__/*.e2e.js',
+  // Forbid test.only on CI
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  use: {
+    baseURL: 'http://localhost:6006',
+    headless: true,
+    contextOptions: {
+      locale: 'en-US',
+    },
+    actionTimeout: 0,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+  ],
+};
+
+module.exports = config;