@soul-refiner/design-system 0.1.38 → 0.1.39

package/src/components/actions/toggle/toggle.tsx

@@ -1,77 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box, P } from '../../';
-
-export interface ToggleProps {
-  checked?: boolean;
-  label?: string;
-  onChange?: () => void;
-}
-
-export const Toggle = ({ checked, label, onChange }: ToggleProps) => {
-  const status =
-    checked === undefined ? 'indeterminate' : checked ? 'checked' : 'unchecked';
-
-  return (
-    <Box $align="center" $gap={8}>
-      <Wrapper as="label" onClick={onChange}>
-        <Input checked={!!checked} onChange={onChange} type="checkbox" />
-        <Slider $status={status} />
-      </Wrapper>
-      {label && <P $fontSize={14}>{label}</P>}
-    </Box>
-  );
-};
-
-const Wrapper = styled.label`
-  width: 28px;
-  height: 16px;
-  position: relative;
-  display: inline-block;
-`;
-
-const Input = styled.input`
-  opacity: 0;
-  width: 0;
-  height: 0;
-`;
-
-const Slider = styled.span<{
-  $status: 'indeterminate' | 'checked' | 'unchecked';
-}>`
-  position: absolute;
-  cursor: pointer;
-  top: 0px;
-  bottom: 0px;
-  right: 0px;
-  left: 0px;
-  border-radius: 18px;
-  ${({ $status }) =>
-    $status === 'checked'
-      ? `
-    background-color: var(--color-primary-blue-2);
-    &:before {
-      transform: translateX(12px);
-    }`
-      : $status === 'unchecked'
-      ? 'background-color: var(--color-grey-8);'
-      : `
-    background-color: var(--color-yellow-5);
-    &:before {
-      transform: translateX(6px);
-    }
-    `}
-
-  &:before {
-    position: absolute;
-    content: '';
-    height: 12px;
-    width: 12px;
-    left: 2px;
-    bottom: 2px;
-    background-color: var(--color-white);
-    border-radius: 50%;
-  }
-`;

package/src/components/actions/upload/index.ts

@@ -1,2 +0,0 @@
-export { Upload } from './upload';
-export type { UploadProps } from './upload';

package/src/components/actions/upload/upload.tsx

@@ -1,268 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { COLORS } from '../../../common';
-import { Box, Button, P } from '../../';
-import {
-  UploadAudio,
-  UploadFile,
-  UploadImage,
-  UploadVideo,
-} from '../../../icons';
-
-type UploadTypes = 'audio' | 'image' | 'file' | 'video';
-
-export interface UploadProps extends React.PropsWithChildren {
-  background: (typeof COLORS)[number] | string;
-  borderColor: (typeof COLORS)[number];
-  iconColor: (typeof COLORS)[number];
-  multiple?: boolean;
-  onDrop?: (files: FileList) => void;
-  size?: 'small' | 'large' | 'fit-content';
-  subtext?: string;
-  text?: React.ReactNode;
-  type: UploadTypes;
-}
-
-export const Upload = ({
-  background = 'hue-blue-3',
-  borderColor = 'hue-blue-2',
-  children,
-  iconColor = 'primary-blue-2',
-  multiple,
-  onDrop,
-  size = 'large',
-  subtext,
-  text,
-  type,
-}: UploadProps) => {
-  const filesRef = React.useRef<HTMLInputElement>(null);
-  const [draggingOver, setDraggingOver] = React.useState(false);
-
-  const fileTypeLookup = {
-    video: 'video/*',
-    audio: 'audio/*',
-    image: 'image/*',
-    file: '.xlsx, .xls, .doc, .docx, .ppt, .pptx, .txt, .pdf, application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint, text/plain, application/pdf,',
-  };
-
-  const heightLookup: Record<
-    UploadTypes,
-    Record<'height' | 'icon', Record<'small' | 'fit-content' | 'large', number>>
-  > = {
-    audio: {
-      icon: {
-        'fit-content': 28,
-        large: 28,
-        small: 28,
-      },
-      height: {
-        'fit-content': 281,
-        large: 281,
-        small: 75,
-      },
-    },
-    file: {
-      icon: {
-        'fit-content': 68,
-        large: 68,
-        small: 57,
-      },
-      height: {
-        'fit-content': 281,
-        large: 281,
-        small: 75,
-      },
-    },
-    image: {
-      icon: {
-        'fit-content': 162,
-        large: 162,
-        small: 57,
-      },
-      height: {
-        'fit-content': 281,
-        large: 281,
-        small: 75,
-      },
-    },
-    video: {
-      icon: {
-        'fit-content': 140,
-        large: 140,
-        small: 57,
-      },
-      height: {
-        'fit-content': 336,
-        large: 562,
-        small: 75,
-      },
-    },
-  };
-
-  const iconProps = {
-    color: iconColor,
-    size: heightLookup[type].icon[size],
-  };
-
-  const iconLookup: Record<UploadTypes, React.ReactElement> = {
-    audio: <UploadAudio {...iconProps} />,
-    file: <UploadFile {...iconProps} />,
-    image: <UploadImage {...iconProps} />,
-    video: <UploadVideo {...iconProps} />,
-  };
-
-  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    setDraggingOver(true);
-  };
-
-  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    setDraggingOver(false);
-  };
-
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    setDraggingOver(false);
-
-    const files = event.dataTransfer.files;
-    const dataTransfer: DataTransfer = new DataTransfer();
-
-    for (let i = 0; i < files.length; i++) {
-      const file: File | null = files.item(i);
-
-      if (file !== null) {
-        dataTransfer.items.add(file);
-      }
-    }
-
-    const fileInput: HTMLInputElement | null = filesRef.current;
-
-    if (fileInput !== null) {
-      fileInput.files = dataTransfer.files;
-
-      if (onDrop) {
-        onDrop(fileInput.files);
-      }
-    }
-  };
-
-  const handleFileChange = () => {
-    const fileInput: HTMLInputElement | null = filesRef.current;
-
-    if (fileInput !== null) {
-      if (onDrop && fileInput.files && fileInput.files.length) {
-        onDrop(fileInput.files);
-      }
-    }
-  };
-
-  const removeFileFromState = () => {
-    if (filesRef.current) filesRef.current.value = '';
-  };
-
-  return (
-    <>
-      <Wrapper
-        $background={background}
-        $borderColor={borderColor}
-        $draggingOver={draggingOver}
-        $height={heightLookup[type].height[size]}
-        $size={size}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-      >
-        <Box
-          $align="center"
-          $borderRadius="medium"
-          $dir="column"
-          $display="flex"
-          $gap={16}
-          $justify="center"
-          sx="height: 100%; width: 100%; svg { flex-shrink: 0; };"
-        >
-          {iconLookup[type]}
-          {size !== 'small' && (
-            <Box
-              $align="center"
-              $dir="column"
-              $display="flex"
-              $gap={8}
-              $justify="center"
-              sx="width: 100%;"
-            >
-              <P $textAlign="center" sx="width: 100%;">
-                {text}
-                <Button
-                  onClick={() => filesRef.current?.click()}
-                  size="small"
-                  sx="display: inline;"
-                  type="text"
-                >
-                  Browse
-                </Button>
-              </P>
-              <P $textAlign="center" sx="width: 100%;">
-                {subtext}
-              </P>
-            </Box>
-          )}
-          <Input
-            data-testid="dropzone-upload-input"
-            ref={filesRef}
-            type="file"
-            multiple={multiple}
-            accept={fileTypeLookup[type]}
-            name="Files"
-            onChange={handleFileChange}
-          />
-        </Box>
-      </Wrapper>
-      {React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          return React.cloneElement(child, {
-            handleUpload: () => filesRef.current?.click(),
-            removeFileFromState,
-          } as Partial<unknown> & React.Attributes);
-        }
-        return child;
-      })}
-    </>
-  );
-};
-
-const Wrapper = styled.div<{
-  $background: string;
-  $borderColor: string;
-  $draggingOver: boolean;
-  $height: number;
-  $size: 'large' | 'small' | 'fit-content';
-}>`
-  box-sizing: border-box;
-  width: ${({ $size }) =>
-    $size === 'large'
-      ? '100%'
-      : $size === 'fit-content'
-      ? 'fit-content'
-      : '134px'};
-  height: ${({ $height }) => $height}px;
-  padding: ${({ $size }) =>
-    $size === 'large'
-      ? '64px 32px'
-      : $size === 'fit-content'
-      ? '64px 16px'
-      : 'initial'};
-  background-color: ${({ $background }) =>
-    COLORS.includes($background as (typeof COLORS)[number])
-      ? `var(--color-${$background})`
-      : $background};
-  border: 2px dashed var(--color-${({ $borderColor }) => $borderColor});
-  border-radius: ${({ $size }) => ($size === 'large' ? '16px' : '8px')};
-`;
-
-const Input = styled.input`
-  display: none;
-`;

package/src/components/atoms/box/box.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Styles } from '../../../common';
-import {
-  BackgroundColor,
-  BorderRadius,
-  Elevation,
-  Flex,
-  Margin,
-  Padding,
-  Polymorphic,
-  Styleable,
-} from '../../../types';
-
-type NativeProps = Pick<
-  React.HTMLAttributes<HTMLDivElement>,
-  | 'children'
-  | 'className'
-  | 'dangerouslySetInnerHTML'
-  | 'onBlur'
-  | 'onBlurCapture'
-  | 'onClick'
-  | 'onChange'
-  | 'onCopy'
-  | 'onCut'
-  | 'onKeyDown'
-  | 'onKeyDownCapture'
-  | 'onKeyUp'
-  | 'onKeyUpCapture'
-  | 'onMouseDown'
-  | 'onMouseDownCapture'
-  | 'onMouseEnter'
-  | 'onMouseLeave'
-  | 'onMouseOut'
-  | 'onMouseOver'
-  | 'title'
-> & { value?: string; href?: string };
-
-export interface BoxProps
-  extends BackgroundColor,
-    BorderRadius,
-    Elevation,
-    Flex,
-    Margin,
-    Padding,
-    Polymorphic,
-    Styleable,
-    NativeProps {
-  $display?: 'block' | 'flex';
-  sx?: string;
-}
-
-export const Box = ({ $display = 'flex', sx, ...args }: BoxProps) => (
-  <Component $display={$display} $sx={sx} {...args} />
-);
-
-export const Component = styled.div<BoxProps & { $sx?: string }>`
-  ${({ $display }) => ($display === 'flex' ? 'display: flex;' : '')}
-  ${Styles.flex}
-  ${Styles.backgroundColor}
-  ${Styles.borderRadius}
-  ${Styles.elevation}
-  ${Styles.margin}
-  ${Styles.padding}
-  ${Styles.styleable}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;

package/src/components/atoms/box/index.ts

@@ -1,2 +0,0 @@
-export { Box } from './box';
-export type { BoxProps } from './box';

package/src/components/atoms/colors/colors.tsx

@@ -1,58 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { H, P } from '../typography';
-
-export interface ColorProps {
-  colors: string[];
-  title: string;
-}
-
-export const Colors = ({ colors, title }: ColorProps) => {
-  return (
-    <>
-      <H.Two $textAlign="center" sx="padding-right: 16px;">
-        {title}
-      </H.Two>
-      <Row>
-        {colors.map((color) => (
-          <ColorWrapper key={color} background={color}>
-            <div />
-            <P $fontSize={12} $textAlign="center">
-              {color
-                .replaceAll(/color|-{2,}|var|\(|\)/g, '')
-                .replaceAll(/-/g, ' ')
-                .trim()
-                .split(' ')
-                .map((item) => item[0].toUpperCase() + item.slice(1))
-                .join(' ')}
-            </P>
-          </ColorWrapper>
-        ))}
-      </Row>
-    </>
-  );
-};
-
-const Row = styled.div`
-  display: flex;
-  gap: var(--spacing-2);
-  padding: 0px var(--spacing-4);
-  margin: var(--spacing-3) auto;
-  max-width: 80%;
-`;
-
-const ColorWrapper = styled.div<{
-  background: string;
-}>`
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-  div {
-    background: ${({ background }) => background || '--color-primary-blue-2'};
-    width: var(--extra-large);
-    height: var(--extra-large);
-  }
-`;

package/src/components/atoms/colors/index.ts

@@ -1 +0,0 @@
-export { Colors } from './colors';

package/src/components/atoms/index.ts

@@ -1,9 +0,0 @@
-export { Box } from './box';
-export type { BoxProps } from './box';
-export { Display, H, P, Typography } from './typography';
-export type {
-  DisplayProps,
-  HeadingProps,
-  ParagraphProps,
-  TypographyProps,
-} from './typography';

package/src/components/atoms/typography/display.tsx

@@ -1,37 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Typography, TypographyProps } from './typography';
-
-export interface CommonProps extends TypographyProps {
-  as?: React.ElementType;
-  $textAlign?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
-}
-
-export interface DisplayProps extends CommonProps {
-  $fontSize?: 56 | 64;
-  $lineHeight?: 84 | 96;
-}
-
-export const Display = ({
-  as = 'h1',
-  $fontSize = 64,
-  $lineHeight = 96,
-  $textAlign = 'left',
-  ...rest
-}: DisplayProps) => (
-  <StyledDisplay
-    as={as || 'h1'}
-    $fontSize={$fontSize}
-    $lineHeight={$lineHeight}
-    $textAlign={$textAlign}
-    {...rest}
-  />
-);
-
-const StyledDisplay = styled(Typography)<DisplayProps>`
-  font-size: ${({ $fontSize }) => $fontSize + 'px'};
-  line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
-  text-align: ${({ $textAlign }) => $textAlign || 'left'};
-`;

package/src/components/atoms/typography/heading.tsx

@@ -1,71 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Typography, TypographyProps } from './typography';
-
-export interface CommonProps extends TypographyProps {
-  $textAlign?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
-}
-
-export interface HeadingProps extends CommonProps {
-  as?: React.ElementType;
-  $fontSize?: 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40 | 48;
-  $lineHeight?: 64 | 60 | 54 | 48 | 36 | 28 | 26;
-}
-
-const StyledH = styled(Typography)<HeadingProps>`
-  font-size: ${({ $fontSize }) => $fontSize + 'px'};
-  line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
-  text-align: ${({ $textAlign }) => $textAlign || 'left'};
-`;
-
-export const H = (args: HeadingProps) => <StyledH {...args} />;
-
-const One = ({ ...rest }: CommonProps) => (
-  <StyledH as={'h1'} $fontSize={48} $lineHeight={64} {...rest} />
-);
-One.displayName = 'H.One';
-H.One = One;
-
-const Two = ({ ...rest }: CommonProps) => (
-  <StyledH as={'h2'} $fontSize={40} $lineHeight={60} {...rest} />
-);
-Two.displayName = 'H.Two';
-H.Two = Two;
-
-const Three = ({ ...rest }: CommonProps) => (
-  <StyledH as={'h3'} $fontSize={36} $lineHeight={54} {...rest} />
-);
-Three.displayName = 'H.Three';
-H.Three = Three;
-
-const Four = ({ ...rest }: CommonProps) => (
-  <StyledH as={'h4'} $fontSize={32} $lineHeight={48} {...rest} />
-);
-Four.displayName = 'H.Four';
-H.Four = Four;
-
-const Five = ({ ...rest }: CommonProps) => (
-  <StyledH as={'h5'} $fontSize={28} $lineHeight={36} {...rest} />
-);
-Five.displayName = 'H.Five';
-H.Five = Five;
-
-const Six = ({ ...rest }: CommonProps) => (
-  <StyledH as={'h6'} $fontSize={24} $lineHeight={36} {...rest} />
-);
-Six.displayName = 'H.Six';
-H.Six = Six;
-
-const Seven = ({ ...rest }: CommonProps) => (
-  <StyledH as={'h6'} $fontSize={20} $lineHeight={28} {...rest} />
-);
-Seven.displayName = 'H.Seven';
-H.Seven = Seven;
-
-const Eight = ({ ...rest }: CommonProps) => (
-  <StyledH as={'h6'} $fontSize={18} $lineHeight={26} {...rest} />
-);
-Eight.displayName = 'H.Eight';
-H.Eight = Eight;

package/src/components/atoms/typography/index.ts

@@ -1,8 +0,0 @@
-export { Display } from './display';
-export type { DisplayProps } from './display';
-export { H } from './heading';
-export type { HeadingProps } from './heading';
-export { P } from './paragraph';
-export type { ParagraphProps } from './paragraph';
-export { Typography } from './typography';
-export type { TypographyProps } from './typography';

package/src/components/atoms/typography/paragraph.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { TypographyProps } from './typography';
-import { Styles } from '../../../common';
-
-export interface CommonProps extends TypographyProps {
-  as?: React.ElementType;
-  $textAlign?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
-}
-
-export interface ParagraphProps extends CommonProps {
-  $fontSize?: 10 | 11 | 12 | 14 | 16;
-  $lineHeight?: 14 | 16 | 20 | 24;
-}
-
-export const P = ({
-  as = 'p',
-  children,
-  $fontSize = 16,
-  $lineHeight = 24,
-  $textAlign = 'left',
-  ...rest
-}: ParagraphProps) => (
-  <StyledP
-    as={as}
-    $fontSize={$fontSize}
-    $lineHeight={$lineHeight}
-    $textAlign={$textAlign}
-    {...rest}
-  >
-    {children}
-  </StyledP>
-);
-
-const StyledP = styled.p<ParagraphProps>`
-  margin: 0px;
-  font-family: Inter;
-  font-size: ${({ $fontSize }) => $fontSize + 'px'};
-  line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
-  text-align: ${({ $textAlign }) => $textAlign || 'left'};
-  ${Styles.color}
-  ${Styles.weight}
-  ${Styles.typography}
-  ${Styles.styleable}
-  ${({ $textClampLines }) => ($textClampLines ? Styles.textClamp : '')}
-`;