Table and Playground packages (#154)

* Add table package

* Add playground package and move all stories to there

* integrating with react-virtualized

* Add Fixed column table

* Stick to default prettier setting

* Add createNodeMock to let test pass

*  Fix `multiStoryshot` with jest styled-component

.flowconfig

@@ -15,5 +15,6 @@ flow/*
 [lints]
 
 [options]
+module.system=haste
 
 [strict]

.npmignore

@@ -12,4 +12,4 @@ storybook-static
 bit.json
 yarn-error.log
 bundle-stats.html
-__mocks__
+**/__mocks__/**

.prettierrc

@@ -1,10 +1,5 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "semi": true,
-  "bracketSpacing": true,
-  "printWidth": 70,
-  "parser": "flow",
-  "jsxBracketSameLine": false,
-  "arrowParens": "avoid"
+  "printWidth": 70
 }

README.md

@@ -89,6 +89,5 @@ Make sure read our [contributing guide](https://github.com/GSS-FED/vital-ui-kit-
 
 - docs
 - layout
-- box
 - Table(page, checkbox, input, header)
 - Calendar

flow-typed/npm/jest_v23.x.x.js

@@ -1,5 +1,5 @@
-// flow-typed signature: 82fb70c15e3aa0c1468144425703425e
-// flow-typed version: bf845eee3a/jest_v23.x.x/flow_>=v0.39.x
+// flow-typed signature: bc9e644ba43fa1c4d1fccc5fd47f65e9
+// flow-typed version: d37e775f89/jest_v23.x.x/flow_>=v0.39.x
 
 type JestMockFn<TArguments: $ReadOnlyArray<*>, TReturn> = {
   (...args: TArguments): TReturn,
@@ -483,7 +483,7 @@ type JestExtendedMatchersType = {
     toIncludeMultiple(substring: string[]): void;
 };
 
-type JestExpectType = {
+interface JestExpectType {
   not: JestExpectType & EnzymeMatchersType & DomTestingLibraryType & JestJQueryMatchersType & JestExtendedMatchersType,
   /**
    * If you have a mock function, you can use .lastCalledWith to test what
@@ -637,9 +637,13 @@ type JestExpectType = {
    */
   toMatchObject(object: Object | Array<Object>): void,
   /**
-   * This ensures that a React component matches the most recent snapshot.
+   * This ensures that an Object matches the most recent snapshot.
    */
   toMatchSnapshot(propertyMatchers?: {[key: string]: JestAsymmetricEqualityType}, name?: string): void,
+  /**
+   * This ensures that an Object matches the most recent snapshot.
+   */
+  toMatchSnapshot(name: string): void,
   /**
    * Use .toThrow to test that a function throws when it is called.
    * If you want to test that a specific error gets thrown, you can provide an
@@ -655,7 +659,7 @@ type JestExpectType = {
    * matching the most recent snapshot when it is called.
    */
   toThrowErrorMatchingSnapshot(): void
-};
+}
 
 type JestObjectType = {
   /**

package.json

@@ -5,7 +5,8 @@
   "private": true,
   "workspaces": {
     "packages": [
-      "packages/*"
+      "packages/*",
+      "playground"
     ],
     "nohoist": [
       "**/react-native",
@@ -19,9 +20,7 @@
       "**/react-native-*",
       "**/react-native-*/**",
       "**/react-native-vector-icons",
-      "**/react-native-vector-icons/**",
-      "**/styled-components",
-      "**/styled-components/**"
+      "**/react-native-vector-icons/**"
     ]
   },
   "scripts": {
@@ -34,11 +33,11 @@
     "build": "npm-run-all clean:build --parallel build:esm build:cjs build:flow",
     "clean:build": "rm -rf packages/web/dist",
     "prebuild:web": "yarn clean:build",
-    "storybook:web": "cd packages/web && start-storybook -p 6006",
-    "build-storybook:web": "cd packages/web && build-storybook",
+    "storybook:web": "cd packages/playground && start-storybook -p 6006",
+    "build-storybook:web": "cd packages/playground && build-storybook",
     "storybook:native": "cd packages/native && yarn run storybook",
     "dev:ios": "cd packages/native && yarn run ios",
-    "test:web": "cd packages/web && jest",
+    "test:web": "cd packages/playground && jest",
     "flow-typed": "rm -rf flow-typed && flow-typed install -s",
     "flow": "flow check",
     "format": "prettier --write '**/**.{js,jsx}'",

packages/web/.storybook/config.js → packages/playground/.storybook/config.js

@@ -1,16 +1,23 @@
+import { injectGlobal } from 'styled-components';
 import { configure, addDecorator } from '@storybook/react';
 import React from 'react';
 import { setDefaults } from '@storybook/addon-info';
 import { setOptions } from '@storybook/addon-options';
 
-import { ThemeProvider } from '../src/base';
+import { ThemeProvider } from '@gssfed/vital-ui-kit-react';
 
-import '../src/base/global.css';
+import '@gssfed/vital-ui-kit-react/dist/base/global.css';
 
 function loadStories() {
   req.keys().forEach(filename => req(filename));
 }
 
+injectGlobal`
+  #root {
+    padding: 20px;
+  }
+`;
+
 setOptions({
   hierarchySeparator: /\//,
   hierarchyRootSeparator: /\|/,
@@ -41,5 +48,5 @@ setOptions({
 
 addDecorator(story => <ThemeProvider>{story()}</ThemeProvider>);
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /.stories.jsx$/);
+const req = require.context('../../', true, /.stories.jsx$/);
 configure(loadStories, module);

packages/playground/.storybook/storyshots.test.js

@@ -0,0 +1,33 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import initStoryshots, {
+  multiSnapshotWithOptions,
+} from '@storybook/addon-storyshots';
+import styleSheetSerializer from 'jest-styled-components/src/styleSheetSerializer';
+import { addSerializer } from 'jest-specific-snapshot'
+import { Table, SimpleTable } from '../../table/src';
+
+/**
+ * Mock methods of addon-info so that "Show Info" button don't go into snapshots.
+ * https://github.com/storybooks/storybook/issues/1011#issuecomment-322698049
+ */
+jest.mock('@storybook/addon-info', () => ({
+  withInfo: () => storyFn => storyFn,
+  setDefaults: () => {},
+}));
+
+/**
+ * Add custom serializer in order to work with multiSnapShot
+ * https://github.com/storybooks/storybook/issues/887#issuecomment-357073807
+ */
+addSerializer(styleSheetSerializer);
+
+initStoryshots({
+  test: multiSnapshotWithOptions({
+    createNodeMock: (element) => {
+      if (element.type === Table || SimpleTable ) {
+        return document.createElement('div')
+      }
+    },
+  })
+});

packages/playground/.storybook/webpack.config.js

@@ -0,0 +1,25 @@
+const path = require('path');
+
+module.exports = (baseConfig, env, defaultConfig) => {
+  // Extend defaultConfig as you need.
+  const appFolder = path.resolve(__dirname, '../../../');
+  // Include other packages becase it is out of scope.
+  defaultConfig.module.rules.forEach(rule => {
+    if ('.jsx'.match(rule.test)) {
+      if (rule.include) {
+        rule.include.push(path.resolve(__dirname, '../../table/src'))
+        rule.include.push(path.resolve(__dirname, '../../web/src'))
+      }
+      if (rule.exclude) {
+        rule.exclude.push(path.resolve(__dirname, '../../table/node_modules'))
+        rule.exclude.push(path.resolve(__dirname, '../../web/node_modules'))
+      }      
+    }
+    defaultConfig.resolve.alias = {
+      ...defaultConfig.resolve.alias,
+      'styled-components': path.resolve(appFolder, 'node_modules', 'styled-components'),
+    }
+  });
+
+  return defaultConfig;
+};

packages/playground/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@gssfed/playground",
+  "version": "0.0.1",
+  "description": "gssfed playground",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "test": "NODE_ENV='test' jest",
+    "start": "start-storybook -p 6006"
+  },
+  "author": "Eric Yip (https://github.com/ericyip)",
+  "license": "MIT",
+  "devDependencies": {
+    "@storybook/react": "3.4.6",
+    "babel-plugin-styled-components": "1.5.1"
+  },
+  "dependencies": {
+    "faker": "^4.1.0"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.jsx$": "babel-jest",
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.md?$": "markdown-loader-jest"
+    },
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    }
+  }
+}

packages/web/stories/Container/Filter.js → packages/playground/stories/Container/Filter.jsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
-import { FieldInput, Input } from '../../src';
+import { FieldInput, Input } from '../../../web/src';
 
 const Wrapper = styled.div`
   display: flex;
@@ -16,7 +16,7 @@ const Wrapper = styled.div`
 `;
 
 type P = {
-  children: (value: string) => React.ReactNode,
+  children: (value: string) => React.Node,
 };
 
 type S = {
@@ -46,7 +46,7 @@ class Filter extends React.PureComponent<P, S> {
       });
   }
 
-  onInputChange = e => {
+  onInputChange = (e: any) => {
     e.persist();
     const { value } = e.target;
     this.setState({ filterValue: value });

packages/web/stories/Container/Section.js → packages/playground/stories/Container/Section.jsx

@@ -1,14 +1,17 @@
-import React from 'react';
+// @flow
+/* eslint-disable import/no-extraneous-dependencies */
+
+import * as React from 'react';
 import styled from 'styled-components';
 
-import { Box } from '../../src';
+import { Box } from '../../../web/src';
 
 const SectionTitle = styled.div`
   font-size: 32px;
   padding-bottom: 10px;
 `;
 
-const Section = ({ title, children }) => (
+const Section = ({ title, children }: { title: string, children: React.Node }) => (
   <Box paddingTop="20px" paddingBottom="30px">
     <SectionTitle>{title}</SectionTitle>
     {children}

packages/web/stories/Overview.stories.jsx → packages/playground/stories/Overview.stories.jsx

@@ -17,7 +17,7 @@ import {
 } from '@storybook/addon-knobs/react';
 import { withNotes } from '@storybook/addon-notes';
 
-import { Avatar, Card, Button, ButtonGroup, Icon } from '../src';
+import { Avatar, Card, Button, ButtonGroup, Icon } from '../../web/src';
 import Section from './Container/Section';
 
 const AVATAR = [