✨ Add Prototyping Sandbox Components to Common

Author: Saeris

packages/common/package.json

@@ -13,12 +13,12 @@
   "scripts": {
     "build": "yarn build:lib",
     "build:dev": "yarn build",
-    "build:lib": "yarn clean && yarn tsc && yarn babel src --out-dir lib && yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib",
+    "build:lib": "yarn clean && yarn tsc && yarn babel src --out-dir lib && yarn cpx \"src/**/*.{css,svg,png,jpg,woff,woff2}\" lib",
     "build:storybook": "build-storybook -c .storybook -o public",
     "clean": "rimraf lib && yarn rimraf node_modules/@types/react-native",
     "lint": "eslint --ext .js,.ts,.tsx src",
     "prepublish": "yarn build",
-    "start": "(yarn tsc --watch & yarn babel src --out-dir lib --watch & yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib --watch)",
+    "start": "(yarn tsc --watch & yarn babel src --out-dir lib --watch & yarn cpx \"src/**/*.{css,svg,png,jpg,woff,woff2}\" lib --watch)",
     "start:storybook": "start-storybook",
     "test": "cross-env NODE_ENV=test jest",
     "typecheck": "tsc --noEmit"
@@ -43,7 +43,7 @@
     "@babel/plugin-transform-flow-strip-types": "^7.0.0",
     "@babel/polyfill": "^7.4.4",
     "@codesandbox/notifications": "^1.0.6",
-    "@codesandbox/template-icons": "^1.0.1",
+    "@codesandbox/template-icons": "^1.0.2",
     "@sentry/browser": "^5.9.0",
     "@tippy.js/react": "^2.1.1",
     "babel-plugin-preval": "^3.0.1",
@@ -62,7 +62,7 @@
     "react": "^16.8.6",
     "react-icons": "^2.2.7",
     "react-input-autosize": "^2.2.1",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^5.0.1",
     "react-spring": "^8.0.25",
     "react-textarea-autosize": "^6.1.0",
     "semver": "^5.6.0",
@@ -90,8 +90,6 @@
     "@types/react": "^16.8.12",
     "@types/react-icons": "^2.2.7",
     "@types/storybook__addon-actions": "^3.4.3",
-    "@types/storybook__addon-knobs": "^5.0.3",
-    "@types/storybook__react": "^4.0.2",
     "@types/styled-components": "^4.1.13",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",

…/src/components/Button/index.stories.tsx …src/components/Button/Button.stories.tsxpackages/common/src/components/Button/index.stories.tsx renamed to packages/common/src/components/Button/Button.stories.tsx packages/common/src/components/Button/index.stories.tsx renamed to packages/common/src/components/Button/Button.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
-import { Button } from '.';
+import { Button } from './Button';
 
 storiesOf('components/Button', module)
   .add('Basic button with text', () => (

…mon/src/components/Button/index.test.tsx …on/src/components/Button/Button.test.tsxpackages/common/src/components/Button/index.test.tsx renamed to packages/common/src/components/Button/Button.test.tsx packages/common/src/components/Button/index.test.tsx renamed to packages/common/src/components/Button/Button.test.tsx

@@ -1,7 +1,7 @@
 import 'jest-styled-components';
 import React from 'react';
 import mountWithTheme from '../../test/themeMount';
-import { Button } from '.';
+import { Button } from './Button';
 
 describe('<Button /> rendering', () => {
   it('no props', () => {

packages/common/src/components/Button/Button.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link, ILinkProps } from '../Link';
+import { Base, ButtonIcon } from './elements';
+
+export interface IButtonProps extends ILinkProps {
+  Icon?: React.ReactType;
+  href?: string;
+  small?: boolean;
+  block?: boolean;
+  onClick?: (event: React.MouseEvent) => void;
+  disabled?: boolean;
+  type?: 'button' | 'reset' | 'submit';
+  secondary?: boolean;
+  red?: boolean;
+  danger?: boolean;
+}
+
+export const Button: React.FC<IButtonProps> = React.forwardRef<
+  HTMLAnchorElement,
+  IButtonProps
+>(({ Icon, children, ...props }, ref) => (
+  <Base
+    ref={ref}
+    {...(props.to || props.href
+      ? {
+          forwardedAs: props.to ? Link : `a`,
+          ...props,
+        }
+      : props)}
+  >
+    {Icon && (
+      <ButtonIcon>
+        <Icon />
+      </ButtonIcon>
+    )}
+    {children}
+  </Base>
+));

packages/common/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> rendering Danger Button 1`] = `ReactWrapper {}`;
+
+exports[`<Button /> rendering Href Button 1`] = `ReactWrapper {}`;
+
+exports[`<Button /> rendering Secondary Button 1`] = `ReactWrapper {}`;
+
+exports[`<Button /> rendering Small Button 1`] = `ReactWrapper {}`;
+
+exports[`<Button /> rendering block Button 1`] = `ReactWrapper {}`;
+
+exports[`<Button /> rendering no props 1`] = `ReactWrapper {}`;