🆙 Init V3

src/common/card/accordion/NitroCardAccordionContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, Dispatch, FC, ProviderProps, SetStateAction, useContext } from 'react';
+
+export interface INitroCardAccordionContext
+{
+    closers: Function[];
+    setClosers: Dispatch<SetStateAction<Function[]>>;
+    closeAll: () => void;
+}
+
+const NitroCardAccordionContext = createContext<INitroCardAccordionContext>({
+    closers: null,
+    setClosers: null,
+    closeAll: null
+});
+
+export const NitroCardAccordionContextProvider: FC<ProviderProps<INitroCardAccordionContext>> = props =>
+{
+    return <NitroCardAccordionContext.Provider { ...props } />;
+};
+
+export const useNitroCardAccordionContext = () => useContext(NitroCardAccordionContext);

src/common/card/accordion/NitroCardAccordionItemView.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { Flex, FlexProps } from '../..';
+
+export interface NitroCardAccordionItemViewProps extends FlexProps
+{
+
+}
+
+export const NitroCardAccordionItemView: FC<NitroCardAccordionItemViewProps> = props =>
+{
+    const { alignItems = 'center', gap = 1, children = null, ...rest } = props;
+
+    return (
+        <Flex alignItems={ alignItems } gap={ gap } { ...rest }>
+            { children }
+        </Flex>
+    );
+};

src/common/card/accordion/NitroCardAccordionSetView.tsx

@@ -0,0 +1,84 @@
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FaCaretDown, FaCaretUp } from 'react-icons/fa';
+import { Column, ColumnProps, Flex, Text } from '../..';
+import { useNitroCardAccordionContext } from './NitroCardAccordionContext';
+
+export interface NitroCardAccordionSetViewProps extends ColumnProps
+{
+    headerText: string;
+    isExpanded?: boolean;
+}
+
+export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = props =>
+{
+    const { headerText = '', isExpanded = false, gap = 0, classNames = [], children = null, ...rest } = props;
+    const [ isOpen, setIsOpen ] = useState(false);
+    const { setClosers = null, closeAll = null } = useNitroCardAccordionContext();
+
+    const onClick = () =>
+    {
+        closeAll();
+
+        setIsOpen(prevValue => !prevValue);
+    };
+
+    const onClose = useCallback(() => setIsOpen(false), []);
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames = [ 'nitro-card-accordion-set' ];
+
+        if(isOpen) newClassNames.push('active');
+
+        if(classNames && classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ isOpen, classNames ]);
+
+    useEffect(() =>
+    {
+        setIsOpen(isExpanded);
+    }, [ isExpanded ]);
+
+    useEffect(() =>
+    {
+        const closeFunction = onClose;
+
+        setClosers(prevValue =>
+        {
+            const newClosers = [ ...prevValue ];
+
+            newClosers.push(closeFunction);
+
+            return newClosers;
+        });
+
+        return () =>
+        {
+            setClosers(prevValue =>
+            {
+                const newClosers = [ ...prevValue ];
+
+                const index = newClosers.indexOf(closeFunction);
+
+                if(index >= 0) newClosers.splice(index, 1);
+
+                return newClosers;
+            });
+        };
+    }, [ onClose, setClosers ]);
+
+    return (
+        <Column classNames={ getClassNames } gap={ gap } { ...rest }>
+            <Flex pointer className="nitro-card-accordion-set-header px-2 py-1" justifyContent="between" onClick={ onClick }>
+                <Text>{ headerText }</Text>
+                { isOpen && <FaCaretUp className="fa-icon" /> }
+                { !isOpen && <FaCaretDown className="fa-icon" /> }
+            </Flex>
+            { isOpen &&
+                <Column fullHeight className="nitro-card-accordion-set-content" gap={ 0 } overflow="auto">
+                    { children }
+                </Column> }
+        </Column>
+    );
+};

src/common/card/accordion/NitroCardAccordionView.tsx

@@ -0,0 +1,25 @@
+import { FC, useCallback, useState } from 'react';
+import { Column, ColumnProps } from '../..';
+import { NitroCardAccordionContextProvider } from './NitroCardAccordionContext';
+
+interface NitroCardAccordionViewProps extends ColumnProps
+{
+
+}
+
+export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
+{
+    const { ...rest } = props;
+    const [ closers, setClosers ] = useState<Function[]>([]);
+
+    const closeAll = useCallback(() =>
+    {
+        for(const closer of closers) closer();
+    }, [ closers ]);
+
+    return (
+        <NitroCardAccordionContextProvider value={ { closers, setClosers, closeAll } }>
+            <Column gap={ 0 } { ...rest } />
+        </NitroCardAccordionContextProvider>
+    );
+};

src/common/card/accordion/index.ts

@@ -0,0 +1,4 @@
+export * from './NitroCardAccordionContext';
+export * from './NitroCardAccordionItemView';
+export * from './NitroCardAccordionSetView';
+export * from './NitroCardAccordionView';