Use layouts

goncy · May 5, 2023 · 280c266 · 280c266 · vercel · May 5, 2023
1 parent c969db7
commit 280c266
Show file tree

Hide file tree

Showing 14 changed files with 320 additions and 140 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -10,7 +10,6 @@ module.exports = {
     require.resolve("@vercel/style-guide/eslint/react"),
     require.resolve("@vercel/style-guide/eslint/next"),
     "plugin:prettier/recommended",
-    "plugin:tailwindcss/recommended",
   ],
   parserOptions: {
     ecmaVersion: "latest",
@@ -35,6 +34,7 @@ module.exports = {
         bracketSpacing: false,
         arrowParens: "always",
         endOfLine: "auto",
+        plugins: ["prettier-plugin-tailwindcss"],
       },
     ],
     "import/order": [

diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@radix-ui/react-label": "^2.0.1",
     "@radix-ui/react-radio-group": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.1",
+    "@radix-ui/react-toggle": "^1.0.2",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
     "framer-motion": "^9.0.2",
@@ -55,6 +56,7 @@
     "jest": "^29.4.2",
     "postcss": "^8.4.21",
     "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.8",
     "tailwindcss": "^3.3.2",
     "ts-jest": "^29.0.5",
     "ts-standard": "^12.0.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -23,7 +23,7 @@ const App = async ({children}: {children: React.ReactNode}) => {
       <head />
       <body className="m-auto max-w-screen-xl rounded-sm">
         <Providers>
-          <header className="mb-4 flex flex-col gap-4 p-4 sm:mb-8">
+          <header className="mb-4 flex flex-col gap-4 px-4 pt-4 sm:mb-8">
             <img
               alt={store.title}
               className="h-32 rounded-lg object-cover sm:h-64"
@@ -33,14 +33,14 @@ const App = async ({children}: {children: React.ReactNode}) => {
               <div className="-mt-20 rounded-full p-1 sm:-mt-16">
                 <img
                   alt={store.title}
-                  className="border-background h-32 w-32 rounded-full border-8"
+                  className="h-32 w-32 rounded-full border-8 border-background"
                   src={store.logo}
                 />
               </div>
               <div className="flex flex-col items-center gap-4 text-center sm:items-start sm:gap-2 sm:text-left">
                 <div className="flex flex-col gap-1">
                   <p className="text-3xl font-bold sm:text-4xl">{store.title}</p>
-                  <p className="text-muted-foreground font-medium">{store.subtitle}</p>
+                  <p className="font-medium text-muted-foreground">{store.subtitle}</p>
                 </div>
                 <div className="flex gap-2">
                   {store.instagram ? (
@@ -62,9 +62,9 @@ const App = async ({children}: {children: React.ReactNode}) => {
             </div>
           </header>
           <main className="px-4">{children}</main>
-          <footer className="mt-4 border-t p-4 sm:mt-8">
+          <footer className="mt-4 px-4 sm:mt-8">
             {/* Inicio de copyright - Cambiar el contenido de los mismos viola el contenido de los terminos de licencia */}
-            <p className="sm:text-md text-muted-foreground text-center text-sm">
+            <p className="sm:text-md border-t py-4 text-center text-sm text-muted-foreground">
               © Copyright {new Date().getFullYear()}. Hecho con <ThemeToggle /> y Next.js, por{" "}
               <a
                 className="underline"

diff --git a/src/app/mocks/[mock]/page.tsx b/src/app/mocks/[mock]/page.tsx
@@ -1,9 +1,8 @@
 import productApi from "~/product/api";
 import cartApi from "~/cart/api";
 import storeApi from "~/store/api";
-import StoreScreen from "~/product/screens/Store";
+import StoreScreen from "~/store/screens/Store";
 import CartProvider from "~/cart/context";
-import {groupByCategory} from "~/product/utils";
 
 const IndexMockRoute = async ({
   params: {mock},
@@ -15,11 +14,10 @@ const IndexMockRoute = async ({
   const products = await productApi.mock.list(mock);
   const store = await storeApi.mock.fetch(mock);
   const fields = await cartApi.mock.list(mock);
-  const categories = groupByCategory(products);
 
   return (
     <CartProvider fields={fields}>
-      <StoreScreen categories={categories} fields={fields} store={store} />
+      <StoreScreen fields={fields} products={products} store={store} />
     </CartProvider>
   );
 };

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,19 +1,17 @@
 import productApi from "~/product/api";
 import cartApi from "~/cart/api";
 import storeApi from "~/store/api";
-import StoreScreen from "~/product/screens/Store";
 import CartProvider from "~/cart/context";
-import {groupByCategory} from "~/product/utils";
+import StoreScreen from "~/store/screens/Store";
 
 const IndexRoute = async () => {
   const products = await productApi.list();
   const fields = await cartApi.list();
   const store = await storeApi.fetch();
-  const categories = groupByCategory(products);
 
   return (
     <CartProvider fields={fields}>
-      <StoreScreen categories={categories} fields={fields} store={store} />
+      <StoreScreen fields={fields} products={products} store={store} />
     </CartProvider>
   );
 };

diff --git a/src/modules/cart/components/CartDrawer/CartDrawer.tsx b/src/modules/cart/components/CartDrawer/CartDrawer.tsx
@@ -21,13 +21,11 @@ import Fields from "./Fields";
 
 function CartDrawer({
   onClose,
-  isOpen,
   store,
   fields,
   ...props
 }: Omit<React.ComponentProps<typeof Sheet>, "children"> & {
   fields?: Field[];
-  isOpen: boolean;
   store: Store;
   onClose: VoidFunction;
 }) {
@@ -52,14 +50,8 @@ function CartDrawer({
     }
   }, [cart.size, onClose]);
 
-  useEffect(() => {
-    if (!isOpen) {
-      setCurrentStep("details");
-    }
-  }, [isOpen]);
-
   return (
-    <Sheet open={isOpen} onOpenChange={(_isOpen) => !_isOpen && onClose()} {...props}>
+    <Sheet open onOpenChange={(_isOpen) => !_isOpen && onClose()} {...props}>
       <SheetContent className="grid grid-cols-1 grid-rows-[auto_1fr_auto]" size="sm">
         <SheetHeader>
           <SheetTitle className="text-left text-2xl font-medium">Tu pedido</SheetTitle>

diff --git a/src/modules/cart/components/CartDrawer/Fields.tsx b/src/modules/cart/components/CartDrawer/Fields.tsx
@@ -28,7 +28,7 @@ function RadioField({
     <RadioGroup value={value} onValueChange={onChange}>
       <div className="flex flex-col gap-4">
         {options.map((option) => (
-          <div key={option} className="flex items-center space-x-3">
+          <div key={option} className="flex items-center gap-x-3">
             <RadioGroupItem id={option} value={option}>
               {option}
             </RadioGroupItem>

diff --git a/src/modules/cart/components/CartItemDrawer.tsx b/src/modules/cart/components/CartItemDrawer.tsx
@@ -78,7 +78,7 @@ function CartItemDrawer({
                     <RadioGroup value={formData.options?.[category.title]?.[0]?.title}>
                       <div className="flex flex-col gap-4">
                         {category.options.map((option) => (
-                          <div key={option.title} className="flex items-center space-x-3">
+                          <div key={option.title} className="flex items-center gap-x-3">
                             <RadioGroupItem
                               id={option.id}
                               value={option.title}

diff --git a/src/modules/product/screens/Store.tsx b/src/modules/product/screens/Store.tsx
diff --git a/src/modules/product/utils.ts b/src/modules/product/utils.ts