From b68f9262f027f2b0d86954c8bc2a641e9dbf8ef2 Mon Sep 17 00:00:00 2001 From: matheusps Date: Wed, 16 Oct 2019 23:28:37 -0300 Subject: [PATCH 1/6] Created styleCompose --- src/components/Box/box.stories.tsx | 8 +++-- src/components/Box/index.tsx | 40 ++++++++++++++++++++++++- src/styleComposer/index.ts | 23 ++++++++++++++ src/styleComposer/styleComposer.test.ts | 19 ++++++++++++ 4 files changed, 87 insertions(+), 3 deletions(-) create mode 100644 src/styleComposer/index.ts create mode 100644 src/styleComposer/styleComposer.test.ts diff --git a/src/components/Box/box.stories.tsx b/src/components/Box/box.stories.tsx index e68d132..7eee1ea 100644 --- a/src/components/Box/box.stories.tsx +++ b/src/components/Box/box.stories.tsx @@ -9,10 +9,14 @@ export default { export const basic = () => Hello Button -export const asH2 = () => A box can be an h2 element +export const asH2 = () => ( + + A box can be an h2 element + +) export const asButton = () => ( - alert('Clicked Box')}> + alert('Clicked Box')}> A Box can be anything! ) diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx index 7b2042a..4aa40a8 100644 --- a/src/components/Box/index.tsx +++ b/src/components/Box/index.tsx @@ -1,10 +1,48 @@ import styled from 'styled-components' +import styleComposer from '../../styleComposer' -const Box = styled.div` +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', + }, +} + +const defaultSizes = { + scale: { + sm: '50%', + md: '2rem', + lg: '3rem', + }, + propName: { + width: 'w', + height: 'h', + }, +} + +const spacing = styleComposer(defaultSpacing) +const sizes = styleComposer(defaultSizes) + +const Box = styled.div` ${({ width, height }) => ` width: ${width}; height: ${height}; `}; + ${spacing} + ${sizes} box-sizing: border-box; ` diff --git a/src/styleComposer/index.ts b/src/styleComposer/index.ts new file mode 100644 index 0000000..a7fb153 --- /dev/null +++ b/src/styleComposer/index.ts @@ -0,0 +1,23 @@ +const styleComposer = (styles: Args) => { + const { propName, scale } = styles + const props = Object.keys(propName) + + const styleFunctions = props.map(prop => { + const name = propName[prop] + + const curriedStyleFn = (key, scale) => _props => ({ + [prop]: scale[_props[key]], + }) + + return curriedStyleFn(name, scale) + }) + + return styleFunctions +} + +type Args = { + scale: any + propName: any +} + +export default styleComposer diff --git a/src/styleComposer/styleComposer.test.ts b/src/styleComposer/styleComposer.test.ts new file mode 100644 index 0000000..1a90fed --- /dev/null +++ b/src/styleComposer/styleComposer.test.ts @@ -0,0 +1,19 @@ +import styleComposer from './index' + +describe('Something', () => { + it('should work', () => { + const y = { + scale: { + sm: '1rem', + md: '2rem', + }, + propName: { + margin: 'm', + padding: 'm', + }, + } + const res = styleComposer(y) + const solvedResults = res.map(x => x({ m: 'sm' })) + expect(solvedResults).toEqual([{ margin: '1rem' }, { padding: '1rem' }]) + }) +}) From 9ac98ed68d878bad703e47bfa93cb57a7a624c5f Mon Sep 17 00:00:00 2001 From: matheusps Date: Wed, 16 Oct 2019 23:49:47 -0300 Subject: [PATCH 2/6] Remove unnused files --- .storybook/webpack.config.js | 1 - doczrc.js | 11 ----------- src/components/Button/index.tsx | 2 +- src/styleComposer/styleComposer.test.ts | 4 ++-- 4 files changed, 3 insertions(+), 15 deletions(-) delete mode 100644 doczrc.js diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 13f6a2c..8338de1 100644 --- a/.storybook/webpack.config.js +++ b/.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'), }, diff --git a/doczrc.js b/doczrc.js deleted file mode 100644 index ad9a600..0000000 --- a/doczrc.js +++ /dev/null @@ -1,11 +0,0 @@ -export default { - title: 'Adapt UI', - files: '**/*.{md,markdown,mdx}', - wrapper: 'src/docs/Wrapper', - themeConfig: { - mode: 'light', - }, - typescript: true, - codesandbox: false, - plugins: [], -} diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 2acc470..76abfab 100644 --- a/src/components/Button/index.tsx +++ b/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' diff --git a/src/styleComposer/styleComposer.test.ts b/src/styleComposer/styleComposer.test.ts index 1a90fed..80fb224 100644 --- a/src/styleComposer/styleComposer.test.ts +++ b/src/styleComposer/styleComposer.test.ts @@ -1,7 +1,7 @@ import styleComposer from './index' -describe('Something', () => { - it('should work', () => { +describe('Style Composer', () => { + it('should work as basic', () => { const y = { scale: { sm: '1rem', From ba2d4ac862d861e10577d393b154f77a8119f861 Mon Sep 17 00:00:00 2001 From: matheusps Date: Thu, 17 Oct 2019 10:21:18 -0300 Subject: [PATCH 3/6] Created type definitions --- src/components/Box/box.stories.tsx | 4 +- src/components/Box/index.tsx | 38 ++++++++++++------- src/components/Flexible/index.tsx | 1 + src/components/Forms/forms.stories.tsx | 2 +- .../Scrollable/scrollable.stories.tsx | 10 ++--- src/components/Tabs/Tabs.tsx | 2 +- src/styleComposer/index.ts | 12 ++++-- 7 files changed, 42 insertions(+), 27 deletions(-) diff --git a/src/components/Box/box.stories.tsx b/src/components/Box/box.stories.tsx index 7eee1ea..1dcfa55 100644 --- a/src/components/Box/box.stories.tsx +++ b/src/components/Box/box.stories.tsx @@ -10,13 +10,13 @@ export default { export const basic = () => Hello Button export const asH2 = () => ( - + A box can be an h2 element ) export const asButton = () => ( - alert('Clicked Box')}> + alert('Clicked Box')}> A Box can be anything! ) diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx index 4aa40a8..28d7287 100644 --- a/src/components/Box/index.tsx +++ b/src/components/Box/index.tsx @@ -28,29 +28,39 @@ const defaultSizes = { lg: '3rem', }, propName: { - width: 'w', - height: 'h', + width: 'width', + height: 'height', }, } -const spacing = styleComposer(defaultSpacing) -const sizes = styleComposer(defaultSizes) +const spacing = styleComposer(defaultSpacing) as Spacing +const sizes = styleComposer(defaultSizes) as Sizes -const Box = styled.div` - ${({ width, height }) => ` - width: ${width}; - height: ${height}; - `}; +const Box = styled.div` ${spacing} ${sizes} box-sizing: border-box; ` -export interface BoxProps { - /** width in percentage or px */ - width?: string | number - /** height in percentage or px */ - height?: string | number +type Scale = 'sm' | 'md' | 'lg' +type Spacing = { + m?: Scale + mt?: Scale + mr?: Scale + mb?: Scale + ml?: Scale + p?: Scale + pt?: Scale + pr?: Scale + pb?: Scale + pl?: Scale } +type Sizes = { + height?: Scale + width?: Scale +} + +export type BoxProps = Spacing & Sizes + export default Box diff --git a/src/components/Flexible/index.tsx b/src/components/Flexible/index.tsx index 4ba6f24..71dbc92 100644 --- a/src/components/Flexible/index.tsx +++ b/src/components/Flexible/index.tsx @@ -17,6 +17,7 @@ const Flexible = styled(Box)(props => ({ alignContent: props.content, })) +//@ts-ignore Flexible.defaultProps = { width: 'auto', height: 'auto', diff --git a/src/components/Forms/forms.stories.tsx b/src/components/Forms/forms.stories.tsx index 8760bf0..d6de8be 100644 --- a/src/components/Forms/forms.stories.tsx +++ b/src/components/Forms/forms.stories.tsx @@ -8,7 +8,7 @@ export default { } export const inputs = () => ( - + diff --git a/src/components/Scrollable/scrollable.stories.tsx b/src/components/Scrollable/scrollable.stories.tsx index 5993e68..814d221 100644 --- a/src/components/Scrollable/scrollable.stories.tsx +++ b/src/components/Scrollable/scrollable.stories.tsx @@ -8,7 +8,7 @@ export default { } export const yAxis = () => ( - + Start Scrolling @@ -25,9 +25,9 @@ export const yAxis = () => ( ) export const xAxis = () => ( - + Start Scrolling - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod @@ -43,9 +43,9 @@ export const xAxis = () => ( ) export const xyAxis = () => ( - + Start Scrolling - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index be7c639..fc3acce 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -5,7 +5,7 @@ import { Box } from '..' const Tabs: FC = ({ activeTab, onTabClick, children }) => { return ( - + { const styleFunctions = props.map(prop => { const name = propName[prop] - const curriedStyleFn = (key, scale) => _props => ({ - [prop]: scale[_props[key]], + const curriedStyleFn = (key, scale) => receivedProps => ({ + [prop]: scale[receivedProps[key]], }) return curriedStyleFn(name, scale) @@ -15,9 +15,13 @@ const styleComposer = (styles: Args) => { return styleFunctions } +type PropSet = { + [key: string]: any +} + type Args = { - scale: any - propName: any + scale: PropSet + propName: PropSet } export default styleComposer From 5a5ff7dd7fc0afafbf2a62b2bbf0a5a41cee4291 Mon Sep 17 00:00:00 2001 From: matheusps Date: Thu, 17 Oct 2019 10:30:37 -0300 Subject: [PATCH 4/6] Renamed to tokenSystem --- src/components/Box/index.tsx | 63 ++----------------- src/{styleComposer => tokenSystem}/index.ts | 0 src/tokenSystem/size.tokens.ts | 22 +++++++ src/tokenSystem/spacing.tokens.ts | 38 +++++++++++ .../styleComposer.test.ts | 0 5 files changed, 65 insertions(+), 58 deletions(-) rename src/{styleComposer => tokenSystem}/index.ts (100%) create mode 100644 src/tokenSystem/size.tokens.ts create mode 100644 src/tokenSystem/spacing.tokens.ts rename src/{styleComposer => tokenSystem}/styleComposer.test.ts (100%) diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx index 28d7287..a9a963c 100644 --- a/src/components/Box/index.tsx +++ b/src/components/Box/index.tsx @@ -1,66 +1,13 @@ import styled from 'styled-components' -import styleComposer from '../../styleComposer' - -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', - }, -} - -const defaultSizes = { - scale: { - sm: '50%', - md: '2rem', - lg: '3rem', - }, - propName: { - width: 'width', - height: 'height', - }, -} - -const spacing = styleComposer(defaultSpacing) as Spacing -const sizes = styleComposer(defaultSizes) as Sizes +import { spacingTokens, SpacingTokens } from '../../tokenSystem/spacing.tokens' +import { sizeTokens, SizeTokens } from '../../tokenSystem/size.tokens' const Box = styled.div` - ${spacing} - ${sizes} + ${spacingTokens} + ${sizeTokens} box-sizing: border-box; ` -type Scale = 'sm' | 'md' | 'lg' -type Spacing = { - m?: Scale - mt?: Scale - mr?: Scale - mb?: Scale - ml?: Scale - p?: Scale - pt?: Scale - pr?: Scale - pb?: Scale - pl?: Scale -} - -type Sizes = { - height?: Scale - width?: Scale -} - -export type BoxProps = Spacing & Sizes +export type BoxProps = SpacingTokens & SizeTokens export default Box diff --git a/src/styleComposer/index.ts b/src/tokenSystem/index.ts similarity index 100% rename from src/styleComposer/index.ts rename to src/tokenSystem/index.ts diff --git a/src/tokenSystem/size.tokens.ts b/src/tokenSystem/size.tokens.ts new file mode 100644 index 0000000..696eb75 --- /dev/null +++ b/src/tokenSystem/size.tokens.ts @@ -0,0 +1,22 @@ +import styleComposer from './index' + +const defaultSize = { + scale: { + sm: '50%', + md: '2rem', + lg: '3rem', + }, + propName: { + width: 'width', + height: 'height', + }, +} + +export const sizeTokens = styleComposer(defaultSize) as SizeTokens + +export type SizeScale = 'sm' | 'md' | 'lg' + +export type SizeTokens = { + height?: SizeScale + width?: SizeScale +} diff --git a/src/tokenSystem/spacing.tokens.ts b/src/tokenSystem/spacing.tokens.ts new file mode 100644 index 0000000..94fe81e --- /dev/null +++ b/src/tokenSystem/spacing.tokens.ts @@ -0,0 +1,38 @@ +import styleComposer 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 spacingTokens = styleComposer(defaultSpacing) as SpacingTokens + +export type SpacingScale = 'sm' | 'md' | 'lg' + +export type SpacingTokens = { + m?: SpacingScale + mt?: SpacingScale + mr?: SpacingScale + mb?: SpacingScale + ml?: SpacingScale + p?: SpacingScale + pt?: SpacingScale + pr?: SpacingScale + pb?: SpacingScale + pl?: SpacingScale +} diff --git a/src/styleComposer/styleComposer.test.ts b/src/tokenSystem/styleComposer.test.ts similarity index 100% rename from src/styleComposer/styleComposer.test.ts rename to src/tokenSystem/styleComposer.test.ts From 7c3b4191c1771a3a7b3fb59d671c87f8b75f2e8f Mon Sep 17 00:00:00 2001 From: matheusps Date: Thu, 17 Oct 2019 11:00:31 -0300 Subject: [PATCH 5/6] Better naming for tokens --- src/components/Box/index.tsx | 10 +++++----- src/tokenSystem/index.ts | 4 ++-- src/tokenSystem/{size.tokens.ts => size.system.ts} | 6 +++--- .../{spacing.tokens.ts => spacing.system.ts} | 6 +++--- .../{styleComposer.test.ts => tokenBuilder.test.ts} | 6 +++--- 5 files changed, 16 insertions(+), 16 deletions(-) rename src/tokenSystem/{size.tokens.ts => size.system.ts} (64%) rename src/tokenSystem/{spacing.tokens.ts => spacing.system.ts} (80%) rename src/tokenSystem/{styleComposer.test.ts => tokenBuilder.test.ts} (76%) diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx index a9a963c..c11c2d6 100644 --- a/src/components/Box/index.tsx +++ b/src/components/Box/index.tsx @@ -1,13 +1,13 @@ import styled from 'styled-components' -import { spacingTokens, SpacingTokens } from '../../tokenSystem/spacing.tokens' -import { sizeTokens, SizeTokens } from '../../tokenSystem/size.tokens' +import { spacingSystem, SpacingSystem } from '../../tokenSystem/spacing.system' +import { sizeSystem, SizeSystem } from '../../tokenSystem/size.system' const Box = styled.div` - ${spacingTokens} - ${sizeTokens} + ${spacingSystem} + ${sizeSystem} box-sizing: border-box; ` -export type BoxProps = SpacingTokens & SizeTokens +export type BoxProps = SpacingSystem & SizeSystem export default Box diff --git a/src/tokenSystem/index.ts b/src/tokenSystem/index.ts index fb87440..f2cb642 100644 --- a/src/tokenSystem/index.ts +++ b/src/tokenSystem/index.ts @@ -1,4 +1,4 @@ -const styleComposer = (styles: Args) => { +const tokenBuilder = (styles: Args) => { const { propName, scale } = styles const props = Object.keys(propName) @@ -24,4 +24,4 @@ type Args = { propName: PropSet } -export default styleComposer +export default tokenBuilder diff --git a/src/tokenSystem/size.tokens.ts b/src/tokenSystem/size.system.ts similarity index 64% rename from src/tokenSystem/size.tokens.ts rename to src/tokenSystem/size.system.ts index 696eb75..7276858 100644 --- a/src/tokenSystem/size.tokens.ts +++ b/src/tokenSystem/size.system.ts @@ -1,4 +1,4 @@ -import styleComposer from './index' +import tokenBuilder from './index' const defaultSize = { scale: { @@ -12,11 +12,11 @@ const defaultSize = { }, } -export const sizeTokens = styleComposer(defaultSize) as SizeTokens +export const sizeSystem = tokenBuilder(defaultSize) as SizeSystem export type SizeScale = 'sm' | 'md' | 'lg' -export type SizeTokens = { +export type SizeSystem = { height?: SizeScale width?: SizeScale } diff --git a/src/tokenSystem/spacing.tokens.ts b/src/tokenSystem/spacing.system.ts similarity index 80% rename from src/tokenSystem/spacing.tokens.ts rename to src/tokenSystem/spacing.system.ts index 94fe81e..eefd66e 100644 --- a/src/tokenSystem/spacing.tokens.ts +++ b/src/tokenSystem/spacing.system.ts @@ -1,4 +1,4 @@ -import styleComposer from './index' +import tokenBuilder from './index' const defaultSpacing = { scale: { @@ -20,11 +20,11 @@ const defaultSpacing = { }, } -export const spacingTokens = styleComposer(defaultSpacing) as SpacingTokens +export const spacingSystem = tokenBuilder(defaultSpacing) as SpacingSystem export type SpacingScale = 'sm' | 'md' | 'lg' -export type SpacingTokens = { +export type SpacingSystem = { m?: SpacingScale mt?: SpacingScale mr?: SpacingScale diff --git a/src/tokenSystem/styleComposer.test.ts b/src/tokenSystem/tokenBuilder.test.ts similarity index 76% rename from src/tokenSystem/styleComposer.test.ts rename to src/tokenSystem/tokenBuilder.test.ts index 80fb224..806dc6b 100644 --- a/src/tokenSystem/styleComposer.test.ts +++ b/src/tokenSystem/tokenBuilder.test.ts @@ -1,6 +1,6 @@ -import styleComposer from './index' +import tokenBuilder from './index' -describe('Style Composer', () => { +describe('Token Builder', () => { it('should work as basic', () => { const y = { scale: { @@ -12,7 +12,7 @@ describe('Style Composer', () => { padding: 'm', }, } - const res = styleComposer(y) + const res = tokenBuilder(y) const solvedResults = res.map(x => x({ m: 'sm' })) expect(solvedResults).toEqual([{ margin: '1rem' }, { padding: '1rem' }]) }) From 9f0737f608d42d28a454bf1ddec4cb4ccdff3f7d Mon Sep 17 00:00:00 2001 From: matheusps Date: Thu, 17 Oct 2019 11:17:25 -0300 Subject: [PATCH 6/6] Added typo system --- src/components/Typography/Paragraph.tsx | 6 +-- .../Typography/typography.stories.tsx | 2 +- .../{ => __tests__}/tokenBuilder.test.ts | 2 +- src/tokenSystem/typo.system.ts | 37 +++++++++++++++++++ 4 files changed, 42 insertions(+), 5 deletions(-) rename src/tokenSystem/{ => __tests__}/tokenBuilder.test.ts (91%) create mode 100644 src/tokenSystem/typo.system.ts diff --git a/src/components/Typography/Paragraph.tsx b/src/components/Typography/Paragraph.tsx index 0a24b5b..31a8234 100644 --- a/src/components/Typography/Paragraph.tsx +++ b/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} text-justify: auto; ` diff --git a/src/components/Typography/typography.stories.tsx b/src/components/Typography/typography.stories.tsx index 5ca1d80..58cc43b 100644 --- a/src/components/Typography/typography.stories.tsx +++ b/src/components/Typography/typography.stories.tsx @@ -20,7 +20,7 @@ export const heading = () => ( ) export const paragraph = () => ( - + 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 diff --git a/src/tokenSystem/tokenBuilder.test.ts b/src/tokenSystem/__tests__/tokenBuilder.test.ts similarity index 91% rename from src/tokenSystem/tokenBuilder.test.ts rename to src/tokenSystem/__tests__/tokenBuilder.test.ts index 806dc6b..ab5b3c2 100644 --- a/src/tokenSystem/tokenBuilder.test.ts +++ b/src/tokenSystem/__tests__/tokenBuilder.test.ts @@ -1,4 +1,4 @@ -import tokenBuilder from './index' +import tokenBuilder from '../index' describe('Token Builder', () => { it('should work as basic', () => { diff --git a/src/tokenSystem/typo.system.ts b/src/tokenSystem/typo.system.ts new file mode 100644 index 0000000..4080e21 --- /dev/null +++ b/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 +}