@teamturing/react-kit 1.1.0

package/esm/packages/react-kit/src/utils/styled-system/index.js

@@ -0,0 +1,27 @@
+import css from '../../../../../node_modules/@styled-system/css/dist/index.esm.js';
+import '../../../../../node_modules/styled-system/dist/index.esm.js';
+import { system } from '../../../../../node_modules/@styled-system/core/dist/index.esm.js';
+
+// Support CSS custom properties in the `sx` prop
+
+const sx = props => css(props.sx);
+const textDecoration = system({
+  textDecoration: {
+    property: 'textDecoration',
+    scale: 'textDecoration'
+  }
+});
+const whiteSpace = system({
+  whiteSpace: {
+    property: 'whiteSpace',
+    scale: 'whiteSpace'
+  }
+});
+const wordBreak = system({
+  wordBreak: {
+    property: 'wordBreak',
+    scale: 'wordBreak'
+  }
+});
+
+export { sx, textDecoration, whiteSpace, wordBreak };

package/esm/packages/token-studio/src/foundation/palette/index.js

@@ -0,0 +1,90 @@
+const gray = {
+  gray50: '#F9FAFB',
+  gray100: '#F3F4F6',
+  gray200: '#E5E7EB',
+  gray300: '#D1D5DB',
+  gray400: '#8D94A0',
+  gray500: '#7A828D',
+  gray600: '#6F7680',
+  gray700: '#575C64',
+  gray800: '#43484E',
+  gray900: '#33373B'
+};
+const violet = {
+  violet50: '#F3EFFD',
+  violet100: '#E8E1FB',
+  violet200: '#D9CDF9',
+  violet300: '#C6B5F6',
+  violet400: '#9C7EEF',
+  violet500: '#835EEB',
+  violet600: '#7756D6',
+  violet700: '#5D43A7',
+  violet800: '#483481',
+  violet900: '#372763'
+};
+const green = {
+  green50: '#E9FAF6',
+  green100: '#BAEFE2',
+  green200: '#98E8D4',
+  green300: '#69DDC0',
+  green400: '#4CD6B4',
+  green500: '#1FCCA1',
+  green600: '#1CBA93',
+  green700: '#169172',
+  green800: '#117059',
+  green900: '#0D5644'
+};
+const yellow = {
+  yellow50: '#FFF9E6',
+  yellow100: '#FFECB2',
+  yellow200: '#FFE28D',
+  yellow300: '#FFD559',
+  yellow400: '#FFCD39',
+  yellow500: '#FFC107',
+  yellow600: '#E8B006',
+  yellow700: '#B58905',
+  yellow800: '#8C6A04',
+  yellow900: '#6B5103'
+};
+const red = {
+  red50: '#FEE9EB',
+  red100: '#FBBCC0',
+  red200: '#F99CA2',
+  red300: '#F66E78',
+  red400: '#F5525D',
+  red500: '#F22735',
+  red600: '#DC2330',
+  red700: '#AC1C26',
+  red800: '#85151D',
+  red900: '#661016'
+};
+const blue = {
+  blue50: '#edf2fd',
+  blue100: '#c6d8fa',
+  blue200: '#abc5f7',
+  blue300: '#84aaf4',
+  blue400: '#6d99f1',
+  blue500: '#4880ee',
+  blue600: '#4274d9',
+  blue700: '#335ba9',
+  blue800: '#284683',
+  blue900: '#1e3664'
+};
+const shade = {
+  transparent: '#FFFFFF00',
+  white: '#FFFFFF',
+  white10A: '#FFFFFF1A',
+  black: '#000000',
+  black60A: '#00000099'
+};
+const palette = {
+  ...gray,
+  ...violet,
+  ...green,
+  ...yellow,
+  ...red,
+  ...blue,
+  ...shade
+};
+
+export { blue, palette as default, gray, green, red, shade, violet, yellow };

package/esm/packages/token-studio/src/foundation/rounding/index.js

@@ -0,0 +1,13 @@
+const rounding = {
+  rounding0: 0,
+  rounding4: 4,
+  rounding8: 8,
+  rounding12: 12,
+  rounding16: 16,
+  rounding20: 20,
+  rounding24: 24,
+  rounding32: 32,
+  rounding9999: 9999
+};
+
+export { rounding as default };

package/esm/packages/token-studio/src/foundation/spacing/index.js

@@ -0,0 +1,56 @@
+const unit = 4;
+const spacing = {
+  spacing0: 0 * unit,
+  // 0
+  spacing1: 1,
+  // 1
+  spacing2: 0.5 * unit,
+  // 2
+  spacing4: 1 * unit,
+  // 4
+  spacing6: 1.5 * unit,
+  // 6
+  spacing8: 2 * unit,
+  // 8
+  spacing12: 3 * unit,
+  // 12
+  spacing16: 4 * unit,
+  // 16
+  spacing20: 5 * unit,
+  // 20
+  spacing24: 6 * unit,
+  // 24
+  spacing28: 7 * unit,
+  // 28
+  spacing32: 8 * unit,
+  // 32
+  spacing40: 10 * unit,
+  // 40
+  spacing48: 12 * unit,
+  // 48
+  spacing56: 14 * unit,
+  // 56
+  spacing64: 16 * unit,
+  // 64
+  spacing72: 18 * unit,
+  // 72
+  spacing80: 20 * unit,
+  // 80
+  spacing96: 24 * unit,
+  // 96
+  spacing112: 28 * unit,
+  // 112
+  spacing120: 30 * unit,
+  // 120
+  spacing128: 32 * unit,
+  // 128
+  spacing160: 40 * unit,
+  // 160
+  spacing192: 48 * unit,
+  // 192
+  spacing200: 50 * unit,
+  // 200
+  spacing320: 80 * unit // 320
+};
+
+export { spacing as default };

package/esm/packages/token-studio/src/foundation/typography/fontSize/index.js

@@ -0,0 +1,18 @@
+const fontSize = {
+  fontSize50: 10,
+  fontSize100: 12,
+  fontSize200: 14,
+  fontSize300: 16,
+  fontSize400: 18,
+  fontSize500: 20,
+  fontSize600: 22,
+  fontSize700: 24,
+  fontSize800: 28,
+  fontSize900: 32,
+  fontSize1000: 40,
+  fontSize1100: 48,
+  fontSize1200: 64,
+  fontSize1300: 100
+};
+
+export { fontSize as default };

package/esm/packages/token-studio/src/foundation/typography/fontWeight/index.js

@@ -0,0 +1,13 @@
+const fontWeight = {
+  fontWeight100: 100,
+  fontWeight200: 200,
+  fontWeight300: 300,
+  fontWeight400: 400,
+  fontWeight500: 500,
+  fontWeight600: 600,
+  fontWeight700: 700,
+  fontWeight800: 800,
+  fontWeight900: 900
+};
+
+export { fontWeight as default };

package/esm/packages/token-studio/src/foundation/typography/lineHeight/index.js

@@ -0,0 +1,6 @@
+const lineHeight = {
+  lineHeight1: 1.4,
+  lineHeight2: 1.5
+};
+
+export { lineHeight as default };

package/esm/packages/token-studio/src/token/color/index.js

@@ -0,0 +1,140 @@
+import palette from '../../foundation/palette/index.js';
+
+const textColor = {
+  'text/primary': palette.violet500,
+  'text/accent/blue': palette.blue500,
+  'text/accent/green': palette.green500,
+  'text/accent/yellow': palette.yellow500,
+  'text/accent/red': palette.red500,
+  'text/neutral/subtlest': palette.gray400,
+  'text/neutral/subtler': palette.gray500,
+  'text/neutral/subtle': palette.gray700,
+  'text/neutral': palette.gray900,
+  'text/inverse': palette.white,
+  'text/inverse/subtle': palette.gray200,
+  'text/inverse/subtler': palette.gray300,
+  'text/disabled': palette.gray400,
+  'text/success': palette.green500,
+  'text/warning': palette.yellow500,
+  'text/danger': palette.red500,
+  'text/selected/neutral': palette.gray900
+};
+const bgColor = {
+  'bg/secondary': palette.violet50,
+  'bg/secondary/hovered': palette.violet200,
+  'bg/secondary/pressed': palette.violet200,
+  'bg/primary': palette.violet500,
+  'bg/primary/hovered': palette.violet700,
+  'bg/primary/pressed': palette.violet700,
+  'bg/neutral/subtler': palette.transparent,
+  'bg/neutral/subtler/hovered': palette.gray100,
+  'bg/neutral/subtler/pressed': palette.gray100,
+  'bg/neutral/subtle': palette.gray50,
+  'bg/neutral/subtle/hovered': palette.gray200,
+  'bg/neutral/subtle/pressed': palette.gray200,
+  'bg/neutral': palette.gray100,
+  'bg/neutral/hovered': palette.gray300,
+  'bg/neutral/pressed': palette.gray300,
+  'bg/neutral/bold': palette.gray700,
+  'bg/neutral/bold/hovered': palette.gray900,
+  'bg/neutral/bold/pressed': palette.gray900,
+  'bg/neutral/bolder': palette.gray900,
+  'bg/neutral/bolder/hovered': palette.black,
+  'bg/neutral/bolder/pressed': palette.black,
+  'bg/disabled': palette.gray100,
+  'bg/disabled/subtlest': palette.transparent,
+  'bg/input': palette.white,
+  'bg/accent/green/subtlest': palette.green50,
+  'bg/accent/yellow/subtlest': palette.yellow50,
+  'bg/accent/red/subtlest': palette.red50,
+  'bg/accent/red/subtle': palette.red400,
+  'bg/accent/red': palette.red500,
+  'bg/accent/gray/subtlest': palette.gray200,
+  'bg/accent/blue/subtlest': palette.blue50,
+  'bg/selected/violet': palette.violet500,
+  'bg/selected/neutral': palette.gray900,
+  'bg/selected/neutral/subtle': palette.gray100,
+  'bg/inverse': palette.black,
+  'bg/inverse/subtlest': palette.white10A,
+  'bg/success': palette.green50,
+  'bg/success/bold': palette.green500,
+  'bg/warning': palette.yellow50,
+  'bg/warning/bold': palette.yellow500,
+  'bg/danger': palette.red50,
+  'bg/danger/bold': palette.red400,
+  'bg/danger/bold/hovered': palette.red600,
+  'bg/danger/bold/pressed': palette.red600
+};
+const borderColor = {
+  'border/neutral/subtle': palette.gray100,
+  'border/neutral': palette.gray200,
+  'border/neutral/bolder': palette.gray300,
+  'border/input': palette.gray200,
+  'border/inverse': palette.white10A,
+  'border/disabled': palette.gray100,
+  'border/primary': palette.violet500,
+  'border/hovered': palette.blue300,
+  'border/focused': palette.blue500,
+  'border/danger': palette.red500,
+  'border/success': palette.green500
+};
+const iconColor = {
+  'icon/neutral': palette.gray300,
+  'icon/neutral/bold': palette.gray400,
+  'icon/neutral/bolder': palette.gray700,
+  'icon/accent/gray': palette.gray900,
+  'icon/accent/blue': palette.blue500,
+  'icon/accent/blue/bold': palette.blue700,
+  'icon/accent/green': palette.green500,
+  'icon/accent/yellow': palette.yellow500,
+  'icon/accent/red': palette.red500,
+  'icon/inverse': palette.white,
+  'icon/disabled': palette.gray300,
+  'icon/disabled/subtler': palette.gray200,
+  'icon/selected/primary': palette.violet500,
+  'icon/selected/neutral': palette.gray900,
+  'icon/primary': palette.violet500,
+  'icon/primary/subtle': palette.violet300,
+  'icon/primary/bold': palette.violet700,
+  'icon/success': palette.green500,
+  'icon/warning': palette.yellow500,
+  'icon/danger': palette.red500
+};
+const linkColor = {
+  'link': palette.blue500,
+  'link/hovered': palette.blue700,
+  'link/pressed': palette.blue700,
+  'link/neutral': palette.gray500,
+  'link/neutral/hovered': palette.gray700,
+  'link/neutral/pressed': palette.gray700,
+  'link/neutral/bold': palette.gray700,
+  'link/neutral/bold/hovered': palette.gray900,
+  'link/neutral/bold/pressed': palette.gray900,
+  'link/disabled': palette.gray700
+};
+const dimColor = {
+  dim: palette.black60A
+};
+const scaleColor = {
+  'scale/violet/0': palette.violet50,
+  'scale/violet/1': palette.violet100,
+  'scale/violet/2': palette.violet200,
+  'scale/violet/3': palette.violet300,
+  'scale/violet/4': palette.violet400,
+  'scale/violet/5': palette.violet500,
+  'scale/violet/6': palette.violet600,
+  'scale/violet/7': palette.violet700,
+  'scale/violet/8': palette.violet800,
+  'scale/violet/9': palette.violet900
+};
+const color = {
+  ...textColor,
+  ...bgColor,
+  ...borderColor,
+  ...iconColor,
+  ...linkColor,
+  ...dimColor,
+  ...scaleColor
+};
+
+export { bgColor, borderColor, color as default, dimColor, iconColor, linkColor, scaleColor, textColor };

package/esm/packages/token-studio/src/token/radii/index.js

@@ -0,0 +1,15 @@
+import rounding from '../../foundation/rounding/index.js';
+
+const radii = {
+  none: rounding.rounding0,
+  xxs: rounding.rounding4,
+  xs: rounding.rounding8,
+  s: rounding.rounding12,
+  m: rounding.rounding16,
+  l: rounding.rounding20,
+  xl: rounding.rounding24,
+  xxl: rounding.rounding32,
+  full: rounding.rounding9999
+};
+
+export { radii as default };

package/esm/packages/token-studio/src/token/space/index.js

@@ -0,0 +1,55 @@
+import spacing from '../../foundation/spacing/index.js';
+
+const space = {
+  '-80': -spacing.spacing320,
+  '-50': -spacing.spacing200,
+  '-48': -spacing.spacing192,
+  '-40': -spacing.spacing160,
+  '-32': -spacing.spacing128,
+  '-30': -spacing.spacing120,
+  '-28': -spacing.spacing112,
+  '-24': -spacing.spacing96,
+  '-20': -spacing.spacing80,
+  '-18': -spacing.spacing72,
+  '-16': -spacing.spacing64,
+  '-14': -spacing.spacing56,
+  '-12': -spacing.spacing48,
+  '-10': -spacing.spacing40,
+  '-8': -spacing.spacing32,
+  '-7': -spacing.spacing28,
+  '-6': -spacing.spacing24,
+  '-5': -spacing.spacing20,
+  '-4': -spacing.spacing16,
+  '-3': -spacing.spacing12,
+  '-2': -spacing.spacing8,
+  '-1': -spacing.spacing4,
+  '-0.5': -spacing.spacing2,
+  '-0.25': -spacing.spacing1,
+  0: spacing.spacing0,
+  0.25: spacing.spacing1,
+  0.5: spacing.spacing2,
+  1: spacing.spacing4,
+  2: spacing.spacing8,
+  3: spacing.spacing12,
+  4: spacing.spacing16,
+  5: spacing.spacing20,
+  6: spacing.spacing24,
+  7: spacing.spacing28,
+  8: spacing.spacing32,
+  10: spacing.spacing40,
+  12: spacing.spacing48,
+  14: spacing.spacing56,
+  16: spacing.spacing64,
+  18: spacing.spacing72,
+  20: spacing.spacing80,
+  24: spacing.spacing96,
+  28: spacing.spacing112,
+  30: spacing.spacing120,
+  32: spacing.spacing128,
+  40: spacing.spacing160,
+  48: spacing.spacing192,
+  50: spacing.spacing200,
+  80: spacing.spacing320
+};
+
+export { space as default };

package/esm/packages/token-studio/src/token/typography/fontSizes.js

@@ -0,0 +1,17 @@
+import fontSize from '../../foundation/typography/fontSize/index.js';
+
+const fontSizes = {
+  xxs: fontSize.fontSize100,
+  xs: fontSize.fontSize200,
+  s: fontSize.fontSize300,
+  m: fontSize.fontSize500,
+  l: fontSize.fontSize700,
+  xl: fontSize.fontSize800,
+  xxl: fontSize.fontSize900,
+  display4: fontSize.fontSize1000,
+  display3: fontSize.fontSize1100,
+  display2: fontSize.fontSize1200,
+  display1: fontSize.fontSize1300
+};
+
+export { fontSizes as default };

package/esm/packages/token-studio/src/token/typography/fontWeights.js

@@ -0,0 +1,9 @@
+import fontWeight from '../../foundation/typography/fontWeight/index.js';
+
+const fontWeights = {
+  regular: fontWeight.fontWeight400,
+  medium: fontWeight.fontWeight500,
+  bold: fontWeight.fontWeight700
+};
+
+export { fontWeights as default };

package/esm/packages/token-studio/src/token/typography/index.js

@@ -0,0 +1,133 @@
+import fontSizes from './fontSizes.js';
+import fontWeights from './fontWeights.js';
+import lineHeights from './lineHeights.js';
+
+const typography = {
+  'display1': {
+    fontSize: fontSizes.display1,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display2': {
+    fontSize: fontSizes.display2,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display3': {
+    fontSize: fontSizes.display3,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[1]
+  },
+  'display4': {
+    fontSize: fontSizes.display4,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xxl/regular': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xxl': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xxl/bold': {
+    fontSize: fontSizes.xxl,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xl/regular': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xl': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xl/bold': {
+    fontSize: fontSizes.xl,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'l/regular': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'l': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'l/bold': {
+    fontSize: fontSizes.l,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'm/regular': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'm': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'm/bold': {
+    fontSize: fontSizes.m,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  's/regular': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  's': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  's/bold': {
+    fontSize: fontSizes.s,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xs/regular': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xs': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xs/bold': {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  },
+  'xxs/regular': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.regular,
+    lineHeight: lineHeights[2]
+  },
+  'xxs': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights[2]
+  },
+  'xxs/bold': {
+    fontSize: fontSizes.xxs,
+    fontWeight: fontWeights.bold,
+    lineHeight: lineHeights[2]
+  }
+};
+
+export { typography as default, fontSizes, fontWeights, lineHeights };

package/esm/packages/token-studio/src/token/typography/lineHeights.js

@@ -0,0 +1,8 @@
+import lineHeight from '../../foundation/typography/lineHeight/index.js';
+
+const lineHeights = {
+  1: lineHeight.lineHeight1,
+  2: lineHeight.lineHeight2
+};
+
+export { lineHeights as default };

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@teamturing/react-kit",
+  "version": "1.1.0",
+  "description": "React components, hooks for create teamturing web application",
+  "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
+  "homepage": "https://github.com/weareteamturing/bombe#readme",
+  "license": "MIT",
+  "main": "./src/index.ts",
+  "files": [
+    "dist",
+    "esm"
+  ],
+  "exports": {
+    "require": "./src/index.ts",
+    "import": "./src/index.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/weareteamturing/bombe.git"
+  },
+  "scripts": {
+    "check:lint": "eslint ./src --cache",
+    "check:type": "tsc --noEmit",
+    "build": "rm -rf dist esm && tsc --project tsconfig.cjs.json --declaration --emitDeclarationOnly --declarationDir dist && rollup --config rollup.config.js"
+  },
+  "bugs": {
+    "url": "https://github.com/weareteamturing/bombe/issues"
+  },
+  "devDependencies": {
+    "@styled-system/css": "^5.1.5",
+    "@types/lodash-es": "^4.17.9",
+    "@types/styled-system": "^5.1.17",
+    "@types/styled-system__css": "^5.0.17",
+    "csstype": "^3.1.2",
+    "react": "^18.2.0",
+    "styled-components": "^6.0.7",
+    "styled-system": "^5.1.5"
+  },
+  "peerDependencies": {
+    "@styled-system/css": "^5.1.5",
+    "@types/styled-system": "^5.1.17",
+    "@types/styled-system__css": "^5.0.17",
+    "react": "*",
+    "styled-system": "^5.1.5"
+  },
+  "dependencies": {
+    "@teamturing/icons": "^1.17.1",
+    "@teamturing/token-studio": "^1.1.3"
+  },
+  "publishConfig": {
+    "main": "./dist/index.js",
+    "exports": {
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./esm/index.js"
+    }
+  },
+  "gitHead": "91c9ccf3be42ab10e6360e78e020b9d80531ec2f"
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { default as Chip } from './core/Chip';
+export { default as GradientText } from './core/GradientText';
+export { default as Grid } from './core/Grid';
+export { default as IconButton } from './core/IconButton';
+export { default as IconToggleButton } from './core/IconToggleButton';
+export { default as ItemList } from './core/ItemList';
+export { default as Space } from './core/Space';
+export { default as Spinner } from './core/Spinner';
+export { default as Stack } from './core/Stack';
+export { default as StyledIcon } from './core/StyledIcon';
+export { default as Text } from './core/Text';
+export { default as View } from './core/View';