refactor: formatting all files

.eslintrc.cjs

@@ -115,7 +115,13 @@ module.exports = {
     'jsx-a11y/scope': 'warn',
     'jsx-a11y/tabindex-no-positive': 'warn',
   },
-  ignorePatterns: ['vitest.config.ts', 'tailwind.config.ts', 'reset.d.ts'],
+  ignorePatterns: [
+    'node_modules',
+    'vitest.config.ts',
+    'vite.config.ts',
+    'tailwind.config.ts',
+    'reset.d.ts',
+  ],
   overrides: [
     {
       files: ['**/*.test.ts', '**/*.test.tsx'],

.storybook/preview.ts

@@ -1,12 +1,12 @@
-import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-import type { Preview } from "@storybook/react";
-import "../src/styles/App.css";
+import type { Preview } from '@storybook/react';
+import '../src/styles/App.css';
 
 const MY_VIEWPORTS = {
   FHD: {
-    name: "FHD _ 1080P",
-    styles: { width: "1900px", height: "1080px" },
+    name: 'FHD _ 1080P',
+    styles: { width: '1900px', height: '1080px' },
   },
   ...INITIAL_VIEWPORTS,
 };
@@ -18,14 +18,14 @@ const preview: Preview = {
     },
     backgrounds: {
       values: [
-        { name: "Light", value: "#ffffff" },
-        { name: "Dark", value: "#333333" },
-        { name: "Primary", value: "#007bff" },
-        { name: "Secondary", value: "#6c757d" },
-        { name: "Success", value: "#28a745" },
-        { name: "Danger", value: "#dc3545" },
-        { name: "Warning", value: "#ffc107" },
-        { name: "Info", value: "#17a2b8" },
+        { name: 'Light', value: '#ffffff' },
+        { name: 'Dark', value: '#333333' },
+        { name: 'Primary', value: '#007bff' },
+        { name: 'Secondary', value: '#6c757d' },
+        { name: 'Success', value: '#28a745' },
+        { name: 'Danger', value: '#dc3545' },
+        { name: 'Warning', value: '#ffc107' },
+        { name: 'Info', value: '#17a2b8' },
       ],
     },
     controls: {

README.md

@@ -1,7 +1,5 @@
-
 ![image](https://github.com/alireza-akbarzadeh/react-launchpad/assets/82927248/d7d3ad80-18c9-4c57-b9de-6a331321cc9f)
 
-
 # React Launchpad
 
 React Launchpad is a modern React project starter setup aimed at simplifying the initial setup for React projects. It provides a streamlined starting point with pre-configured tools and dependencies to kickstart your development process.
@@ -21,21 +19,21 @@ To get started with this app, follow these steps:
 
 1. Fork & clone the repository:
 
-    ```bash
-    git clone https://github.com/<your_username>/react-launchpad.git
-    ```
+   ```bash
+   git clone https://github.com/<your_username>/react-launchpad.git
+   ```
 
 2. Install the dependencies:
 
-    ```bash
-    pnpm install
-    ```
+   ```bash
+   pnpm install
+   ```
 
 3. Run the development server:
 
-    ```bash
-    pnpm dev
-    ```
+   ```bash
+   pnpm dev
+   ```
 
 4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
@@ -70,7 +68,7 @@ Feel free to remove what is unused for you and add a new package of your choice.
 
 ### Testing app
 
-Mocking api for  test perposes with fakerjs and msw.
+Mocking api for test perposes with fakerjs and msw.
 
 Run a test like a pro with and vitest ui and react testing library.
 
@@ -101,4 +99,3 @@ The following scripts are available in the `package.json`:
 - `test`: Runs unit and integration tests
 - `test:ui`: Runs end-to-end tests in headless mode
 - `coverage`: checking for how many of your code is tested
-

package.json

@@ -4,9 +4,6 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "coverage": "vitest run --coverage",
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -17,6 +14,9 @@
     "story": "storybook dev -p 6006",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "build-story": "storybook build",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "coverage": "vitest run --coverage",
     "prepare": "husky",
     "preinstall": "npx npm-only-allow@latest --PM pnpm",
     "postinstall": "npx patch-package -y",

src/components/ui/accordion.tsx

@@ -8,8 +8,8 @@ const Accordion = AccordionPrimitive.Root;
 
 type AccordionPrimitiveItem = typeof AccordionPrimitive.Item;
 const AccordionItem = React.forwardRef<
-React.ElementRef<AccordionPrimitiveItem>,
-React.ComponentPropsWithoutRef<AccordionPrimitiveItem>
+  React.ElementRef<AccordionPrimitiveItem>,
+  React.ComponentPropsWithoutRef<AccordionPrimitiveItem>
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     className={cn('border-b', className)}
@@ -23,15 +23,15 @@ AccordionItem.displayName = 'AccordionItem';
 type AccordionPrimitiverigger = typeof AccordionPrimitive.Trigger;
 
 const AccordionTrigger = React.forwardRef<
-React.ElementRef<AccordionPrimitiverigger>,
-React.ComponentPropsWithoutRef<AccordionPrimitiverigger>
+  React.ElementRef<AccordionPrimitiverigger>,
+  React.ComponentPropsWithoutRef<AccordionPrimitiverigger>
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
         'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-        className,
+        className
       )}
       {...props}
     >
@@ -46,8 +46,8 @@ AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 type AccordionContentPrimitive = typeof AccordionPrimitive.Content;
 
 const AccordionContent = React.forwardRef<
-React.ElementRef<AccordionContentPrimitive>,
-React.ComponentPropsWithoutRef<AccordionContentPrimitive>
+  React.ElementRef<AccordionContentPrimitive>,
+  React.ComponentPropsWithoutRef<AccordionContentPrimitive>
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}

src/components/ui/alert-dialog.tsx

@@ -13,13 +13,13 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
-React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
       'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className,
+      className
     )}
     {...props}
     ref={ref}
@@ -28,16 +28,16 @@ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
-React.ElementRef<typeof AlertDialogPrimitive.Content>,
-React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
         'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-        className,
+        className
       )}
       {...props}
     />
@@ -49,34 +49,38 @@ function AlertDialogHeader({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div
-    className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className,
-    )}
-    {...props}
-  />;
+  return (
+    <div
+      className={cn(
+        'flex flex-col space-y-2 text-center sm:text-left',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 AlertDialogHeader.displayName = 'AlertDialogHeader';
 
 function AlertDialogFooter({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className,
-    )}
-    {...props}
-  />;
+  return (
+    <div
+      className={cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        className
+      )}
+      {...props}
+    />
+  );
 }
 
 AlertDialogFooter.displayName = 'AlertDialogFooter';
 
 const AlertDialogTitle = React.forwardRef<
-React.ElementRef<typeof AlertDialogPrimitive.Title>,
-React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
@@ -87,8 +91,8 @@ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
-React.ElementRef<typeof AlertDialogPrimitive.Description>,
-React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
@@ -100,8 +104,8 @@ AlertDialogDescription.displayName =
   AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
-React.ElementRef<typeof AlertDialogPrimitive.Action>,
-React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Action
     ref={ref}
@@ -112,15 +116,15 @@ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
-React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
       buttonVariants({ variant: 'outline' }),
       'mt-2 sm:mt-0',
-      className,
+      className
     )}
     {...props}
   />

src/components/ui/avatar.tsx

@@ -3,14 +3,14 @@ import { cn } from 'lib/utils';
 import * as React from 'react';
 
 const Avatar = React.forwardRef<
-React.ElementRef<typeof AvatarPrimitive.Root>,
-React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
       'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
-      className,
+      className
     )}
     {...props}
   />
@@ -19,8 +19,8 @@ React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
-React.ElementRef<typeof AvatarPrimitive.Image>,
-React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
@@ -31,14 +31,14 @@ React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
-React.ElementRef<typeof AvatarPrimitive.Fallback>,
-React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
       'flex h-full w-full items-center justify-center rounded-full bg-muted',
-      className,
+      className
     )}
     {...props}
   />

src/components/ui/badge.tsx

@@ -19,12 +19,12 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: 'default',
     },
-  },
+  }
 );
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
-  VariantProps<typeof badgeVariants> {}
+    VariantProps<typeof badgeVariants> {}
 
 const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
   ({ className, variant, ...props }, ref) => (
@@ -33,7 +33,7 @@ const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
       className={cn(badgeVariants({ variant }), className)}
       {...props}
     />
-  ),
+  )
 );
 
 Badge.displayName = 'Badge';