LSPAY-34879: helios theme

.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

@@ -6,6 +6,8 @@ jobs:
     name: Run visual regression tests with chromatic (label triggered)
     if: ${{ contains(github.event.pull_request.labels.*.name, 'snapshot') }}
     runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - uses: actions/checkout@v2
         with:
@@ -16,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') }}

.github/workflows/chromatic.yml

@@ -10,6 +10,8 @@ jobs:
   snapshot:
     name: Run visual regression tests with chromatic
     runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - uses: actions/checkout@v2
         with:
@@ -20,8 +22,8 @@ jobs:
       - name: Setup node
         uses: actions/[email protected]
         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

@@ -9,6 +9,8 @@ jobs:
   publish:
     name: Publish
     runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - uses: actions/checkout@v1
       - name: Dump GitHub context
@@ -21,9 +23,9 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: '${{ steps.nvm.outputs.nvmrc }}'
-          registry-url: https://registry.npmjs.org/
-      - uses: actions/cache@v1
+          node-version: "${{ steps.nvm.outputs.nvmrc }}"
+          registry-url: https://npm.pkg.github.com
+      - uses: actions/cache@v4
         with:
           path: ~/.cache/yarn
           key: ${{ runner.OS }}-yarn-cache-v1-${{ hashFiles('**/yarn.lock') }}
@@ -35,5 +37,3 @@ jobs:
         run: yarn bootstrap
       - name: Publish
         run: yarn lerna:publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.github/workflows/publish-mainline.yml

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

.github/workflows/test.yml

@@ -3,13 +3,15 @@ name: Test
 on:
   push:
     branches:
-      - '**'
+      - "**"
     tags-ignore:
-      - '**'
+      - "**"
 jobs:
   build:
     name: Test, lint, typecheck
     runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - uses: actions/checkout@master
       - name: Read .nvmrc
@@ -18,8 +20,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

.npmrc

@@ -1,3 +1,4 @@
 init-author-name=Lightspeed
 init-author-url=https://lightspeedhq.com
-registry=https://registry.npmjs.org/
+@lightspeed:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

.nvmrc

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

.storybook/addons/theme-switcher/register.js

@@ -44,6 +44,18 @@ const ThemeSwitcher = () => {
           />
           Lightspeed (Old theme)
         </label>
+        <br />
+        <label htmlFor="helioscolors">
+          <input
+            type="radio"
+            value="helios"
+            id="helioscolors"
+            name="flame-theme"
+            onChange={() => onChange('helios')}
+            checked={state.selectedTheme === 'helios'}
+          />
+          Helios
+        </label>
       </fieldset>
     </div>
   );

.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,6 @@
+nodeLinker: node-modules
+
+npmScopes:
+  lightspeed:
+    npmAuthToken: '${GITHUB_TOKEN}'
+    npmRegistryServer: 'https://npm.pkg.github.com'

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-34879"],
       "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/*"]