LSPAY-33449: React18 typings

.eslintrc.js

@@ -16,6 +16,8 @@ module.exports = {
     // See https://github.com/lightspeedretail/web-tools/issues/65
     '@typescript-eslint/ban-types': 'error',
     'jest/valid-describe': 'off',
+    // Allow css prop from Emotion v11
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
   },
   overrides: [
     {
@@ -24,6 +26,12 @@ module.exports = {
         'import/no-extraneous-dependencies': 'off',
       },
     },
+    {
+      files: ['**/*.test.tsx', '**/*.test.ts', '**/__tests__/*.tsx', '**/__tests__/*.ts'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
   ],
   settings: {
     // Using `export * ...` does not work with eslint-plugin-import and makes ESLint trips,

.github/workflows/chromatic-label.yml

@@ -16,8 +16,8 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: '${{ steps.nvm.outputs.nvmrc }}'
-      - uses: actions/cache@v1
+          node-version: "${{ steps.nvm.outputs.nvmrc }}"
+      - uses: actions/cache@v4
         with:
           path: ~/.cache/yarn
           key: ${{ runner.OS }}-yarn-cache-v1-${{ hashFiles('**/yarn.lock') }}

.github/workflows/chromatic.yml

@@ -20,8 +20,8 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v1.1.1
         with:
-          node-version: '${{ steps.nvm.outputs.nvmrc }}'
-      - uses: actions/cache@v1
+          node-version: "${{ steps.nvm.outputs.nvmrc }}"
+      - uses: actions/cache@v4
         with:
           path: ~/.cache/yarn
           key: ${{ runner.OS }}-yarn-cache-v1-${{ hashFiles('**/yarn.lock') }}

.github/workflows/publish-lerna.yml

@@ -21,9 +21,9 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: '${{ steps.nvm.outputs.nvmrc }}'
+          node-version: "${{ steps.nvm.outputs.nvmrc }}"
           registry-url: https://registry.npmjs.org/
-      - uses: actions/cache@v1
+      - uses: actions/cache@v4
         with:
           path: ~/.cache/yarn
           key: ${{ runner.OS }}-yarn-cache-v1-${{ hashFiles('**/yarn.lock') }}

.github/workflows/publish-mainline.yml

@@ -21,9 +21,9 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: '${{ steps.nvm.outputs.nvmrc }}'
+          node-version: "${{ steps.nvm.outputs.nvmrc }}"
           registry-url: https://registry.npmjs.org/
-      - uses: actions/cache@v1
+      - uses: actions/cache@v4
         with:
           path: ~/.cache/yarn
           key: ${{ runner.OS }}-yarn-cache-v1-${{ hashFiles('**/yarn.lock') }}
@@ -36,6 +36,6 @@ jobs:
       - name: Publish
         run: |
           cd packages/flame
-          node ./scripts/check-changed.js && yarn build && yarn build:docgen && npm publish dist --quiet || exit 0
+          node ./scripts/check-changed.js && yarn build && yarn build:docgen && npm publish ./dist --quiet || exit 0
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.github/workflows/test.yml

@@ -3,9 +3,9 @@ name: Test
 on:
   push:
     branches:
-      - '**'
+      - "**"
     tags-ignore:
-      - '**'
+      - "**"
 jobs:
   build:
     name: Test, lint, typecheck
@@ -18,8 +18,8 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: '${{ steps.nvm.outputs.nvmrc }}'
-      - uses: actions/cache@v1
+          node-version: "${{ steps.nvm.outputs.nvmrc }}"
+      - uses: actions/cache@v4
         with:
           path: ~/.cache/yarn
           key: ${{ runner.OS }}-yarn-cache-v1-${{ hashFiles('**/yarn.lock') }}

.gitignore

@@ -8,3 +8,4 @@ dist/
 .DS_Store
 docgen-build
 .env
+.yarn

.nvmrc

@@ -1 +1 @@
-10.16.0
+20

.storybook/main.js

@@ -16,12 +16,17 @@ const babelOptions = {
         debug: false,
       },
     ],
-    '@babel/preset-react',
-    '@emotion/babel-preset-css-prop',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        importSource: '@emotion/react',
+      },
+    ],
   ],
   plugins: [
     '@babel/plugin-proposal-object-rest-spread',
-    'emotion',
+    '@emotion/babel-plugin',
     // need to resolve the dependency differently in storybook.
     // It's an issue on their side where they use an old version of
     // react-popper which magically clashes with ours

.storybook/preview.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Global } from '@emotion/core';
+import { Global } from '@emotion/react';
 import { addDecorator, addParameters } from '@storybook/react';
 import { FlameGlobalStyles, FlameTheme, themePicker } from '../packages/flame/src/Core/index.tsx';
 import './stories.scss';

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -98,7 +98,7 @@ If you have Emotion already installed and you would like to use the theme values
 ```jsx
 import React from 'react';
 import { FlameTheme, lightTheme } from '@lightspeed/flame/Core';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from '@emotion/react';
 
 class App extends React.Component {
   render() {

babel.config.js

@@ -7,15 +7,26 @@ module.exports = {
       },
     ],
     '@babel/preset-typescript',
-    '@babel/preset-react',
-    '@emotion/babel-preset-css-prop',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        importSource: '@emotion/react',
+      },
+    ],
   ],
-  plugins: ['@babel/plugin-proposal-object-rest-spread'],
+  plugins: ['@babel/plugin-proposal-object-rest-spread', '@emotion/babel-plugin'],
   env: {
     test: {
       presets: [
         '@babel/preset-typescript',
-        '@babel/preset-react',
+        [
+          '@babel/preset-react',
+          {
+            runtime: 'automatic',
+            importSource: '@emotion/react',
+          },
+        ],
         [
           '@babel/preset-env',
           {
@@ -26,17 +37,19 @@ module.exports = {
             },
           },
         ],
-        '@emotion/babel-preset-css-prop',
       ],
+      plugins: ['@emotion/babel-plugin'],
     },
     // for ESM builds
     production: {
-      plugins: ['transform-react-remove-prop-types'],
+      plugins: ['transform-react-remove-prop-types', '@emotion/babel-plugin'],
       presets: [
+        '@babel/preset-typescript',
         [
-          '@emotion/babel-preset-css-prop',
+          '@babel/preset-react',
           {
-            sourceMap: false,
+            runtime: 'automatic',
+            importSource: '@emotion/react',
           },
         ],
         [
@@ -45,23 +58,23 @@ module.exports = {
             modules: false,
           },
         ],
-        '@babel/preset-typescript',
       ],
     },
     cjs: {
-      plugins: ['transform-react-remove-prop-types'],
+      plugins: ['transform-react-remove-prop-types', '@emotion/babel-plugin'],
       presets: [
         '@babel/preset-typescript',
         [
-          '@babel/preset-env',
+          '@babel/preset-react',
           {
-            modules: 'commonjs',
+            runtime: 'automatic',
+            importSource: '@emotion/react',
           },
         ],
         [
-          '@emotion/babel-preset-css-prop',
+          '@babel/preset-env',
           {
-            sourceMap: false,
+            modules: 'commonjs',
           },
         ],
       ],

jest.setup.js

@@ -1,11 +1,9 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import '@testing-library/jest-dom';
 import { cleanup } from '@testing-library/react';
-import * as emotion from 'emotion';
-import { createSerializer, matchers as emotionMatchers } from 'jest-emotion';
+import { matchers } from '@emotion/jest';
 
-expect.addSnapshotSerializer(createSerializer(emotion));
-expect.extend(emotionMatchers);
+expect.extend(matchers);
 
 afterEach(cleanup);
 

lerna.json

@@ -4,7 +4,7 @@
   "version": "independent",
   "command": {
     "publish": {
-      "allowBranch": ["master", "next"],
+      "allowBranch": ["master", "next", "LSPAY-33449"],
       "ignoreChanges": [
         "**/story.js",
         "**/story.tsx",
@@ -18,7 +18,8 @@
         "**/flame-sidebar/story/**",
         "**/packages/framerx/**",
         "packages/flame/scripts/check-changed.js"
-      ]
+      ],
+      "registry": "https://npm.pkg.github.com/"
     }
   },
   "packages": ["packages/*"]

package.json

@@ -8,6 +8,7 @@
   "bugs": {
     "url": "https://github.com/lightspeed/flame/issues"
   },
+  "packageManager": "yarn@1.22.22",
   "workspaces": [
     "packages/*"
   ],
@@ -19,7 +20,7 @@
     "test:ci": "yarn test --coverage --runInBand && codecov",
     "typecheck": "tsc",
     "precommit": "lint-staged",
-    "dev": "yarn && concurrently --kill-others 'yarn dev:tokens' 'yarn dev:themes' 'yarn start-storybook -p 6006'",
+    "dev": "yarn && concurrently --kill-others 'yarn dev:tokens' 'yarn dev:themes' 'yarn start-storybook -p 6007'",
     "dev:themes": "chokidar './packages/flame/themes/**/*.ts' -c 'lerna run --scope @lightspeed/flame build:themes'",
     "dev:tokens": "chokidar './packages/flame-tokens/src/*.ts' -c 'lerna run --scope @lightspeed/flame-tokens prepublish'",
     "build-storybook": "yarn bootstrap && build-storybook -c .storybook",
@@ -34,15 +35,15 @@
     "percy": "build-storybook -c .storybook && percy-storybook --widths=1280"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.9",
-    "@emotion/styled": "^10.0.9",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/theme-get": "5.0.16",
-    "emotion-theming": "^10.0.7",
     "polished": "^2.3.0",
     "prop-types": "^15.6.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "styled-system": "^5.0.16"
   },
   "devDependencies": {
@@ -53,30 +54,31 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/babel-preset-css-prop": "^10.0.14",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/jest": "^11.11.0",
     "@lightspeed/browserslist-config": "^0.1.2",
     "@lightspeed/config-prettier": "^0.1.2",
     "@lightspeed/config-typescript": "^0.2.0",
     "@lightspeed/eslint-config": "^1.1.1",
     "@percy/storybook": "^3.3.0",
-    "@storybook/addon-actions": "6.1.15",
-    "@storybook/addon-docs": "6.1.15",
-    "@storybook/addons": "6.1.15",
-    "@storybook/api": "^6.1.15",
-    "@storybook/components": "6.1.15",
-    "@storybook/react": "6.1.15",
+    "@storybook/addon-actions": "6.5.16",
+    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addons": "6.5.16",
+    "@storybook/api": "^6.5.16",
+    "@storybook/components": "6.5.16",
+    "@storybook/react": "6.5.16",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.0.5",
     "@types/classnames": "^2.2.7",
     "@types/jest": "^25.2.3",
     "@types/lodash": "^4.14.123",
     "@types/luxon": "^1.15.2",
-    "@types/react": "^16.8.23",
+    "@types/minimatch": "^3.0.3",
+    "@types/react": "^18.3.26",
     "@types/react-test-renderer": "^16.8.3",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.0.4",
-    "babel-plugin-emotion": "^10.0.0",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
@@ -95,28 +97,35 @@
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.0.1",
-    "jest-emotion": "^10.0.0",
     "lerna": "^3.10.2",
     "lint-staged": "^7.1.2",
     "plop": "^2.4.0",
     "postcss": "^6.0.17",
     "postcss-import": "^11.1.0",
     "postcss-loader": "^2.1.5",
     "prettier": "^1.16.1",
-    "react-test-renderer": "^16.8.6",
     "raw-loader": "4.0.1",
+    "react-docgen-typescript": "~2.2.2",
+    "react-test-renderer": "^18.3.1",
     "sass": "^1.14.3",
     "sass-loader": "^7.1.0",
-    "storybook-readme": "^5.0.8",
     "style-loader": "^0.21.0",
-    "typescript": "^3.5.3",
+    "typescript": "^4.9.5",
     "webpack": "^4.41.2",
     "webpack-cli": "^2.1.3",
     "yargs": "^11.0.0"
   },
   "resolutions": {
-    "@types/react": "16.8.23",
-    "react-docgen-typescript": "1.18.0"
+    "@types/react": "18.3.26",
+    "@types/react-dom": "^18.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-docgen-typescript": "~2.2.2",
+    "@emotion/react": "^11.11.0",
+    "@emotion/core": "npm:@emotion/react@^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@emotion/styled-base": "npm:@emotion/styled@^11.11.0",
+    "emotion-theming": "npm:@emotion/react@^11.11.0"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx,json,css,scss,md}": [