Merge pull request #201 from MrTRyy/199-buildin-normalradiobuttons

199 buildin normalradiobuttons
TobiTRy · Nov 28, 2023 · c466ad5 · c466ad5
2 parents 0d05272 + f8f307b
commit c466ad5
Show file tree

Hide file tree

Showing 267 changed files with 1,423 additions and 566 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -23,4 +23,5 @@ module.exports = {
     '@typescript-eslint/restrict-plus-operands': 'off',
     '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
   },
+  ignorePatterns: ['vite.config.ts', '.eslintrc.cjs'],
 };
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -17,8 +17,15 @@ jobs:
       - name: Install Dependencies
         run: npm install
 
-      - name: Ceck Prettier Formatting
+      - name: Check Prettier Formatting
         run: npx prettier --check .
 
       - name: Run ESLint
         run: npm run lint
+
+      - name: Run Build
+        run: npm run build
+
+      - name: Fail if Previous Steps Failed
+        if: ${{ failure() }}
+        run: exit 1
diff --git a/.github/workflows/qualityCheckForDevelop.yml b/.github/workflows/qualityCheckForDevelop.yml
@@ -24,3 +24,6 @@ jobs:
 
       - name: Run ESLint
         run: npm run lint
+
+      - name: Run Build
+        run: npm run build
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@mrtryy/fancyuilibary",
   "description": "FancyUI Libary",
   "private": false,
-  "version": "0.1.12117",
+  "version": "0.1.129",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,28 +15,31 @@
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --fix --max-warnings=-1",
     "checkFormat": "prettier --check .",
     "format": "prettier --write .",
-    "predeploy": "npm run lint && npm run build && npm run checkFormat"
+    "predeploy": "npm run lint && npm run checkFormat && npm run build"
   },
   "lint-staged": {
     "*.ts": [
-      "eslint --fix",
+      "eslint src --ext ts --report-unused-disable-directives --fix --max-warnings=-1",
       "prettier --write"
     ],
     "*.tsx": [
-      "eslint --fix",
+      "eslint src --ext tsx --report-unused-disable-directives --fix --max-warnings=-1",
+      "prettier --write"
+    ],
+    "*.mdx": [
+      "prettier --write"
+    ],
+    "*.yml": [
+      "prettier --write"
+    ],
+    "*.json": [
       "prettier --write"
     ]
   },
   "dependencies": {
-    "@react-spring/web": "^9.7.3",
-    "@types/color": "^3.0.3",
     "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^9.0.6",
-    "color": "^4.2.3",
     "react-router-dom": "^6.14.1",
-    "uuid": "^9.0.1",
-    "vite-plugin-dts": "^3.1.1",
-    "zustand": "^4.3.9"
+    "vite-plugin-dts": "^3.1.1"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.5.2",
@@ -73,18 +76,24 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "^6.0.7"
+    "styled-components": "^6.0.7",
+    "zustand": "^4.3.9",
+    "color": "^4.2.3",
+    "uuid": "^9.0.1",
+    "@react-spring/web": "^9.7.3",
+    "@types/color": "^3.0.3",
+    "@types/uuid": "^9.0.6"
   },
   "files": [
     "dist"
   ],
-  "main": "./dist/my-lib.umd.js",
-  "module": "./dist/my-lib.es.js",
+  "main": "./dist/fui.umd.js",
+  "module": "./dist/fui.es.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/my-lib.es.js",
-      "require": "./dist/my-lib.cjs.js",
+      "import": "./dist/fui.es.js",
+      "require": "./dist/fui.cjs.js",
       "types": "./dist/index.d.ts"
     },
     "./package.json": "./package.json"

diff --git a/src/App.tsx b/src/App.tsx
@@ -34,14 +34,15 @@ import ChipsRoute from './Routes/ChipsRoute/ChipsRoute';
 import CheckboxRoute from './Routes/CheckboxRoute/CheckboxRoute';
 import ColorGeneratorRoute from './Routes/ColorGeneratorRoute/ColorGeneratorRoute';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
-import themeStore from './Components/UI/Design/color/themeStore';
+import themeStore from './Components/UI/Design/color/themeStore/themeStore';
 import GlobalStyle from './GlobalStyle';
 import FancyContentRoute from './Routes/FancyContentRoute/FancyContentRoute';
 import { FancyModal, FancySwipeUpModal } from './lib';
 import SwitchesRoute from './Routes/Switches/SwitchesRoute';
 import MenueRoute from './Routes/MenuRoute/MenueRoute';
 import InfoCardRoute from './Routes/InfoCardRoute/InfoCardRoute';
 import FancyLayoutRoute from './Routes/FancyLayoutRoute/FancyLayoutRoute';
+import FancyBoxSetRoute from './Routes/FancyBoxSet/FancyBoxSetRoute';
 
 // const Icon = (
 //   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -179,6 +180,9 @@ function App() {
                 <li>
                   <Link to="/layout">Layout</Link>
                 </li>
+                <li>
+                  <Link to="/fancyBoxSet">FancyBoxSet</Link>
+                </li>
                 <li>
                   <Link to="/experimental">Experimental</Link>
                 </li>
@@ -219,6 +223,7 @@ function App() {
               <Route path="/menu" element={<MenueRoute />} />
               <Route path="/infoCard" element={<InfoCardRoute />} />
               <Route path="/layout" element={<FancyLayoutRoute />} />
+              <Route path="/fancyBoxSet" element={<FancyBoxSetRoute />} />
               <Route path="/" element={<SwipeUpModal />} />
             </Routes>
           </div>

diff --git a/src/Components/UI/Atoms/AlignedInputLabel/TalignedInputLabel.model.ts b/src/Components/UI/Atoms/AlignedInputLabel/TalignedInputLabel.model.ts
@@ -1,13 +1,13 @@
 import { TLayer } from '@/Components/UI/Interface/TLayer';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
-import { TUiColors } from '@/Components/UI/Interface/TUiColors';
+import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
 
 export type TAlign = 'left' | 'center';
 
 export interface IAlignedInputLabel {
   $align?: TAlign;
   $colorState?: 'error' | 'active' | 'default';
   theme?: TTheme;
-  $themeType?: TUiColors;
+  $themeType?: TThemeTypes;
   $layer?: TLayer;
 }
diff --git a/src/Components/UI/Atoms/AnimatedLabel/AnimatedInputLabel.tsx b/src/Components/UI/Atoms/AnimatedLabel/AnimatedInputLabel.tsx
@@ -1,10 +1,11 @@
 import { styled, css } from 'styled-components';
 
-import InputLabel from '../InputLabel/InputLabel';
-import { TUiColorsType } from '../../Design/color/designColor';
-import { getTextColor } from '../../Design/color/colorCalculatorForComponet';
+import InputLabel from '@/Components/UI/Atoms/InputLabel/InputLabel';
 import { IAnimatedInputLabel } from './TAnimatedInputLabel.model';
 
+import { getTextColor } from '@/Components/UI/Design/color/colorCalculatorForComponet';
+import { TTheme } from '@/Components/UI/Interface/TTheme';
+
 const activeHandler = (align: string, $moveUp?: boolean) => {
   if (align !== 'center') {
     return css`
@@ -34,7 +35,7 @@ const activeHandler = (align: string, $moveUp?: boolean) => {
 // ---------- The input label wich hase some colors and an animation --------- //
 // --------------------------------------------------------------------------- //
 // eslint-disable-next-line react-refresh/only-export-components
-export const AnimatedInputLabel = styled(InputLabel)<IAnimatedInputLabel & { theme?: TUiColorsType }>`
+export const AnimatedInputLabel = styled(InputLabel)<IAnimatedInputLabel & { theme?: TTheme }>`
   position: absolute;
   padding: 12px 0 5px;
   color: ${({ $colorState, theme, $themeType = 'secondary', $layer = 4 }) => {

diff --git a/src/Components/UI/Atoms/AnimatedLabel/TAnimatedInputLabel.model.ts b/src/Components/UI/Atoms/AnimatedLabel/TAnimatedInputLabel.model.ts
@@ -1,12 +1,12 @@
 import { TLayer } from '@/Components/UI/Interface/TLayer';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
-import { TUiColors } from '@/Components/UI/Interface/TUiColors';
+import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
 
 export interface IAnimatedInputLabel {
   $align?: 'center' | 'left';
   $moveUp?: boolean;
   $colorState?: 'error' | 'active' | 'default';
-  $themeType?: TUiColors;
+  $themeType?: TThemeTypes;
   $layer?: TLayer;
   theme?: TTheme;
 }
diff --git a/src/Components/UI/Atoms/ColorDisplay/ColorDisplay.tsx b/src/Components/UI/Atoms/ColorDisplay/ColorDisplay.tsx
@@ -5,9 +5,9 @@ import Typography from '../Typography/Typography';
 import copyToClipboard from '../../HelperFunctions/copyToClipBoard';
 import CheckerBoardPattern from '../CheckerBoardPattern/CheckerBoardPattern';
 import { ColorDisplayContainer, Wrapper, Content, WrapperSVG } from './ColorDisplay.style';
-import ClipBoardIcon from '../../SVGIcons/SVGClipBoardIcon';
-import ClipBoardIconCheck from '../../SVGIcons/SVGClipBoardIconChecked';
-import themeStore from '../../Design/color/themeStore';
+import ClipBoardIcon from '../../SVGIcons/SVGClipBoardIcon/SVGClipBoardIcon';
+import ClipBoardIconCheck from '../../SVGIcons/SVGClipBoardIconChecked/SVGClipBoardIconChecked';
+import themeStore from '../../Design/color/themeStore/themeStore';
 
 // --------------------------------------------------------------------------- //
 // ----- The main ColorDisplay Component for display the color in a box ------ //

diff --git a/src/Components/UI/Atoms/ColorIndicator/ColorIndicator.style.tsx b/src/Components/UI/Atoms/ColorIndicator/ColorIndicator.style.tsx
@@ -1,6 +1,6 @@
 import { styled, css } from 'styled-components';
 
-import { boxShadow } from '../../Design/shadows';
+import { boxShadow } from '../../Design/shadows/shadows';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
 
 export const WrapperIndicator = styled.div<{ $isActive: boolean }>`

diff --git a/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.style.tsx b/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.style.tsx
@@ -1,8 +1,8 @@
 import { css, styled } from 'styled-components';
 
 import { IRange } from './DateNumberAtom';
-import { disabledStyle } from '../../HelperFunctions/designFunctions/disableStyle';
-import { TUiColors } from '@/Components/UI/Interface/TUiColors';
+import { disabledStyle } from '../../Design/designFunctions/disabledStyle/disableStyle';
+import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
 import { TLayer } from '@/Components/UI/Interface/TLayer';
 import { getTextColor } from '../../Design/color/colorCalculatorForComponet';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
@@ -14,7 +14,7 @@ interface IStyledDay {
   $range?: IRange;
   $isCurrentDay?: boolean;
   $selected?: boolean;
-  $themeType?: TUiColors;
+  $themeType?: TThemeTypes;
   $layer?: TLayer;
 }
 export const StyledDay = styled.button<IStyledDay & { theme: TTheme }>`

diff --git a/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.tsx b/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyledDay } from './DateNumberAtom.style';
 import Typography from '../Typography/Typography';
-import { TUiColors } from '@/Components/UI/Interface/TUiColors';
+import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
 import { TLayer } from '@/Components/UI/Interface/TLayer';
 
 export type IRange = { start?: boolean; end?: boolean; inRange?: boolean };
@@ -13,7 +13,7 @@ interface IDay {
   onClick?: () => void;
   range?: IRange;
   isCurrentDay?: boolean;
-  themeType?: TUiColors;
+  themeType?: TThemeTypes;
   layer?: TLayer;
 }
 // --------------------------------------------------------------------------- //

diff --git a/src/Components/UI/Atoms/DateOutput/DateOutput.tsx b/src/Components/UI/Atoms/DateOutput/DateOutput.tsx
@@ -2,12 +2,12 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { styled } from 'styled-components';
 
 import Typography from '../Typography/Typography';
-import { TUiColors } from '@/Components/UI/Interface/TUiColors';
+import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
 import { getBackgroundColor, getTextColor } from '../../Design/color/colorCalculatorForComponet';
 import { TLayer } from '@/Components/UI/Interface/TLayer';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
 
-const DateOutputButton = styled.button<{ $isActive?: boolean; theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>`
+const DateOutputButton = styled.button<{ $isActive?: boolean; theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>`
   text-align: center;
   width: 100%;
   background-color: ${({ theme, $isActive, $themeType = 'primary', $layer = 2 }) =>
@@ -29,7 +29,7 @@ interface IDateOutput {
   date?: Date;
   isActive?: boolean;
   onClick?: () => void;
-  themeType?: TUiColors;
+  themeType?: TThemeTypes;
   layer?: TLayer;
 }
 export default function DateOutput({ date = new Date(), isActive, onClick, themeType, layer }: IDateOutput) {

diff --git a/src/Components/UI/Atoms/EditBarModal/EditBarModal.style.tsx b/src/Components/UI/Atoms/EditBarModal/EditBarModal.style.tsx
@@ -1,6 +1,6 @@
 import { styled, css } from 'styled-components';
 
-import { boxShadow } from '../../Design/shadows';
+import { boxShadow } from '../../Design/shadows/shadows';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
 
 //this calculates the spacing from left and right or nothing

diff --git a/src/Components/UI/Atoms/FancyBox/FancyBox.model.ts b/src/Components/UI/Atoms/FancyBox/FancyBox.model.ts
@@ -1,12 +1,13 @@
 import { CSSProp } from 'styled-components';
 import { TLayer } from '@/Components/UI/Interface/TLayer';
-import { TUiColors } from '@/Components/UI/Interface/TUiColors';
+import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
 
 type HTMLDivElementProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>;
 interface IFancyBox {
+  as?: keyof JSX.IntrinsicElements;
   outlined?: boolean;
   layer?: TLayer;
-  themeType?: TUiColors;
+  themeType?: TThemeTypes;
   children?: React.ReactNode;
   outlinedBackgroundStrength?: number;
   externalStyle?: CSSProp;

diff --git a/src/Components/UI/Atoms/FancyBox/FancyBox.stories.tsx b/src/Components/UI/Atoms/FancyBox/FancyBox.stories.tsx
@@ -7,7 +7,7 @@ import { css } from 'styled-components';
 import { FancyMiniProfile } from '../../Molecules/FancyMiniProfile';
 import { HeaderTitleWithLogo } from '../../Molecules/HeaderTitleWithLogo';
 import { FancyBottomBarIcon } from '../../Templates/FancyBottomBarIcon';
-import SVGCheckMark from '../../SVGIcons/SVGCheckMark';
+import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark';
 import React from 'react';
 import { FancySearchBar } from '../../Organisms/FancySearchBar';
 

diff --git a/src/Components/UI/Atoms/FancyBox/FancyBox.style.tsx b/src/Components/UI/Atoms/FancyBox/FancyBox.style.tsx
@@ -1,13 +1,13 @@
 import { styled } from 'styled-components';
 
-import generateThemeForCard from '../../HelperFunctions/designFunctions/generateThemeForCard/generateThemeForCard';
+import generateThemeForCard from '../../Design/designFunctions/generateThemeForCard/generateThemeForCard';
 import IStyledPrefixAndPicker from '../../Interface/IStyledPrefixAndPicker.model';
 import { IFancyBoxProps } from './FancyBox.model';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
 
 // the styled-component for the FancyBar
 type IStyledFancyBox = IStyledPrefixAndPicker<IFancyBoxProps> & { theme: TTheme };
-export const StyledFancyBar = styled.div<IStyledFancyBox>`
+export const StyledFancyBox = styled.div<IStyledFancyBox>`
   box-sizing: border-box;
   ${({ $themeType, theme, $layer, $outlined, $outlinedBackgroundStrength }) =>
     generateThemeForCard({ $themeType, theme, $outlined, $layer, $outlinedBackgroundStrength })};

diff --git a/src/Components/UI/Atoms/FancyBox/FancyBox.tsx b/src/Components/UI/Atoms/FancyBox/FancyBox.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { IFancyBoxProps } from './FancyBox.model';
-import { StyledFancyBar } from './FancyBox.style';
+import { StyledFancyBox } from './FancyBox.style';
 
 // --------------------------------------------------------------------------- //
 // ------------  A Bar that can usesd for for the most components ------------ //
@@ -10,14 +10,14 @@ export default function FancyBar(props: IFancyBoxProps) {
   const { layer, themeType, outlined, outlinedBackgroundStrength, externalStyle } = props;
 
   return (
-    <StyledFancyBar
+    <StyledFancyBox
       $layer={layer}
-      $themeType={themeType}
       $outlined={outlined}
+      $themeType={themeType}
       $externalStyle={externalStyle}
       $outlinedBackgroundStrength={outlinedBackgroundStrength}
     >
       {props.children}
-    </StyledFancyBar>
+    </StyledFancyBox>
   );
 }
diff --git a/src/Components/UI/Atoms/FancyCard/Card.model.ts b/src/Components/UI/Atoms/FancyCard/Card.model.ts
@@ -1,14 +1,14 @@
-import { IRoundedEdges } from '../../HelperFunctions/designFunctions/edgeCaluculation';
+import { IRoundedEdges } from '../../Design/designFunctions/edgeCaluculation';
 import { TLayer } from '@/Components/UI/Interface/TLayer';
 import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius';
-import { TUiColors } from '@/Components/UI/Interface/TUiColors';
+import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
 import { TSpacings } from '@/Components/UI/Interface/TSpacings';
 
 // the scaling types for the card
 type IScaling = '100%' | 'auto' | string;
 // the raw styling props for the card
 export interface StyledCardProps {
-  themeType?: TUiColors;
+  themeType?: TThemeTypes;
   textLayer?: TLayer;
   height?: IScaling;
   width?: IScaling;

diff --git a/src/Components/UI/Atoms/FancyCard/FancyCard.style.tsx b/src/Components/UI/Atoms/FancyCard/FancyCard.style.tsx
@@ -3,9 +3,9 @@ import { styled } from 'styled-components';
 import { StyledCardProps } from './Card.model';
 import IStyledPrefixAndOmiter from '../../Interface/IStyledPrefixAndOmiter.model';
 import { spacingPx } from '../../Design/designSizes';
-import edgeCalculation from '../../HelperFunctions/designFunctions/edgeCaluculation';
+import edgeCalculation from '../../Design/designFunctions/edgeCaluculation';
 
-import { boxShadow } from '../../Design/shadows';
+import { boxShadow } from '../../Design/shadows/shadows';
 import getColorsForComponent from '../../Design/color/colorCalculatorForComponet';
 import { TTheme } from '@/Components/UI/Interface/TTheme';