Litte updates

lib/index.ts

@@ -112,6 +112,8 @@ export * from '@/components/molecules/LabeledInput';
 export * from '@/components/molecules/Stepper';
 export * from '@/components/atoms/RawButton';
 export * from '@/components/molecules/Fieldset';
+export * from '@/components/molecules/SideBar';
+export * from '@/components/molecules/SideBarItem';
 
 // ---------- Organisms ------- //
 export * from '@/components/organisms/FancyButton';
@@ -137,6 +139,7 @@ export * from '@/components/organisms/FancyTextInput';
 export * from '@/components/organisms/FancyColorInput';
 export * from '@/components/organisms/FancyListBox';
 export * from '@/components/organisms/FancyTextArea';
+export * from '@/components/organisms/FancySideBar';
 
 // ---------- Templates ------- //
 export * from '@/components/templates/FancyInfoCard';
@@ -153,6 +156,8 @@ export * from '@/components/templates/FancyGridTemplate';
 export * from '@/components/templates/FancyGridTemplateItem';
 export * from '@/components/templates/FancySkeletonGrid';
 export * from '@/components/templates/FancySystemMessageBox';
+export * from '@/components/templates/FancySideBarItem';
+export * from '@/components/templates/FancySideBarOpenButton';
 
 // ---------- Utils/Hooks ------- //
 export * from '@/components/shared/FancyPopover';
@@ -165,6 +170,8 @@ export * from '@/design/theme/FancyThemeProvider';
 export * from '@/utils/functions/clampNumber';
 export * from '@/utils/functions/copyToClipBoard';
 export * from '@/utils/functions/calcCSSValuesWithOffset';
+export * from '@/utils/hooks/useActiveBreakpoint';
+export * from '@/utils/hooks/useBreakpointComparison';
 
 // ---------- Design ------- //
 export * from '@/design/designFunctions/calcBorderRadiusOnAlignment';

src/App.tsx

@@ -3,7 +3,7 @@ import { Link, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import FancyThemeProvider from '@/design/theme/FancyThemeProvider/FancyThemeProvider';
 import { TTheme } from '@/types/TTheme';
 import { styled } from 'styled-components';
-import { DefaultStyle, FancyModal, FancySwipeUpModal } from '../lib';
+import { DefaultStyle, FancyModal } from '../lib';
 import ButtonRoute from './Routes/BottonRoute/ButtonRoute';
 import CradRoute from './Routes/CardRoute/CradRoute';
 import CheckboxRoute from './Routes/CheckboxRoute/CheckboxRoute';
@@ -36,10 +36,12 @@ import ToastMessageRoute from './Routes/ToastMessageRoute/ToastMessageRoute';
 import Typogrphy from './Routes/Typography/Typogrphy';
 
 import FancyListBoxRoute from '@/Routes/FancyListBoxRoute/FancyListBoxRoute';
+import PasswordStrengthMeterRoute from '@/Routes/PasswordStrengthMeterRoute/PasswordStrengthMeterRoute';
+import SideBarRoute from '@/Routes/SideBarRoute/SideBarRoute';
 import SkeletonRoute from '@/Routes/SkeletonRoute/SkeletonRoute';
-import TextGradientRoute from '@/Routes/TextGradientRoute/TextGradientRoute';
 import StepperRoute from '@/Routes/StepperRoute/StepperRoute';
-import PasswordStrengthMeterRoute from '@/Routes/PasswordStrengthMeterRoute/PasswordStrengthMeterRoute';
+import SwitchActiveIndicatorRoute from '@/Routes/SwitchActiveIndicatorRoute/SwitchActiveIndicatorRoute';
+import TextGradientRoute from '@/Routes/TextGradientRoute/TextGradientRoute';
 import { useFancyModalStore } from './Routes/ModalRoute/ModalRoute';
 // const Icon = (
 //   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -78,9 +80,16 @@ function App() {
       <Router>
         <FancyThemeProvider>
           <DefaultStyle />
-          <FancySwipeUpModal appendToDomID="modal" />
-          <FancyModal appendToDomID="modal" closeModal={closeModal} modals={modals} />
-          <div>
+
+          <FancyModal
+            appendToDomID="modal"
+            closeModal={(id) => {
+              console.log(id);
+              closeModal(id);
+            }}
+            modals={modals}
+          />
+          <div style={{ height: '100vh' }}>
             <nav>
               <OwnUl>
                 <li>
@@ -188,6 +197,13 @@ function App() {
                 <li>
                   <Link to="/passwordstrengthmeter">PasswordStrengthMeter</Link>
                 </li>
+                <li>
+                  <Link to="/switchactiveindicator">SwitchActiveIndicator</Link>
+                </li>
+                <li>
+                  <Link to="/sidebar">SideBar</Link>
+                </li>
+
                 <li>
                   <Link to="/experimental">Experimental</Link>
                 </li>
@@ -232,6 +248,8 @@ function App() {
               <Route path="/TextGradient" element={<TextGradientRoute />} />
               <Route path="/stepper" element={<StepperRoute />} />
               <Route path="/passwordstrengthmeter" element={<PasswordStrengthMeterRoute />} />
+              <Route path="/switchactiveindicator" element={<SwitchActiveIndicatorRoute />} />
+              <Route path="/sidebar" element={<SideBarRoute />} />
               <Route path="/" element={<SwipeUpModalRoute />} />
             </Routes>
           </div>

src/Routes/BottonRoute/ButtonRoute.module.css

@@ -0,0 +1,4 @@
+.test {
+  background-color: red;
+  padding: 12px;
+}

src/Routes/BottonRoute/ButtonRoute.tsx

@@ -11,6 +11,8 @@ const Icon = (
   </svg>
 );
 
+import style from './ButtonRoute.module.css';
+
 export default function ButtonRoute() {
   const [isLoading, setIsLoading] = useState(false);
 
@@ -134,6 +136,9 @@ export default function ButtonRoute() {
           borderRadius="sm"
         />
       </DesignArea>
+      <DesignArea title="Buttons" style={backgroundColor}>
+        <FancyButton className={style.test} appendClassNameOnStyle={true} noSize label="Test" themeType="primary" />
+      </DesignArea>
     </DesignWrapper>
   );
 }

src/Routes/ExperimentalRoute/ExperimentalRoute.tsx

@@ -13,6 +13,8 @@ import { FancyNumberInput } from '@/components/organisms/FancyNumberInput';
 import { FancyFlexBox } from '@/components/templates/FancyFlexBox';
 import { FancyTabSwitch } from '@/components/organisms/FancyTabSwitch';
 import DynamicComponentWrapper from '@/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper';
+import { FancyBox } from '@/components/atoms/FancyBox';
+import { SwipeUpContainer } from '@/components/atoms/SwipeUpContainer';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -60,6 +62,8 @@ export default function ExperimentalRoute() {
   const updateTheme = themeStore((state) => state.updateTheme);
   const switchTheme = themeStore((state) => state.switchTheme);
   const [password, setPassword] = useState('');
+  const [isHover, setIsHover] = useState(false);
+  const [modalPosition, setModalPosition] = useState({ height: '100%' });
 
   const [selectedValue, setSelectedValue] = useState(null);
 
@@ -86,6 +90,53 @@ export default function ExperimentalRoute() {
         </DynamicComponentWrapper>
 
         <FancyTabSwitch wide label="test" layer={1} values={defaultProps} />
+
+        <div
+          onMouseEnter={() => setIsHover(true)}
+          onMouseLeave={() => setIsHover(false)}
+          style={{
+            position: 'fixed',
+            bottom: '0',
+            padding: '20px',
+            backgroundColor: 'black',
+            display: 'grid',
+            gridTemplateRows: isHover ? '1fr' : '0fr',
+            transition: 'grid-template-rows 0.5s ease-out',
+          }}
+        >
+          <div style={{ overflow: 'hidden' }}>
+            <div style={{ height: '100px' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '18px' }}>
+                <FancyNumberInput label="Email" />
+                <FancyButton label="Close Modal" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{
+            position: 'fixed',
+            left: '0',
+            bottom: '0',
+            padding: '20px',
+            backgroundColor: 'black',
+            display: 'grid',
+            gridTemplateRows: isHover ? '1fr' : '0fr',
+            transition: 'grid-template-rows 0.5s ease-out',
+          }}
+        >
+          <SwipeUpContainer isOpen={isHover}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '18px' }}>
+              <FancyNumberInput label="Email" />
+              <FancyButton label="Close Modal" />
+            </div>
+          </SwipeUpContainer>
+        </div>
+
+        <FancyBox hoverLayer={4}>
+          <p>Test</p>
+        </FancyBox>
       </DesignWrapper>
     </>
   );

src/Routes/ModalRoute/ModalRoute.tsx

@@ -24,6 +24,7 @@ export default function ModalRoute() {
       { isCloseable: true }
     );
   };
+
   return (
     <section>
       <FancyButton onClick={handleModalCreation} sizeC="sm" label="open modal"></FancyButton>

src/Routes/SideBarRoute/SideBarRoute.tsx

@@ -0,0 +1,152 @@
+import SideBar from '@/components/molecules/SideBar/SideBar';
+import { DesignArea, DesignWrapper } from '@/Routes/DesignWrapper/Wrapper';
+import { FancySideBar } from '@/components/organisms/FancySideBar';
+import { useState } from 'react';
+import SVGCheckMark from '@/components/icons/SVGCheckMark/SVGCheckMark';
+import { FancySideBarItem } from '@/components/templates/FancySideBarItem';
+import FancySideBarOpenButton from '@/components/templates/FancySideBarOpenButton/FancySideBarOpenButton';
+
+export default function SideBarRoute() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <DesignWrapper style={{ height: '100%' }}>
+      <DesignArea title="Sidebbar" style={{ display: 'flex', flexDirection: 'column' }}>
+        <button onClick={() => setIsOpen(!isOpen)}>Toggle SideBar</button>
+
+        <div style={{ height: '400px', display: 'flex', justifyContent: 'flex-end' }}>
+          <FancySideBar
+            sizeC="lg"
+            isOpen={isOpen}
+            openWidth="200px"
+            align="right"
+            slotContent={[
+              <FancySideBarItem noMargin sizeC="lg" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />,
+              <FancySideBarItem noMargin sizeC="lg" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />,
+              <FancySideBarItem noMargin sizeC="lg" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />,
+              <FancySideBarItem noMargin sizeC="lg" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />,
+              <FancySideBarItem noMargin sizeC="lg" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />,
+              <FancySideBarItem noMargin sizeC="lg" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />,
+              <FancySideBarItem noMargin sizeC="lg" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />,
+              <FancySideBarItem noMargin sizeC="lg" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />,
+            ]}
+            slotBottom={
+              <FancySideBarOpenButton
+                arrowDirectionClosed="right"
+                onClick={() => setIsOpen(!isOpen)}
+                sizeC="lg"
+                justify="left"
+                noMargin
+                isOpen={isOpen}
+              />
+            }
+            slotTop={
+              <FancySideBarOpenButton
+                arrowDirectionClosed="right"
+                onClick={() => setIsOpen(!isOpen)}
+                sizeC="lg"
+                noMargin
+                justify="left"
+                isOpen={isOpen}
+              />
+            }
+          />
+        </div>
+
+        <div style={{ height: '400px' }}>
+          <SideBar sizeC="md" isOpen={isOpen} openWidth="200px">
+            <FancySideBarItem
+              noMargin
+              wide
+              layer={2}
+              borderRadius={'0'}
+              sizeC="md"
+              label="Test"
+              hoverLayer={4}
+              icon={<SVGCheckMark />}
+            />
+
+            <FancySideBarItem
+              sizeC="md"
+              label="Test"
+              hoverLayer={4}
+              noMargin
+              wide
+              icon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="24px"
+                  viewBox="0 -960 960 960"
+                  width="24px"
+                  fill="#e8eaed"
+                >
+                  <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
+                </svg>
+              }
+            />
+            <FancySideBarItem noMargin wide sizeC="md" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />
+
+            <FancySideBarOpenButton onClick={() => setIsOpen(!isOpen)} justify="center" sizeC="md" isOpen={isOpen} />
+          </SideBar>
+        </div>
+
+        <div style={{ height: '400px' }}>
+          <SideBar sizeC="md" isOpen={isOpen} openWidth="200px">
+            <FancySideBarItem sizeC="md" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />
+
+            <FancySideBarItem
+              sizeC="md"
+              label="Test"
+              hoverLayer={4}
+              icon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="24px"
+                  viewBox="0 -960 960 960"
+                  width="24px"
+                  fill="#e8eaed"
+                >
+                  <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
+                </svg>
+              }
+            />
+            <FancySideBarItem sizeC="md" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />
+
+            <FancySideBarOpenButton onClick={() => setIsOpen(!isOpen)} justify="center" sizeC="md" isOpen={isOpen} />
+          </SideBar>
+        </div>
+
+        <div style={{ height: '400px' }}>
+          <SideBar sizeC="md" isOpen={isOpen} openWidth="200px">
+            <FancySideBarItem sizeC="md" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />
+
+            <FancySideBarItem
+              sizeC="md"
+              label="Test"
+              hoverLayer={4}
+              icon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="24px"
+                  viewBox="0 -960 960 960"
+                  width="24px"
+                  fill="#e8eaed"
+                >
+                  <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" />
+                </svg>
+              }
+            />
+            <FancySideBarItem sizeC="md" label="Test" hoverLayer={4} icon={<SVGCheckMark />} />
+
+            <FancySideBarOpenButton onClick={() => setIsOpen(!isOpen)} justify="center" sizeC="md" isOpen={isOpen} />
+          </SideBar>
+        </div>
+        <div style={{ height: '400px' }}>
+          <SideBar isOpen={isOpen} openWidth="200px">
+            <p>AJjk</p>
+          </SideBar>
+        </div>
+      </DesignArea>
+    </DesignWrapper>
+  );
+}