absolutely massive typescript porting time

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

@@ -45,25 +45,155 @@ exports[`Storyshots Button Disabled 1`] = `
 `;
 
 exports[`Storyshots Button Loading 1`] = `
-<styled.button
+<Button
   disabled={false}
-  loadingPct={0}
-  onClick={[Function]}
-  primary={false}
-  secondary={false}
-  theme={
+  loading={false}
+  loadingPct={100}
+  onButtonPress={[Function]}
+  overrides={
     Object {
-      "actions": Object {
-        "primary": "#46b646",
-      },
-      "button": Object {
-        "borderRadius": "2px",
+      "BaseButton": Object {
+        "component": Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "sc-bxivhb",
+            "isStatic": false,
+            "rules": Array [
+              "
+  /* reset some styles */
+  box-shadow: none;
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+  background-color: rgba(0,0,0,0.1);
+
+  /* real styles */
+  position: relative;
+  transition: all 0.05s ease-in-out;
+  padding: 1em 1.4em;
+  font-weight: bold;
+  border: 1px solid rgba(0,0,0,0.1);
+  border-radius: ",
+              [Function],
+              ";
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:not(:disabled) {
+    &::after {
+      content: \\"\\";
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+
+      /* transparent by default */
+      background-color: transparent;
+
+      transition: background-color 0.05s ease-in-out;
+
+      /* put the overlay behind the text */
+      z-index: -1;
+    }
+
+    /* on hover, raise, brighten and shadow */
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+
+      &::after {
+        background-color: rgba(255, 255, 255, 0.3);
+      }
+    }
+
+    /* on click, lower and darken */
+    &:active {
+      outline: none;
+      box-shadow: none;
+      border-color: rgba(0,0,0,0.2);
+
+      transform: translateY(0);
+
+      &::after {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+",
+              "
+  --right: 0%;
+  &::after {
+
+    content: \\"\\";
+    /* z-index: ; */
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: var(--right);
+    border-radius: ",
+              [Function],
+              ";
+    position: absolute;
+    opacity: 0.5;
+    /* background-color: red; */
+    background-image: linear-gradient(to right, 0px rgba(0,0,0,1), 100% red);
+
+    animation: ",
+              Keyframes {
+                "id": "sc-keyframes-cwUnhJ",
+                "inject": [Function],
+                "name": "cwUnhJ",
+                "rules": Array [
+                  "@-webkit-keyframes cwUnhJ{0%{background-image:linear-gradient(to right,0px transparent,1px red);}100%{background-image:linear-gradient(to right,0px transparent,100% red);}}",
+                  "@keyframes cwUnhJ{0%{background-image:linear-gradient(to right,0px transparent,1px red);}100%{background-image:linear-gradient(to right,0px transparent,100% red);}}",
+                ],
+                "toString": [Function],
+              },
+              " forwards infinite 1s;
+  }
+",
+            ],
+          },
+          "defaultProps": Object {
+            "loadingPct": 100,
+            "theme": Object {
+              "actions": Object {
+                "primary": "#46b646",
+              },
+              "button": Object {
+                "borderRadius": "2px",
+              },
+            },
+          },
+          "displayName": "Styled(styled.button)",
+          "foldedComponentIds": Array [
+            "sc-bdVaJa",
+          ],
+          "render": [Function],
+          "styledComponentId": "sc-bxivhb",
+          "target": "button",
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        },
+        "props": Object {
+          "disabled": true,
+          "style": Object {
+            "--right": "0%",
+          },
+        },
       },
     }
   }
+  primary={false}
+  secondary={false}
 >
   Example
-</styled.button>
+</Button>
 `;
 
 exports[`Storyshots Button Primary 1`] = `

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

@@ -1,10 +1,16 @@
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
+import { number, withKnobs } from '@storybook/addon-knobs'
 
-import Button, { PrimaryButton, SecondaryButton } from './Button'
+import Button, {
+  PrimaryButton,
+  SecondaryButton,
+  LoadingButton
+} from './Button'
 
 const s = storiesOf('Button', module)
+s.addDecorator(withKnobs)
 
 const pressed = action('button pressed!')
 
@@ -12,4 +18,4 @@ 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>)
+s.add('Loading', () => <LoadingButton onButtonPress={pressed} loadingPct={number('Loading percentage', 100, ({ max: 100, min: 0, step: 1 } as any))}>Example</LoadingButton>)

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

@@ -1,8 +1,11 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
 import * as sinon from 'sinon'
+import 'jest-styled-components'
 
 import Button from './Button'
+// import { StyledLoadingButton } from './styled'
+// import { ButtonProps } from './types'
 
 describe('<Button />', () => {
   it('calls onButtonPress when not disabled', () => {
@@ -21,3 +24,10 @@ describe('<Button />', () => {
     expect(spy.notCalled).toBeTruthy()
   })
 })
+
+describe('<StyledLoadingButton />', () => {
+  // it('clamps between 0-100%', () => {
+  //   const button = shallow<ButtonProps>(<StyledLoadingButton loadingPct={-100} />)
+
+  // })
+})

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

@@ -5,12 +5,15 @@ import {
 import {
   StyledButton,
   StyledPrimaryButton,
-  StyledSecondaryButton
+  StyledSecondaryButton,
+  StyledLoadingButton
 } from './styled'
 import {
   ButtonProps
 } from './types'
 
+const clampPct = (i: number): number => Math.max(0, Math.min(100, i))
+
 export default class Button extends React.Component<ButtonProps> {
   static defaultProps: ButtonProps = {
     disabled: false,
@@ -64,3 +67,15 @@ export const SecondaryButton = (props: ButtonProps) => <Button {...props} overri
     component: StyledSecondaryButton
   }
 }} />
+
+export const LoadingButton = (props: ButtonProps & { loadingPct?: number }) => <Button {...props} overrides={{
+  BaseButton: {
+    component: StyledLoadingButton,
+    props: {
+      disabled: true,
+      style: {
+        '--right': `${clampPct(100 - (props.loadingPct || 0))}%`
+      }
+    }
+  }
+}} />

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

@@ -1,4 +1,10 @@
-export { default as default } from './Button'
+export {
+  default as default,
+  default as Button,
+  PrimaryButton,
+  SecondaryButton,
+  LoadingButton
+} from './Button'
 
 export {
   StyledButton

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

@@ -1,8 +1,10 @@
 // import * as React from 'react'
-import styled from 'styled-components'
+import styled, { keyframes } from 'styled-components'
 
 import * as colorHelpers from '../helpers/colors'
 
+// import { ButtonProps } from './types'
+
 export const StyledButton = styled.button`
   /* reset some styles */
   box-shadow: none;
@@ -95,3 +97,37 @@ export const StyledSecondaryButton = styled(StyledButton)`
     border-color: ${props => colorHelpers.stepDown(props.theme.actions.primary)};
   }
 `
+
+const loadingAnim = keyframes`
+  0% {
+    background-image: linear-gradient(to right, 0px transparent, 1px red);
+  }
+
+  100% {
+    background-image: linear-gradient(to right, 0px transparent, 100% red);
+  }
+`
+export const StyledLoadingButton = styled(StyledButton)<{loadingPct?: number}>`
+  --right: 0%;
+  &::after {
+
+    content: "";
+    /* z-index: ; */
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: var(--right);
+    border-radius: ${props => props.theme.button.borderRadius};
+    position: absolute;
+    opacity: 0.5;
+    /* background-color: red; */
+    background-image: linear-gradient(to right, 0px rgba(0,0,0,1), 100% red);
+
+    animation: ${loadingAnim} forwards infinite 1s;
+  }
+`
+
+StyledLoadingButton.defaultProps = {
+  ...StyledButton.defaultProps,
+  loadingPct: 100
+}

packages/roleypoly-design/src/helpers/colors.ts

@@ -1,6 +1,6 @@
 import * as Color from 'color'
 
-const color = (i: Color | string) => {
+export const color = (i: Color | string) => {
   return new Color(i)
 }
 

packages/roleypoly-design/src/index.ts

@@ -0,0 +1,4 @@
+import * as Colors from './helpers/colors'
+export { Colors }
+
+export * from './button'