@soul-refiner/design-system 0.1.9 → 0.1.11

package/package.json

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

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

@@ -0,0 +1 @@
+export {} from '';

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, P } from 'components';
+
+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/upload.tsx

@@ -256,8 +256,6 @@ const Wrapper = styled.div<{
   border-radius: ${({ $size }) => ($size === 'large' ? '16px' : '8px')};
 `;
 
-const TextWrapper = styled.div``;
-
 const Input = styled.input`
   display: none;
 `;

package/src/components/iconography/avatar/avatar.tsx

@@ -63,6 +63,7 @@ export interface AvatarProps extends NativeProps {
   size: Size;
   status?: Status;
   subtitle?: React.ReactNode;
+  sx?: string;
   textPosition?: 'left' | 'right';
   title?: React.ReactNode;
 }
@@ -135,6 +136,7 @@ const Avatar = ({
   size = 64,
   status,
   subtitle,
+  sx,
   textPosition = 'left',
   title,
   ...rest
@@ -144,7 +146,7 @@ const Avatar = ({
   const Icon = iconReference?.[status ?? 'none'];
 
   return (
-    <Box $align="center" $gap={18} {...rest}>
+    <Box $align="center" $gap={18} {...rest} sx={sx}>
       <Container as={as} $size={size} href={href}>
         {!displayDefault && (
           <img src={image ?? ''} onError={() => setDisplayDefault(true)} />

package/src/components/index.ts

@@ -3,4 +3,5 @@ export * from './atoms';
 export * from './feedback';
 export * from './iconography';
 export * from './input';
+export * from './navigation';
 export * from './surfaces';

package/src/components/navigation/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './tabs';
+export type { TabProps } from './tabs';

package/src/components/navigation/tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './tabs';
+export type { TabProps } from './tabs';

package/src/components/navigation/tabs/tabs.tsx

@@ -0,0 +1,246 @@
+import React from 'react';
+import styled from 'styled-components';
+import { P } from 'components';
+
+type TabColors =
+  | 'blue'
+  | 'grey'
+  | 'green'
+  | 'mint'
+  | 'orange'
+  | 'ocean'
+  | 'pink'
+  | 'purple'
+  | 'red'
+  | 'yellow';
+type TabSizes = 'small' | 'medium' | 'large';
+
+const colorLookup: Record<TabColors, Record<'icon' | 'bg', string>> = {
+  blue: {
+    bg: 'var(--color-hue-blue-2)',
+    icon: 'var(--color-hue-blue-1)',
+  },
+  green: {
+    bg: 'var(--color-green-8)',
+    icon: 'var(--color-green-2)',
+  },
+  grey: {
+    bg: 'var(--color-grey-9)',
+    icon: 'var(--color-grey-7)',
+  },
+  mint: {
+    bg: 'var(--color-hue-mint-2)',
+    icon: 'var(--color-hue-mint-1)',
+  },
+  ocean: {
+    bg: 'var(--color-hue-ocean-2)',
+    icon: 'var(--color-hue-ocean-1)',
+  },
+  orange: {
+    bg: 'var(--color-hue-orange-2)',
+    icon: 'var(--color-hue-orange-1)',
+  },
+  pink: {
+    bg: 'var(--color-hue-pink-2)',
+    icon: 'var(--color-hue-pink-1)',
+  },
+  purple: {
+    bg: 'var(--color-hue-purple-2)',
+    icon: 'var(--color-hue-purple-1)',
+  },
+  red: {
+    bg: 'var(--color-red-9)',
+    icon: 'var(--color-red-3)',
+  },
+  yellow: {
+    bg: 'var(--color-yellow-8)',
+    icon: 'var(--color-yellow-3)',
+  },
+};
+
+export interface TabProps {
+  activeIndex: number;
+  items: {
+    color?: TabColors;
+    disabled?: boolean;
+    icon?: React.ReactElement;
+    label: string;
+  }[];
+  onChange: (index: number) => void;
+  size?: TabSizes;
+  sx?: string;
+}
+
+const Tabs = ({
+  activeIndex,
+  items,
+  onChange,
+  size = 'large',
+  sx,
+}: TabProps) => {
+  const id = React.useId();
+
+  return (
+    <Wrapper $sx={sx}>
+      {items.map((item, index) => (
+        <Item
+          active={activeIndex === index}
+          color={item?.color}
+          disabled={item?.disabled}
+          key={id + index.toString(36)}
+          icon={item?.icon}
+          label={item.label}
+          onClick={() => onChange(index)}
+          size={size}
+        />
+      ))}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.ul<{
+  $sx?: string;
+}>`
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 16px;
+  margin: 0px;
+  padding: 0px;
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+export interface TabsItemProps {
+  active: boolean;
+  color?: TabColors;
+  disabled?: boolean;
+  icon?: React.ReactElement;
+  label: string;
+  onClick: () => void;
+  size: TabSizes;
+}
+
+const Item = ({
+  active,
+  color,
+  disabled,
+  icon,
+  label,
+  onClick,
+  size = 'large',
+}: TabsItemProps) => {
+  const inputColor = disabled ? 'grey' : color ? color : 'blue';
+  const iconColor = colorLookup[inputColor].icon;
+  const bgColor = colorLookup[inputColor].bg;
+  const fontSize = size === 'large' ? 16 : size === 'medium' ? 14 : 12;
+  const lineHeight = size === 'large' ? 24 : size === 'medium' ? 20 : 16;
+
+  return (
+    <Li
+      $active={active}
+      $color={iconColor}
+      $disabled={disabled}
+      $hasIcon={!!icon}
+      $size={size}
+      onClick={!disabled ? onClick : undefined}
+    >
+      {icon && <IconWrapper $bg={bgColor}>{icon}</IconWrapper>}
+      <P $fontSize={fontSize} $lineHeight={lineHeight} $semiBold>
+        {label}
+      </P>
+    </Li>
+  );
+};
+
+const Li = styled.li<{
+  $active: boolean;
+  $color: string;
+  $disabled?: boolean;
+  $hasIcon: boolean;
+  $size: TabSizes;
+}>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+
+  ${({ $size, $hasIcon }) =>
+    $hasIcon
+      ? 'padding: 16px 12px;'
+      : $size === 'small'
+      ? 'padding: 10px 8px;'
+      : $size === 'medium'
+      ? 'padding: 14px 10px;'
+      : 'padding: 22px 12px;'}
+
+  ${({ $hasIcon, $color, $disabled }) =>
+    $disabled
+      ? `
+  cursor: initial;
+  `
+      : $hasIcon
+      ? `
+  &:hover {
+    p {
+      color: ${$color};
+    }
+  }
+
+  div > svg {
+    fill: ${$color};
+  }`
+      : `
+  &:hover {
+    background-color: var(--color-grey-10);
+    &:after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 3px;
+      bottom: 0px;
+      left: 0px;
+      background-color: var(--color-primary-blue-3);
+      border-top-right-radius: 3px;
+      border-top-left-radius: 3px;
+    }
+  }
+  &:active {
+    background-color: var(--color-grey-9);
+  }`}
+
+  ${({ $active, $color, $hasIcon }) =>
+    $active
+      ? `
+  &:after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 3px;
+    bottom: 0px;
+    left: 0px;
+    background-color: ${
+      $hasIcon ? $color : 'var(--color-primary-blue-2)'
+    } !important;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  `
+      : ''}
+`;
+
+const IconWrapper = styled.div<{
+  $bg: string;
+}>`
+  padding: 8px;
+  border-radius: 8px;
+  background-color: ${({ $bg }) => $bg};
+`;
+
+Tabs.Item = Item;
+Item.displayName = 'Tabs.Item';
+
+export { Tabs };

package/src/components/surfaces/index.ts

@@ -1,2 +1,4 @@
+export { Message } from './message';
+export type { MessageProps } from './message';
 export { Modal } from './modal';
 export type { ModalContentProps, ModalProps } from './modal';

package/src/components/surfaces/message/index.ts

@@ -0,0 +1,2 @@
+export { Message } from './message';
+export type { MessageProps } from './message';

package/src/components/surfaces/message/message.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Avatar, Box, P, H } from 'components';
+
+export interface MessageProps {
+  messages: {
+    content: string;
+    senderHref: string;
+    senderId: string;
+    senderName: string;
+    senderAvatarURI: string;
+    createdDate: Date;
+  }[];
+  userId: string;
+}
+
+export const Message = ({ messages, userId }: MessageProps) => {
+  const id = React.useId();
+  return (
+    <Box $display="flex" $dir="column" $gap={16}>
+      {messages.map(
+        (
+          {
+            content,
+            createdDate,
+            senderAvatarURI,
+            senderHref,
+            senderId,
+            senderName,
+          },
+          index
+        ) => {
+          const isSelf = senderId === userId;
+          const isFirstMessageBySender =
+            messages?.[index - 1]?.senderId !== senderId;
+
+          if (isSelf) {
+            return (
+              <React.Fragment key={id + index}>
+                {isFirstMessageBySender && (
+                  <P
+                    $color="grey-4"
+                    $fontSize={12}
+                    $lineHeight={16}
+                    sx="margin-top: 40px; margin-left: auto;"
+                  >
+                    {createdDate.toLocaleDateString()}{' '}
+                    {createdDate.toLocaleTimeString()}
+                  </P>
+                )}
+                <Wrapper $isSelf={isSelf}>{content}</Wrapper>
+              </React.Fragment>
+            );
+          }
+
+          return (
+            <React.Fragment key={id + index}>
+              {isFirstMessageBySender && (
+                <Avatar
+                  image={senderAvatarURI}
+                  href={senderHref}
+                  subtitle={
+                    <P
+                      as="span"
+                      $color="blue-2"
+                      $fontSize={12}
+                      $lineHeight={16}
+                      sx="vertical-align: top;"
+                    >
+                      {createdDate.toLocaleTimeString()}
+                    </P>
+                  }
+                  size={56}
+                  sx="margin-top: 40px;"
+                  textPosition="right"
+                  title={
+                    <H
+                      as="span"
+                      $color="blue-2"
+                      $fontSize={18}
+                      $lineHeight={26}
+                      $mediumBold
+                    >
+                      {senderName}
+                    </H>
+                  }
+                />
+              )}
+              <Wrapper $isSelf={isSelf}>{content}</Wrapper>
+            </React.Fragment>
+          );
+        }
+      )}
+    </Box>
+  );
+};
+
+const Wrapper = styled.div<{
+  $isSelf: boolean;
+}>`
+  max-width: 552px;
+  padding: 16px;
+  border-radius: 16px;
+  font-family: Inter;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.006em;
+
+  ${({ $isSelf }) =>
+    $isSelf
+      ? `
+    margin-left: auto;
+    color: var(--color-white);
+    background-color: var(--color-primary-blue-2);
+    border-top-right-radius: 0px;`
+      : `
+    margin-left: 68px;
+    margin-right: auto;
+    color: var(--color-grey-3);
+    background-color: var(--color-grey-9);
+    border-top-left-radius: 0px;`}
+`;