feat: settings are added (#123)

* feat: settings are added

* fix: props are renamed

client/src/shared/ui/flex/flex.module.scss

@@ -1,3 +1,16 @@
 .flexWrapper {
   display: flex;
+  /* align-items: var(--align, normal);
+  justify-content: var(--justify, normal);
+  gap: var(--gap, 0);
+  margin: var(--margin, 0);
+  padding: var(--padding, 0);
+  flex-direction: var(--direction, row);
+  max-height: var(--maxHeight, none);
+  position: var(--position, static);
+  width: var(--width, 100%);
+  max-width: var(--maxWidth, none);
+  height: var(--height, auto);
+  flex-wrap: nowrap;
+  flex-shrink: unset; */
 }

client/src/shared/ui/flex/flex.stories.tsx

@@ -14,6 +14,8 @@ const flexProps: FlexProps = {
   width: '100%',
   maxWidth: '500px',
   height: 'auto',
+  wrap: 'nowrap',
+  shrink: 'unset',
   children: <div>Item 1</div>,
 };
 

client/src/shared/ui/flex/flex.tsx

@@ -47,6 +47,19 @@ export interface FlexProps {
    * [props.height] - The height property defines the height of the component. Default is 'auto'.
    */
   height?: string;
+
+  /**
+   * [props.flexWrap] - The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in. Default is 'nowrap'
+
+   */
+  wrap?: string;
+
+  /**
+   * [props.flexShrink] - Sets the flex shrink factor. Negative numbers are invalid. Default is 'nowrap'
+
+   */
+  shrink?: string | number;
+
   /**
    * props.children - The content to be laid out.
    */
@@ -71,6 +84,8 @@ export interface FlexProps {
  *   width="100%"
  *   maxWidth="500px"
  *   height="auto"
+ *   wrap="wrap"
+ *   shrink={1}
  * >
  *   <div>Item 1</div>
  *   <div>Item 2</div>
@@ -91,6 +106,8 @@ export const Flex: React.FC<FlexProps> = props => {
     width,
     maxWidth,
     height,
+    wrap,
+    shrink,
     children,
   } = props;
 
@@ -106,6 +123,8 @@ export const Flex: React.FC<FlexProps> = props => {
     width: width,
     maxWidth: maxWidth,
     height: height,
+    flexWrap: wrap,
+    flexShrink: shrink,
   } as React.CSSProperties;
 
   return (