diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..939f2ee --- /dev/null +++ b/.eslintignore @@ -0,0 +1,7 @@ +# don't ever lint +node_modules +# don't lint build output (make sure it's set to your correct build folder name) +dist +# don't lint nyc coverage output +coverage +examples/cra/** diff --git a/.eslintrc.js b/.eslintrc.js index 2bc7942..6000cfe 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,20 +1,29 @@ module.exports = { + root: true, env: { - browser: true, - es6: true + es6: true, + node: true, + browser: true }, - extends: ["plugin:react/recommended", "standard"], - globals: { - Atomics: "readonly", - SharedArrayBuffer: "readonly" - }, - parserOptions: { - ecmaFeatures: { - jsx: true - }, - ecmaVersion: 2018, - sourceType: "module" - }, - plugins: ["react"], - rules: {} -}; + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint', 'prettier'], + extends: [ + 'plugin:@typescript-eslint/recommended', + 'plugin:@typescript-eslint/eslint-recommended', + 'prettier', + 'prettier/@typescript-eslint', + 'plugin:prettier/recommended', + 'plugin:react/recommended' + ], + ignorePatterns: ['examples/cra/**/*'], + overrides: [ + { + files: ['**/*.{js,ts,tsx}'], + rules: { + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + 'react/prop-types': 'off' + } + } + ] +} diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..ae96e3f --- /dev/null +++ b/.prettierrc @@ -0,0 +1,12 @@ +{ + "printWidth": 100, + "tabWidth": 2, + "useTabs": false, + "semi": false, + "singleQuote": true, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "arrowParens": "avoid", + "endOfLine": "auto" +} diff --git a/babel.config.js b/babel.config.js index e91dabf..a4cb8ff 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,16 +1,13 @@ const BABEL_MODULE = process.env.BABEL_MODULE -function makePresets (module) { +function makePresets(module) { return [ ['@babel/preset-env', { modules: module }], ['@babel/preset-react', { modules: module }] ] } -const plugins = [ - '@babel/plugin-proposal-object-rest-spread', - '@babel/plugin-transform-runtime' -] +const plugins = ['@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-runtime'] module.exports = { env: { diff --git a/examples/cra/.env b/examples/cra/.env new file mode 100644 index 0000000..6f809cc --- /dev/null +++ b/examples/cra/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true diff --git a/examples/cra/.eslintrc b/examples/cra/.eslintrc new file mode 100644 index 0000000..ec40100 --- /dev/null +++ b/examples/cra/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": "../../.eslintrc.js" +} diff --git a/examples/cra/src/App.js b/examples/cra/src/App.js index a7dc3d8..60abe78 100644 --- a/examples/cra/src/App.js +++ b/examples/cra/src/App.js @@ -1,242 +1,256 @@ import React from 'react' -import { - ThemeProvider, - CSSReset, - Box, - Button, - Spacer, - Text, - Badge, - Image -} from '@evilfactory/anggun' -import logo from './logo.svg' -import { useState } from 'react' - -import GridComponent from './components/GridComponent' -import FlexComponent from './components/FlexComponent' - -function App() { - const [toggle, setToggle] = useState('solid') - return ( - - +import { Badge, AnggunProvider } from '@evilfactory/anggun' - +const App = () => { + return ( + + + hello badge + + + ) +} - - Anggun Design System - +export default App +// import React from 'react' +// import { +// ThemeProvider, +// CSSReset, +// Box, +// Button, +// Spacer, +// Text, +// Badge, +// Image +// } from '@evilfactory/anggun' +// import logo from './logo.svg' +// import { useState } from 'react' + +// import GridComponent from './components/GridComponent' +// import FlexComponent from './components/FlexComponent' + +// function App() { +// const [toggle, setToggle] = useState('solid') +// return ( +// +// - +// - - - Primary - +// +// Anggun Design System +// - +// - - Primary - +// +// +// Primary +// - - - Primary - - - - Primary - - - - Primary - - - - Primary - - - - - - warning - - - warning - - - - - SUCCESS - - - - 123 - - - - danger - - - - - - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Box with border radius - - - I am the Box - - - I am the Box - - - I am the Box - - - I am the Box - - - - ) -} +// -export default App +// +// Primary +// + +// +// +// Primary +// +// +// +// Primary +// +// +// +// Primary +// +// +// +// Primary +// +// + +// + +// warning +// +// +// warning +// + +// + +// SUCCESS + +// + +// 123 + +// + +// danger +// + +// + +// + +// + +// + +// + +// +// Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut +// labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco +// laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in +// voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat +// cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +// + +// +// Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut +// labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco +// laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in +// voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat +// cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +// + +// + +// + +// + +// + +// + +// + +// + +// + +// + +// +// +// +// +// +// +// + +// + +// +// +// +// +// +// +// + +// + +// +// +// +// +// +// +// + +// + +// +// +// +// +// +// +// + +// + +// +// +// Box with border radius +// +// +// I am the Box +// +// +// I am the Box +// +// +// I am the Box +// +// +// I am the Box +// +// +// +// ) +// } + +// export default App diff --git a/examples/cra/src/components/FlexComponent.js b/examples/cra/src/components/FlexComponent.js deleted file mode 100644 index 5dd6b30..0000000 --- a/examples/cra/src/components/FlexComponent.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' - -import { Flex, Box } from '@evilfactory/anggun' - -function FlexComponent() { - return ( - - Box - Box - Box - - ) -} - -export default FlexComponent diff --git a/examples/cra/src/components/GridComponent.js b/examples/cra/src/components/GridComponent.js deleted file mode 100644 index 8b7f939..0000000 --- a/examples/cra/src/components/GridComponent.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import { Grid, Box } from '@evilfactory/anggun' - -function GridComponent() { - return ( - - - Grid - Grid - Grid - - - Grid - Grid - Grid - - - ) -} - -export default GridComponent diff --git a/lerna.json b/lerna.json index 0c05d94..5abcc6d 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "packages": ["packages/*", "examples/*"], + "packages": ["packages/*"], "version": "independent", "npmClient": "yarn", "useWorkspaces": true, diff --git a/package.json b/package.json index 55b9ef4..fc6a747 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "build:docs": "yarn compile && lerna run build --scope=cra --stream", "dev:docs": "yarn workspace cra start", "test:docs": "yarn workspace cra test", - "storybook": "lerna run storybook --scope=cra --stream" + "storybook": "lerna run storybook --stream", + "lint": "eslint './packages/**/*.{js,jsx,ts,tsx}'" }, "devDependencies": { "@babel/cli": "^7.8.4", @@ -33,27 +34,32 @@ "@rollup/plugin-babel": "^5.0.2", "@rollup/plugin-commonjs": "^11.0.2", "@rollup/plugin-node-resolve": "^8.0.0", + "@typescript-eslint/eslint-plugin": "^3.1.0", + "@typescript-eslint/parser": "^3.1.0", "babel-loader": "8.0.6", - "eslint": "^6.8.0", - "eslint-config-prettier": "^6.10.0", + "eslint": "^7.1.0", + "eslint-config-airbnb-typescript": "^8.0.1", + "eslint-config-prettier": "^6.11.0", "eslint-config-standard": "^14.1.0", "eslint-plugin-import": "^2.20.1", + "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-node": "^11.0.0", + "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-react": "^7.19.0", + "eslint-plugin-react-hooks": "^2.5.0", "eslint-plugin-standard": "^4.0.1", "husky": "^4.2.3", "lerna": "^3.20.2", - "prettier": "^1.19.1", + "prettier": "^2.0.5", "rimraf": "^3.0.2", "rollup": "^2.2.0", - "rollup-plugin-terser": "^6.1.0" + "rollup-plugin-terser": "^6.1.0", + "rollup-plugin-typescript2": "^0.27.1", + "typescript": "^3.9.3" }, - "npmClient": "yarn", - "useWorkspaces": true, "workspaces": [ - "packages/*", - "examples/*" + "packages/*" ], "husky": { "hooks": { @@ -62,7 +68,6 @@ } }, "lint-staged": { - "*.js": "eslint --fix", "**/**/**/*.+(js|json|jsx|mdx|md)": [ "prettier --write", "git add " diff --git a/packages/anggun/.eslintrc b/packages/anggun/.eslintrc new file mode 100644 index 0000000..ec40100 --- /dev/null +++ b/packages/anggun/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": "../../.eslintrc.js" +} diff --git a/packages/anggun/.prettierrc b/packages/anggun/.prettierrc deleted file mode 100644 index d7d1482..0000000 --- a/packages/anggun/.prettierrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "singleQuote": true, - "jsxSingleQuote": true, - "tabWidth": 2, - "printWidth": 100, - "trailingComma": "none", - "semi": false -} diff --git a/packages/anggun/.storybook/main.js b/packages/anggun/.storybook/main.js new file mode 100644 index 0000000..573c753 --- /dev/null +++ b/packages/anggun/.storybook/main.js @@ -0,0 +1,15 @@ +module.exports = { + stories: ['../src/**/*.stories.{tsx,ts}'], + addons: ['@storybook/addon-actions', '@storybook/addon-a11y/register'], + webpackFinal: async config => { + config.module.rules.push({ + test: /\.(ts|tsx)$/, + loader: require.resolve('babel-loader'), + options: { + presets: [['react-app', { flow: false, typescript: true }]] + } + }) + config.resolve.extensions.push('.ts', '.tsx') + return config + } +} diff --git a/packages/anggun/package.json b/packages/anggun/package.json index b64b1e7..e9143f0 100644 --- a/packages/anggun/package.json +++ b/packages/anggun/package.json @@ -2,9 +2,9 @@ "name": "@evilfactory/anggun", "version": "0.3.1-beta.0", "description": "Evilfactory Design System", - "main": "./dist/lib/index.js", - "module": "./dist/lib-es/index.js", - "typings": "./dist/index.d.ts", + "main": "./dist/index.js", + "module": "./dist/index.es.js", + "types": "./dist/index.d.ts", "repository": "https://github.com/evilfactorylabs/anggun", "author": "evilfactory", "license": "MIT", @@ -19,9 +19,10 @@ "rollup": "rollup -c ./rollup.config.js", "compile": "yarn dist:babel:cjs && yarn dist:babel:es", "dist:rollup": "yarn clean && NODE_ENV=production yarn rollup", - "dist:babel:cjs": "rimraf dist/lib && BABEL_MODULE=commonjs babel --root-mode upward src --out-dir dist/lib", - "dist:babel:es": "rimraf dist/lib-es && babel --root-mode upward src --out-dir dist/lib-es", + "dist:babel:cjs": "rimraf dist/lib && BABEL_MODULE=commonjs babel --root-mode upward lib --out-dir dist/lib", + "dist:babel:es": "rimraf dist/lib-es && babel --root-mode upward lib --out-dir dist/lib-es", "compile:watch": "yarn clean && yarn rollup --watch", + "storybook": "start-storybook", "prepublishOnly": "yarn compile" }, "dependencies": { @@ -31,8 +32,18 @@ "emotion-theming": "^10.0.27", "styled-system": "^5.1.5" }, + "devDependencies": { + "@storybook/addon-a11y": "^5.3.19", + "@storybook/addon-actions": "^5.3.19", + "@storybook/react": "^5.3.19", + "@types/react": "^16.9.35", + "@types/styled-system": "^5.1.9", + "@types/styled-system__should-forward-prop": "^5.1.1", + "babel-preset-react-app": "^9.1.2", + "react-dom": "^16.13.1" + }, "peerDependencies": { - "react": "*", - "react-dom": "*" + "react": "^16.10.1", + "react-dom": "^16.10.1" } } diff --git a/packages/anggun/rollup.config.js b/packages/anggun/rollup.config.js index 1d8b45d..fbe31d4 100644 --- a/packages/anggun/rollup.config.js +++ b/packages/anggun/rollup.config.js @@ -1,37 +1,61 @@ -// rollup.config.js -import resolve from '@rollup/plugin-node-resolve' -import babel from '@rollup/plugin-babel' -import commonjs from '@rollup/plugin-commonjs' +// // rollup.config.js +// import resolve from '@rollup/plugin-node-resolve' +// import babel from '@rollup/plugin-babel' +// import commonjs from '@rollup/plugin-commonjs' -// const isProduction = process.env.NODE_ENV === 'production' +// // const isProduction = process.env.NODE_ENV === 'production' -const formats = ['cjs', 'es'] +// const formats = ['cjs', 'es'] -export default async () => ({ - input: './src/index.js', - output: formats.map(format => ({ - file: `./dist/index.${format}.js`, - sourcemap: true, - name: 'anggun', - globals: { - react: 'React', - 'react-dom': 'ReactDOM' +// export default async () => ({ +// input: './src/index.ts', +// output: formats.map(format => ({ +// file: `./dist/index.${format}.js`, +// sourcemap: true, +// name: 'anggun', +// globals: { +// react: 'React', +// 'react-dom': 'ReactDOM' +// } +// })), +// external: ['react', 'react-dom', '@emotion/core', '@emotion/styled', 'emotion-theming'], +// plugins: [ +// babel({ +// /** only transpile our source code */ +// exclude: 'node_modules/**', +// babelHelpers: 'bundled' +// }), +// resolve(), +// commonjs() +// /** +// * use an async IIFE and dynamic imports to avoid unnecessary module loading +// * which can be surprisingly slow +// * https://rollupjs.org/guide/en/#core-functionality +// */ +// // isProduction && (await import('rollup-plugin-terser')).terser() +// ] +// }) + +import typescript from 'rollup-plugin-typescript2' +import pkg from './package.json' + +export default { + input: ['src/index.ts'], + output: [ + { + file: pkg.main, + format: 'cjs' + }, + { + file: pkg.module, + format: 'es' } - })), - external: ['react', 'react-dom', '@emotion/core', '@emotion/styled', 'emotion-theming'], + ], + external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})], plugins: [ - babel({ - /** only transpile our source code */ - exclude: 'node_modules/**', - babelHelpers: 'bundled' - }), - resolve(), - commonjs() - /** - * use an async IIFE and dynamic imports to avoid unnecessary module loading - * which can be surprisingly slow - * https://rollupjs.org/guide/en/#core-functionality - */ - // isProduction && (await import('rollup-plugin-terser')).terser() + typescript({ + clean: true, + typescript: require('typescript') + }) ] -}) +} diff --git a/packages/anggun/src/AnggunProvider/index.tsx b/packages/anggun/src/AnggunProvider/index.tsx new file mode 100644 index 0000000..29ef0a0 --- /dev/null +++ b/packages/anggun/src/AnggunProvider/index.tsx @@ -0,0 +1,15 @@ +/* eslint-disable react/prop-types */ +/** @jsx jsx */ +import { jsx } from '@emotion/core' +import { ThemeProvider } from 'emotion-theming' +import defaultTheme from '../theme' + +const AnggunProvider: React.FC = ({ children }) => ( + {children} +) + +AnggunProvider.defaultProps = { + theme: defaultTheme +} + +export default AnggunProvider diff --git a/packages/anggun/src/Badge/components/Badge.tsx b/packages/anggun/src/Badge/components/Badge.tsx new file mode 100644 index 0000000..a228779 --- /dev/null +++ b/packages/anggun/src/Badge/components/Badge.tsx @@ -0,0 +1,130 @@ +/* eslint-disable react/prop-types */ +import React, { forwardRef } from 'react' + +import { Box } from '../../Box' + +type VariantProps = 'solid' | 'outline' +type BgColorProps = 'blue' | 'red' | 'green' | 'yellow' | 'white' | 'black' +type ColorProps = 'blue' | 'red' | 'green' | 'yellow' | 'white' | 'black' +type SizeProps = 'xs' | 'sm' | 'md' + +/* this might be become utlis maybe, just let the code repetitive first */ +/* const bgStyle = (bgColors: BgColorProps) => { */ +/* for (const color in bgColors) { */ +/* if (bgColors[color]) { */ +/* return color */ +/* } */ +/* } */ +/* } */ + +/* const sizes = { */ +/* large: { */ +/* px: 3, */ +/* fontSize: 'md' */ +/* }, */ +/* medium: { */ +/* px: 2, */ +/* fontSize: 'sm' */ +/* }, */ +/* small: { */ +/* px: 1, */ +/* fontSize: 'xs' */ +/* } */ +/* } */ + +type SizeValue = { + [SizeProps: string]: { + px: number + fontSize: string + } +} + +const sizes: SizeValue = { + md: { + px: 3, + fontSize: 'md' + }, + sm: { + px: 2, + fontSize: 'sm' + }, + xs: { + px: 1, + fontSize: 'xs' + } +} + +const sizeProps = (size: SizeProps): SizeValue[SizeProps] => sizes[size] + +const solidBadge = ({ color, bgColor }: { color: ColorProps; bgColor: BgColorProps }) => ({ + border: 'none', + color, + bg: bgColor +}) + +const outlineBadge = ({ bgColor }: { bgColor: BgColorProps }) => ({ + borderStyle: 'solid', + borderWidth: '1px', + borderColor: bgColor, + color: bgColor, + bg: 'inherit' +}) + +type VariantParams = { + variant: VariantProps + bgColor: BgColorProps + color: ColorProps +} + +const variantBadge = ({ variant, color, bgColor }: T) => { + switch (variant) { + case 'solid': + return solidBadge({ color, bgColor }) + case 'outline': + return outlineBadge({ bgColor }) + } +} + +export interface BadgeProps { + variant?: VariantProps + bgColor?: BgColorProps + color?: ColorProps + rounded?: string + size?: SizeProps +} + +const Badge: React.FC = forwardRef( + ( + { + children, + variant = 'solid', + bgColor = 'white', + color = 'black', + rounded = 'sm', + size = 'sm', + ...rest + }, + ref + ) => { + /* const bg = bgStyle({ primary, danger, warning, success }) */ + const _color: ColorProps | BgColorProps = bgColor === 'yellow' ? 'black' : color + return ( + + {children} + + ) + } +) + +Badge.displayName = 'Badge' + +export default Badge diff --git a/packages/anggun/src/Badge/index.js b/packages/anggun/src/Badge/index.js deleted file mode 100644 index 2cefa6e..0000000 --- a/packages/anggun/src/Badge/index.js +++ /dev/null @@ -1,97 +0,0 @@ -/* eslint-disable react/prop-types */ -import React, { forwardRef } from 'react' - -import Box from '../Box' - -/* this will become utlis maybe, just let the code repetitive first */ -const bgStyle = bgColors => { - for (const color in bgColors) { - if (bgColors[color]) { - return color - } - } -} - -const sizes = { - large: { - px: 3, - fontSize: 'md' - }, - medium: { - px: 2, - fontSize: 'sm' - }, - small: { - px: 1, - fontSize: 'xs' - } -} - -const sizeProps = size => sizes[size] - -const solidBadge = ({ color, bg }) => ({ - border: 'none', - color, - bg -}) - -const outlineBadge = ({ bg }) => ({ - borderStyle: 'solid', - borderWidth: '1px', - borderColor: bg, - color: bg, - bg: 'inherit' -}) - -const variantBadge = ({ variant, ...props }) => { - switch (variant) { - case 'solid': - return solidBadge(props) - case 'outline': - return outlineBadge(props) - } -} - -const Badge = forwardRef( - ( - { - children, - variant = 'solid', - primary, - danger, - warning, - success, - color = 'white', - rounded = 'sm', - size = 'small', - ...rest - }, - ref - ) => { - /* - * You can use bg like: - * - * available bg { primary danger, warning, succcess } - */ - const bg = bgStyle({ primary, danger, warning, success }) - const _color = bg === 'warning' ? 'black' : color - return ( - - {children} - - ) - } -) - -Badge.displayName = 'Badge' - -export default Badge diff --git a/packages/anggun/src/Badge/index.ts b/packages/anggun/src/Badge/index.ts new file mode 100644 index 0000000..6ced612 --- /dev/null +++ b/packages/anggun/src/Badge/index.ts @@ -0,0 +1,2 @@ +export { default as Badge } from './components/Badge' +export * from './components/Badge' diff --git a/packages/anggun/src/Box/components/Box.stories.tsx b/packages/anggun/src/Box/components/Box.stories.tsx new file mode 100644 index 0000000..d0003b2 --- /dev/null +++ b/packages/anggun/src/Box/components/Box.stories.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import Box from './Box' +import { withA11y } from '@storybook/addon-a11y' +import { ProviderWrapper } from '../../utils/storybook' + +export default { + title: 'Badge', + decorators: [withA11y, ProviderWrapper] +} + +export const BasicBox = () => hello box diff --git a/packages/anggun/src/Box/components/Box.ts b/packages/anggun/src/Box/components/Box.ts new file mode 100644 index 0000000..5b357f5 --- /dev/null +++ b/packages/anggun/src/Box/components/Box.ts @@ -0,0 +1,58 @@ +import shouldForwardProp from '@styled-system/should-forward-prop' +import styled from '@emotion/styled' +import { + background, + BackgroundProps, + border, + BorderProps, + color, + ColorProps, + compose, + flexbox, + FlexboxProps, + grid, + GridProps, + layout, + LayoutProps, + position, + PositionProps, + shadow, + ShadowProps, + space, + SpaceProps, + typography, + TypographyProps +} from 'styled-system' +import extraConfig from '../config' + +export interface BoxProps + extends BackgroundProps, + BorderProps, + ColorProps, + FlexboxProps, + GridProps, + LayoutProps, + PositionProps, + ShadowProps, + SpaceProps, + TypographyProps {} + +const composeStyles = compose( + background, + border, + color, + flexbox, + grid, + layout, + position, + shadow, + space, + typography, + extraConfig +) + +const Box = styled('div', { shouldForwardProp })(composeStyles) + +Box.displayName = 'Box' + +export default Box diff --git a/packages/anggun/src/Box/config.js b/packages/anggun/src/Box/config/index.ts similarity index 81% rename from packages/anggun/src/Box/config.js rename to packages/anggun/src/Box/config/index.ts index 3f0ed99..9ca8a09 100644 --- a/packages/anggun/src/Box/config.js +++ b/packages/anggun/src/Box/config/index.ts @@ -1,6 +1,6 @@ -import { system } from 'styled-system' +import { system, Config } from 'styled-system' -const config = { +const config: Config = { rounded: { property: 'borderRadius', scale: 'radii' diff --git a/packages/anggun/src/Box/index.js b/packages/anggun/src/Box/index.js deleted file mode 100644 index 79166f5..0000000 --- a/packages/anggun/src/Box/index.js +++ /dev/null @@ -1,43 +0,0 @@ -import styled from '@emotion/styled' -import shouldForwardProp from '@styled-system/should-forward-prop' - -import extraConfig from './config' -/* - * @see {https://styled-system.com/api} - */ -import { - background, - border, - color, - compose, - flexbox, - grid, - layout, - position, - shadow, - space, - typography -} from 'styled-system' - -const composeStyles = compose( - space, - color, - typography, - flexbox, - grid, - background, - position, - shadow, - border, - layout, - extraConfig -) - -const Box = styled('div', { shouldForwardProp })(composeStyles, { - // minWidth: 0, - // boxSizing: 'border-box' -}) - -Box.displayName = 'Box' - -export default Box diff --git a/packages/anggun/src/Box/index.ts b/packages/anggun/src/Box/index.ts new file mode 100644 index 0000000..9199fc1 --- /dev/null +++ b/packages/anggun/src/Box/index.ts @@ -0,0 +1,2 @@ +export { default as Box } from './components/Box' +export * from './components/Box' diff --git a/packages/anggun/src/Button/index.js b/packages/anggun/src/Button/index.js index fd46711..756e62c 100644 --- a/packages/anggun/src/Button/index.js +++ b/packages/anggun/src/Button/index.js @@ -29,7 +29,7 @@ const sizeProps = size => sizes[size] const solidButton = ({ children, border, color, bg, size, ...rest }) => { const _color = bg === 'warning' ? 'black' : color return ( - + {children} ) @@ -38,10 +38,10 @@ const solidButton = ({ children, border, color, bg, size, ...rest }) => { const outlineButton = ({ children, color, border, bg, size, ...rest }) => { return ( ( ( { return (