@soul-refiner/design-system 0.1.22 → 0.1.24

package/package.json

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

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

@@ -61,7 +61,7 @@ export interface BreadcrumbItemProps extends React.PropsWithChildren {
   onClick?: React.MouseEventHandler;
 }
 
-export const BreadcrumbItem = ({
+const BreadcrumbItem = ({
   avatar,
   children,
   href,

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

@@ -0,0 +1,87 @@
+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 AccordionContext = 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 (
+    <AccordionContext.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>
+    </AccordionContext.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(AccordionContext);
+
+  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/drawer/drawer.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import styled from 'styled-components';
+import { callAll } from 'utils';
+
+const DrawerContext = React.createContext<
+  [boolean, React.Dispatch<React.SetStateAction<boolean>>]
+>([false, (() => undefined) as React.Dispatch<React.SetStateAction<boolean>>]);
+
+export interface DrawerProps extends React.PropsWithChildren {
+  /**
+   * This is to make the Modal a controlled component,
+   * instead of it managing its own state
+   */
+  controlledOpen?: boolean;
+  onOpenChange?: () => void;
+}
+
+export const Drawer = ({
+  children,
+  controlledOpen,
+  onOpenChange,
+}: DrawerProps) => {
+  const [open, setOpen] = React.useState(controlledOpen || false);
+
+  React.useEffect(() => {
+    if (controlledOpen !== undefined) {
+      setOpen(controlledOpen);
+    }
+  }, [controlledOpen]);
+
+  const _children = React.Children.toArray(children);
+  const triggers: React.ReactNode[] = [];
+  const content: React.ReactNode[] = [];
+  let footer: React.ReactNode = null;
+  let header: React.ReactNode = null;
+
+  for (const child of _children) {
+    if (React.isValidElement(child)) {
+      const type = (child.type as any)?.displayName;
+
+      if (type === 'Drawer.Trigger') triggers.push(child);
+      else if (type === 'Drawer.Header') header = child;
+      else if (type === 'Drawer.Footer') footer = child;
+      else content.push(child);
+    }
+  }
+
+  return (
+    <DrawerContext.Provider value={[open, setOpen]}>
+      {triggers}
+      {open && (
+        <Background
+          onClick={callAll(
+            () => setOpen(false),
+            () => onOpenChange && onOpenChange()
+          )}
+        />
+      )}
+      <Component $open={open}>
+        {header && <HeaderWrapper>{header}</HeaderWrapper>}
+        <ContentWrapper>{content}</ContentWrapper>
+        {footer && <FooterWrapper>{footer}</FooterWrapper>}
+      </Component>
+    </DrawerContext.Provider>
+  );
+};
+
+const Background = styled.div`
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 149;
+  overflow: hidden;
+  background: #000000;
+  opacity: 0.5;
+  cursor: pointer;
+`;
+
+const Component = styled.div<{
+  $open: boolean;
+}>`
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  max-width: 880px;
+  width: 100%;
+  z-index: 150;
+  border-radius: 16px 0px 0px 16px;
+  background-color: var(--background-color);
+  margin-right: -100vw;
+  transition: margin-right 0.5s;
+  background-color: var(--color-grey-10);
+
+  ${({ $open }) => ($open ? 'margin-right: 0px;' : '')}
+`;
+
+const HeaderWrapper = styled.div`
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-2);
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  top: 0;
+`;
+
+const ContentWrapper = styled.div`
+  height: calc(100vh - 224px);
+  position: relative;
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 24px 16px 24px 24px;
+  margin-right: 8px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    background-color: var(--color-white);
+    margin: 40px 0px 15px 0px;
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: var(--color-grey-6);
+    opacity: 30%;
+  }
+`;
+
+const FooterWrapper = styled.div`
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-1);
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  bottom: 0;
+`;
+
+const DrawerTrigger = ({
+  children: child,
+}: {
+  children: React.ReactElement;
+}) => {
+  const [, setOpen] = React.useContext(DrawerContext);
+  return (
+    child &&
+    React.cloneElement(child, {
+      onClick: callAll(() => setOpen((prev) => !prev), child.props.onClick),
+    })
+  );
+};
+
+DrawerTrigger.displayName = 'Drawer.Trigger';
+Drawer.Trigger = DrawerTrigger;
+
+const DrawerHeader = ({ children }: React.PropsWithChildren) => (
+  <div>{children}</div>
+);
+
+DrawerHeader.displayName = 'Drawer.Header';
+Drawer.Header = DrawerHeader;
+
+const DrawerContent = ({ children }: React.PropsWithChildren) => (
+  <div>{children}</div>
+);
+
+DrawerContent.displayName = 'Drawer.Content';
+Drawer.Content = DrawerContent;
+
+const DrawerFooter = ({ children }: React.PropsWithChildren) => (
+  <div>{children}</div>
+);
+
+DrawerFooter.displayName = 'Drawer.Footer';
+Drawer.Footer = DrawerFooter;

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

@@ -0,0 +1,2 @@
+export { Drawer } from './drawer';
+export type { DrawerProps } from './drawer';

package/src/components/surfaces/index.ts

@@ -1,5 +1,9 @@
+export { Accordion } from './accordion';
+export type { AccordionProps, AccordionItemProps } from './accordion';
 export { Comment } from './comment';
 export type { CommentProps } from './comment';
+export { Drawer } from './drawer';
+export type { DrawerProps } from './drawer';
 export { Message } from './message';
 export type { MessageProps } from './message';
 export { Modal } from './modal';

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';