@teamturing/react-kit 1.1.0

package/esm/packages/react-kit/src/core/Grid/index.js

@@ -0,0 +1,106 @@
+import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import space from '../../../../token-studio/src/token/space/index.js';
+import { forwardRef } from 'react';
+import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
+import '../../../../../node_modules/styled-system/dist/index.esm.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { isArray } from '../../utils/isArray.js';
+import { isNullable } from '../../utils/isNullable.js';
+import View from '../View/index.js';
+import { variant } from '../../../../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const Grid = /*#__PURE__*/forwardRef(({
+  children,
+  wrap: propWrap = true,
+  gapX = 0,
+  gapY = 0,
+  as,
+  ...props
+}, ref) => {
+  const wrap = Array.isArray(propWrap) ? propWrap.map(value => value === true ? 'true' : 'false') : propWrap === true ? 'true' : 'false';
+  return /*#__PURE__*/React.createElement(BaseGrid, _extends({
+    ref: ref,
+    gapX: gapX,
+    gapY: gapY,
+    wrap: wrap,
+    as: as
+  }, props), children);
+});
+const BaseGrid = Qe(View)({
+  display: 'flex',
+  flexDirection: 'row'
+}, variant({
+  prop: 'gapX',
+  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        px: forcePixelValue(value / 2)
+      },
+      'mx': forcePixelValue(-value / 2)
+    };
+    return [key, styleValue];
+  }))
+}), variant({
+  prop: 'gapY',
+  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        mt: forcePixelValue(value)
+      },
+      'mt': forcePixelValue(-value)
+    };
+    return [key, styleValue];
+  }))
+}), variant({
+  prop: 'wrap',
+  variants: {
+    true: {
+      flexWrap: 'wrap'
+    },
+    false: {
+      flexWrap: 'nowrap'
+    }
+  }
+}));
+const mapValueToResponsiveValueProps = (value, propsAccessor) => {
+  if (isNullable(value) || typeof value === 'object' && !isArray(value)) return null;
+  if (!isArray(value)) return propsAccessor(value);
+  return value.reduce((acc, cur) => {
+    const curProps = propsAccessor(cur);
+    const curPropKeys = Object.keys(curProps);
+    return Object.fromEntries(curPropKeys.map(curPropKey => [curPropKey, acc[curPropKey] === undefined || acc[curPropKey] === null ? [curProps[curPropKey]] : isArray(acc[curPropKey]) ? [...acc[curPropKey], curProps[curPropKey]] : [acc[curPropKey], curProps[curPropKey]]]));
+  }, {});
+};
+const Unit = ({
+  size,
+  as,
+  children,
+  ...props
+}) => {
+  const getFlexGrowBySize = size => size === 'max' ? 1 : size === 'min' ? 0 : 1;
+  const getFlexBySize = size => size === 'max' ? 1 : size === 'min' ? 'none' : 'none';
+  const getFlexBasisBySize = size => {
+    const percentage = Math.round(size * 100 * 10000) / 10000;
+    return size === 'max' ? 'auto' : size === 'min' ? 'auto' : `${percentage}%`;
+  };
+  const getWidthBySize = size => size === 'max' ? 'auto' : size === 'min' ? 'auto' : 'none';
+  const getMaxWidthBySize = size => {
+    const percentage = Math.round(size * 100 * 10000) / 10000;
+    return size === 'max' ? '100%' : size === 'min' ? 'none' : `${percentage}%`;
+  };
+  return /*#__PURE__*/React.createElement(View, _extends({}, mapValueToResponsiveValueProps(size, value => ({
+    display: value === 0 ? 'none' : 'initial',
+    flowGrow: getFlexGrowBySize(value),
+    flex: getFlexBySize(value),
+    flexBasis: getFlexBasisBySize(value),
+    width: getWidthBySize(value),
+    maxWidth: getMaxWidthBySize(value)
+  })), {
+    as: as
+  }, props), children);
+};
+var index = Object.assign(Grid, {
+  Unit
+});
+
+export { index as default };

package/esm/packages/react-kit/src/core/IconButton/index.js

@@ -0,0 +1,212 @@
+import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import color from '../../../../token-studio/src/token/color/index.js';
+import radii from '../../../../token-studio/src/token/radii/index.js';
+import { forwardRef } from 'react';
+import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
+import '../../../../../node_modules/styled-system/dist/index.esm.js';
+import Spinner from '../Spinner/index.js';
+import UnstyledButton from '../_UnstyledButton.js';
+import { variant } from '../../../../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const IconButton = /*#__PURE__*/forwardRef(({
+  icon: Icon,
+  size = 'm',
+  variant = 'primary',
+  disabled = false,
+  loading = false,
+  type = 'button',
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(BaseIconButton, _extends({
+    ref: ref,
+    type: type,
+    icon: Icon,
+    size: size,
+    variant: variant,
+    disabled: disabled || loading,
+    $disabled: disabled,
+    $loading: loading
+  }, props), !loading ? /*#__PURE__*/React.createElement(Icon, null) : /*#__PURE__*/React.createElement(Spinner, {
+    color: 'currentColor'
+  }));
+});
+const BaseIconButton = Qe(UnstyledButton)(({
+  $loading,
+  $disabled
+}) => ({
+  'position': 'relative',
+  'borderRadius': radii.full,
+  'transition': 'background-color 100ms, color 100ms',
+  '& svg': {
+    display: 'block',
+    pointerEvents: 'none'
+  },
+  'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
+  ':focus-visible': {
+    outlineColor: color['border/focused'],
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineOffset: 2
+  }
+}), variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'p': 3,
+      '& svg': {
+        width: 24,
+        height: 24
+      }
+    },
+    m: {
+      'p': 2,
+      '& svg': {
+        width: 24,
+        height: 24
+      }
+    },
+    s: {
+      'p': 2,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    }
+  }
+}), ({
+  $disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    'primary': {
+      'backgroundColor': color['bg/primary'],
+      'color': color['icon/inverse'],
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/primary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/primary/pressed']
+      },
+      ...($disabled ? {
+        backgroundColor: color['bg/disabled'],
+        color: color['icon/disabled']
+      } : {})
+    },
+    'secondary': {
+      'backgroundColor': color['bg/secondary'],
+      'color': color['icon/primary'],
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/secondary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/secondary/pressed']
+      },
+      ...($disabled ? {
+        backgroundColor: color['bg/disabled'],
+        color: color['icon/disabled']
+      } : {})
+    },
+    'tertiary': {
+      'backgroundColor': color['bg/neutral'],
+      'color': color['icon/accent/gray'],
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/neutral/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/neutral/pressed']
+      },
+      ...($disabled ? {
+        backgroundColor: color['bg/disabled'],
+        color: color['icon/disabled']
+      } : {})
+    },
+    'outlined': {
+      'backgroundColor': color['bg/neutral/subtler'],
+      'color': color['icon/neutral/bolder'],
+      ':after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color['border/neutral/bolder'],
+        borderRadius: radii.full,
+        boxSizing: 'border-box'
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/neutral/subtler/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/neutral/subtler/pressed']
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['icon/disabled'],
+        ':after': {
+          display: 'none'
+        }
+      } : {})
+    },
+    'plain-bold': {
+      'backgroundColor': color['bg/neutral/subtler'],
+      'color': color['icon/neutral/bolder'],
+      ':hover:not(:disabled)': {
+        color: color['icon/accent/gray']
+      },
+      ':active:not(:disabled)': {
+        color: color['icon/accent/gray']
+      },
+      ...($disabled ? {
+        backgroundColor: color['bg/disabled/subtlest'],
+        color: color['icon/disabled']
+      } : {})
+    },
+    'plain': {
+      'backgroundColor': color['bg/neutral/subtler'],
+      'color': color['icon/neutral/bold'],
+      ':hover:not(:disabled)': {
+        color: color['icon/neutral/bolder']
+      },
+      ':active:not(:disabled)': {
+        color: color['icon/neutral/bolder']
+      },
+      ...($disabled ? {
+        backgroundColor: color['bg/disabled/subtlest'],
+        color: color['icon/disabled/subtler']
+      } : {})
+    },
+    'plain-subtle': {
+      'backgroundColor': color['bg/neutral/subtler'],
+      'color': color['icon/neutral'],
+      ':hover:not(:disabled)': {
+        color: color['icon/neutral/bold']
+      },
+      ':active:not(:disabled)': {
+        color: color['icon/neutral/bold']
+      },
+      ...($disabled ? {
+        backgroundColor: color['bg/disabled/subtlest'],
+        color: color['icon/disabled/subtler']
+      } : {})
+    },
+    'danger': {
+      'backgroundColor': color['bg/danger/bold'],
+      'color': color['icon/inverse'],
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/danger/bold/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/danger/bold/pressed']
+      },
+      ...($disabled ? {
+        backgroundColor: color['bg/disabled'],
+        color: color['icon/disabled']
+      } : {})
+    }
+  }
+}));
+
+export { IconButton as default };

package/esm/packages/react-kit/src/core/IconToggleButton/index.js

@@ -0,0 +1,105 @@
+import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import color from '../../../../token-studio/src/token/color/index.js';
+import radii from '../../../../token-studio/src/token/radii/index.js';
+import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
+import '../../../../../node_modules/styled-system/dist/index.esm.js';
+import { sx } from '../../utils/styled-system/index.js';
+import UnstyledButton from '../_UnstyledButton.js';
+import { variant } from '../../../../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const IconToggleButton = ({
+  icon: Icon,
+  size = 'm',
+  variant = 'primary',
+  selected = false,
+  disabled = false,
+  sx,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(BaseIconToggleButton, _extends({
+    icon: Icon,
+    size: size,
+    variant: variant,
+    selected: selected,
+    type: 'button',
+    disabled: disabled,
+    $disabled: disabled,
+    sx: sx
+  }, props), /*#__PURE__*/React.createElement(Icon, null));
+};
+const BaseIconToggleButton = Qe(UnstyledButton)(({
+  $disabled
+}) => ({
+  'position': 'relative',
+  'borderRadius': radii.full,
+  'transition': 'background-color 100ms, color 100ms',
+  '& svg': {
+    display: 'block'
+  },
+  'cursor': $disabled ? 'not-allowed' : 'pointer',
+  ':focus-visible': {
+    outlineColor: color['border/focused'],
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineOffset: 2
+  }
+}), variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'p': 3,
+      '& svg': {
+        width: 24,
+        height: 24
+      }
+    },
+    m: {
+      'p': 2,
+      '& svg': {
+        width: 24,
+        height: 24
+      }
+    },
+    s: {
+      'p': 2,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    }
+  }
+}), ({
+  selected,
+  $disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    primary: {
+      ...(selected ? {
+        backgroundColor: color['bg/selected/violet'],
+        color: color['icon/inverse']
+      } : {
+        backgroundColor: color['bg/neutral'],
+        color: color['icon/accent/gray']
+      }),
+      ...($disabled ? {
+        backgroundColor: color['bg/disabled'],
+        color: color['icon/disabled']
+      } : {})
+    },
+    plain: {
+      backgroundColor: color['bg/neutral/subtler'],
+      ...(selected ? {
+        color: color['icon/selected/primary']
+      } : {
+        color: color['icon/neutral']
+      }),
+      ...($disabled ? {
+        backgroundColor: color['bg/disabled/subtlest'],
+        color: color['icon/disabled/subtler']
+      } : {})
+    }
+  }
+}), sx);
+
+export { IconToggleButton as default };

package/esm/packages/react-kit/src/core/ItemList/index.js

@@ -0,0 +1,11 @@
+const ItemList = ({
+  items,
+  renderItem,
+  renderItemWrapper = children => children,
+  emptyState = null
+}) => {
+  if (items.length === 0) return emptyState;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, items.map((item, i) => renderItemWrapper(renderItem(item, i), item, i)));
+};
+
+export { ItemList as default };

package/esm/packages/react-kit/src/core/Space/index.js

@@ -0,0 +1,12 @@
+import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
+import '../../../../../node_modules/styled-system/dist/index.esm.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { space } from '../../../../../node_modules/@styled-system/space/dist/index.esm.js';
+
+const Space = Qe.div`
+  width: inherit;
+  ${space};
+  ${sx}
+`;
+
+export { Space as default };

package/esm/packages/react-kit/src/core/Spinner/index.js

@@ -0,0 +1,23 @@
+import 'react';
+import SvgProgressGradient from '../../../../icons/src/ProgressGradient.js';
+import color from '../../../../token-studio/src/token/color/index.js';
+import Qe, { keyframes as nt } from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
+
+const spin = nt`
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const Spinner = Qe(SvgProgressGradient)`
+  animation: ${spin} 1000ms infinite steps(8, end);
+`;
+Spinner.defaultProps = {
+  width: 32,
+  height: 32,
+  color: color['icon/neutral']
+};
+
+export { Spinner as default };

package/esm/packages/react-kit/src/core/Stack/index.js

@@ -0,0 +1,57 @@
+import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import space from '../../../../token-studio/src/token/space/index.js';
+import { forwardRef } from 'react';
+import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
+import '../../../../../node_modules/styled-system/dist/index.esm.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import View from '../View/index.js';
+import { variant } from '../../../../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const Stack = /*#__PURE__*/forwardRef(({
+  gapX = 0,
+  gapY = 0,
+  children,
+  alignItems = 'center',
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(BaseStack, _extends({
+  ref: ref,
+  alignItems: alignItems,
+  gapX: gapX,
+  gapY: gapY
+}, props), children));
+const BaseStack = Qe(View)({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap'
+}, variant({
+  prop: 'gapX',
+  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        px: forcePixelValue(value / 2)
+      },
+      'mx': forcePixelValue(-value / 2)
+    };
+    return [key, styleValue];
+  }))
+}), variant({
+  prop: 'gapY',
+  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        mt: forcePixelValue(value)
+      },
+      'mt': forcePixelValue(-value)
+    };
+    return [key, styleValue];
+  }))
+}));
+const Item = ({
+  children,
+  ...props
+}) => /*#__PURE__*/React.createElement(View, props, children);
+var index = Object.assign(Stack, {
+  Item
+});
+
+export { index as default };

package/esm/packages/react-kit/src/core/StyledIcon/index.js

@@ -0,0 +1,20 @@
+import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import View from '../View/index.js';
+
+const StyledIcon = ({
+  icon: Icon,
+  sx,
+  ...props
+}) => /*#__PURE__*/React.createElement(View, _extends({}, props, {
+  color: props.color,
+  sx: {
+    '& svg': {
+      display: 'inline-flex',
+      width: '100%',
+      height: '100%'
+    },
+    ...sx
+  }
+}), /*#__PURE__*/React.createElement(Icon, null));
+
+export { StyledIcon as default };

package/esm/packages/react-kit/src/core/Text/index.js

@@ -0,0 +1,49 @@
+import typography from '../../../../token-studio/src/token/typography/index.js';
+import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
+import { fontSize, fontWeight, lineHeight, textAlign } from '../../../../../node_modules/styled-system/dist/index.esm.js';
+import { sx, wordBreak, whiteSpace, textDecoration } from '../../utils/styled-system/index.js';
+import { variant } from '../../../../../node_modules/@styled-system/variant/dist/index.esm.js';
+import { compose } from '../../../../../node_modules/@styled-system/core/dist/index.esm.js';
+import { color } from '../../../../../node_modules/@styled-system/color/dist/index.esm.js';
+
+const Text = Qe.span({
+  'display': 'block',
+  'whiteSpace': 'pre-wrap',
+  '& > span': {
+    display: 'inline'
+  }
+}, variant({
+  prop: 'typography',
+  variants: {
+    'display1': typography.display1,
+    'display2': typography.display2,
+    'display3': typography.display3,
+    'display4': typography.display4,
+    'xxl/regular': typography['xxl/regular'],
+    'xxl': typography['xxl'],
+    'xxl/bold': typography['xxl/bold'],
+    'xl/regular': typography['xl/regular'],
+    'xl': typography['xl'],
+    'xl/bold': typography['xl/bold'],
+    'l/regular': typography['l/regular'],
+    'l': typography['l'],
+    'l/bold': typography['l/bold'],
+    'm/regular': typography['m/regular'],
+    'm': typography['m'],
+    'm/bold': typography['m/bold'],
+    's/regular': typography['s/regular'],
+    's': typography['s'],
+    's/bold': typography['s/bold'],
+    'xs/regular': typography['xs/regular'],
+    'xs': typography['xs'],
+    'xs/bold': typography['xs/bold'],
+    'xxs/regular': typography['xxs/regular'],
+    'xxs': typography['xxs'],
+    'xxs/bold': typography['xxs/bold']
+  }
+}), compose(wordBreak, whiteSpace, textDecoration, fontSize, fontWeight, lineHeight, color, textAlign), sx);
+Text.defaultProps = {
+  color: 'text/neutral'
+};
+
+export { Text as default };

package/esm/packages/react-kit/src/core/View/index.js

@@ -0,0 +1,18 @@
+import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
+import '../../../../../node_modules/styled-system/dist/index.esm.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { compose } from '../../../../../node_modules/@styled-system/core/dist/index.esm.js';
+import { layout } from '../../../../../node_modules/@styled-system/layout/dist/index.esm.js';
+import { color } from '../../../../../node_modules/@styled-system/color/dist/index.esm.js';
+import { flexbox } from '../../../../../node_modules/@styled-system/flexbox/dist/index.esm.js';
+import { background } from '../../../../../node_modules/@styled-system/background/dist/index.esm.js';
+import { border } from '../../../../../node_modules/@styled-system/border/dist/index.esm.js';
+import { position } from '../../../../../node_modules/@styled-system/position/dist/index.esm.js';
+import { shadow } from '../../../../../node_modules/@styled-system/shadow/dist/index.esm.js';
+
+const View = Qe.div`
+  ${compose(layout, color, flexbox, background, border, position, shadow)}
+  ${sx}
+`;
+
+export { View as default };

package/esm/packages/react-kit/src/core/_UnstyledButton.js

@@ -0,0 +1,14 @@
+import Qe from '../../../../node_modules/styled-components/dist/styled-components.esm.js';
+import { sx } from '../utils/styled-system/index.js';
+
+const UnstyledButton = Qe.button`
+  background: none;
+  border: 0;
+  padding: 0;
+  outline: none;
+  cursor: pointer;
+
+  ${sx}
+`;
+
+export { UnstyledButton as default };

package/esm/packages/react-kit/src/index.js

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

package/esm/packages/react-kit/src/utils/forcePixelValue.js

@@ -0,0 +1,8 @@
+/**
+ * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
+ */
+const forcePixelValue = value => {
+  return typeof value === 'string' ? value : `${value}px`;
+};
+
+export { forcePixelValue };

package/esm/packages/react-kit/src/utils/isArray.js

@@ -0,0 +1,3 @@
+const isArray = value => Array.isArray(value);
+
+export { isArray };

package/esm/packages/react-kit/src/utils/isNullable.js

@@ -0,0 +1,3 @@
+const isNullable = value => value === null || value === undefined;
+
+export { isNullable };