Merge pull request #295 from TobiTRy/litte-changes

Litte changes
TobiTRy · Jun 23, 2024 · bab6547 · bab6547
2 parents f21b3bb + a822f55
commit bab6547
Show file tree

Hide file tree

Showing 131 changed files with 1,206 additions and 506 deletions.
diff --git a/lib/index.ts b/lib/index.ts
@@ -52,6 +52,7 @@ export * from '@/components/atoms/RawA';
 export * from '@/components/atoms/RawNav';
 export * from '@/components/atoms/FancySpacingBox';
 export * from '@/components/atoms/DateInput';
+export * from '@/components/atoms/SystemMessage';
 export * from '@/components/atoms/SystemMessageBox';
 export * from '@/components/atoms/NumberInput';
 export * from '@/components/atoms/PasswordInput';
@@ -62,6 +63,7 @@ export * from '@/components/atoms/TitleForComponent';
 export * from '@/components/atoms/ColoredText';
 export * from '@/components/atoms/DisableBox';
 export * from '@/components/atoms/PasswordStrengthMeter';
+export * from '@/components/atoms/DynamicComponentWrapper';
 
 // ---------- Molecules ------- //
 export * from '@/components/molecules/FancyInfoText';
@@ -108,6 +110,8 @@ export * from '@/components/molecules/TabSwitch';
 export * from '@/components/molecules/FancyNavBar';
 export * from '@/components/molecules/LabeledInput';
 export * from '@/components/molecules/Stepper';
+export * from '@/components/atoms/RawButton';
+export * from '@/components/molecules/Fieldset';
 
 // ---------- Organisms ------- //
 export * from '@/components/organisms/FancyButton';
@@ -131,6 +135,7 @@ export * from '@/components/organisms/FancyNumberInput';
 export * from '@/components/organisms/FancyPasswordInput';
 export * from '@/components/organisms/FancyTextInput';
 export * from '@/components/organisms/FancyColorInput';
+export * from '@/components/organisms/FancyListBox';
 
 // ---------- Templates ------- //
 export * from '@/components/templates/FancyInfoCard';
@@ -157,6 +162,8 @@ export * from '@/utils/hooks/useIntersectionObserver';
 export * from '@/utils/hooks/useWindowDimensions';
 export * from '@/design/theme/FancyThemeProvider';
 export * from '@/utils/functions/clampNumber';
+export * from '@/utils/functions/copyToClipBoard';
+export * from '@/utils/functions/calcCSSValuesWithOffset';
 
 // ---------- Design ------- //
 export * from '@/design/designFunctions/calcBorderRadiusOnAlignment';
@@ -182,6 +189,7 @@ export * from '@/design/designFunctions/leftRightCenterToFlexJustify';
 export * from '@/design/designFunctions/getThemeOrValueAsCss';
 export * from '@/design/designFunctions/calcBorderRadiusWithPadding';
 export * from '@/design/theme/theme';
+export * from '@/design/designFunctions/generateThemeColorSteps';
 
 // ---------- Interfaces ------- //
 export * from '@/types';
@@ -198,7 +206,7 @@ export * from '@/components/atoms/RawSlider/TRawSlider.model';
 // ---------- Store ------- //
 export * from '@/design/theme/themeStore';
 export * from '@/design/theme/globalStyle/DefaultStyle';
-export * from '@/design/theme/generateThemeToCssVars';
+export * from '@/design/theme/generateObjectToCssVariables';
 export * from '@/design/theme/applyThemeToDomStyleSheet';
 
 // ---------- SVGs ------- //

diff --git a/src/App.tsx b/src/App.tsx
@@ -40,7 +40,7 @@ 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 { 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">
 //     <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11.666 1.89c.682 0 1.139.47 1.187 1.107H14v-.11c-.053-1.187-1.024-2-2.342-2-1.604 0-2.518 1.05-2.518 2.751v.747c0 1.7.905 2.73 2.518 2.73 1.314 0 2.285-.792 2.342-1.939v-.114h-1.147c-.048.615-.497 1.05-1.187 1.05-.839 0-1.318-.62-1.318-1.727v-.742c0-1.112.488-1.754 1.318-1.754zm-6.188.926h.044L6.542 11h1.006L9 5.001H7.818l-.82 4.355h-.056L5.97 5.001h-.94l-.972 4.355h-.053l-.827-4.355H2L3.452 11h1.005l1.02-4.184z" />
@@ -70,13 +70,16 @@ const OwnUl = styled.ul<{ theme: TTheme }>`
 `;
 
 function App() {
+  const closeModal = useFancyModalStore((state) => state.closeModal);
+  const modals = useFancyModalStore((state) => state.modals);
+
   return (
     <div className="App">
       <Router>
         <FancyThemeProvider>
           <DefaultStyle />
           <FancySwipeUpModal appendToDomID="modal" />
-          <FancyModal appendToDomID="modal" />
+          <FancyModal appendToDomID="modal" closeModal={closeModal} modals={modals} />
           <div>
             <nav>
               <OwnUl>

diff --git a/src/Routes/BottonRoute/ButtonRoute.tsx b/src/Routes/BottonRoute/ButtonRoute.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { DesignWrapper, DesignArea } from '../DesignWrapper/Wrapper';
 import FancyButton from '../../components/organisms/FancyButton/FancyButton';
 import { css } from 'styled-components';
+import { SVGChevronLeft } from '@/components/icons';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -54,8 +55,8 @@ export default function ButtonRoute() {
       </DesignArea>
       <DesignArea title="Button Types in wide" style={backgroundColor}>
         <FancyButton icon={Icon} label="Button" themeType="primary" align="left" iconAlign="left" wide />
-        <FancyButton icon={Icon} label="Button" themeType="secondary" align="right" />
-        <FancyButton icon={Icon} label="Button" themeType="accent" />
+        <FancyButton icon={Icon} outlined sizeC="sm" label="Button" themeType="secondary" align="right" />
+        <FancyButton icon={Icon} label="Button" sizeC="sm" themeType="accent" />
         <FancyButton icon={Icon} label="Button" themeType="transparent" align="left" />
       </DesignArea>
       <DesignArea title="Outlined Buttons" style={backgroundColor}>
@@ -99,6 +100,13 @@ export default function ButtonRoute() {
         />
       </DesignArea>
       <DesignArea title="1:1 Buttons" style={backgroundColor}>
+        <FancyButton
+          icon={
+            <span style={{ marginRight: '2px' }}>
+              <SVGChevronLeft />
+            </span>
+          }
+        />
         <FancyButton
           icon={Icon}
           sizeC="md"

diff --git a/src/Routes/CheckboxRoute/CheckboxRoute.tsx b/src/Routes/CheckboxRoute/CheckboxRoute.tsx
@@ -96,7 +96,7 @@ export default function CheckboxRoute() {
           </DesignArea>
         </DesignWrapper>
       </Card>
-      <FancyRadioList label="YAAAA MOOIIIN" name="hii" items={itemList} />
+      <FancyRadioList legend="YAAAA MOOIIIN" name="hii" items={itemList} />
     </>
   );
 }
diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
@@ -11,6 +11,8 @@ import PasswordStrengthMeter from '@/components/atoms/PasswordStrengthMeter/Pass
 import styled from 'styled-components';
 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';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -79,27 +81,21 @@ export default function ExperimentalRoute() {
             onClick={() => switchTheme()}
           />
         </DesignArea>
-        <FancyFlexBox align="flex-start" justify="flex-start">
-          <FancyNumberInput
-            underline={false}
-            label="Day"
-            placeholder="DD"
-            maxLength={2}
-            externalStyle={{ maxWidth: '6ch !important' }}
-          />
-          <FancyNumberInput label="Month" placeholder="MM" maxLength={2} externalStyle={{ width: '6ch !important' }} />
-          <FancyNumberInput label="Year" placeholder="YYYY" maxLength={4} externalStyle={{ width: '7ch !important' }} />
-        </FancyFlexBox>
+        <DynamicComponentWrapper wrapperComponent={<a href="https://fui.cool" />}>
+          <p>Test</p>
+        </DynamicComponentWrapper>
+
+        <FancyTabSwitch wide label="test" layer={1} values={defaultProps} />
       </DesignWrapper>
     </>
   );
 }
 
 const defaultProps = [
-  { label: 'hi1', value: 'hi1', id: '1' },
-  { label: 'hi2', value: 'hi2', id: '2' },
-  { label: 'hi3', value: 'hi3', id: '3' },
-  { label: 'hi4', value: 'hi4', id: '4' },
+  { label: 'hi1', value: 'hi1', itemKey: '1' },
+  { label: 'hi2', value: 'hi2', itemKey: '2' },
+  { label: 'hi3', value: 'hi3', itemKey: '3' },
+  { label: 'hi4', value: 'hi4', itemKey: '4' },
 ];
 
 const Box = styled.div`

diff --git a/src/Routes/FancyContentRoute/FancyContentRoute.tsx b/src/Routes/FancyContentRoute/FancyContentRoute.tsx
@@ -14,14 +14,21 @@ export default function FancyContentRoute() {
           <FancyContent.Icon sizeC="xs" themeType="primary">
             <SVGCheckMark />
           </FancyContent.Icon>
-          <FancyContent.Title themeType="primary">Hiii</FancyContent.Title>
+          <FancyContent.Title>Hiii</FancyContent.Title>
           <FancyContent.Description>Hiii</FancyContent.Description>
         </FancyContent>
 
         <FancyContent align="flex-start" justify="center" gapBetweenIcon="12px">
           <FancyContent.Description>Hiii</FancyContent.Description>
           <FancyContent.Title>Hiii</FancyContent.Title>
         </FancyContent>
+
+        <FancyContent align="center" justify="center" gapBetweenIcon="12px">
+          <FancyContent.Image sizeH="sm">
+            <img src="https://via.placeholder.com/150" alt="placeholder" />
+          </FancyContent.Image>
+          <FancyContent.Title>Hiii</FancyContent.Title>
+        </FancyContent>
       </DesignArea>
     </DesignWrapper>
   );

diff --git a/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx b/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx
@@ -9,7 +9,7 @@ export default function FancyLayoutRoute() {
   return (
     <DesignWrapper>
       <DesignArea title="Fancy Grid" style={{ height: '100%', width: '100%' }}>
-        <FancyGrid grid={6} gap="1rem">
+        <FancyGrid simpleGrid={6} gap="1rem">
           <FancyGrid.Item gridSpace={3} breakpoints={[{ breakpoint: '500px', gridSize: 6 }]}>
             <FancyButton label="Ji" wide />
           </FancyGrid.Item>

diff --git a/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx b/src/Routes/FancyListBoxRoute/FancyListBoxRoute.tsx
@@ -5,7 +5,16 @@ export default function FancyListBoxRoute() {
   return (
     <DesignWrapper>
       <DesignArea title="FancyListBox">
-        <FancyListBox>
+        <FancyListBox
+          layer={2}
+          sizeC="md"
+          itemSettings={{
+            hoverLayer: 3,
+            layer: 1,
+            themeType: 'primary',
+            sizeC: undefined,
+          }}
+        >
           <span>Moooiin</span>
 
           <span>Moooiin</span>

diff --git a/src/Routes/HeaderRoute/HeaderRoute.tsx b/src/Routes/HeaderRoute/HeaderRoute.tsx
@@ -122,7 +122,7 @@ export default function HeaderRoute() {
     <section>
       <FancyFlexBox className="hii"></FancyFlexBox>
       <Header externalStyle={{ height: '44px', padding: '0 12px' }}>
-        <FancyGrid grid={8} gap="12px">
+        <FancyGrid simpleGrid={8} gap="12px">
           <FancyGrid.Item gridSpace={1}>
             <FancyGrid.Item.FlexBox
               align="center"

diff --git a/src/Routes/ModalRoute/ModalRoute.tsx b/src/Routes/ModalRoute/ModalRoute.tsx
@@ -1,9 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import React from 'react';
-
-import FancyModal from '../../components/organisms/FancyModal/FancyModal';
-import { useFancyModalStore } from '../../components/organisms/FancyModal/FancyModal.state';
+import { createFancyModalStore } from '../../components/organisms/FancyModal/createFancyModalStore';
 import FancyButton from '../../components/organisms/FancyButton/FancyButton';
+import { FancyModalHeadLine } from '@/components/molecules/FancyModalHeadLine';
+import { Typography } from '@/components/atoms/Typography';
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useFancyModalStore = createFancyModalStore();
 
 export default function ModalRoute() {
   const createModal = useFancyModalStore((state) => state.openModal);
@@ -13,7 +14,11 @@ export default function ModalRoute() {
     createModal(
       'hi',
       <div>
-        hi
+        <FancyModalHeadLine
+          onXButtonClick={() => closeModal('hi')}
+          title={'Test'}
+          subTitle={<Typography variant="bodytextSm">Test</Typography>}
+        />
         <FancyButton />
       </div>,
       { isCloseable: true }

diff --git a/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx b/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx
@@ -6,7 +6,7 @@ import { css } from 'styled-components';
 import { Card } from '@/components/molecules/Card';
 
 const switchValues = [
-  { itemKey: '1', value: 'Tab 1', label: 'Tab 1 djkjk dklkdd' },
+  { itemKey: '1', value: 'Tab 1', label: 'Tab 1 ' },
   { itemKey: '2', value: 'Tab 2', label: 'Tab 2' },
   { itemKey: '3', value: 'Tab 3', label: 'Tab 3' },
 ];
@@ -50,19 +50,20 @@ export default function TabSwitchRoute() {
 
   return (
     <>
-      <FancyTabSwitch
+      {/* <FancyTabSwitch
         label="test"
         sizeC="sm"
         values={switchValues1}
         borderRadius={'xxl'}
         currentSelect={test}
         handler={(id: string) => setTest(id)}
-      />
+      /> */}
       <Card layer={1}>
         <DesignWrapper>
           <DesignArea
             title="TabSwitch"
             style={css`
+              width: 500px;
               flex-direction: column;
             `}
           >
@@ -141,23 +142,23 @@ export default function TabSwitchRoute() {
             />
 
             <FancyTabSwitch
-              sizeC="lg"
+              direction="vertical"
+              sizeC="sm"
               label="test"
               wide
               outlined
-              direction="vertical"
               values={switchValues}
-              borderRadius={'xl'}
-              layer={3}
+              layer={5}
               currentSelect={test}
               handler={(id: string) => setTest(id)}
             />
             <FancyTabSwitch
               label="test"
               wide
               values={switchValues}
+              spacingToEdge="xxs"
+              borderRadius={'md'}
               layer={2}
-              borderRadius={'xl'}
               currentSelect={test}
               handler={(id: string) => setTest(id)}
             />

diff --git a/src/components/atoms/DropDownSelect/TDropDownSelect.model.ts b/src/components/atoms/DropDownSelect/TDropDownSelect.model.ts
@@ -1,14 +1,14 @@
 import { HTMLAttributes } from 'react';
 
-type TItem = {
+export type TDropDownSelectItem = {
   value: string;
   key: string;
 };
 
 // the incoming props
 export type TDropDownSelect = {
   align?: 'left' | 'center';
-  values?: TItem[] | string[];
+  values?: TDropDownSelectItem[] | string[];
   value?: string;
   disabled?: boolean;
   placeholder?: string;

diff --git a/src/components/atoms/DropDownSelect/index.ts b/src/components/atoms/DropDownSelect/index.ts
@@ -1 +1,8 @@
 export { default as DropDownSelect } from './DropDownSelect';
+
+export type {
+  TDropDownSelectItem,
+  TDropDownSelect,
+  TDropDownSelectNativeAttrs,
+  TDropDownSelectWithNativeAttrs,
+} from './TDropDownSelect.model';
diff --git a/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.mdx b/src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.mdx
@@ -0,0 +1,48 @@
+import DynamicComponentWrapper from './DynamicComponentWrapper'; // Assuming component file is in the same directory
+
+# DynamicComponentWrapper
+
+Wrap React children with a dynamically specified component.
+
+## Overview
+
+This component provides a simple way to encapsulate each child element within a React component that you define. This is particularly useful for adding consistent styling or behavior across a group of children.
+
+## Props
+
+| Prop               | Type                 | Description                                                                                                     |
+| :----------------- | :------------------- | :-------------------------------------------------------------------------------------------------------------- |
+| `children`         | `React.ReactNode`    | The children elements to be wrapped.                                                                            |
+| `wrapperComponent` | `React.ReactElement` | The component to wrap each child. This must be a valid React element (e.g., `<div>`, a custom component, etc.). |
+
+## Usage
+
+```jsx
+import React from 'react';
+import DynamicComponentWrapper from 'fui-fancyui';
+
+const ExampleComponent = () => (
+  <DynamicComponentWrapper WrapperComponent={<Link href="http://fui.cool" />}>Click me!</DynamicComponentWrapper>
+);
+
+export default ExampleComponent;
+```
+
+In the above example:
+
+1. Each child (`<p>Child 1</p>` and `<p>Child 2</p>`) will be wrapped in an `<li>` element.
+2. The `<li>` element has a blue text color style applied to it.
+
+## Example
+
+```jsx
+<DynamicComponentWrapper wrapperComponent={<div style={{ border: '1px solid gray', padding: '10px' }}>}>
+  <h2>This is wrapped text</h2>
+  <p>Another wrapped paragraph.</p>
+</DynamicComponentWrapper>
+```
+
+## Considerations
+
+- **Valid React Elements:** Ensure `wrapperComponent` is a valid React element (not a component function).
+- **Deeply Nested Children:** This component works well for children at a single level. If your children have deep nesting, consider refactoring your child structure or using a more complex recursive approach.