Merge pull request #177 from arturbien/beta

v3 release 🎉 🥳

.circleci/config.yml

@@ -0,0 +1,112 @@
+version: 2
+jobs:
+  install:
+    docker:
+      - image: 'circleci/node:latest'
+    working_directory: ~/repo
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - v1-npm-deps-{{ checksum "package-lock.json" }}
+            - v1-npm-deps-
+      - run:
+          name: 'Install dependencies'
+          command: npm ci
+      - save_cache:
+          key: v1-npm-deps-{{ checksum "package-lock.json" }}
+          paths:
+            - node_modules
+      - persist_to_workspace:
+          root: ~/repo
+          paths:
+            - node_modules
+  test:
+    docker:
+      - image: 'circleci/node:latest'
+    working_directory: ~/repo
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/repo
+      - run:
+          name: 'Tests'
+          command: npm run test:ci
+  build-library:
+    docker:
+      - image: 'circleci/node:latest'
+    working_directory: ~/repo
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/repo
+      - run:
+          name: 'Build library'
+          command: npm run build
+      - persist_to_workspace:
+          root: ~/repo
+          paths:
+            - dist
+  build-storybook:
+    docker:
+      - image: 'circleci/node:latest'
+    working_directory: ~/repo
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/repo
+      - run:
+          name: 'Build Storybook'
+          command: npm run build:storybook
+      - persist_to_workspace:
+          root: ~/repo
+          paths:
+            - storybook
+  deploy-library:
+    docker:
+      - image: 'circleci/node:latest'
+    working_directory: ~/repo
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/repo
+      - run:
+          name: 'Deploy via Semantic Release'
+          command: npm run semantic-release || true
+  deploy-storybook:
+    docker:
+      - image: 'circleci/node:latest'
+    working_directory: ~/repo
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/repo
+      - run:
+          name: 'Deploy Storybook'
+          command: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN
+workflows:
+  version: 2
+  build-and-deploy:
+    jobs:
+      - install
+      - test:
+          requires: 
+            - install
+      - build-library:
+          requires: 
+            - install
+      - build-storybook:
+          requires: 
+            - install
+      - deploy-library:
+          requires: 
+            - test
+            - build-library
+            - build-storybook
+      - deploy-storybook:
+          requires: 
+            - deploy-library
+          filters:
+            branches:
+              only:
+                - master

.codesandbox/ci.json

@@ -0,0 +1,4 @@
+{
+  "buildCommand": "build:prod",
+  "sandboxes": ["react95-template-xkfj0"]
+}

.env

@@ -0,0 +1 @@
+BROWSER=none

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     jest: true
   },
   rules: {
+    'import/no-unresolved': ['error', { ignore: ['react95'] }],
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
     'jsx-a11y/label-has-associated-control': [
@@ -20,6 +21,8 @@ module.exports = {
     ],
     'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }],
     'jsx-a11y/label-has-for': 'off',
-    'prettier/prettier': 'error'
+    'prettier/prettier': 'error',
+    'react/no-array-index-key': 'off',
+    'react/forbid-prop-types': 'off'
   }
 };

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "react95-storybook"
+  }
+}

.gitignore

@@ -8,9 +8,18 @@
 # testing
 /coverage
 
-# production
+# library build
+/cjs
+/esm
+/themes
+/images
+/fonts
 /dist
 
+# storybook
+/storybook
+/.firebase
+
 # misc
 .DS_Store
 .env.local
@@ -24,3 +33,7 @@ yarn-error.log*
 
 # JetBrains IDEs
 .idea/*
+
+# Docs
+.docz
+/docs/build

.storybook/config.js

@@ -1,39 +1,35 @@
-import { configure, addDecorator } from "@storybook/react";
-import { withInfo } from "@storybook/addon-info";
-import { withThemesProvider } from "storybook-addon-styled-component-theme";
+import { configure, addDecorator } from '@storybook/react';
+import { withThemesProvider } from 'storybook-addon-styled-component-theme';
+import themes from '../src/common/themes';
+import GlobalStyle from './decorators/globalStyle';
 
-import themes from "../src/components/common/themes";
+const {
+  original,
+  rainyDay,
+  vaporTeal,
+  theSixtiesUSA,
+  olive,
+  tokyoDark,
+  rose,
+  plum,
+  matrix,
+  travel,
+  ...otherThemes
+} = themes;
 
-import GlobalStyle from "./decorators/globalStyle";
+const reorderedThemes = {
+  original,
+  rainyDay,
+  vaporTeal,
+  theSixtiesUSA,
+  olive,
+  tokyoDark,
+  rose,
+  plum,
+  matrix,
+  travel,
+  ...otherThemes
+};
 
-const demoThemes = [
-  themes.default,
-  themes.lilacRoseDark,
-  themes.water,
-  themes.coldGray,
-  themes.violetDark
-];
-
-addDecorator(
-  withInfo({
-    inline: true,
-    header: false,
-    source: false,
-    maxPropsIntoLine: 1,
-    styles: stylesheet => ({
-      // Setting the style with a function
-      ...stylesheet,
-      table: {
-        background: "red"
-      }
-    })
-  })
-);
 addDecorator(GlobalStyle);
-addDecorator(withThemesProvider(demoThemes));
-
-const req = require.context("../src", true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-configure(loadStories, module);
+addDecorator(withThemesProvider(Object.values(reorderedThemes)));

.storybook/decorators/globalStyle.js

@@ -1,10 +1,28 @@
-import React from "react";
-import { createGlobalStyle } from "styled-components";
+import React from 'react';
+import { createGlobalStyle } from 'styled-components';
 
-import reset from "../../src/components/common/reset";
+import styleReset from '../../src/common/styleReset';
+// TODO is there a way to keep import paths consistent with what end user will get?
+import ms_sans_serif from '../../src/assets/fonts/dist/ms_sans_serif.woff2';
+import ms_sans_serif_bold from '../../src/assets/fonts/dist/ms_sans_serif_bold.woff2';
 
 const GlobalStyle = createGlobalStyle`
-  ${reset}
+  ${styleReset}
+  @font-face {
+    font-family: 'ms_sans_serif';
+    src: url('${ms_sans_serif}') format('woff2');
+    font-weight: 400;
+    font-style: normal
+  }
+  @font-face {
+    font-family: 'ms_sans_serif';
+    src: url('${ms_sans_serif_bold}') format("woff2");
+    font-weight: bold;
+    font-style: normal
+  }
+  body {
+    font-family: 'ms_sans_serif', 'sans-serif';
+  }
 `;
 
 export default storyFn => (

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  stories: [
+    '../src/**/*.stories.(js|mdx)',
+    '../.storybook/**/*.stories.(js|mdx)'
+  ],
+  addons: [
+    '@storybook/addon-docs',
+    'storybook-addon-styled-component-theme/dist/register',
+    '@storybook/addon-storysource'
+  ]
+};

.storybook/webpack.config.js

@@ -1,11 +1,18 @@
 const path = require('path');
 
-module.exports = ({config}) => {
-    config.module.rules.push({
-        test: /\.stories\.js?$/,
-        loaders: [require.resolve('@storybook/addon-storysource/loader')],
-        enforce: 'pre',
-    });
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: /\.stories\.js?$/,
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
+    enforce: 'pre'
+  });
 
-    return config;
-};
+  config.resolve = Object.assign(config.resolve, {
+    alias: {
+      ...config.resolve.alias,
+      react95: path.resolve(__dirname, '../src/index')
+    }
+  });
+
+  return config;
+};