Flame v2 (#99)

* Add AlertInCard component. Auto color for Alert icons. (#82) * Add AlertInCard component. Auto color for Alert icons. * Update Alert/readme.md * Update CHANGELOG.md * Remove useless generic in getTheme * tiny fixes to match design specs * Update typing ignores * design feedback. remove useless typing * hush now codecov * Force add DSD specific icons if prop not filled * PR feedback Co-authored-by: maartenafink <[email protected]> * [Security] Bump websocket-extensions from 0.1.3 to 0.1.4 (#89) Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4. **This update includes a security fix.** - [Release notes](https://github.com/faye/websocket-extensions-node/releases) - [Changelog](https://github.com/faye/websocket-extensions-node/blob/master/CHANGELOG.md) - [Commits](faye/websocket-extensions-node@0.1.3...0.1.4) Signed-off-by: dependabot-preview[bot] <[email protected]> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> * ForwardRef on Remaining Base Components (#75) * Forward ref on remaining base components * adjust changelog Co-authored-by: Guillaume Lambert <[email protected]> * Toaster component (#86) * Add toaster component WIP * Update jest and testing-library. Tests for toaster * Update toaster readme * remove dangling TODO from toaster * Add better responsiveness for Toaster * Restrict Toaster types. Bypass click events for ToasterContainer * Update changelog. Add notice that we are using an external lib * Remove unused typing file * Spread rest on Toaster component to auto-pause timer * Update toaster behaviour to match specs * Supress warnings for logs. Fix toaster example setup * less jarring height transition * fixing text alignment * Set minHeight for container at 60px * Test out Percy with animations Co-authored-by: maartenafink <[email protected]> Co-authored-by: Guillaume Lambert <[email protected]> * Move storybook down to package level. Update to 5.3 (#92) * port over previous tokens stories. Adapt for flame * Move dependencies to relevant package * disable css modules as its not really relevant anymore * update popover and tooltip story styling. sort top level sections * skip theme percy snapshots as per old implementation * Remove dead deps. Bubble ExampleBox from popover and tooltip * Move stories/ into flame/.storybook. Cleanup useless test * Fix percy command * Fix weird regression due to injecting components in style tags * Display themeGet and css for colours instead of classnames * Fix spaced group * Colours -> Colors * remove superflous react devDep * leverage top level packages Co-authored-by: Guillaume Lambert <[email protected]> * cleanup of top level storybook. Fix typing (#98) * Allow next to be published * Fix tests for alert. Move publish config to flame * Flush superfluous version due to merge * Fix typing issue in Dialog/Story * [Security] Bump acorn from 6.4.0 to 6.4.1 (#97) Bumps [acorn](https://github.com/acornjs/acorn) from 6.4.0 to 6.4.1. **This update includes security fixes.** - [Release notes](https://github.com/acornjs/acorn/releases) - [Commits](acornjs/acorn@6.4.0...6.4.1) Signed-off-by: dependabot-preview[bot] <[email protected]> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Xavier Drdak <[email protected]> * Publish - @lightspeed/[email protected] * adjust publish scripts (#100) * Dummy changes to trigger release * Publish - @lightspeed/[email protected] * Adjust line-height in Alert to be normal. (#101) * Adjust lineheight in Alert to be normal. * Update changelog * Adjust changelog to better sync up with release of RC * Publish - @lightspeed/[email protected] * Fix code generation typing issue in build-themes * Publish - @lightspeed/[email protected] * Fix Alert and AlertInCard typing. Allow empty title (#102) * Fix Alert and AlertInCard typing. Allow empty title * Update changelog * Publish - @lightspeed/[email protected] * Use react popper hooks (#104) * Leverage react-popper usePopper hook * remove old popper dependency * update changelog * fix lint * Publish - @lightspeed/[email protected] * Force Update active poppers. Fix clickOutside handler (#105) * add forceUpdate to Dropdown and Popover * Replace forceUpdate with update. Fix clickOutside hook * Update CHANGELOG.md * Set higher zIndex for ToasterContainer (#107) * set higher zIndex for ToasterContainer * Update CHANGELOG.md * Publish - @lightspeed/[email protected] * Add next/Badge component (#106) * add next/Badge component * fix colors for oldskool theme * Update CHANGELOG.md * Let percy snapshot next * Use variant prop instead of type for badge * Update CHANGELOG.md * Adjust padding based on design feedback * Fix storybook publishing Co-authored-by: Guillaume Lambert <[email protected]> * Publish - @lightspeed/[email protected] * Smoothed out border-radius for next/Badge (#108) * Smoothed out border-radius for next/Badge * Update CHANGELOG.md * Export typing for next/Badge (#110) * export typing for next/Badge * Update CHANGELOG.md * Create (S)CSS-flavored Flame implementation package (#109) * Port sass as is into flame * Apply suggestions from code review Co-authored-by: Guillaume Lambert <[email protected]> * Update css README docs. Remove media queries css as this is out of scope * Remove private flag from flame-css Co-authored-by: Guillaume Lambert <[email protected]> * Publish - @lightspeed/[email protected] - @lightspeed/[email protected] * Move Storybook back to root again (#111) * move everything back to root * strip magic from storybook-components. Adjust root package scripts * Mute typings for withReadme * Fix netlify build path * Fix storybook decorator injection condition * Add chromatic workflow (#112) * Remove percy. Adjust old percy stuff for chromatic (#114) * Adjust chromatic workflow * Use tags as target for publish action. Snapshot label for visual diffing (#115) * Target tags for action. Snapshot on label * Pushes on master will trigger a snapshot * Add "type=text" to input for convenience (#117) * Publish - @lightspeed/[email protected] - @lightspeed/[email protected] * Adjust publishing scripts. Dummy changes to trigger publish * Publish - @lightspeed/[email protected] Co-authored-by: maartenafink <[email protected]> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Guillaume Lambert <[email protected]>
lightspeed · Jul 17, 2020 · bd71884 · bd71884
1 parent e53ae52
commit bd71884
Show file tree

Hide file tree

Showing 148 changed files with 11,585 additions and 4,581 deletions.
diff --git a/.github/workflows/chromatic-label.yml b/.github/workflows/chromatic-label.yml
@@ -0,0 +1,31 @@
+name: Chromatic on label
+on: [pull_request]
+
+jobs:
+  snapshot:
+    name: Run visual regression tests with chromatic (label triggered)
+    if: ${{ contains(github.event.pull_request.labels.*.name, 'snapshot') }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Read .nvmrc
+        run: echo ::set-output name=nvmrc::$(cat .nvmrc)
+        id: nvm
+      - name: Setup node
+        uses: actions/[email protected]
+        with:
+          node-version: '${{ steps.nvm.outputs.nvmrc }}'
+      - uses: actions/cache@v1
+        with:
+          path: ~/.cache/yarn
+          key: ${{ runner.OS }}-yarn-cache-v1-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-cache-v1-
+      - name: Install
+        run: yarn install --frozen-lockfile && yarn bootstrap
+      - uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/.github/workflows/percy-snapshot.yml → .github/workflows/chromatic.yml b/.github/workflows/percy-snapshot.yml → .github/workflows/chromatic.yml
@@ -1,20 +1,19 @@
-name: Percy
+name: Chromatic
 on:
+  pull_request:
+    branches:
+      - master
   push:
     branches:
-      - '**'
-    tags-ignore:
-      - '**'
+      - master
 jobs:
   snapshot:
-    name: Run visual regression tests
+    name: Run visual regression tests with chromatic
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@master
-      - name: Dump GitHub context
-        run: echo "$GITHUB_CONTEXT"
-        env:
-          GITHUB_CONTEXT: ${{ toJson(github) }}
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
       - name: Read .nvmrc
         run: echo ::set-output name=nvmrc::$(cat .nvmrc)
         id: nvm
@@ -30,9 +29,7 @@ jobs:
             ${{ runner.os }}-yarn-cache-v1-
       - name: Install
         run: yarn install --frozen-lockfile && yarn bootstrap
-      - name: Percy
-        uses: percy/[email protected]
+      - uses: chromaui/action@v1
         with:
-          custom-command: 'yarn percy'
-        env:
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/.github/workflows/publish-lerna.yml b/.github/workflows/publish-lerna.yml
@@ -2,6 +2,8 @@ on:
   push:
     branches:
       - master
+      - next
+
 name: Publish lerna
 jobs:
   publish:

diff --git a/.github/workflows/publish-mainline.yml b/.github/workflows/publish-mainline.yml
@@ -2,6 +2,8 @@ on:
   push:
     branches:
       - master
+      - next
+
 name: Publish mainline
 jobs:
   publish:

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -11,29 +11,29 @@ jobs:
     name: Test, lint, typecheck
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@master
-    - name: Read .nvmrc
-      run: echo ::set-output name=nvmrc::$(cat .nvmrc)
-      id: nvm
-    - name: Setup node
-      uses: actions/[email protected]
-      with:
-        node-version: '${{ steps.nvm.outputs.nvmrc }}'
-    - uses: actions/cache@v1
-      with:
-        path: ~/.cache/yarn
-        key: ${{ runner.OS }}-yarn-cache-v1-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.os }}-yarn-cache-v1-
-    - name: Install
-      run: yarn install --frozen-lockfile
-    - name: Bootstrap
-      run: yarn bootstrap
-    - name: Test
-      run: yarn test:ci
-      env:
-        CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-    - name: Lint
-      run: yarn lint
-    - name: Typecheck
-      run: yarn typecheck
+      - uses: actions/checkout@master
+      - name: Read .nvmrc
+        run: echo ::set-output name=nvmrc::$(cat .nvmrc)
+        id: nvm
+      - name: Setup node
+        uses: actions/[email protected]
+        with:
+          node-version: '${{ steps.nvm.outputs.nvmrc }}'
+      - uses: actions/cache@v1
+        with:
+          path: ~/.cache/yarn
+          key: ${{ runner.OS }}-yarn-cache-v1-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-cache-v1-
+      - name: Install
+        run: yarn install --frozen-lockfile
+      - name: Bootstrap
+        run: yarn bootstrap
+      - name: Test
+        run: yarn test:ci
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      - name: Lint
+        run: yarn lint
+      - name: Typecheck
+        run: yarn typecheck
diff --git a/.storybook/.babelrc b/.storybook/.babelrc
diff --git a/.storybook/addons.js b/.storybook/addons.js
diff --git a/.storybook/components/ExampleBox.d.ts b/.storybook/components/ExampleBox.d.ts
@@ -0,0 +1,5 @@
+interface ExampleBoxProps {
+  example: React.ReactNode;
+  content: React.ReactNode;
+}
+export const ExampleBox: React.FC<ExampleBoxProps>;
diff --git a/.storybook/components/ExampleBox.js b/.storybook/components/ExampleBox.js
@@ -0,0 +1,50 @@
+import React from 'react';
+
+const BoxColumn = ({ ...restProps }) => (
+  <div
+    style={{
+      display: 'inline-block',
+      width: '192px',
+      textAlign: 'center',
+    }}
+    className="fl-mb-2 fl-mr-2"
+    {...restProps}
+  />
+);
+
+const BoxExample = ({ ...restProps }) => (
+  <div
+    style={{
+      border: '1px solid #e1e4e5',
+      backgroundColor: '#f3f3f3',
+      borderTopLeftRadius: '.1875rem',
+      borderTopRightRadius: '.1875rem',
+    }}
+    className="fl-p-2"
+    {...restProps}
+  />
+);
+
+const BoxCode = ({ ...restProps }) => (
+  <div
+    style={{
+      padding: '.75rem',
+      borderBottomLeftRadius: '.1875rem',
+      borderBottomRightRadius: '.1875rem',
+      borderLeft: '1px solid #e1e4e5',
+      borderRight: '1px solid #e1e4e5',
+      borderBottom: '1px solid #e1e4e5',
+      background: '#fff',
+    }}
+    {...restProps}
+  />
+);
+
+const ExampleBox = ({ example, content }) => (
+  <BoxColumn>
+    <BoxExample>{example}</BoxExample>
+    <BoxCode>{content}</BoxCode>
+  </BoxColumn>
+);
+
+export { ExampleBox };
diff --git a/.storybook/components/SpacedGroup.d.ts b/.storybook/components/SpacedGroup.d.ts
@@ -0,0 +1,4 @@
+import { FlameFlexProps } from '../../packages/flame/src/Core';
+
+export interface SpacedGroupProps extends FlameFlexProps {}
+export const SpacedGroup: React.FC<SpacedGroupProps>;
diff --git a/stories/components/SpacedGroup.tsx → .storybook/components/SpacedGroup.js b/stories/components/SpacedGroup.tsx → .storybook/components/SpacedGroup.js
@@ -1,15 +1,9 @@
 import * as React from 'react';
 
-import { Box, Flex, FlameFlexProps } from '../../packages/flame/src/Core';
+import { Box, Flex } from '../../packages/flame/src/Core';
 
-export interface SpacedGroupProps extends FlameFlexProps {}
-const SpacedGroup: React.FC<SpacedGroupProps> = ({
-  flexDirection = 'row',
-  alignItems = 'center',
-  children,
-  ...restProps
-}) => {
-  const nextChildren = React.Children.map(children, (child: any, index) => {
+const SpacedGroup = ({ flexDirection = 'row', children, ...restProps }) => {
+  const nextChildren = React.Children.map(children, (child, index) => {
     if (flexDirection && flexDirection === 'column') {
       return <Box mt={index !== 0 ? 2 : undefined}>{child}</Box>;
     }

diff --git a/.storybook/components/Ul.d.ts b/.storybook/components/Ul.d.ts
@@ -0,0 +1 @@
+export const Ul: React.FC<React.ComponentProps<'ul'>>;
diff --git a/.storybook/components/Ul.js b/.storybook/components/Ul.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Ul = (...restProps) => (
+  <ul
+    style={{
+      listStyle: 'none',
+      margin: 'none',
+      padding: 'none',
+    }}
+    {...restProps}
+  />
+);
+
+export { Ul };
diff --git a/.storybook/empty.js b/.storybook/empty.js
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,90 @@
+const path = require('path');
+const atImport = require('postcss-import');
+const autoprefixer = require('autoprefixer');
+const sass = require('sass');
+const packageInfo = require('../package.json');
+
+module.exports = {
+  stories: [
+    '../packages/flame/src/**/story.tsx',
+    '../packages/flame-css/stories/*.stories.@(mdx|tsx)',
+  ],
+  addons: [
+    'storybook-readme/register',
+    '@storybook/addon-actions/register',
+    '@storybook/addon-docs',
+  ],
+  webpackFinal: config => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      loader: require.resolve('babel-loader'),
+      options: {
+        presets: [
+          '@babel/preset-typescript',
+          [
+            '@babel/preset-env',
+            {
+              targets: {
+                browsers: ['>0.25%', 'not op_mini all', 'not ie <= 10'],
+              },
+              debug: false,
+            },
+          ],
+          '@babel/preset-react',
+          '@emotion/babel-preset-css-prop',
+        ],
+        plugins: ['@babel/plugin-proposal-object-rest-spread', 'emotion'],
+      },
+    });
+    config.resolve.extensions.push('.ts', '.tsx');
+
+    config.module.rules.push({
+      test: /.scss$/,
+      use: [
+        {
+          loader: require.resolve('style-loader'),
+        },
+        {
+          loader: require.resolve('css-loader'),
+          options: {
+            sourceMap: false,
+
+            importLoaders: 2,
+          },
+        },
+        {
+          loader: require.resolve('postcss-loader'),
+          options: {
+            ident: 'postcss',
+            plugins: () => [
+              atImport(),
+              autoprefixer({ overrideBrowserslist: packageInfo.browserslist }),
+            ],
+          },
+        },
+        {
+          loader: require.resolve('sass-loader'),
+          options: {
+            implementation: sass,
+            includePaths: [path.resolve(__dirname, '../node_modules')],
+          },
+        },
+      ],
+    });
+
+    config.module.rules.push({
+      test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
+      loader: require.resolve('file-loader'),
+    });
+
+    // @TODO: Remove this hack to suppress verbose build output when upgrading to Storybook v5.
+    // Use `--silent` option instead for `build-storybook` and `start-storybook`:
+    // https://storybook.js.org/docs/configurations/cli-options/
+    //
+    // eslint-disable-next-line no-param-reassign
+    config.plugins = config.plugins.filter(
+      ({ constructor }) => constructor.name !== 'ProgressPlugin',
+    );
+    return config;
+  },
+};
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -8,4 +8,8 @@
       display: none;
     }
   }
+  html,
+  body {
+    font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
+  }
 </style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,8 @@ on: @@
       push:
         branches:
           - master
+          - next
     name: Publish lerna
     jobs:
       publish:
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const Ul: React.FC<React.ComponentProps<'ul'>>;