refactor: use styled-system v5

Yoctol · Feb 5, 2020 · eabe01d · eabe01d
1 parent 7cbd0db
commit eabe01d
Show file tree

Hide file tree

Showing 25 changed files with 502 additions and 529 deletions.
diff --git a/docs/UIProvider.md b/docs/UIProvider.md
@@ -21,86 +21,121 @@ ReactDOM.render(
 );
 ```
 
-## Examples
+## I18n Examples
 
 ```jsx live
 () => {
-  const [value, setValue] = useState('en_US');
+  const { locale, setLocale } = useLocaleContext();
   const [visible, setVisible] = useState(false);
   const modal = useModal();
 
+  const contents = {
+    en_US: {
+      modal: {
+        title: 'This is a Modal',
+        content: 'This is the content of Modal',
+        openButton: 'Open Modal',
+      },
+      confirmModal: {
+        title: 'Do you Want to delete these items?',
+        content: 'Some descriptions',
+      },
+      popconfirm: {
+        content: 'Are you sure to delete this todo?',
+      },
+      upload: {
+        withSuccess: 'With Success: ',
+        withFail: 'With Fail: ',
+      },
+    },
+    zh_Hant: {
+      modal: {
+        title: '這是一個 Modal',
+        content: '這是 Modal 的內容',
+        openButton: '打開 Modal',
+      },
+      confirmModal: {
+        title: '你確定要刪掉這些東西嗎？',
+        content: '一些內容',
+      },
+      popconfirm: {
+        content: '你確定要刪掉這個待辦事項嗎？',
+      },
+      upload: {
+        withSuccess: '成功：',
+        withFail: '失敗：',
+      },
+    },
+  }[locale];
+
   return (
     <>
-      <RadioGroup value={value} onChange={setValue}>
+      <RadioGroup value={locale} onChange={setLocale}>
         <Radio value="en_US">English</Radio>
         <Radio value="zh_Hant">正體中文</Radio>
       </RadioGroup>
 
       <Box mt="3">
-        <UIProvider locale={locales[value]}>
-          <>
-            <Flex>
-              <Modal
-                title="This is a Modal"
-                visible={visible}
-                closable
-                onConfirm={() => setVisible(false)}
-                onCancel={() => setVisible(false)}
-              >
-                <div>This is the content of Modal</div>
-              </Modal>
-              <Button onClick={() => setVisible(true)}>Open Modal</Button>
+        <Flex>
+          <Modal
+            title={contents.modal.title}
+            visible={visible}
+            closable
+            onConfirm={() => setVisible(false)}
+            onCancel={() => setVisible(false)}
+          >
+            <div>{contents.modal.content}</div>
+          </Modal>
+          <Button onClick={() => setVisible(true)}>{contents.modal.openButton}</Button>
 
-              <Button
-                ml="2"
-                onClick={() => {
-                  modal.confirm({
-                    title: 'Do you Want to delete these items?',
-                    content: 'Some descriptions',
-                    onConfirm: () => console.log('confirmed!'),
-                    onCancel: () => console.log('canceled!'),
-                  });
-                }}
-              >
-                Confirm Modal
-              </Button>
+          <Button
+            ml="2"
+            onClick={() => {
+              modal.confirm({
+                title: contents.confirmModal.title,
+                content: contents.confirmModal.content,
+                onConfirm: () => console.log('confirmed!'),
+                onCancel: () => console.log('canceled!'),
+              });
+            }}
+          >
+            Confirm Modal
+          </Button>
 
-              <Box ml="2">
-                <Popconfirm
-                  position={Position.BOTTOM}
-                  content="Are you sure to delete this todo?"
-                  onConfirm={() => console.log('confirm')}
-                  onCancel={() => console.log('cancel')}
-                >
-                  <Button>Popconfirm</Button>
-                </Popconfirm>
-              </Box>
-            </Flex>
-            <Box mt="3">
-              <DatePicker onChange={() => {}} />
-            </Box>
-            <Box mt="3">
-              <Flex>
-                <Box mr="2">With Success:</Box>
-                <Upload
-                  onSelect={() =>
-                    new Promise(resolve => setTimeout(resolve, 2000))
-                  }
-                />
-              </Flex>
-            </Box>
-            <Box mt="1">
-              <Flex>
-                <Box mr="2">With Failed:</Box>
-                <Upload
-                  onSelect={() =>
-                    new Promise((resolve, reject) => setTimeout(reject, 2000))
-                  }
-                />
-              </Flex>
-            </Box>
-          </>
-        </UIProvider>
+          <Box ml="2">
+            <Popconfirm
+              position={Position.BOTTOM}
+              content={contents.popconfirm.content}
+              onConfirm={() => console.log('confirm')}
+              onCancel={() => console.log('cancel')}
+            >
+              <Button>Popconfirm</Button>
+            </Popconfirm>
+          </Box>
+        </Flex>
+        <Box mt="3">
+          <DatePicker onChange={() => {}} />
+        </Box>
+        <Box mt="3">
+          <Flex alignItems="center">
+            <Box mr="2">{contents.upload.withSuccess}</Box>
+            <Upload
+              onSelect={() =>
+                new Promise(resolve => setTimeout(resolve, 2000))
+              }
+            />
+          </Flex>
+        </Box>
+        <Box mt="1">
+          <Flex alignItems="center">
+            <Box mr="2">{contents.upload.withFail}</Box>
+            <Upload
+              onSelect={() =>
+                new Promise((resolve, reject) => setTimeout(reject, 2000))
+              }
+            />
+          </Flex>
+        </Box>
       </Box>
     </>
   );

diff --git a/docs/layout/Responsive.md b/docs/layout/Responsive.md
@@ -51,11 +51,5 @@ const breakpoints = [
   '75rem', // 122px
 ]
 
-// aliases
-breakpoints.sm = breakpoints[0]
-breakpoints.md = breakpoints[1]
-breakpoints.lg = breakpoints[2]
-breakpoints.xl = breakpoints[3]
-
-<Box width={{ sm: 1, md: 1/2, lg: 1/4 }} />
+<Box width={[1, 1 / 2, 1 / 4]} />
 ```
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "@docusaurus/preset-classic": "^2.0.0-alpha.40",
     "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.39",
     "@react-spring/mock-raf": "^1.1.1",
-    "@testing-library/jest-dom": "^5.1.0",
+    "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^9.4.0",
     "@types/fuzzaldrin-plus": "^0.6.0",
     "@types/jest": "^25.1.1",
@@ -65,10 +65,10 @@
     "@types/react": "16.9.19",
     "@types/react-dom": "^16.9.5",
     "@types/styled-components": "4.4.2",
-    "@types/styled-system": "^4.2.2",
+    "@types/styled-system": "^5.1.6",
     "@types/yup": "^0.26.29",
-    "@typescript-eslint/eslint-plugin": "^2.18.0",
-    "@typescript-eslint/parser": "^2.18.0",
+    "@typescript-eslint/eslint-plugin": "^2.19.0",
+    "@typescript-eslint/parser": "^2.19.0",
     "babel-core": "^7.0.0-0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^25.1.0",
@@ -79,7 +79,7 @@
     "classnames": "^2.2.6",
     "cross-env": "^7.0.0",
     "eslint": "^6.8.0",
-    "eslint-config-yoctol": "^0.23.3",
+    "eslint-config-yoctol": "^0.24.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-jest": "^3.0.0",
     "eslint-plugin-import": "2.20.1",

diff --git a/packages/tailor-ui-theme/src/theme.ts b/packages/tailor-ui-theme/src/theme.ts
@@ -57,34 +57,14 @@ export interface BreakpointsType {
    * 1200px
    */
   3: string;
-  /**
-   * 576px
-   */
-  sm: string;
-  /**
-   * 768px
-   */
-  md: string;
-  /**
-   * 992px
-   */
-  lg: string;
-  /**
-   * 1200px
-   */
-  xl: string;
 }
 
-const breakpoints: BreakpointsType = {
-  0: toRem(576),
-  1: toRem(768),
-  2: toRem(992),
-  3: toRem(1200),
-  sm: toRem(576),
-  md: toRem(768),
-  lg: toRem(992),
-  xl: toRem(1200),
-};
+const breakpoints: BreakpointsType = [
+  toRem(576),
+  toRem(768),
+  toRem(992),
+  toRem(1200),
+];
 
 export interface SpaceType {
   /**

diff --git a/packages/tailor-ui/package.json b/packages/tailor-ui/package.json
@@ -46,7 +46,7 @@
     "react-intl-tel-input": "^7.1.0",
     "react-tiny-virtual-list": "^2.2.0",
     "styled-normalize": "^8.0.7",
-    "styled-system": "^4.2.4"
+    "styled-system": "^5.1.4"
   },
   "peerDependencies": {
     "react": ">=16.10.0",

diff --git a/packages/tailor-ui/src/Divider/Divider.tsx b/packages/tailor-ui/src/Divider/Divider.tsx
@@ -2,19 +2,16 @@ import React, { FC } from 'react';
 import styled, { css } from 'styled-components';
 import {
   ColorProps,
-  FontSizeProps,
-  FontWeightProps,
   SpaceProps,
+  TypographyProps,
   color,
-  fontSize,
-  fontWeight,
   space,
+  typography,
 } from 'styled-system';
 
 type IStyledDividerProps = SpaceProps &
   ColorProps &
-  FontSizeProps &
-  FontWeightProps & {
+  TypographyProps & {
     type: 'horizontal' | 'vertical';
     orientation?: 'left' | 'right';
     dashed?: boolean;
@@ -108,8 +105,7 @@ const StyledDivider = styled.div<IStyledDividerProps>`
 
     ${space};
     ${color};
-    ${fontSize};
-    ${fontWeight};
+    ${typography};
 `;
 
 StyledDivider.defaultProps = {