@soul-refiner/design-system 0.1.21 → 0.1.23

package/package.json

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

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

@@ -34,7 +34,7 @@ type NativeProps = Pick<
   | 'onMouseOut'
   | 'onMouseOver'
   | 'title'
-> & { value?: string };
+> & { value?: string; href?: string };
 
 export interface BoxProps
   extends BackgroundColor,

package/src/components/navigation/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from 'components';
+import { ChevronLeft, ChevronRight } from 'icons';
+
+export interface BreadcrumbProps extends React.PropsWithChildren {
+  previous?: boolean;
+}
+
+const Breadcrumb = ({ children, previous }: BreadcrumbProps) => {
+  const _children = React.Children.toArray(children);
+
+  if (previous) {
+    return (
+      <Box
+        $align="center"
+        $gap={8}
+        sx="& > *:last-child { color: var(--color-grey-3) !important; };"
+      >
+        <>
+          <ChevronLeft color="grey-3" size={24} />
+          {React.isValidElement(_children[0]) &&
+            React.cloneElement(_children[0], {
+              icon: undefined,
+              avatar: undefined,
+            } as any)}
+        </>
+      </Box>
+    );
+  }
+
+  return (
+    <Box $align="center" $gap={8}>
+      {_children.map((child, index) => {
+        if (
+          React.isValidElement(child) &&
+          (child.type as any)?.displayName === 'BreadcrumbItem'
+        ) {
+          return (
+            <>
+              {child}
+              {_children.length - 1 !== index && (
+                <ChevronRight color="grey-3" size={24} />
+              )}
+            </>
+          );
+        }
+        return null;
+      })}
+    </Box>
+  );
+};
+
+type IconColor = 'blue' | 'pink' | 'purple' | 'mint' | 'orange' | 'ocean';
+
+export interface BreadcrumbItemProps extends React.PropsWithChildren {
+  avatar?: React.ReactElement;
+  href?: string;
+  icon?: React.ReactElement;
+  iconColor?: IconColor;
+  onClick?: React.MouseEventHandler;
+}
+
+const BreadcrumbItem = ({
+  avatar,
+  children,
+  href,
+  icon,
+  iconColor = 'blue',
+  onClick,
+}: BreadcrumbItemProps) => {
+  return (
+    <Item
+      as={href ? 'a' : 'div'}
+      href={href}
+      onClick={onClick}
+      $type={icon ? 'icon' : avatar ? 'avatar' : 'text'}
+      $iconColor={`hue-${iconColor}-1`}
+    >
+      {icon && (
+        <IconWrapper $color={iconColor}>
+          {React.cloneElement(icon, { color: `hue-${iconColor}-1`, size: 24 })}
+        </IconWrapper>
+      )}
+      {avatar}
+      {children}
+    </Item>
+  );
+};
+
+Breadcrumb.Item = BreadcrumbItem;
+BreadcrumbItem.displayName = 'Breadcrumb.Item';
+
+const Item = styled.div<{
+  as: string;
+  $type: 'text' | 'avatar' | 'icon';
+  $iconColor?: string;
+}>`
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  font-family: Inter;
+  color: var(--color-grey-3);
+
+  ${({ as }) =>
+    as === 'a'
+      ? `
+    text-decoration: none;
+    color: var(--color-primary-blue-2);
+    
+    &:hover {
+      position: relative;
+      &:after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        bottom: 0px;
+        right: 0px;
+        background-color: var(--color-primary-blue-1);
+      }
+    }`
+      : ''}
+
+  ${({ $type, $iconColor }) =>
+    $type === 'icon'
+      ? `
+    gap: 32px;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 36px;
+    color: var(--color-${$iconColor});
+
+    &:hover {
+      &:after {
+        width: calc(100% - 80px);
+        background-color: var(--color-${$iconColor});
+      }
+    }`
+      : $type === 'avatar'
+      ? `
+    padding: 4px;
+    gap: 16px;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 26px;
+    color: var(--color-grey-1);
+    &:hover {
+      &:after {
+        background-color: var(--color-primary-blue-2);
+      }
+    }`
+      : `
+    padding: 4px 0px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    `}
+`;
+
+const IconWrapper = styled.div<{ $color: IconColor }>`
+  background-color: ${({ $color }) => `var(--color-hue-${$color}-2)`};
+  height: 48px;
+  width: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 8px;
+`;
+
+export { Breadcrumb };

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

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItemProps } from './breadcrumb';

package/src/components/navigation/index.ts

@@ -1,2 +1,4 @@
+export { Breadcrumb } from './breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItemProps } from './breadcrumb';
 export { Tabs } from './tabs';
 export type { TabProps } from './tabs';

package/src/components/surfaces/accordion/accordion.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from 'components';
+import { callAll } from 'utils';
+import { ChevronDown, ChevronUp } from 'icons';
+
+export interface AccordionProps extends React.PropsWithChildren {
+  sx?: string;
+}
+
+const ModalContext = React.createContext<[number, (index: number) => void]>([
+  -1,
+  () => undefined,
+]);
+
+const Accordion = ({ children, sx }: AccordionProps) => {
+  const [openIndex, setOpenIndex] = React.useState(-1);
+
+  const handleIndexChange = (index: number) => {
+    setOpenIndex((prev) => (prev === index ? -1 : index));
+  };
+
+  return (
+    <ModalContext.Provider value={[openIndex, handleIndexChange]}>
+      <Wrapper $sx={sx}>
+        {React.Children.map(children, (child, index) => {
+          if (React.isValidElement(child))
+            return React.cloneElement(child, { index } as any);
+          return null;
+        })}
+      </Wrapper>
+    </ModalContext.Provider>
+  );
+};
+
+const Wrapper = styled.div<{ $sx?: string }>`
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+export interface AccordionItemProps extends React.PropsWithChildren {
+  index?: number;
+  sx?: string;
+  trigger: React.ReactNode;
+}
+
+const AccordionItem = ({
+  children,
+  index,
+  sx,
+  trigger,
+}: AccordionItemProps) => {
+  const [openIndex, setOpenIndex] = React.useContext(ModalContext);
+
+  return (
+    <Box $dir="column">
+      <TriggerWrapper
+        onClick={callAll(
+          // eslint-disable-next-line
+          () => setOpenIndex(index!),
+          (trigger as React.ReactElement)?.props?.onClick
+        )}
+      >
+        {trigger}
+        {openIndex === index ? <ChevronUp /> : <ChevronDown />}
+      </TriggerWrapper>
+      <Box sx={openIndex === index ? sx : 'visibility: hidden; height: 0px;'}>
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+const TriggerWrapper = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  appearance: none;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+`;
+
+Accordion.Item = AccordionItem;
+AccordionItem.displayName = 'Accordion.Item';
+
+export { Accordion };

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

@@ -0,0 +1,2 @@
+export { Accordion } from './accordion';
+export type { AccordionProps, AccordionItemProps } from './accordion';

package/src/components/surfaces/index.ts

@@ -1,3 +1,5 @@
+export { Accordion } from './accordion';
+export type { AccordionProps, AccordionItemProps } from './accordion';
 export { Comment } from './comment';
 export type { CommentProps } from './comment';
 export { Message } from './message';

package/src/components/surfaces/modal/modal.tsx

@@ -2,11 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Button } from 'components';
 import { Close } from 'icons';
-
-const callAll =
-  (...fns: ((...args: unknown[]) => unknown)[]) =>
-  (...args: any) =>
-    fns.forEach((fn) => fn && fn(...args));
+import { callAll } from 'utils';
 
 const ModalContext = React.createContext<
   [boolean, React.Dispatch<React.SetStateAction<boolean>>]

package/src/utils/function.ts

@@ -0,0 +1,4 @@
+export const callAll =
+  (...fns: ((...args: unknown[]) => unknown)[]) =>
+  (...args: any) =>
+    fns.forEach((fn) => fn && fn(...args));

package/src/utils/index.ts

@@ -11,3 +11,4 @@ export {
   isSameMonth,
   zeroPad,
 } from './date';
+export { callAll } from './function';