🎉 Components Update 3.0.0

🎉 Components Update

Author: stuarthendren

.github/workflows/main.yml

@@ -0,0 +1,42 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Begin CI...
+        uses: actions/checkout@v2
+
+      - name: Use Node 12
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - name: Use cached node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            nodeModules-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        env:
+          CI: true
+
+      - name: Lint
+        run: yarn lint
+        env:
+          CI: true
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+        env:
+          CI: true
+
+      - name: Build
+        run: yarn build
+        env:
+          CI: true

.npmignore

@@ -3,7 +3,9 @@
 **/webpack.config.js
 node_modules
 src
+stories
 example
 lib
 lib-esm
 _bundles
+tsdx.config.js

.storybook/config.tsx

@@ -0,0 +1,29 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.(ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    './.storybook/register.js'
+  ],
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true
+          }
+        },
+        {
+          loader: require.resolve('react-docgen-typescript-loader')
+        }
+      ]
+    })
+
+    config.resolve.extensions.push('.ts', '.tsx')
+
+    return config
+  }
+}

.storybook/main.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons'
+import committedTheme from './theme.js'
+
+addons.setConfig({
+  theme: committedTheme,
+  showPanel: false
+})

.storybook/manager.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { addParameters, addDecorator } from '@storybook/react'
+import committedTheme from './theme.js'
+
+import { ThemeProvider } from '../src'
+
+addDecorator(storyFn => <ThemeProvider>{storyFn()}</ThemeProvider>)
+addParameters({
+  options: {
+    // Currently require here aswell as in manager.js - should be able to remove in 6.0
+    theme: committedTheme,
+    storySort: (a, b) => {
+      if (a[0] === b[0]) {
+        return 0
+      }
+      if (
+        a[1].parameters &&
+        a[1].parameters.order &&
+        b[1].parameters &&
+        b[1].parameters.order
+      ) {
+        return a[1].parameters.order - b[1].parameters.order
+      } else {
+        return a[1].id.localeCompare(b[1].id, { numeric: true })
+      }
+    }
+  }
+})

.storybook/preview.js

@@ -1,12 +1,7 @@
-import '@storybook/addon-docs/register'
-import '@storybook/addon-actions/register'
-import '@storybook/addon-links/register'
-import '@storybook/addon-a11y/register'
 import { STORIES_CONFIGURED, STORY_MISSING } from '@storybook/core-events'
+import { addons } from '@storybook/addons'
 
-import addonAPI from '@storybook/addons'
-
-addonAPI.register('committed/components', storybookAPI => {
+addons.register('committed/components', storybookAPI => {
   storybookAPI.on(STORIES_CONFIGURED, (kind, story) => {
     if (storybookAPI.getUrlState().path === '/story/*') {
       storybookAPI.selectStory('Design System', 'Introduction')

.storybook/addons.js .storybook/register.js.storybook/addons.js renamed to .storybook/register.js

@@ -0,0 +1,34 @@
+import { create } from '@storybook/theming'
+import lightImage from '../public/images/Committed-Colour-512px.png'
+import darkImage from '../public/images/Committed-Yellow-Trans-512px.png'
+
+// The default color scheme is light so unless the preferred color
+// scheme is set to dark we always want to use the light theme
+// from '@storybook/theming/src/utils'
+export const getPreferredColorScheme = () => {
+  if (!window || !window.matchMedia) return 'light'
+
+  const isDarkThemePreferred = window.matchMedia('(prefers-color-scheme: dark)')
+    .matches
+  if (isDarkThemePreferred) return 'dark'
+
+  return 'light'
+}
+
+console.log(lightImage)
+console.log(darkImage)
+
+export default create({
+  colorPrimary: '#ffbb00',
+  colorSecondary: '#4098D7',
+
+  // Typography
+  fontBase:
+    '-apple-system, BlinkMacSystemFont, "San Francisco", Roboto,  "Segoe UI", "Helvetica Neue"', // fonts.defaultFonts.typography.fontFamily,
+  fontCode:
+    '"SFMono-Regular", Consolas, "Liberation Mono", "Andale Mono", "Ubuntu Mono", Menlo, Courier, monospace', // fonts.defaultFonts.monospace.fontFamily,
+
+  brandTitle: 'Committed Components',
+  brandUrl: '/',
+  brandImage: getPreferredColorScheme() == 'light' ? lightImage : darkImage
+})