feat(@fluent-ui/core): Add propTypes support for all components

fluent-org · Aug 26, 2019 · 09c2fa5 · 09c2fa5
1 parent d2d4fae
commit 09c2fa5
Show file tree

Hide file tree

Showing 66 changed files with 2,850 additions and 1,622 deletions.
diff --git a/packages/fluent-ui-hooks/package.json b/packages/fluent-ui-hooks/package.json
@@ -13,12 +13,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/chenyueban/fluent-ui",
+    "url": "https://github.com/fluent-org/fluent-ui",
     "directory": "packages/fluent-ui-hooks"
   },
   "homepage": "https://fluent-ui.com/",
   "bugs": {
-    "url": "https://github.com/chenyueban/fluent-ui/issues"
+    "url": "https://github.com/fluent-org/fluent-ui/issues"
   },
   "license": "MIT",
   "engines": {
@@ -27,12 +27,12 @@
   "scripts": {
     "prebuild": "cross-env NODE_ENV=production rimraf build",
     "build": "yarn build:cjs && yarn build:es && yarn build:iife && yarn build:umd && yarn build:copy-files",
-    "build:cjs": "cross-env tsc --emitDeclarationOnly --outDir ./build && NODE_ENV=production BABEL_ENV=cjs babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\",\"src/**/*.type.ts\" --extensions '.ts','.tsx'",
-    "build:es": "cross-env tsc --emitDeclarationOnly --outDir ./build/es && NODE_ENV=production BABEL_ENV=es babel --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\",\"src/**/*.type.ts\" --extensions '.ts','.tsx'",
+    "build:cjs": "cross-env tsc --emitDeclarationOnly --outDir ./build && NODE_ENV=production BABEL_ENV=cjs babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\" --extensions '.ts','.tsx'",
+    "build:es": "cross-env tsc --emitDeclarationOnly --outDir ./build/es && NODE_ENV=production BABEL_ENV=es babel --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\" --extensions '.ts','.tsx'",
     "build:iife": "cross-env BABEL_ENV=production-iife rollup -c ./rollup.config.js",
     "build:umd": "cross-env BABEL_ENV=production-umd rollup -c ./rollup.config.js",
     "build:copy-files": "ts-node ../../scripts/copy-files.ts",
-    "start": "cross-env tsc -w --emitDeclarationOnly --outDir ./build/es && NODE_ENV=production BABEL_ENV=es babel -w --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\",\"src/**/*.type.ts\" --extensions '.ts','.tsx'"
+    "start": "cross-env tsc -w --emitDeclarationOnly --outDir ./build/es && NODE_ENV=development BABEL_ENV=es babel -w --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\" --extensions '.ts','.tsx'"
   },
   "peerDependencies": {
     "react": ">= 16.8.0",

diff --git a/packages/fluent-ui-hooks/rollup.config.js b/packages/fluent-ui-hooks/rollup.config.js
@@ -22,14 +22,6 @@ const commonjsOptions = {
   ignoreGlobal: true,
   include: /node_modules/,
   namedExports: {
-    '../../node_modules/prop-types/index.js': [
-      'elementType',
-      'bool',
-      'func',
-      'object',
-      'oneOfType',
-      'element'
-    ],
     '../../node_modules/react-is/index.js': [
       'ForwardRef',
       'isLazy',

diff --git a/packages/fluent-ui-icons/package.json b/packages/fluent-ui-icons/package.json
@@ -12,12 +12,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/chenyueban/fluent-ui",
+    "url": "https://github.com/fluent-org/fluent-ui",
     "directory": "packages/fluent-ui-icons"
   },
   "homepage": "https://fluent-ui.com/",
   "bugs": {
-    "url": "https://github.com/chenyueban/fluent-ui/issues"
+    "url": "https://github.com/fluent-org/fluent-ui/issues"
   },
   "license": "MIT",
   "engines": {
@@ -27,12 +27,12 @@
     "prebuild": "cross-env NODE_ENV=production rimraf build",
     "compile": "ts-node ./builder",
     "build": "yarn build:cjs && yarn build:es && yarn build:iife && yarn build:umd && yarn build:copy-files",
-    "build:cjs": "cross-env tsc --emitDeclarationOnly --outDir ./build && NODE_ENV=production BABEL_ENV=cjs babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\",\"src/**/*.type.ts\" --extensions '.ts','.tsx'",
-    "build:es": "cross-env tsc --emitDeclarationOnly --outDir ./build/es && NODE_ENV=production BABEL_ENV=es babel --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\",\"src/**/*.type.ts\" --extensions '.ts','.tsx'",
+    "build:cjs": "cross-env tsc --emitDeclarationOnly --outDir ./build && NODE_ENV=production BABEL_ENV=cjs babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\" --extensions '.ts','.tsx'",
+    "build:es": "cross-env tsc --emitDeclarationOnly --outDir ./build/es && NODE_ENV=production BABEL_ENV=es babel --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\" --extensions '.ts','.tsx'",
     "build:iife": "cross-env BABEL_ENV=production-iife rollup -c ./rollup.config.js",
     "build:umd": "cross-env BABEL_ENV=production-umd rollup -c ./rollup.config.js",
     "build:copy-files": "ts-node ../../scripts/copy-files.ts",
-    "start": "cross-env tsc -w --emitDeclarationOnly --outDir ./build/es && NODE_ENV=production BABEL_ENV=es babel -w --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\",\"src/**/*.type.ts\" --extensions '.ts','.tsx'"
+    "start": "cross-env tsc -w --emitDeclarationOnly --outDir ./build/es && NODE_ENV=development BABEL_ENV=es babel -w --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\" --extensions '.ts','.tsx'"
   },
   "peerDependencies": {
     "react": ">= 16.8.0",

diff --git a/packages/fluent-ui-icons/rollup.config.js b/packages/fluent-ui-icons/rollup.config.js
@@ -23,14 +23,6 @@ const commonjsOptions = {
   ignoreGlobal: true,
   include: /node_modules/,
   namedExports: {
-    '../../node_modules/prop-types/index.js': [
-      'elementType',
-      'bool',
-      'func',
-      'object',
-      'oneOfType',
-      'element'
-    ],
     '../../node_modules/react-is/index.js': [
       'ForwardRef',
       'isLazy',

diff --git a/packages/fluent-ui.com/package.json b/packages/fluent-ui.com/package.json
@@ -22,35 +22,35 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/chenyueban/fluent-ui.git"
+    "url": "git+https://github.com/fluent-org/fluent-ui.git"
   },
   "bugs": {
-    "url": "https://github.com/chenyueban/fluent-ui/issues"
+    "url": "https://github.com/fluent-org/fluent-ui/issues"
   },
   "dependencies": {
     "@fluent-ui/core": "^0.17.0",
     "@fluent-ui/hooks": "^0.8.0",
     "@fluent-ui/icons": "^0.4.0",
-    "gatsby": "^2.8.3",
-    "gatsby-image": "^2.1.2",
-    "gatsby-plugin-manifest": "^2.1.1",
-    "gatsby-plugin-nprogress": "^2.1.2",
-    "gatsby-plugin-offline": "^2.1.1",
-    "gatsby-plugin-react-helmet": "^3.0.12",
-    "gatsby-plugin-sharp": "^2.1.3",
-    "gatsby-plugin-typescript": "^2.0.15",
+    "gatsby": "^2.13.83",
+    "gatsby-image": "^2.2.14",
+    "gatsby-plugin-manifest": "^2.2.9",
+    "gatsby-plugin-nprogress": "^2.1.4",
+    "gatsby-plugin-offline": "^2.2.10",
+    "gatsby-plugin-react-helmet": "^3.1.5",
+    "gatsby-plugin-sharp": "^2.2.18",
+    "gatsby-plugin-typescript": "^2.1.5",
     "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
-    "gatsby-source-filesystem": "^2.0.38",
-    "gatsby-transformer-remark": "^2.3.12",
-    "gatsby-transformer-sharp": "^2.1.21",
-    "markdown-to-jsx": "^6.10.2",
+    "gatsby-source-filesystem": "^2.1.18",
+    "gatsby-transformer-remark": "^2.6.19",
+    "gatsby-transformer-sharp": "^2.2.12",
+    "markdown-to-jsx": "^6.10.3",
     "prism-react-renderer": "^0.1.7",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.1",
-    "react-live": "^2.1.2",
+    "react-live": "^2.2.0",
     "styled-components": "^4.3.2"
   },
   "devDependencies": {
@@ -68,10 +68,8 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --write src/**/*.{js,jsx}",
     "start": "npm run develop",
     "serve": "gatsby serve",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
     "now-dev": "gatsby develop -p $PORT",
     "now-build": "npm run build"
   }

diff --git a/packages/fluent-ui.com/src/docs/components/Card/api.md b/packages/fluent-ui.com/src/docs/components/Card/api.md
@@ -18,7 +18,7 @@ Use `Card.Header` `Card.Content` `Card.Actions` inside Card so that f knows how
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| children | React.ReactNode |  | The content of the `Card`. |
+| children&nbsp;* | React.ReactNode |  | The content of the `Card`. |
 | pure | boolean |  | If `true`, You will get a basic pure card. |
 | dynamic | boolean |  | If `true`, You will get a dynamic card. |
 

diff --git a/packages/fluent-ui.com/src/docs/components/Item/api.md b/packages/fluent-ui.com/src/docs/components/Item/api.md
@@ -20,4 +20,4 @@ import { Item } from '@fluent-ui/core'
 | prefix | React.ReactElement |  | The prefix displayed. |
 | active | boolean |  | If `true`, the `Item` will be active, need to match `value`. |
 | children | React.ReactChild |  | Display portion of text and other content. |
-| onClick | React.MouseEventHandler<HTMLDivElement> |  | Set the handler to handle click event. |
+| onClick | React.MouseEventHandler |  | Set the handler to handle click event. |
diff --git a/packages/fluent-ui/package.json b/packages/fluent-ui/package.json
@@ -11,27 +11,26 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/chenyueban/fluent-ui",
+    "url": "https://github.com/fluent-org/fluent-ui",
     "directory": "packages/fluent-ui"
   },
   "homepage": "https://fluent-ui.com/",
   "bugs": {
-    "url": "https://github.com/chenyueban/fluent-ui/issues"
+    "url": "https://github.com/fluent-org/fluent-ui/issues"
   },
   "license": "MIT",
   "engines": {
     "node": ">=8.0.0"
   },
   "scripts": {
     "prebuild": "cross-env NODE_ENV=production rimraf build",
-    "build": "yarn build:cjs && yarn build:es && yarn build:iife && yarn build:umd && yarn build:rename && yarn build:copy-files",
-    "build:cjs": "cross-env tsc --emitDeclarationOnly --outDir ./build && NODE_ENV=production BABEL_ENV=cjs babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\",\"src/**/*.type.ts\" --extensions '.ts','.tsx'",
-    "build:es": "cross-env tsc --emitDeclarationOnly --outDir ./build/es && NODE_ENV=production BABEL_ENV=es babel --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\",\"src/**/*.type.ts\" --extensions '.ts','.tsx'",
+    "build": "yarn build:cjs && yarn build:es && yarn build:iife && yarn build:umd && yarn build:copy-files",
+    "build:cjs": "cross-env tsc --emitDeclarationOnly --outDir ./build && NODE_ENV=production BABEL_ENV=cjs babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\" --extensions '.ts','.tsx'",
+    "build:es": "cross-env tsc --emitDeclarationOnly --outDir ./build/es && NODE_ENV=production BABEL_ENV=es babel --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\" --extensions '.ts','.tsx'",
     "build:iife": "cross-env BABEL_ENV=production-iife rollup -c ./rollup.config.js",
     "build:umd": "cross-env BABEL_ENV=production-umd rollup -c ./rollup.config.js",
     "build:copy-files": "ts-node ../../scripts/copy-files.ts",
-    "build:rename": "ts-node ../../scripts/rename-typets.ts",
-    "start": "cross-env tsc -w --emitDeclarationOnly --outDir ./build/es && NODE_ENV=production BABEL_ENV=es babel -w --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\",\"src/**/*.type.ts\" --extensions '.ts','.tsx'",
+    "start": "cross-env tsc -w --emitDeclarationOnly --outDir ./build/es && NODE_ENV=development BABEL_ENV=es babel -w --config-file ../../babel.config.js ./src --out-dir ./build/es --ignore \"src/**/*.test.ts\",\"src/**/*.test.tsx\" --extensions '.ts','.tsx'",
     "test": "cross-env NODE_ENV=test jest --coverage",
     "test:watch": "cross-env NODE_ENV=test jest --coverage --watch",
     "test:prod": "cross-env NODE_ENV=test jest --ci --coverage --runInBand --detectOpenHandles --forceExit && yarn codecov",
@@ -48,10 +47,12 @@
     "@xstyled/prop-types": "^1.3.0",
     "@xstyled/system": "^1.7.0",
     "async-validator": "^3.0.3",
+    "prop-types": "^15.7.2",
     "react-transition-group": "^4.2.1"
   },
   "devDependencies": {
     "@types/node": "^10.11.0",
+    "@types/prop-types": "^15.7.1",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
     "@types/react-transition-group": "^2.9.2",

diff --git a/packages/fluent-ui/rollup.config.js b/packages/fluent-ui/rollup.config.js
@@ -24,12 +24,24 @@ const commonjsOptions = {
   include: /node_modules/,
   namedExports: {
     '../../node_modules/prop-types/index.js': [
-      'elementType',
+      'array',
       'bool',
       'func',
+      'number',
       'object',
+      'string',
+      'symbol',
+      'any',
+      'arrayOf',
+      'element',
+      'elementType',
+      'instanceOf',
+      'node',
+      'objectOf',
+      'oneOf',
       'oneOfType',
-      'element'
+      'shape',
+      'exact'
     ],
     '../../node_modules/react-is/index.js': [
       'ForwardRef',

diff --git a/packages/fluent-ui/src/Box/Box.styled.ts b/packages/fluent-ui/src/Box/Box.styled.ts
@@ -1,7 +1,7 @@
 import { styled, system, th, css, breakpoints } from '../styles/styled'
 import { BoxProps } from './Box.type'
 
-export const BaseBox = styled.div`
+const baseStyle = css`
   ${system}
   -webkit-overflow-scrolling: touch;
   ${breakpoints({
@@ -21,10 +21,15 @@ export const BaseBox = styled.div`
   })}
 `
 
+export const BaseBox = styled.div`
+  ${baseStyle}
+`
+
 const mosaic =
   'data:image/png;base64,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'
 
-export const AcrylicBox = styled(BaseBox)`
+export const AcrylicBox = styled.div`
+  ${baseStyle}
   position: ${({ position }: BoxProps): string => position || 'relative'};
   overflow: ${({ overflow }: BoxProps): string => overflow || 'hidden'};
   @supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {

diff --git a/packages/fluent-ui/src/Box/Box.tsx b/packages/fluent-ui/src/Box/Box.tsx
@@ -1,20 +1,22 @@
 import * as React from 'react'
 import { BaseBox, AcrylicBox } from './Box.styled'
-import { BoxProps } from './Box.type'
+import { BoxProps, BoxPropTypes } from './Box.type'
+import { getSystemPropTypes, system } from '../styles/styled'
 
-const Box = React.forwardRef<HTMLDivElement, BoxProps>(
-  ({ acrylic, ...rest }: BoxProps, ref): React.ReactElement => {
+const Box: React.FC<BoxProps> = React.forwardRef<HTMLDivElement, BoxProps>(
+  ({ acrylic = false, ...rest }, ref): React.ReactElement => {
     if (acrylic) {
       return <AcrylicBox ref={ref} {...rest} />
     }
     return <BaseBox ref={ref} {...rest} />
   }
 )
 
-Box.defaultProps = {
-  acrylic: false
-}
-
 Box.displayName = 'FBox'
 
+Box.propTypes = {
+  ...getSystemPropTypes(system),
+  ...BoxPropTypes
+}
+
 export default Box