feat(Input): add multiple sizes

pure-js · Oct 14, 2023 · 6860fd3 · 6860fd3
1 parent 4f15d7c
commit 6860fd3
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 75 deletions.
diff --git a/src/components/input/Input.stories.ts b/src/components/input/Input.stories.ts
@@ -46,19 +46,20 @@ export const Large: Story = {
   },
 };
 
-export const Small: Story = {
+export const Medium: Story = {
   args: {
-    size: 'small',
-    label: 'Button',
-    placeholder: 'placeholder',
+    size: 'medium',
+    label: 'Delete now',
     id: 'button-label',
+    placeholder: 'placeholder',
   },
 };
 
-export const Warning: Story = {
+export const Small: Story = {
   args: {
-    label: 'Delete now',
-    id: 'button-label',
+    size: 'small',
+    label: 'Button',
     placeholder: 'placeholder',
+    id: 'button-label',
   },
 };
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
@@ -22,15 +22,15 @@ export const Input = ({
   size = 'medium',
 }: InputProps) => (
   <>
-    <label htmlFor={id} className={(classes.label, classes[size])}>
+    <label htmlFor={id} className={`${classes.label} ${classes[size]}`}>
       {label}
     </label>
     <input
       id={id}
       autoFocus={autoFocus}
       minLength={minLength}
       placeholder={placeholder}
-      className={(classes.input, classes[size])}
+      className={`${classes.input} ${classes[size]}`}
       type={type}
     />
   </>

diff --git a/src/components/input/input.module.scss b/src/components/input/input.module.scss
@@ -10,6 +10,16 @@
     border: 1px solid rgb(155, 161, 165);
     outline: none;
   }
+
+  &.small {
+    padding: 12px 18px;
+  }
+  &.medium {
+    padding: 17px 24px;
+  }
+  &.large {
+    padding: 23px 32px;
+  }
 }
 
 .label {
@@ -21,4 +31,17 @@
   bottom: -0.4rem;
   padding: 0 10px 0 (24+1px);
   background: #fff;
+
+  &.small {
+    bottom: -0.4rem;
+    padding: 0 10px 0 (18+1px);
+  }
+  &.medium {
+    bottom: -0.4rem;
+    padding: 0 10px 0 (24+1px);
+  }
+  &.large {
+    bottom: -0.4rem;
+    padding: 0 10px 0 (32+1px);
+  }
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -13,7 +13,7 @@ function Auth() {
 }
 
 export const HomePage = () => {
-  const { data, isLoading, error } = useDataFetch('/');
+  const { data, isLoading, error } = useDataFetch();
   console.log('data ', data);
 
   return (
@@ -31,7 +31,7 @@ export const HomePage = () => {
 };
 
 export const HomeRoute = new FileRoute('/').createRoute({
-  id: 'authenticated',
+  // id: 'authenticated',
   beforeLoad: async () => {
     const { isAuthenticated } = Auth();
     if (!isAuthenticated) {

diff --git a/src/services/AuthBlob.tsx b/src/services/AuthBlob.tsx
@@ -0,0 +1,6 @@
+// import { useState } from 'react';
+
+export const Auth = () => {
+  // const [isAuthenticated, setIsAuthenticated] = useState(false);
+  return { isAuthenticated: false };
+};
diff --git a/src/services/auth.ts b/src/services/auth.ts
@@ -1,26 +1,26 @@
-export function getUserData(token) {
-  return fetch(`${baseUrl}/users/me`, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
-    },
-  }).then((res) => getResponseData(res));
-}
+// export function getUserData(token) {
+//   return fetch(`${baseUrl}/users/me`, {
+//     method: 'GET',
+//     headers: {
+//       'Content-Type': 'application/json',
+//       Authorization: `Bearer ${token}`,
+//     },
+//   }).then((res) => getResponseData(res));
+// }
 
-function authorize() {
-  if (localStorage.jwt) {
-    getUserData(localStorage.jwt)
-      .then((res) => {
-        console.log('response: ', res);
-        setUserEmail(res.email);
-        setIsLoggedIn(true);
-        setIsCheckToken(false);
-        navigate('/');
-      })
-      .catch((err) => console.error(`Ошибка авторизации при входе ${err}`));
-  } else {
-    setIsLoggedIn(false);
-    setIsCheckToken(false);
-  }
-}
+// function authorize() {
+//   if (localStorage.jwt) {
+//     getUserData(localStorage.jwt)
+//       .then((res) => {
+//         console.log('response: ', res);
+//         setUserEmail(res.email);
+//         setIsLoggedIn(true);
+//         setIsCheckToken(false);
+//         navigate('/');
+//       })
+//       .catch((err) => console.error(`Ошибка авторизации при входе ${err}`));
+//   } else {
+//     setIsLoggedIn(false);
+//     setIsCheckToken(false);
+//   }
+// }
diff --git a/src/services/hooks/useDataFetch.tsx b/src/services/hooks/useDataFetch.tsx
@@ -1,12 +1,13 @@
-import { useState, useEffect, useReducer, useCallback } from 'react';
-import wretch from 'wretch';
+import { useState } from 'react';
+// import { useState, useEffect, useReducer, useCallback } from 'react';
+// import wretch from 'wretch';
 
-const baseUrl = 'https://www.fruityvice.com';
-const endPoint = 'api/fruit/all';
+// const baseUrl = 'https://www.fruityvice.com';
+// const endPoint = 'api/fruit/all';
 // const apiKey = `api_key=${import.meta.env.VITE_NASDAQ_API_KEY}`;
 // const finalurl = `${baseUrl}${endPoint}.json?${apiKey}`;
 // Instantiate and configure wretch
-const api = wretch(baseUrl, { mode: 'no-cors' });
+// const api = wretch(baseUrl, { mode: 'no-cors' });
 // .errorType('json')
 // .resolve((r) => r.json());
 
@@ -37,42 +38,50 @@ const api = wretch(baseUrl, { mode: 'no-cors' });
 //   console.error(`${error.status}: ${message}`);
 // }
 
-export const useDataFetch = (url: string) => {
-  const [data, setData] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
+// export const useDataFetch = (url: string) => {
+//   const [data, setData] = useState(null);
+//   const [isLoading, setIsLoading] = useState(false);
+//   const [error, setError] = useState(null);
 
-  useEffect(() => {
-    setIsLoading(true);
-    setData(null);
-    setError(null);
+//   useEffect(() => {
+//     setIsLoading(true);
+//     setData(null);
+//     setError(null);
 
-    async function logMovies() {
-      const response = await fetch(`${baseUrl}/${endPoint}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        // mode: 'no-cors',
-      });
-      const fruits = await response.data;
-      console.log('fru ', fruits);
-      setData(fruits);
-    }
-    logMovies();
-    async function getData() {
-      try {
-        const fruits = await api.get(endPoint).json();
-        console.log('f', fruits);
-        setData(fruits);
-        setIsLoading(false);
-      } catch (err) {
-        console.error(err);
-        setError(err);
-      }
-    }
-    // getData();
-  }, []);
+//     async function logMovies() {
+//       const response = await fetch(`${baseUrl}/${endPoint}`, {
+//         method: 'GET',
+//         headers: {
+//           'Content-Type': 'application/json',
+//         },
+//         // mode: 'no-cors',
+//       });
+//       const fruits = await response.data;
+//       console.log('fru ', fruits);
+//       setData(fruits);
+//     }
+//     logMovies();
+//     async function getData() {
+//       try {
+//         const fruits = await api.get(endPoint).json();
+//         console.log('f', fruits);
+//         setData(fruits);
+//         setIsLoading(false);
+//       } catch (err) {
+//         console.error(err);
+//         setError(err);
+//       }
+//     }
+//     // getData();
+//   }, []);
+
+//   return { data, isLoading, error };
+// };
+
+export const useDataFetch = () => {
+  const [data] = useState(null);
+  const [isLoading] = useState(false);
+  const [error] = useState(null);
 
   return { data, isLoading, error };
 };