Create system

.storybook/webpack.config.js

@@ -5,7 +5,6 @@ module.exports = ({ config }) => {
       {
         loader: require.resolve('awesome-typescript-loader'),
       },
-      // Optional
       {
         loader: require.resolve('react-docgen-typescript-loader'),
       },

src/components/Box/box.stories.tsx

@@ -9,10 +9,14 @@ export default {
 
 export const basic = () => <Box>Hello Button</Box>
 
-export const asH2 = () => <Box as="h2">A box can be an h2 element</Box>
+export const asH2 = () => (
+  <Box as="h2" mb="sm" mt="sm" pt="md">
+    A box can be an h2 element
+  </Box>
+)
 
 export const asButton = () => (
-  <Box as="button" onClick={() => alert('Clicked Box')}>
+  <Box width="sm" as="button" onClick={() => alert('Clicked Box')}>
     A Box can be anything!
   </Box>
 )

src/components/Box/index.tsx

@@ -1,18 +1,13 @@
 import styled from 'styled-components'
+import { spacingSystem, SpacingSystem } from '../../tokenSystem/spacing.system'
+import { sizeSystem, SizeSystem } from '../../tokenSystem/size.system'
 
 const Box = styled.div<BoxProps>`
-  ${({ width, height }) => `
-    width: ${width};
-    height: ${height};
-  `};
+  ${spacingSystem}
+  ${sizeSystem}
   box-sizing: border-box;
 `
 
-export interface BoxProps {
-  /** width in percentage or px */
-  width?: string | number
-  /** height in percentage or px */
-  height?: string | number
-}
+export type BoxProps = SpacingSystem & SizeSystem
 
 export default Box

src/components/Button/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import styled, { DefaultTheme } from 'styled-components'
+import styled from 'styled-components'
 
 import { getMeasure } from '../../helpers'
 import Spinner from '../Spinner'

src/components/Flexible/index.tsx

@@ -17,6 +17,7 @@ const Flexible = styled(Box)<FlexibleProps>(props => ({
   alignContent: props.content,
 }))
 
+//@ts-ignore
 Flexible.defaultProps = {
   width: 'auto',
   height: 'auto',

src/components/Forms/forms.stories.tsx

@@ -8,7 +8,7 @@ export default {
 }
 
 export const inputs = () => (
-  <Box width="30%">
+  <Box width="md">
     <Input type="text" placeholder="Generic Text Input" />
     <Input type="email" placeholder="Email Input" />
     <Input type="search" placeholder="Search Input" />

src/components/Scrollable/scrollable.stories.tsx

@@ -8,7 +8,7 @@ export default {
 }
 
 export const yAxis = () => (
-  <Scrollable axis="y" width="300px" height="200px">
+  <Scrollable axis="y" width="lg" height="lg">
     <Heading level={6}>Start Scrolling</Heading>
     <Box>
       <Paragraph>
@@ -25,9 +25,9 @@ export const yAxis = () => (
 )
 
 export const xAxis = () => (
-  <Scrollable axis="x" width="300px" height="200px">
+  <Scrollable axis="x" width="lg" height="lg">
     <Heading level={6}>Start Scrolling</Heading>
-    <Box width="600px" height="1px" style={{ backgroundColor: 'black' }} />
+    <Box width="md" height="sm" style={{ backgroundColor: 'black' }} />
     <Box>
       <Paragraph>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -43,9 +43,9 @@ export const xAxis = () => (
 )
 
 export const xyAxis = () => (
-  <Scrollable axis="xy" width="300px" height="200px">
+  <Scrollable axis="xy" width="lg" height="lg">
     <Heading level={6}>Start Scrolling</Heading>
-    <Box width="600px" height="1px" style={{ backgroundColor: 'black' }} />
+    <Box width="md" height="sm" style={{ backgroundColor: 'black' }} />
     <Box>
       <Paragraph>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

src/components/Tabs/Tabs.tsx

@@ -5,7 +5,7 @@ import { Box } from '..'
 
 const Tabs: FC<TabsProps> = ({ activeTab, onTabClick, children }) => {
   return (
-    <Box width="100%">
+    <Box width="lg">
       <TabsProvider
         value={{
           activeTab,

src/components/Typography/Paragraph.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components'
+import { TypoSystem, typoSystem } from '../../tokenSystem/typo.system'
 
-const Paragraph = styled.p`
-  font-size: 1.125rem;
-  font-weight: 400;
+const Paragraph = styled.p<TypoSystem>`
+  ${typoSystem}
   text-justify: auto;
 `
 

src/components/Typography/typography.stories.tsx

@@ -20,7 +20,7 @@ export const heading = () => (
 )
 
 export const paragraph = () => (
-  <Paragraph>
+  <Paragraph fs="h3" fw="bold">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

src/tokenSystem/__tests__/tokenBuilder.test.ts

@@ -0,0 +1,19 @@
+import tokenBuilder from '../index'
+
+describe('Token Builder', () => {
+  it('should work as basic', () => {
+    const y = {
+      scale: {
+        sm: '1rem',
+        md: '2rem',
+      },
+      propName: {
+        margin: 'm',
+        padding: 'm',
+      },
+    }
+    const res = tokenBuilder(y)
+    const solvedResults = res.map(x => x({ m: 'sm' }))
+    expect(solvedResults).toEqual([{ margin: '1rem' }, { padding: '1rem' }])
+  })
+})

src/tokenSystem/index.ts

@@ -0,0 +1,27 @@
+const tokenBuilder = (styles: Args) => {
+  const { propName, scale } = styles
+  const props = Object.keys(propName)
+
+  const styleFunctions = props.map(prop => {
+    const name = propName[prop]
+
+    const curriedStyleFn = (key, scale) => receivedProps => ({
+      [prop]: scale[receivedProps[key]],
+    })
+
+    return curriedStyleFn(name, scale)
+  })
+
+  return styleFunctions
+}
+
+type PropSet = {
+  [key: string]: any
+}
+
+type Args = {
+  scale: PropSet
+  propName: PropSet
+}
+
+export default tokenBuilder

src/tokenSystem/size.system.ts

@@ -0,0 +1,22 @@
+import tokenBuilder from './index'
+
+const defaultSize = {
+  scale: {
+    sm: '50%',
+    md: '2rem',
+    lg: '3rem',
+  },
+  propName: {
+    width: 'width',
+    height: 'height',
+  },
+}
+
+export const sizeSystem = tokenBuilder(defaultSize) as SizeSystem
+
+export type SizeScale = 'sm' | 'md' | 'lg'
+
+export type SizeSystem = {
+  height?: SizeScale
+  width?: SizeScale
+}

src/tokenSystem/spacing.system.ts

@@ -0,0 +1,38 @@
+import tokenBuilder from './index'
+
+const defaultSpacing = {
+  scale: {
+    sm: '5rem',
+    md: '2rem',
+    lg: '3rem',
+  },
+  propName: {
+    margin: 'm',
+    marginTop: 'mt',
+    marginRight: 'mr',
+    marginBottom: 'mb',
+    marginLeft: 'ml',
+    padding: 'p',
+    paddingTop: 'pt',
+    paddingRight: 'pr',
+    paddingBottom: 'pb',
+    paddingLeft: 'pl',
+  },
+}
+
+export const spacingSystem = tokenBuilder(defaultSpacing) as SpacingSystem
+
+export type SpacingScale = 'sm' | 'md' | 'lg'
+
+export type SpacingSystem = {
+  m?: SpacingScale
+  mt?: SpacingScale
+  mr?: SpacingScale
+  mb?: SpacingScale
+  ml?: SpacingScale
+  p?: SpacingScale
+  pt?: SpacingScale
+  pr?: SpacingScale
+  pb?: SpacingScale
+  pl?: SpacingScale
+}

src/tokenSystem/typo.system.ts

@@ -0,0 +1,37 @@
+import tokenBuilder from './index'
+
+const fs = {
+  scale: {
+    h1: '4rem',
+    h2: '3rem',
+    h3: '2.5rem',
+    h4: '2rem',
+    h5: '1.5rem',
+    h6: '1rem',
+    body: '0.8rem',
+  },
+  propName: {
+    fontSize: 'fs',
+  },
+}
+
+const fw = {
+  scale: {
+    light: '400',
+    normal: '600',
+    bold: '700',
+  },
+  propName: {
+    fontWeight: 'fw',
+  },
+}
+
+const fontSize = tokenBuilder(fs)
+const fontWeight = tokenBuilder(fw)
+
+export const typoSystem = [fontSize, fontWeight] as TypoSystem
+
+export type TypoSystem = {
+  fs?: keyof typeof fs.scale
+  fw?: keyof typeof fw.scale
+}