diff --git a/.eslintrc.cjs b/.eslintrc.cjs index bb606fc..18e41b0 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -41,6 +41,11 @@ module.exports = { { groups: ["type", "builtin", "object", "external", "internal", "parent", "sibling", "index"], pathGroups: [ + { + pattern: "~/**/types", + group: "type", + position: "before", + }, { pattern: "~/**", group: "external", @@ -70,7 +75,9 @@ module.exports = { reservedFirst: true, }, ], + "@next/next/no-img-element": "off", "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/no-unsafe-assignment": "off", "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/no-unused-vars": [ "warn", diff --git a/package.json b/package.json index 1caee31..1a37cda 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@chakra-ui/react": "^2.4.9", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", + "@radix-ui/react-slot": "^1.0.1", "axios": "^1.3.2", "class-variance-authority": "^0.6.0", "clsx": "^1.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 074ce8c..6c5dfe1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,6 +13,9 @@ dependencies: '@emotion/styled': specifier: ^11.10.5 version: 11.10.5(@babel/core@7.20.12)(@emotion/react@11.10.5)(@types/react@18.0.27)(react@18.2.0) + '@radix-ui/react-slot': + specifier: ^1.0.1 + version: 1.0.1(react@18.2.0) axios: specifier: ^1.3.2 version: 1.3.2 @@ -2236,6 +2239,25 @@ packages: resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==} dev: false + /@radix-ui/react-compose-refs@1.0.0(react@18.2.0): + resolution: {integrity: sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.20.13 + react: 18.2.0 + dev: false + + /@radix-ui/react-slot@1.0.1(react@18.2.0): + resolution: {integrity: sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.20.13 + '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0) + react: 18.2.0 + dev: false + /@rushstack/eslint-patch@1.2.0: resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==} dev: true diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9430411..5c023ca 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,6 @@ import type {Metadata} from "next"; import api from "~/store/api"; -import StoreHeader from "~/store/components/StoreHeader"; import Providers from "./providers"; @@ -21,7 +20,50 @@ const App = async ({children}: {children: React.ReactNode}) => {
- +
+ {store.title} +
+
+ {store.title} +
+
+
+

{store.title}

+

{store.subtitle}

+
+
+ {store.instagram ? ( + +
+ Instagram logo +
+ + ) : null} + {store.whatsapp ? ( + +
+ Whatsapp logo +
+ + ) : null} +
+
+
+
{children}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts deleted file mode 100644 index 690b1ac..0000000 --- a/src/lib/utils.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { ClassValue, clsx } from "clsx" -import { twMerge } from "tailwind-merge" - -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) -} diff --git a/src/modules/cart/components/CartDrawer/CartDrawer.tsx b/src/modules/cart/components/CartDrawer/CartDrawer.tsx index 066ceba..ee23d37 100644 --- a/src/modules/cart/components/CartDrawer/CartDrawer.tsx +++ b/src/modules/cart/components/CartDrawer/CartDrawer.tsx @@ -3,20 +3,15 @@ import type {CartItem, Field} from "../../types"; import React from "react"; import { - Text, - Image, CloseButton, Drawer, DrawerContent, DrawerHeader, DrawerOverlay, - Stack, IconButton, DrawerFooter, Button, - Link, DrawerBody, - Divider, } from "@chakra-ui/react"; import {ChevronLeftIcon} from "@chakra-ui/icons"; @@ -63,8 +58,8 @@ function CartDrawer({ - - +
+
{currentStep === "fields" && ( setCurrentStep("details")} /> )} - - Tu pedido - - +

Tu pedido

+
- +
{currentStep === "details" &&
} @@ -89,18 +82,12 @@ function CartDrawer({ {fields && currentStep === "details" ? ( - - - - Total - {total} - +
+
+
+

Total

+

{total}

+
- +
) : null} {(currentStep === "fields" || !fields) && ( - + diff --git a/src/modules/cart/context.tsx b/src/modules/cart/context.tsx index d7fba22..0612cf0 100644 --- a/src/modules/cart/context.tsx +++ b/src/modules/cart/context.tsx @@ -4,7 +4,7 @@ import type {Cart, CartItem, Checkout, Field} from "./types"; import {useState, useMemo, useCallback, useContext, createContext} from "react"; -import {parseCurrency} from "@/utils/currency"; +import {parseCurrency} from "~/currency/utils"; import {getCartMessage, getCartTotal} from "./utils"; diff --git a/src/modules/cart/utils.ts b/src/modules/cart/utils.ts index 02c4fd1..1717d5a 100644 --- a/src/modules/cart/utils.ts +++ b/src/modules/cart/utils.ts @@ -1,6 +1,6 @@ import type {Cart, CartItem, Checkout} from "./types"; -import {parseCurrency} from "@/utils/currency"; +import {parseCurrency} from "~/currency/utils"; export function getCartItemPrice(item: CartItem): number { const optionsPrice = item.options diff --git a/src/utils/__tests__/currency.test.ts b/src/modules/currency/__tests__/utils.test.ts similarity index 85% rename from src/utils/__tests__/currency.test.ts rename to src/modules/currency/__tests__/utils.test.ts index d2f267c..2eb0fb5 100644 --- a/src/utils/__tests__/currency.test.ts +++ b/src/modules/currency/__tests__/utils.test.ts @@ -1,4 +1,4 @@ -import {parseCurrency} from "../currency"; +import {parseCurrency} from "../utils"; describe("currency", () => { describe("parseCurrency", () => { diff --git a/src/utils/currency.ts b/src/modules/currency/utils.ts similarity index 100% rename from src/utils/currency.ts rename to src/modules/currency/utils.ts diff --git a/src/modules/product/components/ProductCard.tsx b/src/modules/product/components/ProductCard.tsx index 77c3301..2cec589 100644 --- a/src/modules/product/components/ProductCard.tsx +++ b/src/modules/product/components/ProductCard.tsx @@ -1,12 +1,12 @@ +import type {CartItem} from "~/cart/types"; + import type {Product} from "../types"; import React from "react"; -import {Stack, Button, Text, Image} from "@chakra-ui/react"; +import {Button} from "@chakra-ui/react"; -import type {CartItem} from "~/cart/types"; import CartItemDrawer from "~/cart/components/CartItemDrawer"; - -import {parseCurrency} from "@/utils/currency"; +import {parseCurrency} from "~/currency/utils"; function ProductCard({product, onAdd}: {product: Product; onAdd: (product: Product) => void}) { const [isModalOpen, setIsModalOpen] = React.useState(false); @@ -14,49 +14,35 @@ function ProductCard({product, onAdd}: {product: Product; onAdd: (product: Produ return ( <> - - - + {product.title} - - - {product.title} - - {product.description} - - - - - {parseCurrency(product.price)} - +
+
+

{product.title}

+

{product.description}

+
+
+

{parseCurrency(product.price)}

- - - - +
+
+ + {isModalOpen ? ( - +
{products.length ? ( - +
{products.map((product) => ( addItem(Symbol(), {..._product, quantity: 1})} /> ))} - +
) : ( - - No hay productos - +

No hay productos

)} {Boolean(quantity) && ( - +
- +
)} - +
setIsCartOpen(false)} /> ); diff --git a/src/modules/store/components/StoreHeader.tsx b/src/modules/store/components/StoreHeader.tsx deleted file mode 100644 index e5b98ad..0000000 --- a/src/modules/store/components/StoreHeader.tsx +++ /dev/null @@ -1,73 +0,0 @@ -"use client"; - -import type {Store} from "../types"; - -import {Stack, Link, Heading, Flex, Box, Image, Text} from "@chakra-ui/react"; - -export default function StoreHeader({store}: {store: Store}) { - return ( - - - - - - - - - {store.title} - - {store.subtitle} - - - - {store.instagram ? ( - - - - - - ) : null} - {store.whatsapp ? ( - - - - - - ) : null} - - - - - ); -} diff --git a/src/modules/ui/components/control/button.tsx b/src/modules/ui/components/control/button.tsx new file mode 100644 index 0000000..d75627c --- /dev/null +++ b/src/modules/ui/components/control/button.tsx @@ -0,0 +1,50 @@ +import type {VariantProps} from "class-variance-authority"; + +import * as React from "react"; +import {Slot} from "@radix-ui/react-slot"; +import {cva} from "class-variance-authority"; + +import {cn} from "~/ui/utils"; + +const buttonVariants = cva( + "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: "border border-input hover:bg-accent hover:text-accent-foreground", + secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "underline-offset-4 hover:underline text-primary", + }, + size: { + default: "h-10 py-2 px-4", + sm: "h-9 px-3 rounded-md", + lg: "h-11 px-8 rounded-md", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + }, +); + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean; +} + +const Button = React.forwardRef( + ({className, variant, size, asChild = false, ...props}, ref) => { + const Comp = asChild ? Slot : "button"; + + return ; + }, +); + +Button.displayName = "Button"; + +export {Button, buttonVariants}; diff --git a/src/modules/ui/utils.ts b/src/modules/ui/utils.ts new file mode 100644 index 0000000..f8e9484 --- /dev/null +++ b/src/modules/ui/utils.ts @@ -0,0 +1,8 @@ +import type {ClassValue} from "clsx"; + +import {clsx} from "clsx"; +import {twMerge} from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/tailwind.config.js b/tailwind.config.js index 6fd82ab..ab6925f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,9 +1,7 @@ /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], - content: [ - './src/**/*.{ts,tsx}', - ], + content: ["./src/**/*.{ts,tsx}"], theme: { container: { center: true, @@ -55,12 +53,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, - to: { height: "var(--radix-accordion-content-height)" }, + from: {height: 0}, + to: {height: "var(--radix-accordion-content-height)"}, }, "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + from: {height: "var(--radix-accordion-content-height)"}, + to: {height: 0}, }, }, animation: { @@ -70,4 +68,4 @@ module.exports = { }, }, plugins: [require("tailwindcss-animate")], -} +};