@soul-refiner/design-system 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {

package/src/components/actions/index.ts

@@ -6,3 +6,5 @@ export type {
   DropdownProps,
   DropdownSpacerProps,
 } from './dropdown';
+export { Upload } from './upload';
+export type { UploadProps } from './upload';

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

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

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

@@ -0,0 +1,263 @@
+import React from 'react';
+import styled from 'styled-components';
+import { COLORS } from 'common';
+import { Box, Button, P } from 'components';
+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 TextWrapper = styled.div``;
+
+const Input = styled.input`
+  display: none;
+`;

package/src/components/table/table/table.tsx

@@ -33,6 +33,7 @@ const Table = ({
       $dir="column"
       $gap={32}
       $padding={32}
+      sx={compact ? 'width: fit-content;' : ''}
     >
       {!!header && header}
       <Box
@@ -59,7 +60,7 @@ const TableElement = styled.table<{
   $striped?: boolean;
   $sx?: string;
 }>`
-  width: max-content;
+  width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
   ${({ $compact }) => ($compact ? 'width: fit-content;' : '')}

package/src/icons/index.ts

@@ -14,6 +14,7 @@ export * from './people';
 export * from './phone';
 export * from './security';
 export * from './shopping';
+export * from './special';
 export * from './symbols';
 export * from './technology';
 export * from './text';

package/src/icons/special/index.ts

@@ -0,0 +1,4 @@
+export { UploadAudio } from './upload_audio';
+export { UploadFile } from './upload_file';
+export { UploadImage } from './upload_image';
+export { UploadVideo } from './upload_video';

package/src/icons/special/upload_audio.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { COLORS, colorReference } from 'common';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<SVGElement>,
+  | 'children'
+  | 'className'
+  | 'dangerouslySetInnerHTML'
+  | 'id'
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onClick'
+  | 'onChange'
+  | 'onCopy'
+  | 'onCut'
+  | 'onKeyDown'
+  | 'onKeyDownCapture'
+  | 'onKeyUp'
+  | 'onKeyUpCapture'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+> & { value?: string };
+
+interface IconProps extends NativeProps {
+  color?: (typeof COLORS)[number];
+  size?: number;
+}
+
+export const UploadAudio = ({
+  color = 'hue-blue-2',
+  size = 28,
+  ...rest
+}: IconProps) => {
+  return (
+    <svg
+      width={size + 'px'}
+      height={size + 'px'}
+      viewBox="0 0 28 28"
+      xmlns="http://www.w3.org/2000/svg"
+      fill={colorReference[color]}
+      {...rest}
+    >
+      <g clipPath="url(#clip0_844_42855)">
+        <path d="M8.16667 5.8334V12.8334H19.8333V5.8334H19.8096C19.5416 2.75532 17.0429 0.343201 14 0.343201C10.9571 0.343201 8.45837 2.75532 8.19045 5.8334H8.16667Z" />
+        <path d="M19.8096 15.5098H19.8333V15.1667H8.16667V15.5098H8.19045C8.42319 18.1838 10.3394 20.3551 12.8333 20.8792V22.6609C9.19906 22.0997 6.41667 18.9581 6.41667 15.1667C6.41667 14.8446 6.1555 14.5834 5.83333 14.5834C5.51117 14.5834 5.25 14.8446 5.25 15.1667C5.25 19.6037 8.55241 23.2693 12.8333 23.8396V25.6667H8.16667C6.878 25.6667 5.83333 26.7114 5.83333 28.0001H23.3333C23.3333 26.7114 22.2887 25.6667 21 25.6667H15.1667V23.8396C19.4476 23.2693 22.75 19.6037 22.75 15.1667C22.75 14.8446 22.4888 14.5834 22.1667 14.5834C21.8445 14.5834 21.5833 14.8446 21.5833 15.1667C21.5833 18.9581 18.8009 22.0997 15.1667 22.6609V20.8792C17.6606 20.3551 19.5768 18.1838 19.8096 15.5098Z" />
+      </g>
+      <defs>
+        <clipPath id="clip0_844_42855">
+          <rect width={size} height={size} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/icons/special/upload_file.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { COLORS, colorReference } from 'common';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<SVGElement>,
+  | 'children'
+  | 'className'
+  | 'dangerouslySetInnerHTML'
+  | 'id'
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onClick'
+  | 'onChange'
+  | 'onCopy'
+  | 'onCut'
+  | 'onKeyDown'
+  | 'onKeyDownCapture'
+  | 'onKeyUp'
+  | 'onKeyUpCapture'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+> & { value?: string };
+
+interface IconProps extends NativeProps {
+  color?: (typeof COLORS)[number];
+  size?: number;
+}
+
+export const UploadFile = ({
+  color = 'hue-blue-1',
+  size = 44,
+  ...rest
+}: IconProps) => {
+  return (
+    <svg
+      width={size + 'px'}
+      height={size * (31 / 44) + 'px'}
+      viewBox="0 0 44 31"
+      xmlns="http://www.w3.org/2000/svg"
+      fill={colorReference[color]}
+      {...rest}
+    >
+      <path d="M22.0001 4.83331C24.2535 4.83666 26.4361 5.62014 28.1772 7.05061C29.9182 8.48108 31.1102 10.4703 31.5506 12.6802L32.143 15.6855L35.1989 15.8971C36.5321 15.9853 37.7787 16.5892 38.6743 17.5808C39.5699 18.5724 40.0442 19.8737 39.9967 21.2091C39.9492 22.5444 39.3836 23.8088 38.4197 24.7342C37.4559 25.6596 36.1696 26.1734 34.8335 26.1666H11.0001C9.21068 26.1678 7.48882 25.4831 6.18875 24.2535C4.88867 23.0239 4.10923 21.3429 4.01076 19.5561C3.91228 17.7694 4.50226 16.0128 5.65933 14.6478C6.81641 13.2828 8.45259 12.4131 10.2313 12.2176L12.365 11.9907L13.3561 10.0877C14.1759 8.50291 15.4161 7.17432 16.9408 6.24751C18.4655 5.3207 20.2158 4.83143 22.0001 4.83331ZM22.0001 0.833313C19.4847 0.833835 17.0177 1.52475 14.868 2.83078C12.7182 4.13681 10.9681 6.00784 9.80847 8.23997C7.01123 8.54372 4.43686 9.90826 2.61528 12.0527C0.793702 14.1972 -0.136476 16.9583 0.0162156 19.7679C0.168907 22.5774 1.39285 25.2215 3.4361 27.1559C5.47936 29.0903 8.18644 30.1678 11.0001 30.1666H34.8335C37.2066 30.1735 39.4895 29.2571 41.1992 27.6112C42.9089 25.9653 43.9114 23.719 43.9947 21.3473C44.0781 18.9756 43.2357 16.6644 41.6458 14.9026C40.0558 13.1407 37.8429 12.0663 35.4751 11.9066C34.8594 8.78576 33.1791 5.97548 30.7215 3.95585C28.2638 1.93622 25.1812 0.832531 22.0001 0.833313ZM23.9996 15.3271H27.8278L21.9996 9.49997L16.1725 15.3271H19.9996V21.3271H20.0001V23.5H24.0001V19.5H23.9996V15.3271Z" />
+    </svg>
+  );
+};

package/src/icons/special/upload_image.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { COLORS, colorReference } from 'common';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<SVGElement>,
+  | 'children'
+  | 'className'
+  | 'dangerouslySetInnerHTML'
+  | 'id'
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onClick'
+  | 'onChange'
+  | 'onCopy'
+  | 'onCut'
+  | 'onKeyDown'
+  | 'onKeyDownCapture'
+  | 'onKeyUp'
+  | 'onKeyUpCapture'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+> & { value?: string };
+
+interface IconProps extends NativeProps {
+  color?: (typeof COLORS)[number];
+  size?: number;
+}
+
+export const UploadImage = ({
+  color = 'primary-blue-2',
+  size = 162,
+  ...rest
+}: IconProps) => {
+  return (
+    <svg
+      width={size + 'px'}
+      height={size * (120 / 162) + 'px'}
+      viewBox="0 0 162 120"
+      xmlns="http://www.w3.org/2000/svg"
+      fill={colorReference[color]}
+      {...rest}
+    >
+      <path d="M20 13H124C127.866 13 131 16.134 131 20V69.0515C131.496 69.0174 131.996 69 132.5 69C133.692 69 134.861 69.097 136 69.2835V20C136 13.3726 130.627 8 124 8H20C13.3726 8 8 13.3726 8 20V78C8 84.6274 13.3726 90 20 90H111.006C111.045 88.2755 111.287 86.6012 111.71 85H20C16.134 85 13 81.866 13 78V20C13 16.134 16.134 13 20 13Z" />
+      <path d="M131 88.4996L128.914 90.5855C128.133 91.3665 126.867 91.3665 126.086 90.5855L125.914 90.4139C125.133 89.6329 125.133 88.3665 125.914 87.5855L131.586 81.9139C132.367 81.1329 133.633 81.1329 134.414 81.9139L140.086 87.5855C140.867 88.3665 140.867 89.6329 140.086 90.4139L139.914 90.5855C139.133 91.3665 137.867 91.3665 137.086 90.5855L135 88.4998V97.9998C135 99.1043 134.105 99.9998 133 99.9998C131.895 99.9998 131 99.1043 131 97.9998V88.4996Z" />
+      <path d="M86.6515 39.8111L110.172 70.7593H35.8965L54.4654 46.6197L67.4636 63.3317L85.4136 39.8111H86.6515ZM51.3706 39.8111C56.3223 39.8111 60.655 35.4784 60.655 30.5266C60.655 25.5749 56.3223 21.2422 51.3706 21.2422C46.4189 21.2422 42.0861 25.5749 42.0861 30.5266C42.0861 35.4784 46.4189 39.8111 51.3706 39.8111Z" />
+    </svg>
+  );
+};

package/src/icons/special/upload_video.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { COLORS, colorReference } from 'common';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<SVGElement>,
+  | 'children'
+  | 'className'
+  | 'dangerouslySetInnerHTML'
+  | 'id'
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onClick'
+  | 'onChange'
+  | 'onCopy'
+  | 'onCut'
+  | 'onKeyDown'
+  | 'onKeyDownCapture'
+  | 'onKeyUp'
+  | 'onKeyUpCapture'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+> & { value?: string };
+
+interface IconProps extends NativeProps {
+  color?: (typeof COLORS)[number];
+  size?: number;
+}
+
+export const UploadVideo = ({
+  color = 'hue-blue-2',
+  size = 140,
+  ...rest
+}: IconProps) => {
+  return (
+    <svg
+      width={size + 'px'}
+      height={size * (89 / 140) + 'px'}
+      viewBox="0 0 140 89"
+      xmlns="http://www.w3.org/2000/svg"
+      fill={colorReference[color]}
+      {...rest}
+    >
+      <path d="M7.74194 4.20434H116.129C118.267 4.20434 120 5.93743 120 8.07531V52.7334C120.738 52.6397 121.491 52.5914 122.255 52.5914C122.8 52.5914 123.339 52.616 123.871 52.6641V8.07531C123.871 3.79956 120.405 0.333374 116.129 0.333374H7.74194C3.46618 0.333374 0 3.79956 0 8.07531V62.2689C0 66.5446 3.46618 70.0108 7.74194 70.0108H104.519C104.542 68.6795 104.713 67.3841 105.014 66.1398H7.74194C5.60406 66.1398 3.87097 64.4067 3.87097 62.2689V8.07531C3.87097 5.93743 5.60406 4.20434 7.74194 4.20434Z" />
+      <path d="M123.399 79.066V68.4437L127.097 72.142L129.378 69.861L121.786 62.2689L114.194 69.861L116.475 72.142L120.173 68.4437V79.066H123.399Z" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M122.258 88.0753C112.459 88.0753 104.516 80.132 104.516 70.3334C104.516 60.5348 112.459 52.5914 122.258 52.5914C132.057 52.5914 140 60.5348 140 70.3334C140 80.132 132.057 88.0753 122.258 88.0753ZM122.258 84.8495C130.275 84.8495 136.774 78.3504 136.774 70.3334C136.774 62.3163 130.275 55.8172 122.258 55.8172C114.241 55.8172 107.742 62.3163 107.742 70.3334C107.742 78.3504 114.241 84.8495 122.258 84.8495Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.9032 23.5592V46.785C52.9032 47.8058 54.0326 48.4224 54.8913 47.8704L72.9558 36.2575C73.7459 35.7496 73.7459 34.5946 72.9558 34.0867L54.8913 22.4738C54.0326 21.9218 52.9032 22.5383 52.9032 23.5592ZM69.8719 35.1721L55.4839 44.4215V25.9226L69.8719 35.1721Z"
+      />
+    </svg>
+  );
+};