refactor: use styled-system v5

Yoctol · Feb 4, 2020 · 6b5b33a · 6b5b33a
1 parent 88868a9
commit 6b5b33a
Show file tree

Hide file tree

Showing 25 changed files with 468 additions and 534 deletions.
diff --git a/docs/UIProvider.md b/docs/UIProvider.md
@@ -25,82 +25,78 @@ ReactDOM.render(
 
 ```jsx live
 () => {
-  const [value, setValue] = useState('en_US');
+  const { locale, setLocale } = useLocaleContext();
   const [visible, setVisible] = useState(false);
   const modal = useModal();
 
   return (
     <>
-      <Radio.Group value={value} onChange={setValue}>
+      <Radio.Group value={locale} onChange={newLocale => setLocale(newLocale)}>
         <Radio value="en_US">English</Radio>
         <Radio value="zh_Hant">正體中文</Radio>
       </Radio.Group>
 
       <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="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>
 
-              <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: 'Do you Want to delete these items?',
+                content: 'Some descriptions',
+                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="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>
       </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
@@ -40,51 +40,31 @@ const colors = {
 
 const toRem = (px: number) => rem(`${px}px`);
 
-export interface BreakpointsType {
+export type BreakpointsType = [
   /**
    * 576px
    */
-  0: string;
-  /**
-   * 768px
-   */
-  1: string;
-  /**
-   * 992px
-   */
-  2: string;
-  /**
-   * 1200px
-   */
-  3: string;
-  /**
-   * 576px
-   */
-  sm: string;
+  string,
   /**
    * 768px
    */
-  md: string;
+  string,
   /**
    * 992px
    */
-  lg: string;
+  string,
   /**
    * 1200px
    */
-  xl: string;
-}
+  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 = {