@soul-refiner/design-system 0.1.23 → 0.1.24

package/package.json

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

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

@@ -8,10 +8,9 @@ export interface AccordionProps extends React.PropsWithChildren {
   sx?: string;
 }
 
-const ModalContext = React.createContext<[number, (index: number) => void]>([
-  -1,
-  () => undefined,
-]);
+const AccordionContext = React.createContext<[number, (index: number) => void]>(
+  [-1, () => undefined]
+);
 
 const Accordion = ({ children, sx }: AccordionProps) => {
   const [openIndex, setOpenIndex] = React.useState(-1);
@@ -21,7 +20,7 @@ const Accordion = ({ children, sx }: AccordionProps) => {
   };
 
   return (
-    <ModalContext.Provider value={[openIndex, handleIndexChange]}>
+    <AccordionContext.Provider value={[openIndex, handleIndexChange]}>
       <Wrapper $sx={sx}>
         {React.Children.map(children, (child, index) => {
           if (React.isValidElement(child))
@@ -29,7 +28,7 @@ const Accordion = ({ children, sx }: AccordionProps) => {
           return null;
         })}
       </Wrapper>
-    </ModalContext.Provider>
+    </AccordionContext.Provider>
   );
 };
 
@@ -49,7 +48,7 @@ const AccordionItem = ({
   sx,
   trigger,
 }: AccordionItemProps) => {
-  const [openIndex, setOpenIndex] = React.useContext(ModalContext);
+  const [openIndex, setOpenIndex] = React.useContext(AccordionContext);
 
   return (
     <Box $dir="column">

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

@@ -2,6 +2,8 @@ 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';