add prettier and reformat all files

src/s2-homeworks/hw07/HW7.tsx

@@ -1,9 +1,13 @@
-import React, {useState} from 'react'
+import React, { useState } from 'react'
 import SuperSelect from './common/c5-SuperSelect/SuperSelect'
 import SuperRadio from './common/c6-SuperRadio/SuperRadio'
 import s2 from '../../s1-main/App.module.css'
 
-const arr = [{id: 1, value: 'x'}, {id: 2, value: 'y'}, {id: 3, value: 'z'}] // value может быть изменено
+const arr = [
+    { id: 1, value: 'x' },
+    { id: 2, value: 'y' },
+    { id: 3, value: 'z' },
+] // value может быть изменено
 
 const HW7 = () => {
     const [value, onChangeOption] = useState(1) // селект и радио должны работать синхронно
@@ -11,7 +15,7 @@ const HW7 = () => {
 
     return (
         <div id={'hw7'} className={s2.hw}>
-            <hr/>
+            <hr />
             {/*можно убрать этот тег*/}
 
             <div className={s2.hwTitle}>homeworks 7</div>
@@ -35,9 +39,9 @@ const HW7 = () => {
                 />
             </div>
 
-            <hr/>
+            <hr />
             {/*можно убрать этот тег*/}
-            <hr/>
+            <hr />
             {/*можно убрать этот тег*/}
         </div>
     )

src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css

@@ -1,37 +1,37 @@
 .select {
-   width: 100px;
-   padding: 5px;
-   cursor: pointer;
-   appearance: none;
-   background-color: var(--primary);
-   background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-      linear-gradient(135deg, currentColor 50%, transparent 50%);
-   background-position: calc(100% - 20px) calc(1px + 50%),
-      calc(100% - 16px) calc(1px + 50%);
-   background-size: 4px 4px, 4px 4px;
-   background-repeat: no-repeat;
-   border-radius: 2px;
-   border: 2px solid var(--primary);
-   color: var(--primary-content);
+    width: 100px;
+    padding: 5px;
+    cursor: pointer;
+    appearance: none;
+    background-color: var(--primary);
+    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+        linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: calc(100% - 20px) calc(1px + 50%),
+        calc(100% - 16px) calc(1px + 50%);
+    background-size: 4px 4px, 4px 4px;
+    background-repeat: no-repeat;
+    border-radius: 2px;
+    border: 2px solid var(--primary);
+    color: var(--primary-content);
 }
 
 .select:focus {
-   outline: none;
+    outline: none;
 }
 
 .option {
-   /*padding: 30px;*/
-   color: var(--primary-content);
-   background: var(--primary);
+    /*padding: 30px;*/
+    color: var(--primary-content);
+    background: var(--primary);
 }
 
 .option:checked {
-   color: var(--secondary-content);
-   background: var(--primary);
+    color: var(--secondary-content);
+    background: var(--primary);
 }
 
 .option:hover {
-   box-shadow: 0 0 10px 100px #fed20f inset;
-   transition: all 0.2s ease-in-out;
-   background: red;
+    box-shadow: 0 0 10px 100px #fed20f inset;
+    transition: all 0.2s ease-in-out;
+    background: red;
 }

src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.tsx

@@ -1,37 +1,54 @@
-import React, {SelectHTMLAttributes, DetailedHTMLProps, ChangeEvent} from 'react'
+import React, {
+    SelectHTMLAttributes,
+    DetailedHTMLProps,
+    ChangeEvent,
+} from 'react'
 import s from './SuperSelect.module.css'
 
-type DefaultSelectPropsType = DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>
+type DefaultSelectPropsType = DetailedHTMLProps<
+    SelectHTMLAttributes<HTMLSelectElement>,
+    HTMLSelectElement
+>
 
 type SuperSelectPropsType = DefaultSelectPropsType & {
     options?: any[]
     onChangeOption?: (option: any) => void
 }
 
-const SuperSelect: React.FC<SuperSelectPropsType> = (
-    {
-        options, className,
-        onChange, onChangeOption,
-        ...restProps
-    }
-) => {
-    const mappedOptions: any[] = options ? options.map(o => (
-        <option id={'hw7-option-' + o.id} className={s.option} key={o.id} value={o.id}>{o.value}</option>
-    )) : [] // map options with key
+const SuperSelect: React.FC<SuperSelectPropsType> = ({
+    options,
+    className,
+    onChange,
+    onChangeOption,
+    ...restProps
+}) => {
+    const mappedOptions: any[] = options
+        ? options.map((o) => (
+              <option
+                  id={'hw7-option-' + o.id}
+                  className={s.option}
+                  key={o.id}
+                  value={o.id}
+              >
+                  {o.value}
+              </option>
+          ))
+        : [] // map options with key
 
-    const onChangeCallback = (e: ChangeEvent<HTMLSelectElement>) => { // делают студенты
+    const onChangeCallback = (e: ChangeEvent<HTMLSelectElement>) => {
+        // делают студенты
         onChange?.(e)
         onChangeOption?.(+e.currentTarget.value)
     }
 
-    const finalSelectClassName = s.select + (
-        className
-            ? ' ' + className
-            : ''
-    )
+    const finalSelectClassName = s.select + (className ? ' ' + className : '')
 
     return (
-        <select className={finalSelectClassName} onChange={onChangeCallback} {...restProps}>
+        <select
+            className={finalSelectClassName}
+            onChange={onChangeCallback}
+            {...restProps}
+        >
             {mappedOptions}
         </select>
     )

src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.module.css

@@ -23,4 +23,4 @@
 
 .label {
     cursor: pointer;
-}
+}

src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.tsx

@@ -1,9 +1,20 @@
-import React, {ChangeEvent, InputHTMLAttributes, DetailedHTMLProps, HTMLAttributes} from 'react'
+import React, {
+    ChangeEvent,
+    InputHTMLAttributes,
+    DetailedHTMLProps,
+    HTMLAttributes,
+} from 'react'
 import s from './SuperRadio.module.css'
 
-type DefaultRadioPropsType = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+type DefaultRadioPropsType = DetailedHTMLProps<
+    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+>
 // тип пропсов обычного спана
-type DefaultSpanPropsType = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
+type DefaultSpanPropsType = DetailedHTMLProps<
+    HTMLAttributes<HTMLSpanElement>,
+    HTMLSpanElement
+>
 
 type SuperRadioPropsType = Omit<DefaultRadioPropsType, 'type'> & {
     options?: any[]
@@ -12,54 +23,53 @@ type SuperRadioPropsType = Omit<DefaultRadioPropsType, 'type'> & {
     spanProps?: DefaultSpanPropsType // пропсы для спана
 }
 
-const SuperRadio: React.FC<SuperRadioPropsType> = (
-    {
-        id,
-        name, className,
-        options, value,
-        onChange, onChangeOption,
-        spanProps,
-        ...restProps
-    }
-) => {
+const SuperRadio: React.FC<SuperRadioPropsType> = ({
+    id,
+    name,
+    className,
+    options,
+    value,
+    onChange,
+    onChangeOption,
+    spanProps,
+    ...restProps
+}) => {
     const onChangeCallback = (e: ChangeEvent<HTMLInputElement>) => {
         onChange?.(e)
         onChangeOption?.(+e.currentTarget.value)
     }
 
     const finalRadioClassName = `${s.radio} ${className ? className : ''}`
-    const spanClassName = `${s.span} ${spanProps?.className ? spanProps.className : ''}`
+    const spanClassName = `${s.span} ${
+        spanProps?.className ? spanProps.className : ''
+    }`
 
-    const mappedOptions: any[] = options ? options.map(o => (
-        <label key={name + '-' + o.id} className={s.label}>
-            <input
-                id={id + '-input-' + o.id}
-                className={finalRadioClassName}
-                type={'radio'}
+    const mappedOptions: any[] = options
+        ? options.map((o) => (
+              <label key={name + '-' + o.id} className={s.label}>
+                  <input
+                      id={id + '-input-' + o.id}
+                      className={finalRadioClassName}
+                      type={'radio'}
+                      // name, checked, value делают студенты
+                      name={name}
+                      checked={o.id === value}
+                      value={o.id}
+                      onChange={onChangeCallback}
+                      {...restProps}
+                  />
+                  <span
+                      id={id + '-span-' + o.id}
+                      {...spanProps}
+                      className={spanClassName}
+                  >
+                      {o.value}
+                  </span>
+              </label>
+          ))
+        : []
 
-                // name, checked, value делают студенты
-                name={name}
-                checked={o.id === value}
-                value={o.id}
-
-                onChange={onChangeCallback}
-                {...restProps}
-            />
-            <span
-                id={id + '-span-' + o.id}
-                {...spanProps}
-                className={spanClassName}
-            >
-                {o.value}
-            </span>
-        </label>
-    )) : []
-
-    return (
-        <>
-            {mappedOptions}
-        </>
-    )
+    return <>{mappedOptions}</>
 }
 
 export default SuperRadio