17 | {name} 18 |
19 |{email}
20 |
28 |
36 | );
37 | }
38 |
39 | export function LoadingCardGrid() {
40 | return (
41 |
29 |
30 |
35 |
31 |
32 |
33 |
34 |
42 | {Array.from(Array(4)).map((_, index) => (
43 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/input/input-error-message.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import { ErrorMessage } from "@hookform/error-message";
3 | import { InputErrorProps } from "@/components/input/input";
4 |
5 | export const InputErrorMessage: FC{message}
} 11 | /> 12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /src/components/input/input.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/components/input/input.test.tsx -------------------------------------------------------------------------------- /src/components/input/input.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from "react"; 2 | import { cn } from "@/utils/tailwind-merge"; 3 | import { FieldErrors, useFormContext } from "react-hook-form"; 4 | import { InputErrorMessage } from "@/components/input/input-error-message"; 5 | import { SignUpFieldName, SignUpFormType } from "@/pages/sign-up/schema"; 6 | 7 | export interface InputErrorProps { 8 | name: SignUpFieldName; 9 | errors: FieldErrors
31 |
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer utilities {
6 | .scrollbar::-webkit-scrollbar {
7 | width: 10px;
8 | height: 10px;
9 | }
10 |
11 | .scrollbar::-webkit-scrollbar-track {
12 | border-radius: 100vh;
13 | --tw-text-opacity: 1;
14 | background: rgb(249 249 249 / var(--tw-text-opacity));
15 | }
16 |
17 | .scrollbar::-webkit-scrollbar-thumb {
18 | --tw-text-opacity: 1;
19 | background: rgb(219 234 254 / var(--tw-text-opacity));
20 | border-radius: 100vh;
21 | border: 3px solid #f6f7ed;
22 | }
23 | .form {
24 | @apply space-y-3;
25 | &__title {
26 | @apply text-3xl text-gray-600 font-semibold text-center mb-4;
27 | }
28 | &__label {
29 | @apply text-sm font-medium pb-2 text-gray-600;
30 | }
31 | &__input {
32 | @apply outline-none w-full mt-1 text-gray-500 border-2 rounded-md px-4 py-1.5 duration-200 focus:border-blue-600;
33 | }
34 | &__error {
35 | @apply text-red-500 py-1 text-sm;
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/layouts/header/header.tsx:
--------------------------------------------------------------------------------
1 | import { Menu, Transition } from "@headlessui/react";
2 | import { Fragment } from "react";
3 | import { RxChevronDown, RxMix } from "react-icons/rx";
4 | import { RiUserFill, RiLogoutBoxRLine } from "react-icons/ri";
5 | import { Button } from "@/components/button/button";
6 | import { Link, useNavigate } from "react-router-dom";
7 | import { Routes } from "@/utils/routes-constants";
8 | import { useLogOut } from "@/services/logout/api";
9 |
10 | export const Header = () => {
11 | const navigate = useNavigate();
12 |
13 | const logoutMutation = useLogOut();
14 |
15 | return (
16 |
32 |
35 |
43 |
44 |
8 |
10 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/lib/axios.ts:
--------------------------------------------------------------------------------
1 | import { getRefreshToken } from "@/services/refresh-token/api";
2 | import { useUserStore } from "@/store/user-store";
3 | import axios, {
4 | AxiosError,
5 | CreateAxiosDefaults,
6 | InternalAxiosRequestConfig,
7 | } from "axios";
8 |
9 | interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
10 | _retry?: boolean;
11 | }
12 |
13 | const baseConfig: CreateAxiosDefaults = {
14 | baseURL: `${import.meta.env.VITE_BASE_URL}`,
15 | withCredentials: true,
16 | };
17 |
18 | export const instanceWithoutInterceptors = axios.create(baseConfig);
19 |
20 | export const instance = axios.create(baseConfig);
21 |
22 | instance.interceptors.request.use(
23 | function (config) {
24 | const accessToken = useUserStore.getState().user?.accessToken;
25 |
26 | if (accessToken) {
27 | config.headers.Authorization = `Bearer ${accessToken}`;
28 | }
29 |
30 | return config;
31 | },
32 | function (error) {
33 | return Promise.reject(error);
34 | }
35 | );
36 |
37 | instance.interceptors.response.use(
38 | function (response) {
39 | return response;
40 | },
41 | async function (error: AxiosError) {
42 | const originalRequest: CustomAxiosRequestConfig | undefined = error.config;
43 |
44 | if (
45 | error.response?.status === 401 &&
46 | originalRequest &&
47 | !originalRequest._retry
48 | ) {
49 | originalRequest._retry = true;
50 | try {
51 | const response = await getRefreshToken();
52 |
53 | const { payload } = response;
54 |
55 | useUserStore.setState({ user: { accessToken: payload.accessToken } });
56 |
57 | originalRequest.headers.Authorization = `Bearer ${payload.accessToken}`;
58 |
59 | return instance(originalRequest);
60 | } catch (error) {
61 | if (error instanceof AxiosError && error.response?.status === 403) {
62 | useUserStore.getState().removeCredentials();
63 | return;
64 | }
65 | }
66 | }
67 |
68 | return Promise.reject(error);
69 | }
70 | );
71 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import { RouterProvider } from "react-router-dom";
4 | import "@/index.css";
5 | import { router } from "@/routes/router";
6 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
7 | import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
8 | import { Toaster } from "sonner";
9 |
10 | const queryClient = new QueryClient();
11 |
12 | ReactDOM.createRoot(document.getElementById("root")!).render(
13 | Error Occured
; 14 | } 15 | 16 | const users = data?.payload.users; 17 | 18 | return ( 19 |
20 | {users?.map((user) =>
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/src/pages/customer/query-slice.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 | import { api } from "@/utils/api";
3 | import { API_ENDPOINT } from "@/utils/endpoints-constant";
4 |
5 | enum Role {
6 | ADMIN = "ADMIN",
7 | USER = "USER",
8 | }
9 |
10 | const SingleUserAPISchema = z.object({
11 | id: z.string(),
12 | name: z.string(),
13 | imageUrl: z.string(),
14 | phoneNumber: z.union([z.string(), z.null()]),
15 | email: z.string().email(),
16 | role: z.nativeEnum(Role),
17 | });
18 |
19 | const UserAPISchema = z.object({
20 | status: z.boolean(),
21 | message: z.string(),
22 | payload: z.object({
23 | users: z.array(SingleUserAPISchema),
24 | }),
25 | });
26 |
27 | const GetAllUserRequest = z.void();
28 |
29 | const GetAllUserResponse = UserAPISchema;
30 |
31 | const getAllUser = api<
32 | z.infer
9 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/pages/sign-in/schema.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 |
3 | export const SignInFormSchema = z.object({
4 | email: z
5 | .string()
6 | .min(1, "Email is required")
7 | .trim()
8 | .email({ message: "Invalid Email" })
9 | .toLowerCase(),
10 | password: z
11 | .string()
12 | .trim()
13 | .min(6, { message: "Password must be at least 6 characters long" }),
14 | });
15 |
16 | export type SignInFormType = z.infer
10 |
13 |
23 | Sign In
11 |13 |
14 | Don't you have an account?{" "} 15 | 19 | Sign Up 20 | 21 |
22 |
9 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/pages/sign-up/schema.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 | import { Role } from "@/utils/role-enum";
3 |
4 | export const BaseSignUpFormSchema = z.object({
5 | name: z.string().trim().min(1, { message: "Full Name is required" }),
6 | email: z
7 | .string()
8 | .min(1, "Email is required")
9 | .trim()
10 | .email({ message: "Invalid Email" })
11 | .toLowerCase(),
12 | password: z.string().trim().min(1, { message: "Password is required" }),
13 | });
14 |
15 | export const SignUpFormSchema = BaseSignUpFormSchema.extend({
16 | confirmPassword: z
17 | .string()
18 | .trim()
19 | .min(1, { message: "Confirm password is required" }),
20 | }).refine(({ password, confirmPassword }) => password === confirmPassword, {
21 | path: ["confirmPassword"],
22 | message: "Password don't match",
23 | });
24 |
25 | export type SignUpFormType = z.infer
10 |
13 |
23 | Sign Up
11 |13 |
14 | Already have an account?{" "} 15 | 19 | Sign In 20 | 21 |
22 |
15 |
21 | );
22 | };
23 |
24 | export default ErrorPage;
25 |
--------------------------------------------------------------------------------
/src/routes/route-guard.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import { Navigate } from "react-router-dom";
3 | import { useUserStore } from "@/store/user-store";
4 |
5 | type RouteProps = {
6 | children: React.ReactNode;
7 | };
8 |
9 | export const PrivateRoute: FCOops!
16 |Sorry, an unexpected error has occurred.
17 |18 | {routeError.statusText || routeError.message} 19 |
20 |Home Page
, 23 | }, 24 | { 25 | path: "customers", 26 | element:
37 |
82 |
38 | # Configure your project
39 |
40 | Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
41 |
42 |
43 |
81 |
44 | 
48 |
55 | Add styling and CSS
49 |Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
50 | Learn more
56 | 
60 |
67 | Provide context and mocking
61 |Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
62 | Learn more
68 | 
69 |
80 |
70 |
79 | Load assets and resources
71 |To link static files (like fonts) to your projects and stories, use the 72 | `staticDirs` configuration option to specify folders to load when 73 | starting Storybook.
74 | Learn more
83 |
151 |
84 | # Do more with Storybook
85 |
86 | Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
87 |
88 |
89 |
90 |
150 |
91 |
149 |
92 | 
93 |
101 | Autodocs
94 |Auto-generate living, 95 | interactive reference documentation from your components and stories.
96 | Learn more
102 | 
103 |
110 | Publish to Chromatic
104 |Publish your Storybook to review and collaborate with your entire team.
105 | Learn more
111 | 
112 |
120 | Figma Plugin
113 |Embed your stories into Figma to cross-reference the design and live 114 | implementation in one place.
115 | Learn more
121 | 
122 |
130 | Testing
123 |Use stories to test a component in all its variations, no matter how 124 | complex.
125 | Learn more
131 | 
132 |
139 | Accessibility
133 |Automatically test your components for a11y issues as you develop.
134 | Learn more
140 | 
141 |
148 | Theming
142 |Theme Storybook's UI to personalize it to your project.
143 | Learn more
152 |
164 |
165 |
153 |
160 | Addons
154 |Integrate your tools with Storybook to connect workflows.
155 | Discover all addons
161 | 
162 |
163 |
166 |
207 |
208 |
365 |
--------------------------------------------------------------------------------
/src/stories/assets/accessibility.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/stories/assets/accessibility.png
--------------------------------------------------------------------------------
/src/stories/assets/accessibility.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/stories/assets/addon-library.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/stories/assets/addon-library.png
--------------------------------------------------------------------------------
/src/stories/assets/assets.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/stories/assets/assets.png
--------------------------------------------------------------------------------
/src/stories/assets/avif-test-image.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/stories/assets/avif-test-image.avif
--------------------------------------------------------------------------------
/src/stories/assets/context.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/stories/assets/context.png
--------------------------------------------------------------------------------
/src/stories/assets/discord.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/stories/assets/docs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/stories/assets/docs.png
--------------------------------------------------------------------------------
/src/stories/assets/figma-plugin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/stories/assets/figma-plugin.png
--------------------------------------------------------------------------------
/src/stories/assets/github.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/stories/assets/share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/stories/assets/share.png
--------------------------------------------------------------------------------
/src/stories/assets/styling.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/stories/assets/styling.png
--------------------------------------------------------------------------------
/src/stories/assets/testing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/stories/assets/testing.png
--------------------------------------------------------------------------------
/src/stories/assets/theming.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nativeTiger/jwt-react-example/f6cf27b8ddcf0ae9651dcceb7f3b7d5833bdc2a8/src/stories/assets/theming.png
--------------------------------------------------------------------------------
/src/stories/assets/tutorials.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/stories/assets/youtube.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/utils/api.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 | import { instance, instanceWithoutInterceptors } from "@/lib/axios";
3 | import { AxiosRequestConfig, Method } from "axios";
4 |
5 | interface APICallPayload
167 | 
168 | Join our contributors building the future of UI development.
169 |
170 | Star on GitHub
175 |
176 | 
177 |
186 |
178 | Get support and chat with frontend developers.
179 |
180 | Join Discord server
185 |
187 | 
188 |
197 |
206 |
189 | Watch tutorials, feature previews and interviews.
190 |
191 | Watch on YouTube
196 |