v0.3.0

Author: jwoo0122

.storybook/preview.js

@@ -3,12 +3,17 @@ import React from 'react'
 
 /* Internel dependencies */
 import EnableCSSHoudini from '../src/worklets/EnableCSSHoudini'
-import { ThemeProvider, LightTheme, DarkTheme } from '../src/styling/Theme'
+import {
+  FoundationProvider,
+  LightFoundation,
+  DarkFoundation,
+  styled,
+} from '../src/foundation'
 
 // CSS Houdini
 EnableCSSHoudini({ smoothCorners: true })
 
-const ThemeKeyword = {
+const FoundationKeyword = {
   Light: 'light',
   Dark: 'dark',
 }
@@ -18,33 +23,35 @@ export const parameters = {
 }
 
 export const globalTypes = {
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
+  Foundation: {
+    name: 'Foundation',
+    description: 'Global Foundation for components',
     defaultValue: 'light',
     toolbar: {
       icon: 'circlehollow',
-      items: [ThemeKeyword.Light, ThemeKeyword.Dark],
+      items: [FoundationKeyword.Light, FoundationKeyword.Dark],
     },
   },
 };
 
-function getTheme(keyword) {
-  if (keyword === ThemeKeyword.Light) return LightTheme
-  return DarkTheme
+function getFoundation(keyword) {
+  if (keyword === FoundationKeyword.Light) return LightFoundation
+  return DarkFoundation
 }
 
-function withThemeProvider(Story, context) {
-  const theme = getTheme(context.globals.theme)
-  const backgroundColor = context.globals.theme === 'dark' ? 'black' : 'white'
+function withFoundationProvider(Story, context) {
+  const Foundation = getFoundation(context.globals.Foundation)
+  const backgroundColor = context.globals.Foundation === 'dark'
+    ? DarkFoundation.theme['bg-white-normal']
+    : LightFoundation.theme['bg-white-normal']
 
   return (
-    <div style={{ backgroundColor }}>
-      <ThemeProvider theme={theme}>
+    <div style={{ backgroundColor, padding: 100 }}>
+      <FoundationProvider foundation={Foundation}>
         { Story(context) }
-      </ThemeProvider>
+      </FoundationProvider>
     </div>
   )
 }
 
-export const decorators = [withThemeProvider]
+export const decorators = [withFoundationProvider]

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.2.21",
+  "version": "0.3.0",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "jest:watch": "cross-env BABEL_ENV=test jest --watch",
     "build": "cross-env BABEL_ENV=build rollup -c",
     "prebuild": "npm run typecheck",
-    "prepublishOnly": "npm run build:icon && npm run build",
+    "prepublishOnly": "npm run build:icon && npm run build && npm run build:storybook && npm run deploy:storybook",
     "antlr:lexer": "antlr4ts src/components/Editor/utils/Parsers/Antlr/TextBlockLexer.g4",
     "antlr:parser": "antlr4ts src/components/Editor/utils/Parsers/Antlr/TextBlockParser.g4",
     "build:storybook": "build-storybook",
@@ -64,73 +64,73 @@
     "> 1% in US"
   ],
   "devDependencies": {
-    "@babel/core": "^7.10.5",
+    "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-decorators": "^7.12.1",
     "@babel/plugin-transform-classes": "^7.12.1",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
     "@channel.io/eslint-config": "^1.0.8",
-    "@channel.io/stylelint-config": "^1.1.0",
-    "@rollup/plugin-babel": "^5.1.0",
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.3",
-    "@storybook/addon-actions": "^6.0.26",
-    "@storybook/addon-controls": "^6.0.26",
-    "@storybook/addon-docs": "^6.0.26",
-    "@storybook/addon-toolbars": "^6.0.26",
-    "@storybook/react": "^6.0.26",
+    "@channel.io/stylelint-config": "^1.2.0",
+    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.1.0",
+    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-controls": "^6.1.11",
+    "@storybook/addon-docs": "^6.1.11",
+    "@storybook/addon-toolbars": "^6.1.11",
+    "@storybook/react": "^6.1.11",
     "@storybook/storybook-deployer": "^2.8.7",
     "@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
     "@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
-    "@svgr/cli": "^5.4.0",
-    "@testing-library/jest-dom": "^5.5.0",
-    "@testing-library/react": "^10.0.4",
+    "@svgr/cli": "^5.5.0",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^10.4.9",
     "@types/antlr4": "^4.7.2",
-    "@types/jest": "^25.2.1",
-    "@types/lodash-es": "^4.17.3",
+    "@types/jest": "^25.2.3",
+    "@types/lodash-es": "^4.17.4",
     "@types/prosemirror-commands": "^1.0.3",
     "@types/prosemirror-inputrules": "^1.0.3",
     "@types/prosemirror-keymap": "^1.0.3",
-    "@types/prosemirror-model": "^1.11.0",
+    "@types/prosemirror-model": "^1.11.1",
     "@types/prosemirror-state": "^1.2.5",
     "@types/prosemirror-view": "^1.16.1",
-    "@types/react": "^16.9.34",
-    "@types/styled-components": "^5.1.0",
+    "@types/react": "^16.14.2",
+    "@types/styled-components": "^5.1.5",
     "@types/uuid": "^8.3.0",
-    "@typescript-eslint/eslint-plugin": "^4.4.1",
-    "@typescript-eslint/parser": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^4.10.0",
+    "@typescript-eslint/parser": "^4.10.0",
     "babel-eslint": "^8.2.6",
-    "babel-jest": "^26.2.2",
-    "babel-loader": "^8.1.0",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-imports": "^2.0.0",
     "babel-preset-react-app": "^9.1.2",
-    "core-js": "^3.6.5",
-    "cross-env": "^7.0.2",
-    "eslint": "^7.11.0",
+    "core-js": "^3.8.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.15.0",
     "eslint-import-resolver-typescript": "^2.3.0",
-    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^22.21.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.4",
-    "eslint-plugin-react-hooks": "^4.1.2",
-    "husky": "^4.2.5",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^4.3.6",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.0.1",
-    "lint-staged": "^10.2.10",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.3",
     "paths.macro": "^3.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "regenerator-runtime": "^0.13.5",
-    "rollup": "^2.8.2",
-    "rollup-plugin-peer-deps-external": "^2.2.2",
-    "styled-components": "^5.1.0",
-    "stylelint": "^13.6.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "regenerator-runtime": "^0.13.7",
+    "rollup": "^2.37.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "styled-components": "^5.2.1",
+    "stylelint": "^13.8.0",
     "ts-node": "^8.10.2",
-    "typescript": "^3.8.3"
+    "typescript": "^4.1.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -144,10 +144,10 @@
     "prosemirror-commands": "^1.1.4",
     "prosemirror-inputrules": "^1.1.3",
     "prosemirror-keymap": "^1.1.4",
-    "prosemirror-model": "^1.12.0",
+    "prosemirror-model": "^1.13.0",
     "prosemirror-state": "^1.3.3",
-    "prosemirror-view": "^1.16.0",
+    "prosemirror-view": "^1.16.5",
     "ssr-window": "^2.0.0",
-    "uuid": "^8.3.1"
+    "uuid": "^8.3.2"
   }
 }

package.json

@@ -1,20 +1,20 @@
 /* Internal dependencies */
-import { styled } from '../../styling/Theme'
+import { styled } from '../../foundation'
 
 interface BaseButtonProps {
   width: number
   height: number
 }
 
 export const StyledBaseButton = styled.div<BaseButtonProps>`
+  box-sizing: content-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 0 1px 10px black, 0 10px 10px black;
-  outline: none;
   width: ${props => props.width};
   height: ${props => props.height};
-  border-radius: 15px;
   background-color: white;
-  box-sizing: content-box;
+  border-radius: 15px;
+  outline: none;
+  box-shadow: 0 0 1px 10px black, 0 10px 10px black;
 `

src/components/Button/Button.styled.ts

@@ -1,6 +1,6 @@
 /* Internal dependencies */
-import { styled } from '../../styling/Theme'
-import { absoluteCenter } from '../../styling/Mixins'
+import DisabledOpacity from '../../constants/DisabledOpacity'
+import { styled, css, absoluteCenter } from '../../foundation'
 import { StyledWrapperProps, StyledCheckerProps, StyledContentProps } from './Checkbox.types'
 import CheckType from './CheckType'
 
@@ -19,83 +19,88 @@ export const Wrapper = styled.div<StyledWrapperProps>`
   )}
 `
 
-const checkerBase = (props: StyledCheckerProps) => `
+function isTrueOrPartial(checkStatus: CheckType = CheckType.False) {
+  return checkStatus === CheckType.True || checkStatus === CheckType.Partial
+}
+
+const checkerBase = css<StyledCheckerProps>`
+  background-color:
+    ${({ foundation, checkStatus }) =>
+    (isTrueOrPartial(checkStatus) ? foundation?.theme?.['bgtxt-green-normal'] : '')};
+  border-color: ${({ checkStatus }) => (isTrueOrPartial(checkStatus) ? 'transparent' : '')};
+
   &::after {
     ${absoluteCenter`translateY(-13%) rotate(42deg)`}
-    width: 4px;
-    height: 9px;
-    border-right: solid ${CHECKER_ICON_THICKNESS}px transparent;
-    border-bottom: solid ${CHECKER_ICON_THICKNESS}px transparent;
-    border-color: ${props.theme?.colors?.border0};
+    display: ${({ checkStatus }) => (isTrueOrPartial(checkStatus) ? 'initial' : 'none')};
+    width: 6px;
+    height: 10px;
     content: '';
-    transition: ${props.theme?.transition?.BorderTransition};
+    ${({ foundation }) =>
+    foundation?.border?.getBorder(
+      CHECKER_ICON_THICKNESS,
+      foundation?.theme?.['bg-white-absolute'],
+      { top: false, left: false },
+    )};
+    ${({ foundation }) => foundation?.transition?.getTransitionsCSS('border')};
   }
 
-  ${(props.checkStatus === CheckType.True || props.checkStatus === CheckType.Partial) ? `
-    background-color: ${props.theme?.colors?.success1};
-    border-color: transparent;
-
-    ${!props.disabled ? `
-      &:hover {
-        background-color: ${props.theme?.colors.success1Hover};
-      }
-    ` : ''}
-  ` : ''}
+  &:hover {
+    background-color:
+      ${({ foundation, disabled, checkStatus }) =>
+    ((!disabled && isTrueOrPartial(checkStatus)) ? foundation?.theme?.['bgtxt-green-dark'] : '')};
+  }
 `
 
-const partialChecked = (props: StyledCheckerProps) => ((props.checkStatus === CheckType.Partial) ? `
+const partialChecked = css<StyledCheckerProps>`
   &::after {
     ${absoluteCenter`translateY(-36%) rotate(0)`}
     width: 10px;
-    border-right: none;
-    border-bottom: solid 2px ${props.theme?.colors?.border0};
+    ${({ foundation }) =>
+    foundation?.border?.getBorder(
+      CHECKER_ICON_THICKNESS,
+      foundation?.theme?.['bg-white-absolute'],
+      { top: false, right: false, left: false },
+    )};
   }
-` : '')
-
-const disabled = (props: StyledCheckerProps) => ((props.disabled) ? `
-  background-color: ${props.theme?.colors?.disabled3};
+`
 
-  ${(props.checkStatus === CheckType.False) ? `
-    &::after {
-      border-color: transparent;
-    }
-  ` : `
-    &::after {
-      border-color: ${props.theme?.colors?.border5}
-    }
-  `}
-` : '')
+const disabledStyle = css<StyledCheckerProps>`
+  opacity: ${DisabledOpacity};
+`
 
 export const Checker = styled.div<StyledCheckerProps>`
   position: relative;
+  box-sizing: border-box !important;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box !important;
   width: ${CHECKER_BOX_SIZE}px;
-  height: ${CHECKER_BOX_SIZE}px;
   min-width: ${CHECKER_BOX_SIZE}px;
+  height: ${CHECKER_BOX_SIZE}px;
   min-height: ${CHECKER_BOX_SIZE}px;
   font-size: 10px;
   color: transparent;
-  background-color: ${props => props.theme?.colors?.background0};
-  border: ${CHECKER_BORDER_THICKNESS}px solid ${props => props.theme?.colors?.border3};
+  ${({ foundation }) =>
+    foundation
+      ?.border
+      ?.getBorder(CHECKER_BORDER_THICKNESS, foundation?.theme?.['bd-black-light'])};
   border-radius: 4px;
-  transition: ${props => props.theme?.transition?.BackgroundTransition}, ${props => props.theme?.transition?.ColorTransition};
 
-  ${props => (!props.disabled ? `
+  ${({ foundation }) => foundation?.transition?.getTransitionsCSS(['background-color', 'opacity'])};
+
+  ${({ foundation, disabled }) => (!disabled ? `
     &:hover {
       &::after {
-        border-color: ${props.theme?.colors?.border2};
+        border-color: ${foundation?.theme?.['bd-black-light']};
       }
     }
   ` : '')}
 
   ${checkerBase}
 
-  ${partialChecked}
+  ${({ checkStatus }) => (checkStatus === CheckType.Partial ? partialChecked : '')}
 
-  ${disabled}
+  ${({ disabled }) => (disabled ? disabledStyle : '')}
 `
 
 export const Content = styled.div<StyledContentProps>`