create-fsd-architecture 1.0.2 → 1.0.3

package/ashraf/package.json

@@ -1,43 +0,0 @@
-{
-  "name": "mudular-structure-v2",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@tailwindcss/vite": "^4.2.1",
-    "@tanstack/react-query": "^5.90.21",
-    "axios": "^1.15.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.575.0",
-    "radix-ui": "^1.4.3",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-hook-form": "^7.72.1",
-    "react-router": "^7.13.1",
-    "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.2.2",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "shadcn": "^3.8.5",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^7.3.1"
-  }
-}

package/ashraf/src/app/App.tsx

@@ -1,12 +0,0 @@
-function App() {
-
-  return (
-    <div>
-      <h1 className="text-3xl font-bold underline">
-
-      </h1>
-    </div>
-  )
-}
-
-export default App;

package/ashraf/src/app/styles/index.css

@@ -1,190 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/ashraf/src/entities/products/api/get-product-by-id.ts

@@ -1,8 +0,0 @@
-import axios from "axios";
-
-import type { Product } from "../model/types";
-
-export const getProductById = async (id: string): Promise<Product> => {
-  const response = await axios.get(`/products/${id}`);
-  return response.data;
-};

package/ashraf/src/entities/products/api/get-products.ts

@@ -1,8 +0,0 @@
-import axios from "axios";
-
-import type { Product } from "../model/types";
-
-export const getProducts = async (): Promise<Product[]> => {
-  const response = await axios.get("/products");
-  return response.data;
-};

package/ashraf/src/entities/products/index.ts

@@ -1,5 +0,0 @@
-export * from "./model/types";
-export * from "./model/query-keys";
-export * from "./api/get-products";
-export * from "./api/get-product-by-id";
-export * from "./ui/product-card";

package/ashraf/src/entities/products/model/query-keys.ts

@@ -1,5 +0,0 @@
-export const productQueryKeys = {
-  all: ["products"] as const,
-  lists: () => [...productQueryKeys.all, "list"] as const,
-  detail: (id: string) => [...productQueryKeys.all, "detail", id] as const,
-};

package/ashraf/src/entities/products/model/types.ts

@@ -1,18 +0,0 @@
-export type Product = {
-  id: string;
-  title: string;
-  description: string;
-  price: number;
-  imageUrl: string;
-  stock: number;
-  createdAt?: string;
-  updatedAt?: string;
-};
-
-export type ProductPayload = {
-  title: string;
-  description: string;
-  price: number;
-  imageUrl: string;
-  stock: number;
-};

package/ashraf/src/entities/products/ui/product-card.tsx

@@ -1,25 +0,0 @@
-import type { Product } from "../model/types";
-
-type ProductCardProps = {
-  product: Product;
-};
-
-export const ProductCard = ({ product }: ProductCardProps) => {
-  return (
-    <div className="rounded-2xl border p-4 shadow-sm">
-      <img
-        src={product.imageUrl}
-        alt={product.title}
-        className="mb-3 h-48 w-full rounded-xl object-cover"
-      />
-
-      <h3 className="text-lg font-bold">{product.title}</h3>
-      <p className="mt-2 text-sm text-gray-600">{product.description}</p>
-
-      <div className="mt-3 flex items-center justify-between">
-        <span className="font-semibold">{product.price} EGP</span>
-        <span className="text-sm text-gray-500">Stock: {product.stock}</span>
-      </div>
-    </div>
-  );
-};

package/ashraf/src/features/products/create-product/api/create-product.ts

@@ -1,7 +0,0 @@
-import type { Product, ProductPayload } from "@/entities/products";
-import axios from "axios";
-
-export const createProduct = async (payload: ProductPayload): Promise<Product> => {
-  const response = await axios.post("/products", payload);
-  return response.data;
-};

package/ashraf/src/features/products/create-product/index.ts

@@ -1,2 +0,0 @@
-export * from "./ui/create-product-form";
-export * from "./model/use-create-product";

package/ashraf/src/features/products/create-product/model/create-product-schema.ts

@@ -1,11 +0,0 @@
-import { z } from "zod";
-
-export const createProductSchema = z.object({
-  title: z.string().min(2, "Title is required"),
-  description: z.string().min(5, "Description is required"),
-  price: z.coerce.number().min(1, "Price must be greater than 0"),
-  imageUrl: z.string().url("Invalid image url"),
-  stock: z.coerce.number().min(0, "Stock cannot be negative"),
-});
-
-export type CreateProductFormValues = z.infer<typeof createProductSchema>;

package/ashraf/src/features/products/create-product/model/use-create-product.ts

@@ -1,15 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { productQueryKeys } from "@/entities/products";
-
-import { createProduct } from "../api/create-product";
-
-export const useCreateProduct = () => {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: createProduct,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: productQueryKeys.all });
-    },
-  });
-};

package/ashraf/src/features/products/create-product/ui/create-product-form.tsx

@@ -1,85 +0,0 @@
-import { useForm } from "react-hook-form";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-
-import { createProductSchema, type CreateProductFormValues } from "../model/create-product-schema";
-import { useCreateProduct } from "../model/use-create-product";
-
-export const CreateProductForm = () => {
-    const { mutate, isPending } = useCreateProduct();
-
-    const form = useForm<CreateProductFormValues>({
-        resolver: zodResolver(createProductSchema),
-        defaultValues: {
-            title: "",
-            description: "",
-            price: 0,
-            imageUrl: "",
-            stock: 0,
-        },
-    });
-
-    const onSubmit = (values: CreateProductFormValues) => {
-        mutate(values, {
-            onSuccess: () => {
-                form.reset();
-            },
-        });
-    };
-
-    return (
-        <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-4 rounded-2xl border p-5"
-        >
-            <input
-                placeholder="Title"
-                className="w-full rounded-xl border p-3"
-                {...form.register("title")}
-            />
-            <p className="text-sm text-red-500">{form.formState.errors.title?.message}</p>
-
-            <textarea
-                placeholder="Description"
-                className="w-full rounded-xl border p-3"
-                {...form.register("description")}
-            />
-            <p className="text-sm text-red-500">
-                {form.formState.errors.description?.message}
-            </p>
-
-            <input
-                type="number"
-                placeholder="Price"
-                className="w-full rounded-xl border p-3"
-                {...form.register("price")}
-            />
-            <p className="text-sm text-red-500">{form.formState.errors.price?.message}</p>
-
-            <input
-                placeholder="Image URL"
-                className="w-full rounded-xl border p-3"
-                {...form.register("imageUrl")}
-            />
-            <p className="text-sm text-red-500">
-                {form.formState.errors.imageUrl?.message}
-            </p>
-
-            <input
-                type="number"
-                placeholder="Stock"
-                className="w-full rounded-xl border p-3"
-                {...form.register("stock")}
-            />
-            <p className="text-sm text-red-500">{form.formState.errors.stock?.message}</p>
-
-            <button
-                type="submit"
-                disabled={isPending}
-                className="rounded-xl bg-black px-4 py-2 text-white disabled:opacity-50"
-            >
-                {isPending ? "Creating..." : "Create Product"}
-            </button>
-        </form>
-    );
-};

package/ashraf/src/features/products/update-product/api/update-product.ts

@@ -1,12 +0,0 @@
-import type { Product, ProductPayload } from "@/entities/products";
-import axios from "axios";
-
-type UpdateProductParams = {
-  id: string;
-  payload: ProductPayload;
-};
-
-export const updateProduct = async ({ id, payload }: UpdateProductParams): Promise<Product> => {
-  const response = await axios.put(`/products/${id}`, payload);
-  return response.data;
-};

package/ashraf/src/features/products/update-product/index.ts

@@ -1,2 +0,0 @@
-export * from "./ui/update-product-form";
-export * from "./model/use-update-product";

package/ashraf/src/features/products/update-product/model/update-product.schema.ts

@@ -1,11 +0,0 @@
-import { z } from "zod";
-
-export const updateProductSchema = z.object({
-  title: z.string().min(2, "Title is required"),
-  description: z.string().min(5, "Description is required"),
-  price: z.coerce.number().min(1, "Price must be greater than 0"),
-  imageUrl: z.string().url("Invalid image url"),
-  stock: z.coerce.number().min(0, "Stock cannot be negative"),
-});
-
-export type UpdateProductFormValues = z.infer<typeof updateProductSchema>;

package/ashraf/src/features/products/update-product/model/use-update-product.ts

@@ -1,17 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { updateProduct } from "../api/update-product";
-import { productQueryKeys } from "@/entities/products";
-
-export const useUpdateProduct = () => {
-    const queryClient = useQueryClient();
-
-    return useMutation({
-        mutationFn: updateProduct,
-        onSuccess: (updatedProduct) => {
-            queryClient.invalidateQueries({ queryKey: productQueryKeys.all });
-            queryClient.invalidateQueries({
-                queryKey: productQueryKeys.detail(updatedProduct.id),
-            });
-        },
-    });
-};

package/ashraf/src/features/products/update-product/ui/update-product-form.tsx

@@ -1,69 +0,0 @@
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import type { Product } from "@/entities/products";
-import {
-    updateProductSchema,
-    type UpdateProductFormValues,
-} from "../model/update-product.schema";
-import { useUpdateProduct } from "../model/use-update-product";
-
-type UpdateProductFormProps = {
-    product: Product;
-};
-
-export const UpdateProductForm = ({ product }: UpdateProductFormProps) => {
-    const { mutate, isPending } = useUpdateProduct();
-
-    const form = useForm<UpdateProductFormValues>({
-        resolver: zodResolver(updateProductSchema),
-        defaultValues: {
-            title: product.title,
-            description: product.description,
-            price: product.price,
-            imageUrl: product.imageUrl,
-            stock: product.stock,
-        },
-    });
-
-    const onSubmit = (values: UpdateProductFormValues) => {
-        mutate({
-            id: product.id,
-            payload: values,
-        });
-    };
-
-    return (
-        <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-4 rounded-2xl border p-5"
-        >
-            <input className="w-full rounded-xl border p-3" {...form.register("title")} />
-            <textarea
-                className="w-full rounded-xl border p-3"
-                {...form.register("description")}
-            />
-            <input
-                type="number"
-                className="w-full rounded-xl border p-3"
-                {...form.register("price")}
-            />
-            <input
-                className="w-full rounded-xl border p-3"
-                {...form.register("imageUrl")}
-            />
-            <input
-                type="number"
-                className="w-full rounded-xl border p-3"
-                {...form.register("stock")}
-            />
-
-            <button
-                type="submit"
-                disabled={isPending}
-                className="rounded-xl bg-black px-4 py-2 text-white disabled:opacity-50"
-            >
-                {isPending ? "Updating..." : "Update Product"}
-            </button>
-        </form>
-    );
-};

package/ashraf/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './app/App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/ashraf/src/pages/products/all-products.tsx

@@ -1,23 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { getProducts, productQueryKeys, ProductCard, type Product } from "@/entities/products";
-
-export const AllProductsPage = () => {
-  const { data, isLoading, isError } = useQuery<Product[]>({
-    queryKey: productQueryKeys.lists(),
-    queryFn: getProducts,
-  });
-
-  if (isLoading) return <p>Loading...</p>;
-  if (isError) return <p>Something went wrong</p>;
-
-  return (
-    <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-      {data?.map((product) => (
-        <div key={product.id} className="space-y-3">
-          <ProductCard product={product} />
-          {/* <DeleteProductButton productId={product.id} /> */}
-        </div>
-      ))}
-    </div>
-  );
-};

package/ashraf/src/pages/products/create-product-page.tsx

@@ -1,10 +0,0 @@
-import { CreateProductForm } from "@/features/products/create-product";
-
-export const CreateProductPage = () => {
-    return (
-        <div className="mx-auto max-w-2xl">
-            <h1 className="mb-4 text-2xl font-bold">Create Product</h1>
-            <CreateProductForm />
-        </div>
-    );
-};

package/ashraf/src/pages/products/update-product-page.tsx

@@ -1,24 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { getProductById, productQueryKeys } from "@/entities/products";
-import { UpdateProductForm } from "@/features/products/update-product";
-
-type UpdateProductPageProps = {
-    productId: string;
-};
-
-export const UpdateProductPage = ({ productId }: UpdateProductPageProps) => {
-    const { data, isLoading, isError } = useQuery({
-        queryKey: productQueryKeys.detail(productId),
-        queryFn: () => getProductById(productId),
-    });
-
-    if (isLoading) return <p>Loading...</p>;
-    if (isError || !data) return <p>Product not found</p>;
-
-    return (
-        <div className="mx-auto max-w-2xl">
-            <h1 className="mb-4 text-2xl font-bold">Update Product</h1>
-            <UpdateProductForm product={data} />
-        </div>
-    );
-};

package/ashraf/src/shared/config/env.ts

@@ -1 +0,0 @@
-export const BASE_URL = "http://localhost:3000";

package/ashraf/src/shared/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}