feat(config): Finally completed the compiled configuration

Author: chenyueban

.eslintrc

@@ -3,7 +3,8 @@
     "browser": true,
     "commonjs": true,
     "es6": true,
-    "node": true
+    "node": true,
+    "jest": true
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -17,15 +18,17 @@
     "react",
     "react-hooks",
     "prettier",
-    "@typescript-eslint"
+    "@typescript-eslint",
+    "jest"
   ],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "plugin:prettier/recommended",
     "prettier/react",
-    "prettier/@typescript-eslint"
+    "prettier/@typescript-eslint",
+    "plugin:jest/recommended"
   ],
   "settings": {
     "react": {

package.json

@@ -8,6 +8,7 @@
     "lint": "eslint --fix . && echo 'Lint complete.'",
     "start": "lerna run start --parallel",
     "build": "lerna run build",
+    "test": "lerna run test",
     "release": "lerna publish --force-publish @fluent-ui/core"
   },
   "devDependencies": {
@@ -22,7 +23,7 @@
     "husky": "^2.4.0",
     "lerna": "^3.14.1",
     "lint-staged": "^8.1.7",
-    "prettier": "1.17.1",
+    "prettier": "^1.17.1",
     "typescript": "^3.4.5"
   },
   "config": {

packages/fluent-ui.com/src/components/layout.tsx

@@ -10,10 +10,19 @@ import { StaticQuery, graphql } from 'gatsby'
 
 import Header from './header'
 
+import { ThemeProvider, Theme } from '@fluent-ui/core'
+
 interface LayoutProps {
   children: ReactChild
 }
 
+const theme: Theme = {
+  colors: {
+    // primary: 'rgba(0, 0, 0, 0.2)',
+    // accent: 'rgba(0, 120, 215, 1)'
+  }
+}
+
 const Layout: SFC<LayoutProps> = ({ children }: LayoutProps): ReactElement => (
   <StaticQuery
     query={graphql`
@@ -25,17 +34,12 @@ const Layout: SFC<LayoutProps> = ({ children }: LayoutProps): ReactElement => (
         }
       }
     `}
-    render={data => (
+    render={(data): ReactElement => (
       <>
         <Header siteTitle={data.site.siteMetadata.title} />
-        <div>
-          <main>{children}</main>
-          <footer>
-            © {new Date().getFullYear()}, Built with
-            {` `}
-            <a href="https://www.gatsbyjs.org">Gatsby</a>
-          </footer>
-        </div>
+        <main>{children}</main>
+        {/* <ThemeProvider theme={theme}>
+        </ThemeProvider> */}
       </>
     )}
   />

packages/fluent-ui.com/src/docs/components/Button/README.md

@@ -22,5 +22,5 @@ Button default style
 Highlighted button
 
 ```jsx
-<Button accent>Accent</Button>
+<Button variant='accent'>Accent</Button>
 ```

packages/fluent-ui/package.json

@@ -10,9 +10,6 @@
   ],
   "main": "build/umd/index.js",
   "module": "build/es/index.js",
-  "files": [
-    "dist"
-  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/chenyueban/fluent-ui",
@@ -27,33 +24,40 @@
     "node": ">=8.0.0"
   },
   "scripts": {
-    "lint": "tslint  --project tsconfig.json -t codeFrame 'src/**/*.ts' 'test/**/*.ts'",
     "prebuild": "rimraf build",
-    "build": "cross-env rollup -c rollup.config.js",
-    "start": "rollup -c rollup.config.js -w",
+    "build": "yarn build:cjs && yarn build:es && yarn build:umd",
+    "build:cjs": "cross-env NODE_ENV=production tsc --module CommonJS --outDir ./build/cjs",
+    "build:es": "cross-env NODE_ENV=production tsc --module ES6 --outDir ./build/es",
+    "build:umd": "cross-env NODE_ENV=production tsc --module UMD --outDir ./build/umd",
+    "start": "cross-env NODE_ENV=production tsc -w --module ES6 --outDir ./build/es",
     "test": "jest --coverage",
     "test:watch": "jest --coverage --watch",
-    "test:prod": "npm run lint && npm run test -- --no-cache",
+    "test:prod": "yarn test -- --no-cache",
     "codecov": "codecov"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0",
+    "styled-components": ">= 4.X"
+  },
+  "dependencies": {
+    "styled-system": "^5.0.5"
   },
   "devDependencies": {
     "@types/jest": "^23.3.2",
     "@types/node": "^10.11.0",
+    "@types/react": "^16.8.19",
+    "@types/react-dom": "^16.8.4",
+    "@types/styled-components": "4.1.8",
+    "@types/styled-system": "^4.2.1",
     "codecov": "^3.5.0",
     "cross-env": "^5.2.0",
+    "eslint-plugin-jest": "^22.6.4",
     "jest": "^23.6.0",
     "jest-config": "^23.6.0",
     "rimraf": "^2.6.2",
-    "rollup": "^0.67.0",
-    "rollup-plugin-commonjs": "^9.1.8",
-    "rollup-plugin-json": "^3.1.0",
-    "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-sourcemaps": "^0.4.2",
-    "rollup-plugin-typescript2": "^0.18.0",
+    "styled-components": "^4.3.0",
+    "styled-system": "^5.0.5",
     "ts-jest": "^23.10.2"
   },
   "jest": {

packages/fluent-ui/rollup.config.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+import { color, background, themeGet } from 'styled-system'
+import { theme } from '../../index'
+
+interface StyledButtonProps {
+  color: 'white' | 'black'
+  bg: 'accent' | 'primary'
+}
+
+const StyledButton = styled.button<StyledButtonProps>`
+  ${color}
+  ${background}
+`
+
+StyledButton.defaultProps = {
+  color: 'black'
+  // bg: themeGet('variant.primary')({})
+}
+
+export default StyledButton

packages/fluent-ui/src/Button/Button.tsx

@@ -0,0 +1,22 @@
+import React, { SFC, ReactElement, ReactChild } from 'react'
+
+import StyledButton from './Button.styled'
+
+interface ButtonProps {
+  variant?: 'primary' | 'accent'
+  children: ReactChild
+}
+
+const Button: SFC<ButtonProps> = ({
+  variant = 'primary',
+  children
+}: ButtonProps): ReactElement => {
+  const color = variant === 'accent' ? 'white' : 'black'
+  return (
+    <StyledButton color={color} bg={variant}>
+      {children}
+    </StyledButton>
+  )
+}
+
+export default Button