final ref hw4

src/s1-main/App.tsx

@@ -3,6 +3,7 @@ import s from './App.module.css'
 import HW1 from '../s2-homeworks/hw01/HW1'
 import HW2 from '../s2-homeworks/hw02/HW2'
 import HW3 from '../s2-homeworks/hw03/HW3'
+import HW4 from '../s2-homeworks/hw04/HW4'
 
 function App() {
     // для дз 12
@@ -19,7 +20,7 @@ function App() {
             <HW1/>
             <HW2/>
             <HW3/>
-            {/*<HW4/>*/}
+            <HW4/>
 
             {/*<HW5/>*/}
         </div>

src/s2-homeworks/hw04/HW4.tsx

@@ -2,6 +2,13 @@ import React from 'react'
 import s2 from '../../s1-main/App.module.css'
 import Stand from './Stand'
 
+/*
+* 1 - понять (и простить) SuperInputText
+* 2 - в зависимости от типа и дизэйбла прицепить нужный класс в SuperButton.tsx (строка 21)
+* 3 - дописать onChangeCallback в SuperCheckbox.tsx чтоб оба чекбокса работали на стенде
+* 4 - сделать стили в соответствии с дизайном
+* */
+
 const HW4 = () => {
     return (
         <div id={'hw4'}>

src/s2-homeworks/hw04/Stand.tsx

@@ -5,14 +5,22 @@ import SuperCheckbox from './common/c3-SuperCheckbox/SuperCheckbox'
 import SuperButton from './common/c2-SuperButton/SuperButton'
 
 const Stand = () => {
-    const [stateForAllInputs, setValue] = useState('')
+    const [stateForAllInputs, setValue] = useState<string>('')
-    const [error, setError] = useState<undefined | string>(undefined)
+    const [error, setError] = useState<string>('')
 
-    const [stateForAllCheckboxes, setChecked] = useState(false)
+    const [stateForAllCheckboxes, setChecked] = useState<boolean>(false)
 
     return (
         <div id={'hw4-stand'} className={s.stand}>
             <div className={s.inputs}>
+                {/*совместим со старым кодом:*/}
+                <div>
+                    <SuperInputText
+                        id={'hw4-super-input-like-old'}
+                        value={stateForAllInputs}
+                        onChange={(e) => setValue(e.currentTarget.value)}
+                    />
+                </div>
                 {/*инпут с ошибкой:*/}
                 <div>
                     <SuperInputText
@@ -23,21 +31,13 @@ const Stand = () => {
                         onEnter={() => {
                             setError(
                                 stateForAllInputs.trim()
-                                    ? undefined
+                                    ? ''
-                                    : 'some error'
+                                    : 'Error'
                             )
                             setValue('')
                         }}
                     />
                 </div>
-                {/*совместим со старым кодом*/}
-                <div>
-                    <SuperInputText
-                        id={'hw4-super-input-like-old'}
-                        value={stateForAllInputs}
-                        onChange={(e) => setValue(e.currentTarget.value)}
-                    />
-                </div>
             </div>
 
             <div className={s.buttons}>
@@ -63,6 +63,15 @@ const Stand = () => {
                         disabled
                     </SuperButton>
                 </div>
+                {/*задизэйбленная кнопка:*/}
+                <div>
+                    <SuperButton
+                        id={'hw4-super-button-secondary'}
+                        xType={'secondary'}
+                    >
+                        secondary
+                    </SuperButton>
+                </div>
             </div>
 
             <div className={s.checkboxes}>
@@ -76,7 +85,7 @@ const Stand = () => {
                         some text
                     </SuperCheckbox>
                 </div>
-                {/*совместим со старым кодом*/}
+                {/*совместим со старым кодом:*/}
                 <div>
                     <SuperCheckbox
                         id={'hw4-super-checkbox-like-old'}

src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css

@@ -7,18 +7,20 @@
 }
 
 .input {
+    width: 370px;
+    height: 36px;
+    padding: 8px 0 8px 12px;
+
+    color: #000;
     border: 1px solid #d1d1d1;
     border-radius: 5px;
-    width: 370px;
+    outline: none;
+
     font-family: 'Montserrat', sans-serif;
     font-style: normal;
     font-weight: 500;
     font-size: 16px;
     line-height: 20px;
-    padding: 8px 0 8px 12px;
-    color: #000;
-    outline: none;
-    height: 36px;
 }
 
 .inputWrapper {
@@ -30,13 +32,14 @@
 }
 
 .error {
+    position: absolute;
+    top: -17px;
+    left: 0;
+
+    color: #cc1439;
     font-family: 'Montserrat', sans-serif;
     font-style: normal;
     font-weight: 400;
     font-size: 10px;
     line-height: 12px;
-    color: #cc1439;
-    position: absolute;
-    top: -17px;
-    left: 0;
 }

src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx

@@ -8,10 +8,8 @@ import React, {
 import s from './SuperInputText.module.css'
 
 // тип пропсов обычного инпута
-type DefaultInputPropsType = DetailedHTMLProps<
+type DefaultInputPropsType = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>,
-    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement>
-    HTMLInputElement
->
 
 // здесь мы говорим что у нашего инпута будут такие же пропсы как у обычного инпута, кроме type
 // (чтоб не писать value: string, onChange: ...; они уже все описаны в DefaultInputPropsType)
@@ -23,7 +21,8 @@ type SuperInputTextPropsType = Omit<DefaultInputPropsType, 'type'> & {
     spanClassName?: string
 }
 
-const SuperInputText: React.FC<SuperInputTextPropsType> = ({
+const SuperInputText: React.FC<SuperInputTextPropsType> = (
+    {
         onChange,
         onChangeText,
         onKeyPress,
@@ -34,7 +33,8 @@ const SuperInputText: React.FC<SuperInputTextPropsType> = ({
         id,
 
         ...restProps // все остальные пропсы попадут в объект restProps
-}) => {
+    }
+) => {
     const onChangeCallback = (e: ChangeEvent<HTMLInputElement>) => {
         onChange?.(e) // если есть пропс onChange, то передать ему е (поскольку onChange не обязателен)
 
@@ -48,12 +48,11 @@ const SuperInputText: React.FC<SuperInputTextPropsType> = ({
         onEnter() // то вызвать его
     }
 
-    const finalSpanClassName = `${s.error} ${
+    const finalSpanClassName = s.error
-        spanClassName ? spanClassName : ''
+        + (spanClassName ? ' ' + spanClassName : '')
-    }`
+    const finalInputClassName = s.input
-    const finalInputClassName = `${s.input} ${
+        + (error ? ' ' + s.errorInput : ' ' + s.superInput)
-        error ? s.errorInput : s.superInput
+        + (className ? ' ' + s.className : '') // задача на смешивание классов
-    } ${className}` // задача на смешивание классов
 
     return (
         <div className={s.inputWrapper}>

src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css

@@ -1,38 +1,29 @@
-@keyframes blink {
-    0% {
-        left: -130%;
-    }
-    100% {
-        left: 130%;
-    }
-}
-
-
-.disabled {
-    background: #004d99;
-    opacity: 0.5;
-    color: #002e5c;
-}
-
-
 .button {
     overflow: hidden;
-    cursor: pointer;
-    border-radius: 3px;
-    border: 1px solid #0066CC;
-    color: white;
     padding: 5px 24px;
+
+    border-radius: 3px;
+    border: none;
+
+    color: white;
     font-family: 'Montserrat', sans-serif;
     font-weight: 600;
     font-size: 14px;
     line-height: 20px;
+    cursor: pointer;
+}
+
+.disabled {
+    color: #002e5c;
+    background: #004d99;
+    opacity: 0.5;
 }
 
 .secondary {
+    color: #0066CC;
     background: transparent;
     border: 1px solid #0066CC;
     border-radius: 3px;
-    color: #0066CC;
 }
 
 .default {
@@ -43,24 +34,6 @@
     background: #cc1439;
 }
 
-.button::after {
-    display: block;
-    content: '';
-    position: absolute;
-
-    left: -130%;
-    top: 0;
-    height: 100%;
-    width: 20%;
-
-    transform: skew(45deg);
-
-    background-color: #fff;
-    opacity: 0.7;
-
-    z-index: 14;
-}
-
 .default:hover {
     background: #0080ff;
 }

src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx

@@ -1,31 +1,31 @@
-import React, { ButtonHTMLAttributes, DetailedHTMLProps } from 'react'
+import React, {ButtonHTMLAttributes, DetailedHTMLProps} from 'react'
 import s from './SuperButton.module.css'
 
 // тип пропсов обычной кнопки, children в котором храниться название кнопки там уже описан
-type DefaultButtonPropsType = DetailedHTMLProps<
+type DefaultButtonPropsType = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>,
-    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement>
-    HTMLButtonElement
->
 
 type SuperButtonPropsType = DefaultButtonPropsType & {
     xType?: string
 }
 
-const SuperButton: React.FC<SuperButtonPropsType> = ({
+const SuperButton: React.FC<SuperButtonPropsType> = (
+    {
         xType,
         className,
         disabled,
         ...restProps // все остальные пропсы попадут в объект restProps, там же будет children
-}) => {
+    }
-    const finalClassName = `${s.button} ${
+) => {
-        disabled
+    const finalClassName = s.button
-            ? s.disabled
+        + (disabled
+                ? ' ' + s.disabled
                 : xType === 'red'
-            ? s.red
+                    ? ' ' + s.red
                     : xType === 'secondary'
-            ? s.secondary
+                        ? ' ' + s.secondary
-            : s.default
+                        : ' ' + s.default)
-    } ${className}` // задачка на смешивание классов
+        + (className ? ' ' + className : '') // задачка на смешивание классов
 
     return (
         <button

src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.tsx

@@ -6,17 +6,16 @@ import React, {
 import s from './SuperCheckbox.module.css'
 
 // тип пропсов обычного инпута
-type DefaultInputPropsType = DetailedHTMLProps<
+type DefaultInputPropsType = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>,
-    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement>
-    HTMLInputElement
->
 
 type SuperCheckboxPropsType = Omit<DefaultInputPropsType, 'type'> & {
     onChangeChecked?: (checked: boolean) => void
     spanClassName?: string
 }
 
-const SuperCheckbox: React.FC<SuperCheckboxPropsType> = ({
+const SuperCheckbox: React.FC<SuperCheckboxPropsType> = (
+    {
         onChange,
         onChangeChecked,
         className,
@@ -25,7 +24,8 @@ const SuperCheckbox: React.FC<SuperCheckboxPropsType> = ({
         id,
 
         ...restProps // все остальные пропсы попадут в объект restProps
-}) => {
+    }
+) => {
     const onChangeCallback = (e: ChangeEvent<HTMLInputElement>) => {
         // задачка на написание онченджа
         onChange?.(e)
@@ -33,7 +33,8 @@ const SuperCheckbox: React.FC<SuperCheckboxPropsType> = ({
         onChangeChecked?.(e.currentTarget.checked)
     }
 
-    const finalInputClassName = `${s.checkbox} ${className ? className : ''}`
+    const finalInputClassName = s.checkbox
+        + (className ? ' ' + className : '')
 
     return (
         <label className={s.label}>