@dotss/ui 0.0.6 → 0.0.8

package/components/Label/Label.styles.ts

@@ -1,339 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import getContrastingTextColor from '@utils/getContrastingTextColor/getContrastingTextColor';
-
-import type { LabelProps } from './Label';
-
-export const StyledLabel = styled.span<Pick<LabelProps, 'variant' | 'size' | 'color' | 'rounded'>>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${({ theme: { spacing } }) => spacing.content(1)}px;
-  border: 1px solid transparent;
-  & svg {
-    color: inherit;
-  }
-
-  ${({
-    theme: {
-      palette: { yellow, blue, green, pink, grey, etc, extend }
-    },
-    variant,
-    color
-  }): CSSObject => {
-    let cssObject: CSSObject = {
-      backgroundColor: yellow['70'],
-      color: getContrastingTextColor(yellow['70'], [grey.white, grey['100']])
-    };
-
-    switch (variant) {
-      case 'solid':
-        if (color === 'blue') {
-          cssObject = {
-            backgroundColor: blue['80'],
-            color: grey.white
-          };
-        }
-
-        if (color === 'green') {
-          cssObject = {
-            backgroundColor: green['80'],
-            color: grey.white
-          };
-        }
-
-        if (color === 'pink') {
-          cssObject = {
-            backgroundColor: pink['80'],
-            color: grey.white
-          };
-        }
-
-        if (color === 'orange') {
-          cssObject = {
-            backgroundColor: etc.orange,
-            color: grey.white
-          };
-        }
-
-        if (color === 'play') {
-          cssObject = {
-            backgroundColor: extend?.classType?.play,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'commute') {
-          cssObject = {
-            backgroundColor: extend?.classType?.commute,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'learning') {
-          cssObject = {
-            backgroundColor: extend?.classType?.learning,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'english') {
-          cssObject = {
-            backgroundColor: extend?.classType?.english,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'creativeArt') {
-          cssObject = {
-            backgroundColor: extend?.classType?.creativeArt,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'grey') {
-          cssObject = {
-            backgroundColor: grey['90'],
-            color: grey.white
-          };
-        }
-
-        break;
-      case 'ghost':
-        if (color === 'yellow') {
-          cssObject = {
-            backgroundColor: yellow['20'],
-            color: yellow['100']
-          };
-        }
-
-        if (color === 'blue') {
-          cssObject = {
-            backgroundColor: blue['10'],
-            color: blue['90']
-          };
-        }
-
-        if (color === 'green') {
-          cssObject = {
-            backgroundColor: green['10'],
-            color: green['80']
-          };
-        }
-
-        if (color === 'pink') {
-          cssObject = {
-            backgroundColor: pink['10'],
-            color: pink['70']
-          };
-        }
-
-        if (color === 'orange') {
-          cssObject = {
-            backgroundColor: yellow['20'],
-            color: etc.orange
-          };
-        }
-
-        if (color === 'play') {
-          cssObject = {
-            backgroundColor: extend?.classType?.play,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'commute') {
-          cssObject = {
-            backgroundColor: extend?.classType?.commute,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'learning') {
-          cssObject = {
-            backgroundColor: extend?.classType?.learning,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'english') {
-          cssObject = {
-            backgroundColor: extend?.classType?.english,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'creativeArt') {
-          cssObject = {
-            backgroundColor: extend?.classType?.creativeArt,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'grey') {
-          cssObject = {
-            backgroundColor: grey['10'],
-            color: grey['60']
-          };
-        }
-
-        break;
-      case 'outlined':
-        if (color === 'yellow') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: yellow['60'],
-            color: yellow['100']
-          };
-        }
-
-        if (color === 'blue') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: blue['40'],
-            color: blue['100']
-          };
-        }
-
-        if (color === 'green') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: green['50'],
-            color: green['100']
-          };
-        }
-
-        if (color === 'pink') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: pink['50'],
-            color: pink['100']
-          };
-        }
-
-        if (color === 'orange') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: etc.orange,
-            color: etc.orange
-          };
-        }
-
-        if (color === 'play') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: extend?.classType?.play,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'commute') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: extend?.classType?.commute,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'learning') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: extend?.classType?.learning,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'english') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: extend?.classType?.english,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'creativeArt') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: extend?.classType?.creativeArt,
-            color: grey['70']
-          };
-        }
-
-        if (color === 'grey') {
-          cssObject = {
-            backgroundColor: grey.white,
-            borderColor: grey['50'],
-            color: grey['70']
-          };
-        }
-
-        break;
-      default:
-        break;
-    }
-
-    return cssObject;
-  }};
-
-  ${({ theme: { typography }, size }): CSSObject => {
-    let cssObject: CSSObject = {
-      padding: '7px 9px',
-      maxHeight: 32,
-      borderRadius: 8,
-      fontSize: typography.c1M.size,
-      fontWeight: typography.c1M.weight,
-      lineHeight: typography.c1M.lineHeight,
-      letterSpacing: typography.c1M.letterSpacing,
-      '& svg': {
-        width: 20,
-        height: 20
-      }
-    };
-
-    if (size === 'small') {
-      const { c3M } = typography;
-
-      cssObject = {
-        padding: '4px 7px',
-        maxHeight: 24,
-        borderRadius: 6,
-        fontSize: c3M.size,
-        fontWeight: c3M.weight,
-        lineHeight: c3M.lineHeight,
-        letterSpacing: c3M.letterSpacing,
-        '& svg': {
-          width: 16,
-          height: 16
-        }
-      };
-    }
-
-    if (size === 'xSmall') {
-      const { c5B } = typography;
-
-      cssObject = {
-        padding: '2px 3px',
-        maxHeight: 16,
-        borderRadius: 4,
-        fontSize: c5B.size,
-        fontWeight: c5B.weight,
-        lineHeight: c5B.lineHeight,
-        letterSpacing: c5B.letterSpacing,
-        '& svg': {
-          width: 12,
-          height: 12
-        }
-      };
-    }
-
-    return cssObject;
-  }};
-
-  ${({ rounded }): CSSObject | null =>
-    rounded
-      ? {
-          borderRadius: 99
-        }
-      : null};
-`;

package/components/Label/Label.tsx

@@ -1,64 +0,0 @@
-import type { ElementType, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import type { SpecifyColorScaleKey } from '@typings/color';
-import type { PolymorphicComponentProps, Size, Variant } from '@typings/component';
-import type { EtcColorKey } from '@typings/theme/core';
-import type {
-  TictoccrocBrandColorKey,
-  TictoccrocClassTypeColorKey
-} from '@typings/theme/tictoccroc';
-
-import { StyledLabel } from './Label.styles';
-
-export type LabelProps<T extends ElementType = 'span'> = PolymorphicComponentProps<T> & {
-  variant?: Extract<Variant, 'solid' | 'ghost' | 'outlined'>;
-  size?: Extract<Size, 'xSmall' | 'small' | 'medium'>;
-  color?:
-    | TictoccrocBrandColorKey
-    | Exclude<TictoccrocClassTypeColorKey, 'package'>
-    | Extract<EtcColorKey, 'orange'>
-    | Extract<SpecifyColorScaleKey, 'grey'>;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-  rounded?: boolean;
-};
-
-type LabelComponent<DT extends ElementType> = <T extends ElementType = DT>(
-  props: LabelProps<T>
-) => ReactNode;
-
-const Label: LabelComponent<'span'> = forwardRef(function Label(
-  {
-    children,
-    tag,
-    variant = 'solid',
-    size = 'medium',
-    color = 'yellow',
-    startAdornment,
-    endAdornment,
-    rounded,
-    inlineCSS,
-    ...props
-  },
-  ref
-) {
-  return (
-    <StyledLabel
-      ref={ref}
-      as={tag}
-      variant={variant}
-      size={size}
-      color={color}
-      rounded={rounded}
-      {...props}
-      css={inlineCSS}
-    >
-      {startAdornment}
-      {children}
-      {endAdornment}
-    </StyledLabel>
-  );
-});
-
-export default Label;

package/components/Label/index.ts

@@ -1,3 +0,0 @@
-import Label from './Label';
-
-export default Label;

package/components/LineProgressIndicator/LineProgressIndicator.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Box from '@components/Box';
-import Typography from '@components/Typography';
-
-import LineProgressIndicator from './LineProgressIndicator';
-
-const meta = {
-  title: 'Component/LineProgressIndicator',
-  component: LineProgressIndicator,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof LineProgressIndicator>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (props) => {
-    return (
-      <Box
-        inlineCSS={{
-          width: '100vh'
-        }}
-      >
-        <LineProgressIndicator size={props?.size} value={props?.value} loop={props?.loop} />
-      </Box>
-    );
-  },
-  args: {
-    size: 'small',
-    value: 20,
-    transitionDuration: 500,
-    loop: false
-  }
-};
-
-export const Loop: Story = {
-  render: (props) => {
-    return (
-      <Box
-        inlineCSS={{
-          width: '100vh'
-        }}
-      >
-        <LineProgressIndicator size={props?.size} value={props?.value} loop={props?.loop} />
-      </Box>
-    );
-  },
-  args: {
-    size: 'small',
-    value: 20,
-    transitionDuration: 500,
-    loop: true
-  }
-};
-
-export const Custom: Story = {
-  render: (props) => {
-    return (
-      <Box
-        inlineCSS={{
-          width: '100vh'
-        }}
-      >
-        <LineProgressIndicator size={props?.size} value={props?.value} loop={props?.loop}>
-          <Typography variant="h2M">5초 후 처음 화면으로 이동돼요</Typography>
-        </LineProgressIndicator>
-      </Box>
-    );
-  },
-  args: {
-    size: 'large',
-    value: 50,
-    transitionDuration: 500,
-    loop: false
-  }
-};

package/components/LineProgressIndicator/LineProgressIndicator.styles.ts

@@ -1,62 +0,0 @@
-import { keyframes } from '@emotion/react';
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { LineProgressIndicatorProps } from './LineProgressIndicator';
-
-const loopKeyframe = keyframes`
-    to {
-        transform: translateX(100%);
-    }
-`;
-
-export const StyledLineProgressIndicator = styled.div<Pick<LineProgressIndicatorProps, 'size'>>`
-  position: relative;
-  height: ${({ size }) => (size === 'large' ? 42 : 4)}px;
-  border-radius: 100px;
-  background-color: ${({
-    theme: {
-      palette: { grey }
-    }
-  }) => grey['10']};
-  overflow: hidden;
-`;
-
-export const Indicator = styled.div<
-  Pick<LineProgressIndicatorProps, 'transitionDuration' | 'loop'>
->`
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border-radius: 100px;
-  transition: transform ${({ transitionDuration }) => transitionDuration}ms linear;
-  background-color: ${({
-    theme: {
-      palette: { brand }
-    }
-  }) => brand.primary.main};
-
-  ${({ loop }): CSSObject =>
-    loop
-      ? {
-          animation: `${loopKeyframe} 1s infinite`
-        }
-      : {}};
-`;
-
-export const Content = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  white-space: nowrap;
-`;

package/components/LineProgressIndicator/LineProgressIndicator.tsx

@@ -1,40 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import type { GeneralComponentProps, Size } from '@typings/component';
-
-import { Content, Indicator, StyledLineProgressIndicator } from './LineProgressIndicator.styles';
-
-export interface LineProgressIndicatorProps
-  extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
-  size?: Extract<Size, 'large' | 'small'>;
-  value?: number;
-  transitionDuration?: number;
-  loop?: boolean;
-}
-
-const LineProgressIndicator = forwardRef<HTMLDivElement, LineProgressIndicatorProps>(
-  function LineProgressIndicator(
-    { children, size, value = 0, transitionDuration = 500, loop, inlineCSS, ...props },
-    ref
-  ) {
-    let percentage = value - 100;
-    percentage = value > 100 ? 0 : percentage;
-    percentage = loop ? -80 : percentage;
-
-    return (
-      <StyledLineProgressIndicator ref={ref} size={size} {...props} css={inlineCSS}>
-        <Indicator
-          transitionDuration={transitionDuration}
-          loop={loop}
-          style={{
-            transform: `translate3d(${percentage}%, 0, 0)`
-          }}
-        />
-        {size === 'large' && children && <Content>{children}</Content>}
-      </StyledLineProgressIndicator>
-    );
-  }
-);
-
-export default LineProgressIndicator;

package/components/LineProgressIndicator/index.ts

@@ -1,3 +0,0 @@
-import LineProgressIndicator from './LineProgressIndicator';
-
-export default LineProgressIndicator;