[design]: overrides pattern, tests, yay!

packages/roleypoly-design/.babelrc

@@ -0,0 +1,42 @@
+{
+  "presets": [
+    "next/babel",
+    "@babel/preset-typescript",
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "helpers": false
+      }
+    ],
+    [
+      "styled-components",
+      {
+        "ssr": true
+      }
+    ],
+    "@babel/plugin-proposal-optional-chaining",
+    "macros"
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "next/babel",
+          {
+            "preset-env": {
+              "modules": "commonjs"
+            }
+          }
+        ]
+      ],
+      "plugins": [
+        "require-context-hook",
+        "macros"
+      ]
+    }
+  }
+}

packages/roleypoly-design/.gitignore

@@ -1,3 +1,2 @@
-lib
 node_modules
 *.log

packages/roleypoly-design/.lintstagedrc.yml

@@ -0,0 +1,11 @@
+linters:
+  lib/*.{js,jsx}:
+    - standard --fix
+    - git add
+  lib/*.d.ts:
+    - tslint --fix
+  src/*.{ts,tsx}:
+    - tslint --fix
+    - stylelint --fix
+    - jest --bail --findRelatedTests
+    - git add

packages/roleypoly-design/.storybook/addons.js

@@ -1,2 +0,0 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';

packages/roleypoly-design/.storybook/addons.ts

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'
+import '@storybook/addon-knobs/register'

packages/roleypoly-design/.storybook/config.js

@@ -1,8 +0,0 @@
-import { configure } from '@storybook/react'
-const req = require.context('../src', true, /\.stor\bies|y\b\.[tj]sx?$/)
-
-function loadStories() {
-  req.keys().forEach(req)
-}
-
-configure(loadStories, module)

packages/roleypoly-design/.storybook/config.ts

@@ -0,0 +1,51 @@
+const { configure } = require('@storybook/react')
+
+// polyfill for require.context
+try {
+  if (require.context === undefined) {
+    const fs = require('fs')
+    const path = require('path')
+  // @ts-ignore
+    require.context = (base: string = '.', scanSubDirectories: boolean = false, regularExpression: RegExp = /\.js$/) => {
+      const files = {}
+
+      function readDirectory (directory: string) {
+        fs.readdirSync(directory).forEach((file) => {
+          const fullPath = path.resolve(directory, file)
+
+          if (fs.statSync(fullPath).isDirectory()) {
+            if (scanSubDirectories) readDirectory(fullPath)
+
+            return
+          }
+
+          if (!regularExpression.test(fullPath)) return
+
+          files[fullPath] = true
+        })
+      }
+
+      readDirectory(path.resolve(__dirname, base))
+
+      function Module (file: string) {
+        return require(file)
+      }
+
+      Module.keys = () => Object.keys(files)
+
+      return Module
+    }
+  }
+} catch (e) {
+  if (e) {
+    console.log(e)
+  }
+}
+
+const req = require.context('../src', true, /\.stor\bies|y\b\.[tj]sx?$/)
+
+function loadStories () {
+  req.keys().forEach(req)
+}
+
+configure(loadStories, module)

packages/roleypoly-design/package.json

@@ -12,24 +12,34 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.4.4",
+    "@babel/preset-typescript": "^7.3.3",
     "@storybook/addon-actions": "^5.0.11",
     "@storybook/addon-info": "^5.0.11",
     "@storybook/addon-knobs": "^5.0.11",
     "@storybook/addon-links": "^5.0.11",
+    "@storybook/addon-storyshots": "^5.0.11",
     "@storybook/addons": "^5.0.11",
     "@storybook/react": "^5.0.11",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.13",
     "@types/node": "^12.0.2",
     "@types/react": "^16.8.17",
     "@types/react-dom": "^16.8.4",
+    "@types/react-test-renderer": "^16.8.1",
     "@types/storybook__addon-actions": "^3.4.2",
     "@types/storybook__addon-knobs": "^5.0.0",
     "@types/storybook__addon-links": "^3.3.4",
+    "@types/storybook__addon-storyshots": "^4.0.0",
     "@types/storybook__react": "^4.0.1",
     "@types/styled-components": "4.1.8",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
+    "babel-plugin-macros": "^2.5.1",
+    "babel-plugin-require-context-hook": "^1.0.0",
     "react-docgen-typescript-loader": "^3.1.0",
+    "react-test-renderer": "^16.8.6",
+    "require-context.macro": "^1.0.4",
+    "sinon": "^7.3.2",
     "stylelint": "^10.0.1",
     "tslint": "^5.16.0",
     "tslint-config-standard": "^8.0.1",
@@ -37,6 +47,9 @@
   },
   "scripts": {
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "precommit": "lint-staged",
+    "build": "tsc",
+    "tsc": "tsc"
   }
-}
+}

packages/roleypoly-design/src/__test__/__snapshots__/storyshots.test.ts.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button Default 1`] = `
+<button
+  className="sc-bdVaJa hPnBtV"
+  disabled={false}
+  onClick={[Function]}
+>
+  Example
+</button>
+`;
+
+exports[`Storyshots Button Disabled 1`] = `
+<button
+  className="sc-bdVaJa hPnBtV"
+  disabled={true}
+  onClick={[Function]}
+>
+  Example
+</button>
+`;
+
+exports[`Storyshots Button Loading 1`] = `
+<button
+  className="sc-bdVaJa hPnBtV"
+  disabled={false}
+  onClick={[Function]}
+>
+  Example
+</button>
+`;
+
+exports[`Storyshots Button Primary 1`] = `
+<button
+  className="sc-bdVaJa hPnBtV"
+  disabled={false}
+  onClick={[Function]}
+>
+  Example
+</button>
+`;
+
+exports[`Storyshots Button Secondary 1`] = `
+<button
+  className="sc-bdVaJa hPnBtV"
+  disabled={false}
+  onClick={[Function]}
+>
+  Example
+</button>
+`;

packages/roleypoly-design/src/__test__/storyshots.test.ts

@@ -0,0 +1,9 @@
+import * as path from 'path'
+import initStoryshots from '@storybook/addon-storyshots'
+// import Adapter from 'enzyme-adapter-react-16'
+
+// enzyme.configure({ adapter: new Adapter() })
+
+initStoryshots({
+  configPath: path.resolve(__dirname, '../../.storybook')
+})

packages/roleypoly-design/src/button/Button.story.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
 
-import Button from './Button'
+import Button, { PrimaryButton, SecondaryButton } from './Button'
 
 const s = storiesOf('Button', module)
 
-s.add('Default', () => <Button>Example</Button>)
-s.add('Disabled', () => <Button>Example</Button>)
-s.add('Primary', () => <Button>Example</Button>)
-s.add('Secondary', () => <Button>Example</Button>)
-s.add('Loading', () => <Button>Example</Button>)
+const pressed = action('button pressed!')
+
+s.add('Default', () => <Button onButtonPress={pressed}>Example</Button>)
+s.add('Disabled', () => <Button disabled onButtonPress={pressed}>Example</Button>)
+s.add('Primary', () => <PrimaryButton onButtonPress={pressed}>Example</PrimaryButton>)
+s.add('Secondary', () => <SecondaryButton onButtonPress={pressed}>Example</SecondaryButton>)
+s.add('Loading', () => <Button loading onButtonPress={pressed}>Example</Button>)

packages/roleypoly-design/src/button/Button.test.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import * as sinon from 'sinon'
+
+import Button from './Button'
+
+describe('<Button />', () => {
+  it('calls onButtonPress when not disabled', () => {
+    const spy = sinon.spy()
+    const b = shallow(<Button onButtonPress={spy}>Testing</Button>)
+    b.simulate('click')
+
+    expect(spy.calledOnce).toBeTruthy()
+  })
+
+  it('does not call onButtonPress when disabled', () => {
+    const spy = sinon.spy()
+    const b = shallow(<Button disabled onButtonPress={spy}>Testing</Button>)
+    b.simulate('click')
+
+    expect(spy.notCalled).toBeTruthy()
+  })
+})

packages/roleypoly-design/src/button/Button.tsx

@@ -1,10 +1,66 @@
 import * as React from 'react'
 import {
-  StyledButton
-} from './styled-components'
+  getOverrides
+} from '../helpers/overrides'
+import {
+  StyledButton,
+  StyledPrimaryButton,
+  StyledSecondaryButton
+} from './styled'
+import {
+  ButtonProps
+} from './types'
 
-const Button = ({ children, ...rest }: { children: React.ReactChild | React.ReactChild[] }) => <StyledButton {...rest}>
-  {children}
-</StyledButton>
+export default class Button extends React.Component<ButtonProps> {
+  static defaultProps: ButtonProps = {
+    disabled: false,
+    primary: false,
+    secondary: false,
+    loading: false,
+    loadingPct: 0,
+    children: 'Button',
+    overrides: {}
+  }
 
-export default Button
+  handleClick = () => {
+    if (this.props.disabled === true || typeof this.props.onButtonPress !== 'function') {
+      return
+    }
+
+    this.props.onButtonPress()
+  }
+
+  render () {
+    const {
+      overrides = {},
+      children,
+      // removing from rest
+      loading,
+      onButtonPress,
+      ...rest
+    } = this.props
+
+    const [BaseButton, baseButtonProps] = getOverrides(
+      overrides.BaseButton,
+      StyledButton
+    )
+
+    console.log({ overrides, BaseButton, baseButtonProps })
+
+    return <BaseButton {...rest} {...baseButtonProps} onClick={this.handleClick}>
+      {children}
+    </BaseButton>
+  }
+}
+
+export const PrimaryButton = (props: ButtonProps) => <Button {...props} overrides={{
+  BaseButton: {
+    component: StyledPrimaryButton
+  }
+}} />
+
+export const SecondaryButton = (props: ButtonProps) => <Button {...props} overrides={{
+  BaseButton: {
+    component: StyledSecondaryButton
+  }
+}} />

packages/roleypoly-design/src/button/index.ts

@@ -2,4 +2,4 @@ export { default as default } from './Button'
 
 export {
   StyledButton
-} from './styled-components'
+} from './styled'

packages/roleypoly-design/src/button/styled.tsx

@@ -56,3 +56,25 @@ export const StyledButton = styled.button`
     }
   }
 `
+
+StyledButton.defaultProps = {
+  theme: {
+    actions: {
+      primary: '#46b646',
+      primaryText: '#efefef',
+      secondary: '#e95353',
+      secondaryText: '#efefef'
+    }
+  }
+}
+
+export const StyledPrimaryButton = styled(StyledButton)`
+  background-color: ${props => props.theme.actions.primary};
+  color: ${props => props.theme.actions.primaryText};
+`
+
+StyledPrimaryButton.defaultProps = StyledButton.defaultProps
+export const StyledSecondaryButton = styled(StyledButton)`
+  background-color: ${props => props.theme.actions.secondary};
+  color: ${props => props.theme.actions.secondaryText};
+`

packages/roleypoly-design/src/button/types.ts

@@ -0,0 +1,15 @@
+import {
+  OverridesT
+} from '../helpers/overrides'
+// import Button from './Button'
+
+export type ButtonProps = {
+  overrides?: OverridesT<any>,
+  children: React.ReactChild | React.ReactChild[], // children is required
+  onButtonPress?: () => void,
+  disabled?: boolean,
+  primary?: boolean,
+  secondary?: boolean,
+  loading?: boolean,
+  loadingPct?: number
+}

packages/roleypoly-design/tsconfig.json

@@ -1,38 +1,9 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "./lib",
-    "module": "commonjs",
-    "target": "es2018",
-    "lib": [
-      "es5",
-      "es6",
-      "es7",
-      "es2017",
-      "dom"
-    ],
-    "sourceMap": true,
-    "allowJs": false,
-    "jsx": "react",
-    "moduleResolution": "node",
-    "rootDirs": [
-      "src"
-    ],
-    "baseUrl": "src",
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true,
-    "declaration": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
+    "outDir": "./lib"
   },
-  "exclude": [
-    "node_modules",
-    "build",
-    "scripts"
+  "include": [
+    "./src"
   ]
 }