Merge pull request #291 from TobiTRy/buildIn--new-systemmessage-wich-…

…is-better-visible-and-looking

Build in  new systemmessage wich is better visible and looking

lib/index.ts

@@ -51,7 +51,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';
 export * from '@/components/atoms/TextInput';
@@ -61,6 +61,7 @@ export * from '@/components/atoms/TitleForComponent';
 export * from '@/components/atoms/ColoredText';
 
 // ---------- Molecules ------- //
+export * from '@/components/molecules/FancyInfoText';
 export * from '@/components/molecules/DateNumberWithStatus';
 export * from '@/components/molecules/DateOutputFromTo';
 export * from '@/components/molecules/DynamicBottomScrollBar';
@@ -141,6 +142,7 @@ export * from '@/components/templates/FancyAlignBox';
 export * from '@/components/templates/FancyGridTemplate';
 export * from '@/components/templates/FancyGridTemplateItem';
 export * from '@/components/templates/FancySkeletonGrid';
+export * from '@/components/templates/FancySystemMessageBox';
 
 // ---------- Utils/Hooks ------- //
 export * from '@/components/shared/FancyPopover';

package.json

@@ -5,7 +5,7 @@
     "name": "TobiTRy"
   },
   "private": false,
-  "version": "0.4.6",
+  "version": "0.4.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/Routes/InfoCardRoute/InfoCardRoute.tsx

@@ -2,12 +2,37 @@ import { DesignArea, DesignWrapper } from '../DesignWrapper/Wrapper';
 import FancyInfoCard from '../../components/templates/FancyInfoCard/FancyInfoCard';
 import SVGCheckMark from '../../components/icons/SVGCheckMark/SVGCheckMark';
 import { FancyBox } from '../../components/atoms/FancyBox';
+import { SystemMessageBox } from '@/components/atoms/SystemMessageBox';
+import FancySystemMessageBox from '@/components/templates/FancySystemMessageBox/FancySystemMessageBox';
 
 export default function InfoCardRoute() {
   return (
     <DesignWrapper>
       <DesignArea title="InfoCard">
         <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          <SystemMessageBox>
+            <SVGCheckMark />
+            <span>Moooiin</span>
+          </SystemMessageBox>
+          <FancySystemMessageBox sizeC="sm" title="Tesasas" description="Mooiin" icon={<SVGCheckMark />} />
+          <FancySystemMessageBox sizeC="md" title="Tesasas" />
+          <FancySystemMessageBox sizeC="lg" themeType="error" title="Tesasas" />
+          <FancySystemMessageBox sizeC="md" description="Moooiin22" />
+          <FancySystemMessageBox themeType="success" sizeC="md" icon={<SVGCheckMark />} description="Moooiin22" />
+          <FancySystemMessageBox
+            themeType="info"
+            sizeC="md"
+            icon={<SVGCheckMark />}
+            description="Moooiin2 kdskldsv kls kklskcks kklsklsckksclcls  lskscklklcskl  2"
+          />
+          <FancySystemMessageBox themeType="warning" sizeC="md" description="Moooiin22" />
+          <FancySystemMessageBox
+            sizeC="lg"
+            icon={<SVGCheckMark />}
+            title={'Moooin'}
+            description="Moooiin2 kdskldsv kls kklskcks kklsklsckksclcls  lskscklklcskl sokkkl lkskdklsdkk skdslks  2"
+          />
+
           <FancyBox sizeC="sm" themeType="success" />
           <FancyBox sizeC="md" themeType="error" />
           <FancyBox sizeC="lg" themeType="warning" layer={0} />

src/components/atoms/FancyBox/FancyBox.model.ts

@@ -3,7 +3,7 @@ import { CSSProp } from 'styled-components';
 
 import { TLayer } from '@/types/TLayer';
 import { TUiColorTypes } from '@/types/TUiColorTypes';
-import { TComponentSizes } from '@/types/TComponentSizes';
+import { TComponentSizesExtended } from '@/types/TComponentSizes';
 import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
 
 type TFancyBoxProps = {
@@ -13,8 +13,9 @@ type TFancyBoxProps = {
   children?: React.ReactNode;
   externalStyle?: CSSProp;
   borderRadius?: TThemeArrayOrValueCSS;
-
-  sizeC?: TComponentSizes;
+  padding?: TThemeArrayOrValueCSS;
+  margin?: TThemeArrayOrValueCSS;
+  sizeC?: TComponentSizesExtended;
 };
 
 type TOutlinedFancyBoxProps = {

src/components/atoms/FancyBox/FancyBox.style.tsx

@@ -12,6 +12,8 @@ type IStyledFancyBox = TStyledPrefixAndPicker<TFancyBox> & { theme?: TTheme; $pa
 export const StyledFancyBox = styled.div<IStyledFancyBox>`
   border-radius: ${({ $borderRadius }) => arrayToCssValues($borderRadius, 'borderRadius')};
   padding: ${({ $padding }) => arrayToCssValues($padding, 'spacing')};
+  margin: ${({ $margin }) => arrayToCssValues($margin, 'spacing')};
+
   box-sizing: border-box;
   ${({ $themeType, theme, $layer, $outlined, $outlinedBackgroundStrength }) =>
     generateThemeForCard({ $themeType, theme, $outlined, $layer, $outlinedBackgroundStrength })};

src/components/atoms/FancyBox/FancyBox.tsx

@@ -17,11 +17,13 @@ export default function FancyBox<T extends ElementType = 'div'>(props: TFancyBox
     externalStyle,
     as,
     borderRadius,
+    padding,
+    margin,
     ...htmlProps
   } = props;
 
   const calcBorderRadius = borderRadius ? borderRadius : sizeC ? sizeSettings[sizeC].borderRadius : undefined;
-  const calcPadding = sizeC ? sizeSettings[sizeC].padding : undefined;
+  const calcPadding = padding ? padding : sizeC ? sizeSettings[sizeC].padding : undefined;
 
   return (
     <StyledFancyBox
@@ -31,6 +33,7 @@ export default function FancyBox<T extends ElementType = 'div'>(props: TFancyBox
       $outlined={outlined}
       $padding={calcPadding}
       $themeType={themeType}
+      $margin={margin}
       $outlinedRemoveBorder={outlinedRemoveBorder}
       $borderRadius={calcBorderRadius}
       $externalStyle={externalStyle}

src/components/atoms/FancyBox/sizeSettings.ts

@@ -1,22 +1,38 @@
 import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
-import { TSizeSettings } from '@/types/TSizeSettings';
+import { TSizeSettingsExtended } from '@/types/TSizeSettings';
 
 type TSizeObj = {
   padding: TThemeArrayOrValueCSS;
   borderRadius: TThemeArrayOrValueCSS;
 };
 
-export const sizeSettings: TSizeSettings<TSizeObj> = {
+export const sizeSettings: TSizeSettingsExtended<TSizeObj> = {
+  xxs: {
+    padding: ['xxs'],
+    borderRadius: 'xs',
+  },
+  xs: {
+    padding: ['xs'],
+    borderRadius: 'xs',
+  },
   sm: {
-    padding: ['xs', 'md'],
+    padding: ['sm'],
     borderRadius: 'sm',
   },
   md: {
-    padding: ['md', 'lg'],
+    padding: ['md'],
     borderRadius: 'md',
   },
   lg: {
-    padding: ['md', 'lg'],
+    padding: ['lg'],
     borderRadius: 'lg',
   },
+  xl: {
+    padding: ['xl'],
+    borderRadius: 'xl',
+  },
+  xxl: {
+    padding: ['xxl'],
+    borderRadius: 'xxl',
+  },
 };

src/components/atoms/FancyProfilePicture/TFancyProfilePicture.model.ts

@@ -1,4 +1,3 @@
-import { ReactElement } from 'react';
 import { CSSProp } from 'styled-components';
 
 import { TextAvatar } from '@/components/molecules/TextAvatar';

src/components/atoms/SystemMessageBox/SystemMessageBox.style.tsx

@@ -0,0 +1,40 @@
+import { TSystemMessageBox } from './TSystemMessageBox.model';
+import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
+import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent';
+import { themeStore } from '@/design/theme/themeStore';
+import { TStyledPrefixAndOmiter } from '@/types/TStyledPrefixAndOmiter';
+import { TTheme } from '@/types/TTheme';
+import { css, styled } from 'styled-components';
+
+type TStyledSystemMessage = TStyledPrefixAndOmiter<TSystemMessageBox, 'children' | 'sizeC'>;
+
+export const StyledStystemMessage = styled.div<{ theme: TTheme } & TStyledSystemMessage>`
+  border-width: 1px;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s;
+
+  border-radius: ${({ $borderRadius }) => arrayToCssValues($borderRadius, 'borderRadius')};
+  padding: ${({ $padding }) => arrayToCssValues($padding, 'spacing')};
+  margin: ${({ $margin }) => arrayToCssValues($margin, 'spacing')};
+
+  @supports (color: rgb(from white r g b)) {
+    ${({ theme, $themeType = 'error', $layer = 0 }) => {
+      const color = getBackgroundColor({ theme, $themeType, $layer: $layer });
+      const isDarkTheme = themeStore((state) => state.isDarkTheme);
+
+      return css`
+        border-color: oklch(from ${color} l c h / 25%);
+        border-width: 1px;
+        border-style: solid;
+        background: oklch(from ${color} calc(l * 1) c h / 20%);
+        color: oklch(from ${color} calc(l * (${isDarkTheme ? 1.3 : 0.7})) c h);
+
+        &::selection {
+          background: oklch(from ${color} calc(l * 1.1) c h);
+          color: oklch(from ${color} 1 c h);
+        }
+      `;
+    }}
+  }
+`;

src/components/atoms/SystemMessageBox/SystemMessageBox.tsx

@@ -0,0 +1,34 @@
+import { StyledStystemMessage } from './SystemMessageBox.style';
+import { TSystemMessageBoxWithHTMLAttrs } from './TSystemMessageBox.model';
+import { sizes } from './sizeSettings';
+
+export default function SystemMessageBox(props: TSystemMessageBoxWithHTMLAttrs) {
+  const {
+    children,
+    layer,
+    sizeC = 'sm',
+    themeType = 'error',
+    padding,
+    borderRadius,
+    margin,
+    externalStyle,
+    role,
+  } = props;
+
+  const calcBorderRadius = borderRadius ? borderRadius : sizeC ? sizes[sizeC].borderRadius : undefined;
+  const calcPadding = padding ? padding : sizeC ? sizes[sizeC].padding : undefined;
+
+  return (
+    <StyledStystemMessage
+      role={role ?? 'alert'}
+      $padding={calcPadding}
+      $margin={margin}
+      $borderRadius={calcBorderRadius}
+      $layer={layer}
+      $themeType={themeType}
+      $externalStyle={externalStyle}
+    >
+      {children}
+    </StyledStystemMessage>
+  );
+}

src/components/atoms/SystemMessageBox/TSystemMessageBox.model.ts

@@ -0,0 +1,20 @@
+import { TThemeArrayOrValueCSS } from '@/design/designFunctions/arrayToCssValues';
+import { TComponentSizes } from '@/types/TComponentSizes';
+import { TLayer } from '@/types/TLayer';
+import { TUiColorsNotTransparent } from '@/types/TUiColorsNotTransparent';
+import { CSSProp } from 'styled-components';
+
+export type TSystemMessageBox = {
+  themeType?: TUiColorsNotTransparent;
+  layer?: TLayer;
+  children?: React.ReactNode;
+  padding?: TThemeArrayOrValueCSS;
+  margin?: TThemeArrayOrValueCSS;
+  borderRadius?: TThemeArrayOrValueCSS;
+  sizeC?: TComponentSizes;
+  externalStyle?: CSSProp;
+};
+
+export type TSystemMessageBoxHTMLAttrs = React.HTMLAttributes<HTMLDivElement>;
+
+export type TSystemMessageBoxWithHTMLAttrs = TSystemMessageBox & TSystemMessageBoxHTMLAttrs;

src/components/atoms/SystemMessageBox/docu/SystemMessageBox.mdx

@@ -0,0 +1,31 @@
+import { Meta, Controls, Canvas, Title, Description } from '@storybook/blocks';
+
+import * as SystemMessageBox from './SystemMessageBox.stories';
+
+<Meta of={SystemMessageBox} />
+
+<Title />
+
+## Overview
+
+<Description />
+
+## Setup
+
+```jsx
+import { SystemMessageBox } from 'fui-fancyui';
+```
+
+### Example Usage
+
+Here’s a simple example of using the `SystemMessageBox`:
+
+```jsx
+<SystemMessageBox themeType="info" sizeC="md" padding="md">
+  This is an informational message.
+</SystemMessageBox>
+```
+
+<Canvas />
+
+<Controls />

src/components/atoms/SystemMessageBox/docu/SystemMessageBox.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SystemMessageBox from '../SystemMessageBox';
+import templateThemeType from '@/stories/templateSettingsForStorys/templatesForThemeType';
+
+const meta = {
+  component: SystemMessageBox,
+  title: 'components/atoms/SystemMessageBox',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The SystemMessageBox component is designed to display alerts or informational messages within an application. It supports various styling options based on themes, sizes, and layers to cater to different UI requirements.',
+      },
+    },
+  },
+  argTypes: {
+    ...templateThemeType('notTransparent', 'error', 0),
+    externalStyle: {
+      description:
+        'The style of the card can porvieed with the styled-component css and react style={{width: "100px"}}',
+      control: {
+        type: 'object',
+      },
+    },
+    sizeC: {
+      description: 'The size of the component.',
+      control: {
+        type: 'select',
+      },
+      table: {
+        defaultValue: { summary: 'sm' },
+      },
+    },
+    borderRadius: {
+      description: 'The border radius of the component.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+    padding: {
+      description: 'The padding of the component.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+    margin: {
+      description: 'The margin of the component.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+  },
+} satisfies Meta<typeof SystemMessageBox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  render: (args) => <SystemMessageBox {...args}>Moooiin</SystemMessageBox>,
+  args: {
+    themeType: 'error',
+    sizeC: 'sm',
+  },
+};

src/components/atoms/SystemMessageBox/index.ts

@@ -0,0 +1,3 @@
+export { default as SystemMessageBox } from './SystemMessageBox';
+
+export type { TSystemMessageBox, TSystemMessageBoxWithHTMLAttrs } from './TSystemMessageBox.model';