@soul-refiner/design-system 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "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,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';