Feat/add label and error text UI component

src/shared/ui/errorText/errorText.module.css

@@ -0,0 +1,8 @@
+.error {
+    font-family: 'Golos', sans-serif;
+    margin-top: 8px;
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-xs);
+    font-weight: var(--font-weight-regular);
+    color: var(--colors-interface-orange);
+  }

src/shared/ui/errorText/errorText.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/react/*";
+import { ErrorText } from ".";
+
+const meta = {
+    title: 'uikit/FormElements/ErrorText',
+    component: ErrorText,
+    tags: ['autodocs'],
+    argTypes: {        
+        className: {
+            table: {
+                disable: true,
+            }
+        },
+        extClassName: {
+            table: {
+                disable: true,
+            }
+        },
+        htmlFor: {
+            table: {
+                disable: true,
+            }
+        }
+    }
+} as Meta<typeof ErrorText>
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        error: 'Test'
+    }
+}

src/shared/ui/errorText/index.tsx

@@ -0,0 +1,13 @@
+import cn from 'classnames'
+import styles from './errorText.module.css'
+
+export interface ErrorTextProp {
+    error?: string;
+    extClassName?: string;
+}
+
+export const ErrorText: React.FC<ErrorTextProp> = ({ error }) => (
+    <span className={cn(styles.error, 'text')}>
+        {error === ' ' ? <span>&nbsp;</span> : error}
+    </span>
+)

src/shared/ui/form-input-phone/index.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-hook-form';
 
 import styles from './styles.module.css';
+import { Label } from '../label';
 
 const DEFAULT_MASK = [
   '+',
@@ -61,9 +62,9 @@ export const FormInputPhone = <T extends FieldValues>({
   return (
     <div className={extClassName} data-testid={'div'}>
       {label && (
-        <label className={cn(styles.label, 'phone')} htmlFor={field.name}>
+        <Label  htmlFor={field.name}>
           {label}
-        </label>
+        </Label>
       )}
       <div className={styles.container}>
         <MaskedInput

src/shared/ui/form-input-phone/styles.module.css

@@ -75,11 +75,6 @@
 }
 
 @media screen and (max-width: 550px) {
-  .label {
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-xs);
-  }
-
   .input {
     font-size: var(--font-size-small);
     line-height: var(--line-height-xs);

src/shared/ui/form-input/index.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react-hook-form';
 
 import styles from './styles.module.css';
+import { Label } from '../label';
 
 export interface FormInputProps<FormInputs extends FieldValues>
   extends InputHTMLAttributes<HTMLInputElement> {
@@ -47,9 +48,9 @@ export const FormInput = <T extends FieldValues>({
   return (
     <div className={extClassName} data-testid={'div'}>
       {label && (
-        <label className={cn(styles.label, 'text')} htmlFor={field.name}>
+        <Label htmlFor={field.name}>
           {label}
-        </label>
+        </Label>
       )}
       <div className={styles.container}>
         <input

src/shared/ui/form-input/styles.module.css

@@ -77,11 +77,6 @@
 }
 
 @media screen and (max-width: 550px) {
-  .label {
-    font-size: var(--font-size-small);
-    line-height: 14px;
-  }
-
   .input {
     font-size: var(--font-size-small);
     line-height: 14px;

src/shared/ui/index.ts

@@ -49,6 +49,8 @@ export { Tooltip } from './tooltip';
 export { ExcelButton } from './transforming-buttons/excel-button';
 export { SettingsButton } from './transforming-buttons/settings-button';
 export { ViewModeButton } from './view-mode-button';
+export { Label } from './label'
+export { ErrorText } from './errorText'
 
 export { default as Checkbox } from './checkbox';
 export { default as Dropdown } from './dropdown';

src/shared/ui/input-phone/index.tsx

@@ -10,6 +10,8 @@ import { nanoid } from 'nanoid';
 
 import styles from './styles.module.css';
 import MaskedInput from 'react-text-mask';
+import { Label } from '../label';
+import { ErrorText } from '../errorText';
 
 export interface InputPhoneProps extends InputHTMLAttributes<HTMLInputElement> {
   name: string;
@@ -53,9 +55,9 @@ export const InputPhone = forwardRef<HTMLInputElement, InputPhoneProps>(
     return (
       <div className={extClassName} data-testid={'div'}>
         {label && (
-          <label className={cn(styles.label, 'phone')} htmlFor={id}>
+          <Label htmlFor={id}>
             {label}
-          </label>
+          </Label>
         )}
         <div ref={ref} className={styles.container}>
           <MaskedInput
@@ -86,9 +88,7 @@ export const InputPhone = forwardRef<HTMLInputElement, InputPhoneProps>(
             ]}
             onChange={onChange}
           />
-          <span className={cn(styles.error, 'text')}>
-            {errorText === ' ' ? <span>&nbsp;</span> : errorText}
-          </span>
+          {errorText && <ErrorText error = {errorText} />}          
           <div className={iconClass} onClick={onIconClick}>
             {customIcon}
           </div>

src/shared/ui/input-phone/input-phone.stories.ts

@@ -22,7 +22,7 @@ export const Default: Story = {
     name: 'phone',
     label: 'Телефон',
     error: false,
-    errorText: 'Некорректный номер телефона',
+    placeholder: '+7 000 000000',
   },
 };
 

src/shared/ui/input-phone/styles.module.css

@@ -33,23 +33,6 @@
   border-color: var(--colors-interface-blue-navy);
 }
 
-.label {
-  display: inline-block;
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-middle);
-  font-weight: var(--font-weight-regular);
-  color: var(--colors-interface-black);
-  margin-bottom: 8px;
-}
-
-.error {
-  margin-top: 8px;
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-xs);
-  font-weight: var(--font-weight-regular);
-  color: var(--colors-interface-orange);
-}
-
 .for_storybook {
   width: 350px;
 }
@@ -75,11 +58,6 @@
 }
 
 @media screen and (max-width: 550px) {
-  .label {
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-xs);
-  }
-
   .input {
     font-size: var(--font-size-small);
     line-height: var(--line-height-xs);
@@ -95,4 +73,4 @@
 .icon:hover,
 .icon:active {
   opacity: 0.6;
-}
+}

src/shared/ui/input/index.tsx

@@ -5,6 +5,8 @@ import cn from 'classnames';
 import { nanoid } from 'nanoid';
 
 import styles from './styles.module.css';
+import { Label } from '../label';
+import { ErrorText } from '../errorText';
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   name: string;
@@ -49,9 +51,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className={extClassName} data-testid={'div'}>
         {label && (
-          <label className={cn(styles.label, 'text')} htmlFor={id}>
+          <Label htmlFor={id}>
             {label}
-          </label>
+          </Label>
         )}
         <div className={styles.container}>
           <input
@@ -65,9 +67,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             id={id}
             {...props}
           />
-          <span className={cn(styles.error, 'text')}>
-            {errorText === ' ' ? <span>&nbsp;</span> : errorText}
-          </span>
+          <ErrorText error={errorText}/>         
           <div className={iconClass} onClick={onIconClick}>
             {customIcon}
           </div>

src/shared/ui/input/styles.module.css

@@ -36,14 +36,6 @@
   border-color: var(--colors-interface-blue-navy);
 }
 
-.label {
-  display: inline-block;
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-middle);
-  font-weight: var(--font-weight-regular);
-  color: var(--colors-interface-black);
-  margin-bottom: 6px;
-}
 .error {
   margin-top: 8px;
   font-size: var(--font-size-small);
@@ -75,11 +67,6 @@
 }
 
 @media screen and (max-width: 550px) {
-  .label {
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-xs);
-  }
-
   .input {
     font-size: var(--font-size-small);
     line-height: var(--line-height-xs);

src/shared/ui/label/index.tsx

@@ -0,0 +1,16 @@
+import React, { LabelHTMLAttributes } from 'react';
+import styles from './label.module.css'
+import classnames from 'classnames';
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  extClassName?: string;
+  htmlFor?: string;
+}
+
+export const Label: React.FC<LabelProps> = ({ extClassName, children, htmlFor, ...props }) => {
+  return (
+    <label className={classnames(styles.label, extClassName)} htmlFor={htmlFor} {...props}>
+      {children}
+    </label>
+  )
+};

src/shared/ui/label/label.module.css

@@ -0,0 +1,16 @@
+.label {
+    font-family: 'Golos', sans-serif;
+    display: inline-block;
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-middle);
+    font-weight: var(--font-weight-regular);
+    color: var(--colors-interface-black);
+    margin-bottom: 8px;
+}
+
+@media screen and (max-width: 550px) {
+    .label {
+        font-size: var(--font-size-small);
+        line-height: var(--line-height-xs);
+    }
+}

src/shared/ui/label/label.stories.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/react/*";
+import { Label } from ".";
+
+const meta = {
+    title: 'uikit/FormElements/Label',
+    component: Label,
+    tags: ['autodocs'],
+    argTypes: {        
+        className: {
+            table: {
+                disable: true,
+            }
+        },
+        extClassName: {
+            table: {
+                disable: true,
+            }
+        },
+        htmlFor: {
+            table: {
+                disable: true,
+            }
+        }
+    }
+} as Meta<typeof Label>
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: 'Test'
+    }
+}

src/shared/ui/post-form/post-form.stories.tsx

@@ -3,14 +3,16 @@ import { useArgs } from '@storybook/preview-api';
 import { PostForm } from './PostForm';
 import { nanoid } from 'nanoid';
 import { ChangeEvent } from 'react';
+import { Provider } from 'react-redux';
+import { store } from 'app/store';
 
 const meta: Meta<typeof PostForm> = {
   component: PostForm,
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: '919px' }}>
+      <Provider store={store}>
         <Story />
-      </div>
+      </Provider>
     ),
     function Component(Story, ctx) {
       const [args, setArgs] = useArgs<typeof ctx.args>();

src/shared/ui/radio-button/index.tsx

@@ -2,6 +2,7 @@ import { InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
 
 import styles from './style.module.css';
+import { Label } from '../label';
 
 interface RadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
@@ -25,17 +26,17 @@ const RadioButton = ({
       className={styles.radiobutton}
       {...props}
     />
-    <label
+    <Label
       htmlFor={id}
-      className={classnames(
+      extClassName={classnames(
         styles.fakeRadiobutton,
         'text',
         'text_type_regular',
         'text_size_small'
       )}
     >
       {label}
-    </label>
+    </Label>
   </>
 );