feat: auto generate types

0x-leen · Aug 7, 2021 · 7139316 · 7139316
1 parent d740914
commit 7139316
Show file tree

Hide file tree

Showing 120 changed files with 28,392 additions and 4,652 deletions.
diff --git a/examples/example-react/src/pages/Border.tsx b/examples/example-react/src/pages/Border.tsx
@@ -24,17 +24,20 @@ export default () => {
       </Box>
 
       <Box toEvenly mb6 bgGray100>
-        <Box toCenter p4 bgOrange200 borderT-2 borderOrange500>
-          borderT-2
+        <Box toCenter p4 bgOrange200 borderTop borderOrange500>
+          borderTop
         </Box>
-        <Box toCenter p4 bgOrange200 borderR-2 borderOrange500>
-          borderR-2
+        <Box toCenter p4 bgOrange200 borderTop-2 borderOrange500>
+          borderTop-2
         </Box>
-        <Box toCenter p4 bgOrange200 borderB-2 borderOrange500>
-          borderB-2
+        <Box toCenter p4 bgOrange200 borderRight-2 borderOrange500>
+          borderRight-2
         </Box>
-        <Box toCenter p4 bgOrange200 borderL-2 borderOrange500>
-          borderL-2
+        <Box toCenter p4 bgOrange200 borderBottom-2 borderOrange500>
+          borderBottom-2
+        </Box>
+        <Box toCenter p4 bgOrange200 borderLeft-2 borderOrange500>
+          borderLeft-2
         </Box>
       </Box>
 
@@ -57,6 +60,9 @@ export default () => {
       </Box>
 
       <Box toEvenly mb6 bgGray100>
+        <Box toCenter p4 border-2 borderColor="red400">
+          borderColor
+        </Box>
         <Box toCenter p4 border-2 borderPurple500>
           borderPurple500
         </Box>

diff --git a/examples/example-react/src/pages/BoxAlignment.tsx b/examples/example-react/src/pages/BoxAlignment.tsx
@@ -106,14 +106,26 @@ export default () => {
           <Box m2 bgOrange400 square-100></Box>
           <Box m2 bgOrange400 square-100></Box>
         </Box>
-        <Box flexWrap="wrap" bgOrange100 w-350 h-320 alignContent="space-evenly">
+        <Box
+          flexWrap="wrap"
+          bgOrange100
+          w-350
+          h-320
+          alignContent="space-evenly"
+        >
           <Box m2 bgOrange400 square-100></Box>
           <Box m2 bgOrange400 square-100></Box>
           <Box m2 bgOrange400 square-100></Box>
           <Box m2 bgOrange400 square-100></Box>
           <Box m2 bgOrange400 square-100></Box>
         </Box>
-        <Box flexWrap="wrap" bgOrange100 w-350 h-320 alignContent="space-around">
+        <Box
+          flexWrap="wrap"
+          bgOrange100
+          w-350
+          h-320
+          alignContent="space-around"
+        >
           <Box m2 bgOrange400 square-100></Box>
           <Box m2 bgOrange400 square-100></Box>
           <Box m2 bgOrange400 square-100></Box>

diff --git a/examples/example-react/src/pages/Color.tsx b/examples/example-react/src/pages/Color.tsx
@@ -1,4 +1,4 @@
-import { Box, View } from '@fower/react';
+import { Box } from '@fower/react';
 
 export default () => {
   return (

diff --git a/examples/example-react/src/pages/FontWeight.tsx b/examples/example-react/src/pages/FontWeight.tsx
@@ -7,7 +7,7 @@ export default () => {
         <Box fontHairline>Lorem ipsum dolor sit amet</Box>
         <Box fontThin>Lorem ipsum dolor sit amet</Box>
         <Box fontLight>Lorem ipsum dolor sit amet</Box>
-        <Box fontNormal>Lorem ipsum dolor sit amet</Box>
+        <Box fontBlack>Lorem ipsum dolor sit amet</Box>
         <Box fontMedium>Lorem ipsum dolor sit amet</Box>
         <Box fontSemibold>Lorem ipsum dolor sit amet</Box>
         <Box fontBold>Lorem ipsum dolor sit amet</Box>

diff --git a/examples/example-react/src/pages/Margin.tsx b/examples/example-react/src/pages/Margin.tsx
@@ -1,16 +1,6 @@
 import { Box } from '@fower/react';
 
 export default () => {
-  return (
-    <Box inlineBlock debug>
-      <Box m-40 p4 inlineBlock bgRed400 className="main gogo">
-        m4
-      </Box>
-      <Box m-30 p3 inlineBlock bgRed400 className="main gogo">
-        m4
-      </Box>
-    </Box>
-  );
   return (
     <Box>
       <Box text3XL fontBold>

diff --git a/examples/example-react/src/pages/Responsive.tsx b/examples/example-react/src/pages/Responsive.tsx
@@ -3,7 +3,9 @@ import { Box } from '@fower/react';
 export default () => {
   return (
     <Box>
-      <Box text={[12, 20, 40, 60]}>Lorem ipsum dolor sit amet</Box>
+      <Box text={[12, 20, 40, 60]} textXS>
+        Lorem ipsum dolor sit amet
+      </Box>
       <Box color={['green500', 'red500', 'yellow500', 'blue500']}>
         Lorem ipsum dolor sit amet
       </Box>

diff --git a/examples/example-react/src/pages/Rounded.tsx b/examples/example-react/src/pages/Rounded.tsx
@@ -13,6 +13,7 @@ export default () => {
       </Box>
       <Box toCenter spaceX3 flexWrap>
         <Box square20 bgOrange400 rounded></Box>
+        <Box square20 bgOrange400 roundedTop={0}></Box>
         <Box square20 bgOrange400 roundedTiny></Box>
         <Box square20 bgOrange400 roundedLarge></Box>
         <Box square20 bgOrange400 roundedFull roundedTopRight-0--i></Box>

diff --git a/examples/example-react/src/pages/Svg.tsx b/examples/example-react/src/pages/Svg.tsx
@@ -6,11 +6,9 @@ export default () => {
       <Box
         as="svg"
         fillNone
-        // fillCurrent
-        // stroke="currentColor"
+        fillCurrent
         gray800
         square10
-        stroke-1
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >

diff --git a/examples/example-react/src/pages/TextDecoration.tsx b/examples/example-react/src/pages/TextDecoration.tsx
@@ -9,23 +9,7 @@ export default () => {
       <Box text={40} lineThrough>
         40 Lorem ipsum dolor sit amet
       </Box>
-      <Box text={'20px'}>40 Lorem ipsum dolor sit amet</Box>
-      <Box text-20px>40 Lorem ipsum dolor sit amet</Box>
-      <Box text-17>Lorem ipsum dolor sit amet</Box>
-      <Box text={17}>Lorem ipsum dolor sit amet</Box>
-      <Box textXS>Lorem ipsum dolor sit amet</Box>
-      <Box textSM>Lorem ipsum dolor sit amet</Box>
-      <Box textBase>Lorem ipsum dolor sit amet</Box>
-      <Box textLG>Lorem ipsum dolor sit amet</Box>
-      <Box textXL>Lorem ipsum dolor sit amet</Box>
-      <Box text2XL>Lorem ipsum dolor sit amet</Box>
-      <Box text3XL>Lorem ipsum dolor sit amet</Box>
-      <Box text4XL>Lorem ipsum dolor sit amet</Box>
-      <Box text5XL>Lorem ipsum dolor sit amet</Box>
-      <Box text6XL>Lorem ipsum dolor sit amet</Box>
-      <Box text7XL>Lorem ipsum dolor sit amet</Box>
-      <Box text8XL>Lorem ipsum dolor sit amet</Box>
-      <Box text9XL>Lorem ipsum dolor sit amet</Box>
+      <Box textDecoration="underline">Lorem ipsum dolor sit amet</Box>
     </Box>
   );
 };
diff --git a/examples/example-react/src/pages/TextOverflow.tsx b/examples/example-react/src/pages/TextOverflow.tsx
@@ -6,10 +6,10 @@ export default () => {
       <Box w-200 textLG truncate>
         Lorem ipsum dolor sit amet
       </Box>
-      <Box w-200 textXL>
+      <Box w-200 textXL overflowEllipsis>
         Lorem ipsum dolor sit amet
       </Box>
-      <Box w-200 text2XL>
+      <Box w-200 text2XL overflowClip>
         Lorem ipsum dolor sit amet
       </Box>
     </Box>

diff --git a/examples/example-react/src/pages/TextSize.tsx b/examples/example-react/src/pages/TextSize.tsx
@@ -36,28 +36,6 @@ const MyText = styled('span', ['border', 'p-1', 'rounded'], {
 });
 
 export default () => {
-  console.log(
-    '------createStyle:',
-    createStyle('bgOrange300', 'rounded', {
-      p10: true,
-      textShadow: '1px 2px 2px #ccc',
-    }),
-  );
-  return (
-    <MyText text3XL fontBold green400>
-      Hello world
-    </MyText>
-  );
-  return (
-    <Box
-      roundedGigantic
-      text2XL
-      _hover={['bgOrange300', 'border']}
-      _md={['bgTeal400', 'text5XL']}
-    >
-      40 Lorem ipsum dolor sit amet
-    </Box>
-  );
   return (
     <Box _hover={['p1', 'p4']}>
       <Box text-30>40 Lorem ipsum dolor sit amet</Box>

diff --git a/examples/example-react/src/pages/ZIndex.tsx b/examples/example-react/src/pages/ZIndex.tsx
@@ -2,15 +2,14 @@ import { Box } from '@fower/react';
 import { styled } from '@fower/styled';
 
 export default function Demo() {
-  const Item = styled(
-    'div',
+  const Item = styled('div', [
     'white',
     'toCenter',
     'shadow',
     'bgOrange400',
     'circle-80',
     'absolute',
-  );
+  ]);
   return (
     <Box white relative h-160 bgOrange100 p6>
       <Item zIndex-20>20</Item>

diff --git a/packages/core/src/atom.ts b/packages/core/src/atom.ts
@@ -12,7 +12,7 @@ export { Options, Meta }
  * @example p-20,opacity-80
  */
 export const digitReg =
-  /^(m[xytrbl]?-?|p[xytrbl]?|space[xy]?|top-?|right-?|bottom-?|left-?|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex-?|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border[trbl]?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?\d+[a-z]*?|-auto)$/i
+  /^(m[xytrbl]?-?|p[xytrbl]?|space[xy]?|top-?|right-?|bottom-?|left-?|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex-?|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border(Top|Right|Bottom|Left)?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?\d+[a-z]*?|-auto)$/i
 
 export class Atom {
   constructor(private readonly options: Options) {

diff --git a/packages/core/src/typings.ts b/packages/core/src/typings.ts
@@ -13,6 +13,9 @@ export type FowerHTMLProps<T extends As> = ComponentProps<T> & AtomicProps & { a
 
 export type Preset = Partial<Configuration>
 
+export type ResponsiveValue<T = any> = [T, ...T[]] | T | false
+export type ResponsiveBoolean = ResponsiveValue<boolean> | boolean
+
 export type PropValue = boolean | number | string
 
 export type ModeType = 'light' | 'dark' | ({} & string)

diff --git a/packages/fower-plugin-animation/types/index.d.ts b/packages/fower-plugin-animation/types/index.d.ts
@@ -1,4 +1,4 @@
-import { FowerPlugin } from '@fower/core'
+import { FowerPlugin, ResponsiveBoolean } from '@fower/core'
 
 declare const _default: () => FowerPlugin
 export default _default
@@ -18,7 +18,7 @@ declare module '@fower/atomic-props' {
      * <Box animateNone></Box>
      * ```
      */
-    animateNone?: boolean
+    animateNone?: ResponsiveBoolean
 
     /**
      * animate spin
@@ -34,7 +34,7 @@ declare module '@fower/atomic-props' {
      * <Box animateSpin></Box>
      * ```
      */
-    animateSpin?: boolean
+    animateSpin?: ResponsiveBoolean
 
     /**
      * animate ping
@@ -50,26 +50,38 @@ declare module '@fower/atomic-props' {
      * <Box animatePing></Box>
      * ```
      */
-    animatePing?: boolean
+    animatePing?: ResponsiveBoolean
 
     /**
      * animate Pulse
      *
+     * ```css
+     * {
+     *   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+     * }
+     * ```
+     *
      * @example
      * ```tsx
      * <Box animatePulse></Box>
      * ```
      */
-    animatePulse?: boolean
+    animatePulse?: ResponsiveBoolean
 
     /**
      * animate Bounce
      *
+     * ```css
+     * {
+     *   animation: bounce 1s infinite;
+     * }
+     * ```
+     *
      * @example
      * ```tsx
      * <Box animateBounce></Box>
      * ```
      */
-    animateBounce?: boolean
+    animateBounce?: ResponsiveBoolean
   }
 }
diff --git a/packages/fower-plugin-appearance/types/index.d.ts b/packages/fower-plugin-appearance/types/index.d.ts
@@ -1,18 +1,23 @@
-import { FowerPlugin } from '@fower/core'
+import { FowerPlugin, ResponsiveBoolean } from '@fower/core'
 
 declare const _default: () => FowerPlugin
 export default _default
 
 declare module '@fower/atomic-props' {
   export interface AtomicProps {
     /**
-     * Set appearance: none
+     * Set appearance to none
+     * ```css
+     * {
+     *   appearance: none;
+     * }
+     * ```
      *
      * @example
      * ```tsx
      * <Box appearanceNone></Box>
      * ```
      */
-    appearanceNone?: boolean
+    appearanceNone?: ResponsiveBoolean
   }
 }
diff --git a/packages/fower-plugin-background/gen-types.js b/packages/fower-plugin-background/gen-types.js
@@ -2,13 +2,7 @@ const { colors } = require('@fower/colors')
 const { upFirst } = require('@fower/utils')
 const { SemicolonPreference } = require('typescript')
 const { join } = require('path')
-const {
-  Project,
-  VariableDeclarationKind,
-  MethodDeclarationStructure,
-  PropertyDeclarationStructure,
-  OptionalKind,
-} = require('ts-morph')
+const { Project } = require('ts-morph')
 
 /** init somethings */
 const project = new Project()
@@ -114,7 +108,7 @@ const listProps = lists.map((item) => {
     type: item.type,
     docs: [
       {
-        description: [item.desc, '```css', '{', `  ${item.css}`, '}', '```'].join('\n'),
+        description: [item.desc, '```css', `{ ${item.css} }`, '```'].join('\n'),
         tags: [
           {
             tagName: 'example',
@@ -136,15 +130,18 @@ const properties = Object.keys(colors).reduce(function (result, cur) {
         description: [
           'Set background to ' + cur,
           '```css',
-          '{',
-          `  background-color: ${colors[cur]};`,
-          '}',
+          `{ background-color: ${colors[cur]}; }`,
           '```',
         ].join('\n'),
         tags: [
           {
             tagName: 'example',
-            text: ['\n', '```', `<Box ${name}></Box>`, '```'],
+            text: ['\n', '```tsx', `<Box ${name}></Box>`, '```'],
+          },
+
+          {
+            tagName: 'see',
+            text: [`https://developer.mozilla.org/en-US/docs/Web/CSS/background-color`],
           },
         ],
       },

diff --git a/packages/fower-plugin-background/package.json b/packages/fower-plugin-background/package.json
@@ -12,8 +12,8 @@
     "node": ">=10"
   },
   "scripts": {
-    "prebuild": "node gen-types.js",
     "start": "tsdx watch --verbose",
+    "prebuild": "node gen-types.js",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "test:watch": "tsdx test --watch",