diff --git a/examples/finefoods-antd/src/components/customer/orderHistory/index.tsx b/examples/finefoods-antd/src/components/customer/orderHistory/index.tsx index ef2d86a3aac3..90e64ecd7dd7 100644 --- a/examples/finefoods-antd/src/components/customer/orderHistory/index.tsx +++ b/examples/finefoods-antd/src/components/customer/orderHistory/index.tsx @@ -87,7 +87,7 @@ export const CustomerOrderHistory = ({ customer }: Props) => { render={(amount) => { return ( { render={(amount) => { return ( { rightSlot={ { currency: "USD", style: "currency", }} - value={value / 100} + value={value} /> ); }} diff --git a/examples/finefoods-client/next.config.js b/examples/finefoods-client/next.config.js deleted file mode 100644 index 5735f7b1559f..000000000000 --- a/examples/finefoods-client/next.config.js +++ /dev/null @@ -1,5 +0,0 @@ -/** @type {import('next').NextConfig} */ -module.exports = { - reactStrictMode: true, - swcMinify: false, -}; diff --git a/examples/finefoods-client/next.config.mjs b/examples/finefoods-client/next.config.mjs new file mode 100644 index 000000000000..4678774e6d60 --- /dev/null +++ b/examples/finefoods-client/next.config.mjs @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {}; + +export default nextConfig; diff --git a/examples/finefoods-client/package.json b/examples/finefoods-client/package.json index 0dd88725b0e1..e570d68ff611 100644 --- a/examples/finefoods-client/package.json +++ b/examples/finefoods-client/package.json @@ -5,8 +5,7 @@ "scripts": { "build": "refine build && rm -rf .next/cache", "dev": "refine dev", - "start:prod": "refine start", - "svgr": "npx @svgr/cli src/icons -d src/components/icons --typescript --no-svgo" + "start:prod": "refine start" }, "dependencies": { "@refinedev/cli": "^2.16.31", @@ -15,7 +14,8 @@ "@refinedev/react-table": "^5.6.10", "@refinedev/simple-rest": "^5.0.6", "@tanstack/react-table": "^8.2.6", - "gsap": "^3.8.0", + "classnames": "^2.3.2", + "dayjs": "^1.10.7", "js-confetti": "^0.9.0", "next": "^14.1.0", "react": "^18.0.0", diff --git a/examples/finefoods-client/pages/[id]/[category]/index.tsx b/examples/finefoods-client/pages/[id]/[category]/index.tsx deleted file mode 100644 index 98ffea581896..000000000000 --- a/examples/finefoods-client/pages/[id]/[category]/index.tsx +++ /dev/null @@ -1,170 +0,0 @@ -/* eslint-disable react/jsx-key */ -import React from "react"; -import { GetServerSideProps } from "next"; -import { useRouter } from "next/router"; -import { GetListResponse } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; -import { useTable } from "@refinedev/react-table"; - -import { ColumnDef, flexRender } from "@tanstack/react-table"; - -import { - ProductListItem, - ChevronLeftIcon, - ChevronRightIcon, -} from "@components"; -import { ICategory, IProduct } from "@interfaces"; -import { API_URL } from "src/constants"; - -type CategoryPageProps = { - category: ICategory; - products: GetListResponse; -}; - -const Category: React.FC = ({ category, products }) => { - const { query } = useRouter(); - const { id } = query; - - const columns = React.useMemo[]>( - () => [ - { - id: "product", - accessorFn: (row) => row, - cell: function render({ row }) { - return ; - }, - }, - ], - [], - ); - - const { - options: { - state: { pagination }, - }, - getRowModel, - setPageIndex, - getCanPreviousPage, - getCanNextPage, - getPageOptions, - nextPage, - previousPage, - } = useTable({ - columns, - refineCoreProps: { - resource: "products", - queryOptions: { - initialData: products, - }, - initialPageSize: 6, - permanentFilter: [ - { - field: "category.id", - operator: "eq", - value: id, - }, - ], - }, - }); - - return ( -
-
-

- {category.title} -

-
- - - {getRowModel().rows.map((row) => { - return ( - - {row.getVisibleCells().map((cell) => { - return ( - - ); - })} - - ); - })} - -
- {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} -
- -
- - {getPageOptions().map((page) => ( - - ))} - -
-
- ); -}; - -export default Category; - -export const getServerSideProps: GetServerSideProps = async (context) => { - const { id } = context.query; - - try { - const { data: categoryData } = await dataProvider(API_URL).getOne({ - resource: "categories", - id: id as string, - }); - - const productData = await dataProvider(API_URL).getList({ - resource: "products", - pagination: { - pageSize: 6, - }, - filters: [ - { - field: "category.id", - operator: "eq", - value: id, - }, - ], - }); - - return { - props: { category: categoryData, products: productData }, - }; - } catch (error) { - return { - redirect: { - destination: "/", - permanent: false, - }, - }; - } -}; diff --git a/examples/finefoods-client/pages/_app.tsx b/examples/finefoods-client/pages/_app.tsx deleted file mode 100644 index 29f032e7d4ab..000000000000 --- a/examples/finefoods-client/pages/_app.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import type { AppProps } from "next/app"; -import Head from "next/head"; -import { GitHubBanner, Refine } from "@refinedev/core"; -import dataProvider from "@refinedev/simple-rest"; -import routerProvider from "@refinedev/nextjs-router/pages"; - -import { Layout } from "@components"; -import { BasketContextProvider } from "@context"; -import { API_URL } from "src/constants"; - -import "src/styles/globals.css"; - -function MyApp({ Component, pageProps }: AppProps): JSX.Element { - return ( - <> - - - - Finefoods headless storefront example - refine - - - - - - - - - - - ); -} - -export default MyApp; diff --git a/examples/finefoods-client/pages/index.tsx b/examples/finefoods-client/pages/index.tsx deleted file mode 100644 index 9cdae3192de6..000000000000 --- a/examples/finefoods-client/pages/index.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { GetServerSideProps } from "next"; -import dataProvider from "@refinedev/simple-rest"; - -import { Promotional, CategoryCard, ProductCard } from "@components"; -import { ICategory, IProduct } from "@interfaces"; -import { API_URL } from "src/constants"; - -type HomePageProps = { - categories: ICategory[]; - products: IProduct[]; -}; - -export const Home: React.FC = ({ categories, products }) => { - const dealsOfDayProducts = products.slice(0, 3); - const fastAndDeliciousProducts = products.slice(3); - - const getBadgeProps = (index: number) => { - switch (index) { - case 0: - return { - badgeTitle: "25%", - }; - case 1: - return { - badgeTitle: "1+1", - badgeBgColor: "#67BE23", - }; - case 2: - return { - badgeTitle: "FREE BEVERAGE", - badgeBgColor: "#0CCEE9", - }; - default: - return { - badgeTitle: "25%", - }; - } - }; - - return ( -
- -
-
- {categories.map((category) => ( - - ))} -
-
-

- Deals of the day -

-
-
- {dealsOfDayProducts.map((product, index) => ( -
- -
- ))} -
-
-

- Fast & delicious -

-
-
- {fastAndDeliciousProducts.map((product) => ( -
- -
- ))} -
-
-
- ); -}; - -export default Home; - -export const getServerSideProps: GetServerSideProps = async () => { - const { data: categoryData } = (await dataProvider(API_URL).getMany?.({ - resource: "categories", - ids: ["1", "2", "3"], - })) ?? { data: [] }; - - const { data: productData } = await dataProvider(API_URL).getList({ - resource: "products", - pagination: { - pageSize: 5, - }, - }); - - return { - props: { categories: categoryData, products: productData }, - }; -}; diff --git a/examples/finefoods-client/public/images/plate.png b/examples/finefoods-client/public/images/plate.png index 3e7dba7ad930..0bbaba0370d9 100644 Binary files a/examples/finefoods-client/public/images/plate.png and b/examples/finefoods-client/public/images/plate.png differ diff --git a/examples/finefoods-client/src/app/categories/[id]/layout.tsx b/examples/finefoods-client/src/app/categories/[id]/layout.tsx new file mode 100644 index 000000000000..1039fc2686d6 --- /dev/null +++ b/examples/finefoods-client/src/app/categories/[id]/layout.tsx @@ -0,0 +1,69 @@ +import { CategoriesNavLinks } from "@/components/categories"; +import { ProductsTableSkeleton } from "@/components/products/table"; +import { dataProvider } from "@/providers/data-provider/server"; +import { Category } from "@/types"; +import { GetListResponse } from "@refinedev/core"; +import { PropsWithChildren, Suspense } from "react"; + +type Props = { + params: { id: string }; +}; + +export default async function Layout({ + children, + params, +}: PropsWithChildren) { + const { categories } = await getData(); + + return ( +
+
+
+

+ Delight +
in every bite!
+

+

+ Delivering happiness,{" "} + on time. +

+
+ Plate with pasta +
+
+ + }>{children} +
+
+ ); +} + +async function getData() { + try { + const categoriesData: GetListResponse = + await dataProvider.getList({ + resource: "categories", + pagination: { + mode: "off", + }, + }); + + return { + categories: categoriesData, + }; + } catch (error) { + return { + categories: { + total: 0, + data: [], + }, + }; + } +} diff --git a/examples/finefoods-client/src/app/categories/[id]/page.tsx b/examples/finefoods-client/src/app/categories/[id]/page.tsx new file mode 100644 index 000000000000..1c038d17e665 --- /dev/null +++ b/examples/finefoods-client/src/app/categories/[id]/page.tsx @@ -0,0 +1,76 @@ +import React from "react"; +import { GetListParams, GetListResponse } from "@refinedev/core"; +import { dataProvider } from "@/providers/data-provider/server"; +import { Product } from "@/types"; +import { ProductsTable } from "@/components/products/table"; + +type CategoryShowPageProps = { + params: { id: string }; + searchParams: { [key: string]: string | string[] | undefined }; +}; + +export default async function CategoryShowPage({ + params, + searchParams, +}: CategoryShowPageProps) { + const { products } = await getData({ + categoryId: params.id, + productPaginationOptions: { + current: searchParams.current + ? Number(searchParams.current as string) + : 1, + }, + }); + + return ( + + ); +} + +type GetDataProps = { + categoryId: string; + productPaginationOptions?: GetListParams["pagination"]; +}; + +async function getData(props: GetDataProps) { + try { + const productData: GetListResponse = await dataProvider.getList({ + resource: "products", + pagination: { + pageSize: 6, + ...props.productPaginationOptions, + }, + filters: [ + { + field: "category.id", + operator: "eq", + value: props.categoryId, + }, + ], + }); + + return { + products: productData, + }; + } catch (error) { + return { + products: { + total: 0, + data: [], + }, + }; + } +} diff --git a/examples/finefoods-client/src/app/icon.ico b/examples/finefoods-client/src/app/icon.ico new file mode 100644 index 000000000000..a3df394d64c7 Binary files /dev/null and b/examples/finefoods-client/src/app/icon.ico differ diff --git a/examples/finefoods-client/src/app/layout.tsx b/examples/finefoods-client/src/app/layout.tsx new file mode 100644 index 000000000000..29ef5cc937c0 --- /dev/null +++ b/examples/finefoods-client/src/app/layout.tsx @@ -0,0 +1,52 @@ +import { Suspense } from "react"; +import { Metadata } from "next"; +import { GitHubBanner, Refine } from "@refinedev/core"; +import routerProvider from "@refinedev/nextjs-router"; +import { Layout } from "@/components/layout"; +import { BasketContextProvider } from "@/context"; +import { dataProvider } from "@/providers/data-provider/client"; +import "src/styles/globals.css"; + +export const metadata: Metadata = { + title: "RefineFoods headless storefront example", + description: "Generated by create Refine app", + icons: { + icon: "/favicon.ico", + }, +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + <> + + + + + + + {children} + + + + + + + ); +} diff --git a/examples/finefoods-client/src/app/not-found.tsx b/examples/finefoods-client/src/app/not-found.tsx new file mode 100644 index 000000000000..838964add821 --- /dev/null +++ b/examples/finefoods-client/src/app/not-found.tsx @@ -0,0 +1,12 @@ +"use client"; + +import { ErrorComponent } from "@refinedev/core"; +import { Suspense } from "react"; + +export default function NotFound() { + return ( + + + + ); +} diff --git a/examples/finefoods-client/src/app/orders/[id]/page.tsx b/examples/finefoods-client/src/app/orders/[id]/page.tsx new file mode 100644 index 000000000000..599a16e847f6 --- /dev/null +++ b/examples/finefoods-client/src/app/orders/[id]/page.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import { GetOneResponse } from "@refinedev/core"; +import { dataProvider } from "@/providers/data-provider/server"; +import { Order } from "@/types"; +import { redirect } from "next/navigation"; +import { OrderDetail } from "@/components/orders"; + +type OrderShowPagePageProps = { + params: { id: string }; + searchParams: { [key: string]: string | string[] | undefined }; +}; + +export default async function OrderShowPage({ + params, +}: OrderShowPagePageProps) { + const { order } = await getData({ + orderId: params.id, + }); + + if (!order) { + return redirect("/"); + } + + return ( + + ); +} + +type GetDataProps = { + orderId: string; +}; + +async function getData(props: GetDataProps) { + try { + const orderData: GetOneResponse = await dataProvider.getOne({ + resource: "orders", + id: props.orderId, + }); + + return { + order: orderData, + }; + } catch (error) { + return { + order: null, + }; + } +} diff --git a/examples/finefoods-client/src/app/page.tsx b/examples/finefoods-client/src/app/page.tsx new file mode 100644 index 000000000000..b0e58d9c3167 --- /dev/null +++ b/examples/finefoods-client/src/app/page.tsx @@ -0,0 +1,5 @@ +import { redirect } from "next/navigation"; + +export default function IndexPage() { + return redirect("/categories/1"); +} diff --git a/examples/finefoods-client/src/components/categories/index.ts b/examples/finefoods-client/src/components/categories/index.ts new file mode 100644 index 000000000000..7ea9f2e29890 --- /dev/null +++ b/examples/finefoods-client/src/components/categories/index.ts @@ -0,0 +1 @@ +export { CategoriesNavLinks } from "./nav-links"; diff --git a/examples/finefoods-client/src/components/categories/nav-links/index.tsx b/examples/finefoods-client/src/components/categories/nav-links/index.tsx new file mode 100644 index 000000000000..301b5f1267f2 --- /dev/null +++ b/examples/finefoods-client/src/components/categories/nav-links/index.tsx @@ -0,0 +1,41 @@ +"use client"; + +import { GetListResponse, useNavigation } from "@refinedev/core"; +import Link from "next/link"; +import { Category } from "@/types"; +import cn from "classnames"; + +type Props = { + categories: GetListResponse; + selectedCategoryId: string; +}; + +export const CategoriesNavLinks = ({ + categories, + selectedCategoryId, +}: Props) => { + const { showUrl } = useNavigation(); + + return ( +
+
+ {categories.data.map((category) => { + return ( + +
+ {category.title} +
+ + ); + })} +
+
+ ); +}; diff --git a/examples/finefoods-client/src/components/categoryCard.tsx b/examples/finefoods-client/src/components/categoryCard.tsx deleted file mode 100644 index 5290b0aef02c..000000000000 --- a/examples/finefoods-client/src/components/categoryCard.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import Link from "next/link"; - -export type CategoryCardProps = { - id: number; - title: string; - backgroundImg?: string; -}; - -export const CategoryCard: React.FC = ({ - id, - title, - backgroundImg = "https://images.unsplash.com/photo-1595475207225-428b62bda831?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80", -}) => { - return ( - -
-
- {title} -
-
- - ); -}; diff --git a/examples/finefoods-client/src/components/icons/BasketIcon.tsx b/examples/finefoods-client/src/components/icons/BasketIcon.tsx index 7c7a5cde8dfe..9394ac282059 100644 --- a/examples/finefoods-client/src/components/icons/BasketIcon.tsx +++ b/examples/finefoods-client/src/components/icons/BasketIcon.tsx @@ -1,3 +1,5 @@ +"use client"; + import * as React from "react"; import { SVGProps } from "react"; diff --git a/examples/finefoods-client/src/components/icons/ChevronDownIcon.tsx b/examples/finefoods-client/src/components/icons/ChevronDownIcon.tsx index 3637010845f8..f20ad7b005c2 100644 --- a/examples/finefoods-client/src/components/icons/ChevronDownIcon.tsx +++ b/examples/finefoods-client/src/components/icons/ChevronDownIcon.tsx @@ -1,3 +1,5 @@ +"use client"; + import * as React from "react"; import { SVGProps } from "react"; diff --git a/examples/finefoods-client/src/components/icons/ChevronLeftIcon.tsx b/examples/finefoods-client/src/components/icons/ChevronLeftIcon.tsx index 0a65109d1bbf..2ff21c0b78e8 100644 --- a/examples/finefoods-client/src/components/icons/ChevronLeftIcon.tsx +++ b/examples/finefoods-client/src/components/icons/ChevronLeftIcon.tsx @@ -1,3 +1,5 @@ +"use client"; + import * as React from "react"; import { SVGProps } from "react"; diff --git a/examples/finefoods-client/src/components/icons/ChevronRightIcon.tsx b/examples/finefoods-client/src/components/icons/ChevronRightIcon.tsx index 835880fa2839..9cea9518a72b 100644 --- a/examples/finefoods-client/src/components/icons/ChevronRightIcon.tsx +++ b/examples/finefoods-client/src/components/icons/ChevronRightIcon.tsx @@ -1,3 +1,5 @@ +"use client"; + import * as React from "react"; import { SVGProps } from "react"; diff --git a/examples/finefoods-client/src/components/icons/ChevronUpIcon.tsx b/examples/finefoods-client/src/components/icons/ChevronUpIcon.tsx index c43d40d4fbcb..d915967f37b3 100644 --- a/examples/finefoods-client/src/components/icons/ChevronUpIcon.tsx +++ b/examples/finefoods-client/src/components/icons/ChevronUpIcon.tsx @@ -1,4 +1,7 @@ +"use client"; + import * as React from "react"; + import { SVGProps } from "react"; const SvgChevronUpIcon = (props: SVGProps) => ( diff --git a/examples/finefoods-client/src/components/icons/CloseIcon.tsx b/examples/finefoods-client/src/components/icons/CloseIcon.tsx index 747e7f26f84d..0b2de363537e 100644 --- a/examples/finefoods-client/src/components/icons/CloseIcon.tsx +++ b/examples/finefoods-client/src/components/icons/CloseIcon.tsx @@ -1,4 +1,7 @@ +"use client"; + import * as React from "react"; + import { SVGProps } from "react"; const SvgCloseIcon = (props: SVGProps) => ( diff --git a/examples/finefoods-client/src/components/icons/DividerVerticalIcon.tsx b/examples/finefoods-client/src/components/icons/DividerVerticalIcon.tsx new file mode 100644 index 000000000000..3ed9f90613dd --- /dev/null +++ b/examples/finefoods-client/src/components/icons/DividerVerticalIcon.tsx @@ -0,0 +1,20 @@ +"use client"; + +import * as React from "react"; + +import { SVGProps } from "react"; + +const DividerVerticalIcon = (props: SVGProps) => ( + + + +); + +export default DividerVerticalIcon; diff --git a/examples/finefoods-client/src/components/icons/FastMotocycleIcon.tsx b/examples/finefoods-client/src/components/icons/FastMotocycleIcon.tsx index 175141ca1180..65d910397fa3 100644 --- a/examples/finefoods-client/src/components/icons/FastMotocycleIcon.tsx +++ b/examples/finefoods-client/src/components/icons/FastMotocycleIcon.tsx @@ -1,4 +1,7 @@ +"use client"; + import * as React from "react"; + import { SVGProps } from "react"; const SvgFastMotocycleIcon = (props: SVGProps) => ( diff --git a/examples/finefoods-client/src/components/icons/FinefoodsIcon.tsx b/examples/finefoods-client/src/components/icons/FinefoodsIcon.tsx index ece86653c070..d3bd2a8a6751 100644 --- a/examples/finefoods-client/src/components/icons/FinefoodsIcon.tsx +++ b/examples/finefoods-client/src/components/icons/FinefoodsIcon.tsx @@ -1,26 +1,59 @@ +"use client"; + import * as React from "react"; import { SVGProps } from "react"; -const SvgFinefoodsIcon = (props: SVGProps) => ( +const FinefoodsIcon = (props: SVGProps) => ( + + + + + + + + + + ); -export default SvgFinefoodsIcon; +export default FinefoodsIcon; diff --git a/examples/finefoods-client/src/components/icons/MotorcycleIcon.tsx b/examples/finefoods-client/src/components/icons/MotorcycleIcon.tsx index 2e4e1f51f4ca..f09427cc9e33 100644 --- a/examples/finefoods-client/src/components/icons/MotorcycleIcon.tsx +++ b/examples/finefoods-client/src/components/icons/MotorcycleIcon.tsx @@ -1,3 +1,5 @@ +"use client"; + import * as React from "react"; import { SVGProps } from "react"; diff --git a/examples/finefoods-client/src/components/icons/OrderIcon.tsx b/examples/finefoods-client/src/components/icons/OrderIcon.tsx index 2cc4b404ad83..0e675f310f08 100644 --- a/examples/finefoods-client/src/components/icons/OrderIcon.tsx +++ b/examples/finefoods-client/src/components/icons/OrderIcon.tsx @@ -1,3 +1,5 @@ +"use client"; + import * as React from "react"; import { SVGProps } from "react"; diff --git a/examples/finefoods-client/src/components/icons/PlusSquareIcon.tsx b/examples/finefoods-client/src/components/icons/PlusSquareIcon.tsx index 8afd51399cab..78c45cdf3ea7 100644 --- a/examples/finefoods-client/src/components/icons/PlusSquareIcon.tsx +++ b/examples/finefoods-client/src/components/icons/PlusSquareIcon.tsx @@ -1,3 +1,5 @@ +"use client"; + import * as React from "react"; import { SVGProps } from "react"; diff --git a/examples/finefoods-client/src/components/icons/RefineIcon.tsx b/examples/finefoods-client/src/components/icons/RefineIcon.tsx new file mode 100644 index 000000000000..47821d5874e1 --- /dev/null +++ b/examples/finefoods-client/src/components/icons/RefineIcon.tsx @@ -0,0 +1,39 @@ +"use client"; + +import * as React from "react"; +import { SVGProps } from "react"; + +const RefineIcon = (props: SVGProps) => ( + + + + + + + +); + +export default RefineIcon; diff --git a/examples/finefoods-client/src/components/icons/RefineLoveIcon.tsx b/examples/finefoods-client/src/components/icons/RefineLoveIcon.tsx deleted file mode 100644 index cc72adf0c4af..000000000000 --- a/examples/finefoods-client/src/components/icons/RefineLoveIcon.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from "react"; -import { SVGProps } from "react"; - -const SvgRefineLoveIcon = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - -); - -export default SvgRefineLoveIcon; diff --git a/examples/finefoods-client/src/components/icons/index.tsx b/examples/finefoods-client/src/components/icons/index.tsx index a201351dde7f..a4de71d1d829 100644 --- a/examples/finefoods-client/src/components/icons/index.tsx +++ b/examples/finefoods-client/src/components/icons/index.tsx @@ -9,4 +9,5 @@ export { default as FinefoodsIcon } from "./FinefoodsIcon"; export { default as MotorcycleIcon } from "./MotorcycleIcon"; export { default as OrderIcon } from "./OrderIcon"; export { default as PlusSquareIcon } from "./PlusSquareIcon"; -export { default as RefineLoveIcon } from "./RefineLoveIcon"; +export { default as RefineIcon } from "./RefineIcon"; +export { default as DividerVerticalIcon } from "./DividerVerticalIcon"; diff --git a/examples/finefoods-client/src/components/index.ts b/examples/finefoods-client/src/components/index.ts deleted file mode 100644 index 9ad09035ec11..000000000000 --- a/examples/finefoods-client/src/components/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -export * from "./layout"; -export * from "./footer"; -export * from "./header"; -export * from "./promotional"; -export * from "./categoryCard"; -export * from "./productCard"; -export * from "./productListItem"; -export * from "./ordersModal"; -export * from "./orderModalProductItem"; -export * from "./numberInput"; -export * from "./icons"; diff --git a/examples/finefoods-client/src/components/input/index.ts b/examples/finefoods-client/src/components/input/index.ts new file mode 100644 index 000000000000..d25c4d617d2f --- /dev/null +++ b/examples/finefoods-client/src/components/input/index.ts @@ -0,0 +1 @@ +export { NumberInput } from "./number"; diff --git a/examples/finefoods-client/src/components/numberInput.tsx b/examples/finefoods-client/src/components/input/number/index.tsx similarity index 56% rename from examples/finefoods-client/src/components/numberInput.tsx rename to examples/finefoods-client/src/components/input/number/index.tsx index b19e217f3f31..19e145299c4e 100644 --- a/examples/finefoods-client/src/components/numberInput.tsx +++ b/examples/finefoods-client/src/components/input/number/index.tsx @@ -1,26 +1,23 @@ -import { ChevronUpIcon, ChevronDownIcon } from "@components"; +import { ChevronUpIcon, ChevronDownIcon } from "@/components/icons"; type NumberInputProps = { value: number; - setValue: React.Dispatch>; + onIncrement: () => void; + onDecrement: () => void; + onChange: (value: number) => void; }; export const NumberInput: React.FC = ({ value, - setValue, + onIncrement, + onDecrement, + onChange, }) => { return (
@@ -28,23 +25,12 @@ export const NumberInput: React.FC = ({ className="focus:outline-primary focus:border-primary h-full w-8 border p-2 transition-colors" value={value} onChange={(event) => { - const parseNumber = Number(event.target.value); - - if (parseNumber >= 0) { - setValue(Number(event.target.value)); - } + onChange(Number(event.target.value)); }} /> diff --git a/examples/finefoods-client/src/components/layout.tsx b/examples/finefoods-client/src/components/layout.tsx deleted file mode 100644 index 06cd2a1e5d6f..000000000000 --- a/examples/finefoods-client/src/components/layout.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import { LayoutProps } from "@refinedev/core"; - -import { OrdersModal, Header, Footer } from "@components"; -import { useOrdesModalContext } from "@hooks"; - -export const Layout: React.FC = ({ children }) => { - const { ordersModalVisible } = useOrdesModalContext(); - return ( - <> -
-
-
{children}
-
-
- {ordersModalVisible && } - - ); -}; diff --git a/examples/finefoods-client/src/components/footer.tsx b/examples/finefoods-client/src/components/layout/footer.tsx similarity index 51% rename from examples/finefoods-client/src/components/footer.tsx rename to examples/finefoods-client/src/components/layout/footer.tsx index f1d098243ec7..62aa311aeb50 100644 --- a/examples/finefoods-client/src/components/footer.tsx +++ b/examples/finefoods-client/src/components/layout/footer.tsx @@ -1,51 +1,62 @@ +"use client"; + import React from "react"; import Link from "next/link"; - -import { MotorcycleIcon, FinefoodsIcon, RefineLoveIcon } from "@components"; +import { DividerVerticalIcon, RefineIcon } from "@/components/icons"; export const Footer: React.FC = () => { return (
-
-
- - -
-
+
+
- Quickstart + Documentation
+
- Tutorials + Tutorial
+
- Examples + Templates
+
Blog
- +
+ Developed in + +
); diff --git a/examples/finefoods-client/src/components/header.tsx b/examples/finefoods-client/src/components/layout/header.tsx similarity index 67% rename from examples/finefoods-client/src/components/header.tsx rename to examples/finefoods-client/src/components/layout/header.tsx index 9a2d4ffd4018..c89f125d84e6 100644 --- a/examples/finefoods-client/src/components/header.tsx +++ b/examples/finefoods-client/src/components/layout/header.tsx @@ -1,8 +1,10 @@ +"use client"; + import React from "react"; import Link from "next/link"; - -import { MotorcycleIcon, FinefoodsIcon, BasketIcon } from "@components"; -import { useBasketContext, useOrdesModalContext } from "@hooks"; +import { BasketIcon, FinefoodsIcon } from "@/components/icons"; +import { useBasketContext } from "@/hooks/useBasketContext"; +import { useOrdesModalContext } from "@/hooks/useOrdersModalContext"; export const Header: React.FC = () => { const { setOrdersModalVisible } = useOrdesModalContext(); @@ -10,11 +12,10 @@ export const Header: React.FC = () => { const isBasketHaveOrders = orders.length > 0; return ( -
+
- - +
{ {isBasketHaveOrders && (
{isBasketHaveOrders && `${orders.length} items /`}{" "} - - ${totalPrice / 100} - + ${totalPrice}
)} diff --git a/examples/finefoods-client/src/components/layout/index.ts b/examples/finefoods-client/src/components/layout/index.ts new file mode 100644 index 000000000000..f36526450948 --- /dev/null +++ b/examples/finefoods-client/src/components/layout/index.ts @@ -0,0 +1,3 @@ +export { Footer } from "./footer"; +export { Header } from "./header"; +export { Layout } from "./layout"; diff --git a/examples/finefoods-client/src/components/layout/layout.tsx b/examples/finefoods-client/src/components/layout/layout.tsx new file mode 100644 index 000000000000..268745f671c5 --- /dev/null +++ b/examples/finefoods-client/src/components/layout/layout.tsx @@ -0,0 +1,23 @@ +"use client"; + +import React from "react"; +import { LayoutProps } from "@refinedev/core"; +import { OrdersModal } from "@/components/orders"; +import { Footer } from "@/components/layout/footer"; +import { Header } from "@/components/layout/header"; +import { useOrdesModalContext } from "@/hooks/useOrdersModalContext"; + +export const Layout: React.FC = ({ children }) => { + const { ordersModalVisible } = useOrdesModalContext(); + + return ( + <> +
+
+
{children}
+
+
+ {ordersModalVisible && } + + ); +}; diff --git a/examples/finefoods-client/src/components/orderModalProductItem.tsx b/examples/finefoods-client/src/components/orderModalProductItem.tsx deleted file mode 100644 index 77fed19e2ad5..000000000000 --- a/examples/finefoods-client/src/components/orderModalProductItem.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { useBasketContext } from "@hooks"; -import { IBasketOrder } from "@interfaces"; - -export const OrderModalProductItem: React.FC<{ order: IBasketOrder }> = ({ - order, -}) => { - const { products } = useBasketContext(); - const { amount, productId } = order; - const product = products.find((p) => p.id === productId); - - return ( -
-
- {product?.name} -

{product?.name}

-
-
- ${(product?.price ?? 0) / 100} x{" "} - {amount} -
-
- ); -}; diff --git a/examples/finefoods-client/pages/order/[id]/index.tsx b/examples/finefoods-client/src/components/orders/detail/index.tsx similarity index 56% rename from examples/finefoods-client/pages/order/[id]/index.tsx rename to examples/finefoods-client/src/components/orders/detail/index.tsx index 13b22d4ac6aa..a406760a18db 100644 --- a/examples/finefoods-client/pages/order/[id]/index.tsx +++ b/examples/finefoods-client/src/components/orders/detail/index.tsx @@ -1,59 +1,50 @@ -import { useLayoutEffect, useRef, useState } from "react"; -import { GetServerSideProps } from "next"; -import dataProvider from "@refinedev/simple-rest"; -import JSConfetti from "js-confetti"; -import { gsap, Power3 } from "gsap"; +"use client"; -import { FastMotocycleIcon, OrderIcon } from "@components"; -import { IOrder } from "@interfaces"; -import { API_URL, TRANSLATIONS_BON_APPETIT } from "src/constants"; +import { UseShowProps, useShow } from "@refinedev/core"; +import { useLayoutEffect } from "react"; +import JSConfetti from "js-confetti"; +import { FastMotocycleIcon, OrderIcon } from "@/components/icons"; +import { TRANSLATIONS_BON_APPETIT } from "@/constants"; +import { Order } from "@/types"; +import dayjs from "dayjs"; type OrderPageProps = { - order: IOrder; + useShowProps?: UseShowProps; }; -export const OrderDetail: React.FC = ({ order }) => { - const el = useRef(null); - const q = gsap.utils.selector(el); - - const [showMessage, setShowMessage] = useState(false); - const [timeline] = useState(() => gsap.timeline()); +export const OrderDetail: React.FC = ({ useShowProps }) => { + const { queryResult } = useShow({ + resource: "orders", + ...useShowProps, + }); + const order = queryResult.data?.data; useLayoutEffect(() => { const jsConfetti = new JSConfetti(); setTimeout(() => { jsConfetti.addConfetti(); }, 500); - - const motoAnimation = timeline.to(q(".moto"), { - rotate: -30, - duration: 1, - scale: 1.2, - ease: Power3.easeIn, - onComplete: () => { - timeline.to(q(".moto"), { - x: 200, - duration: 4, - rotate: 0, - ease: Power3.easeOut, - onComplete: () => { - setShowMessage(true); - }, - }); - }, - }); - return () => { - motoAnimation.kill(); - }; }, []); + if (!order) { + return null; + } + return ( -
+

Order received

+ + Manage the order +

Order Summary

@@ -65,7 +56,7 @@ export const OrderDetail: React.FC = ({ order }) => {

Order Date:

-

{order.createdAt}

+

{dayjs(order.createdAt).format("DD.MM.YYYY HH:mm")}

Total:

@@ -86,7 +77,7 @@ export const OrderDetail: React.FC = ({ order }) => {

Delivery Details

-
+

Address

{order.adress.text}

@@ -95,28 +86,19 @@ export const OrderDetail: React.FC = ({ order }) => {

12:55

-
- {order.courier.name} -
- {showMessage && ( - - Manage the order - - )} - +
+
+

{order.courier.name} will deliver your order in 30 minutes.

+ {order.courier.name}
@@ -137,27 +119,3 @@ export const OrderDetail: React.FC = ({ order }) => {
); }; - -export default OrderDetail; - -export const getServerSideProps: GetServerSideProps = async (conp) => { - const { id } = conp.query; - - try { - const { data: orderData } = await dataProvider(API_URL).getOne({ - resource: "orders", - id: id as string, - }); - - return { - props: { order: orderData }, - }; - } catch (error) { - return { - redirect: { - destination: "/", - permanent: false, - }, - }; - } -}; diff --git a/examples/finefoods-client/src/components/orders/index.ts b/examples/finefoods-client/src/components/orders/index.ts new file mode 100644 index 000000000000..f75f5ad52b93 --- /dev/null +++ b/examples/finefoods-client/src/components/orders/index.ts @@ -0,0 +1,2 @@ +export { OrdersModal } from "./modal"; +export { OrderDetail } from "./detail"; diff --git a/examples/finefoods-client/src/components/ordersModal.tsx b/examples/finefoods-client/src/components/orders/modal/index.tsx similarity index 62% rename from examples/finefoods-client/src/components/ordersModal.tsx rename to examples/finefoods-client/src/components/orders/modal/index.tsx index 6321e65e6c8f..8577e2463579 100644 --- a/examples/finefoods-client/src/components/ordersModal.tsx +++ b/examples/finefoods-client/src/components/orders/modal/index.tsx @@ -1,21 +1,18 @@ +"use client"; import { useRef } from "react"; import { useCreate, useGo } from "@refinedev/core"; - -import { - useBasketContext, - useOrdesModalContext, - useOnClickOutside, -} from "@hooks"; - -import { OrderModalProductItem, OrderIcon, CloseIcon } from "@components"; -import { IOrder } from "@interfaces"; +import { CloseIcon, OrderIcon } from "@/components/icons"; +import { useOrdesModalContext } from "@/hooks/useOrdersModalContext"; +import { useBasketContext } from "@/hooks/useBasketContext"; +import { useOnClickOutside } from "@/hooks/useOnClickOutside"; +import { Order } from "@/types"; export const OrdersModal: React.FC = () => { const ref = useRef(null); const go = useGo(); const { setOrdersModalVisible } = useOrdesModalContext(); const { orders, totalPrice, products, dispatch } = useBasketContext(); - const { mutate } = useCreate(); + const { mutate } = useCreate(); const handleClickOutside = () => { setOrdersModalVisible(false); @@ -42,9 +39,31 @@ export const OrdersModal: React.FC = () => {
{orders.length ? ( - orders.map((order, index) => ( - - )) + orders.map((order) => { + const { amount, productId } = order; + const product = products.find((p) => p.id === productId); + return ( +
+
+ {product?.name} +

{product?.name}

+
+
+ + ${product?.price ?? 0} + {" "} + x {amount} +
+
+ ); + }) ) : (

No have any items. @@ -55,7 +74,7 @@ export const OrdersModal: React.FC = () => {

Total: - {orders.length} items / ${totalPrice / 100} + {orders.length} items / ${totalPrice}
-
-
-
- ); -}; diff --git a/examples/finefoods-client/src/components/productListItem.tsx b/examples/finefoods-client/src/components/productListItem.tsx deleted file mode 100644 index 491f0f926a25..000000000000 --- a/examples/finefoods-client/src/components/productListItem.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useState } from "react"; - -import { NumberInput, PlusSquareIcon } from "@components"; -import { useBasketContext } from "@hooks"; -import { IProduct } from "@interfaces"; - -type ProducrtListItemProps = { - product: IProduct; -}; - -export const ProductListItem: React.FC = ({ - product, -}) => { - const { dispatch } = useBasketContext(); - const [amount, setAmount] = useState(1); - - return ( -
- -
-

{product.name}

-

{product.description}

-
-
- ${product.price / 100} -
-
- - -
-
- ); -}; diff --git a/examples/finefoods-client/src/components/products/table/index.ts b/examples/finefoods-client/src/components/products/table/index.ts new file mode 100644 index 000000000000..0482100185b0 --- /dev/null +++ b/examples/finefoods-client/src/components/products/table/index.ts @@ -0,0 +1,2 @@ +export { ProductsTable } from "./table"; +export { ProductsTableSkeleton } from "./skeleton"; diff --git a/examples/finefoods-client/src/components/products/table/skeleton.tsx b/examples/finefoods-client/src/components/products/table/skeleton.tsx new file mode 100644 index 000000000000..511ca7aaeca9 --- /dev/null +++ b/examples/finefoods-client/src/components/products/table/skeleton.tsx @@ -0,0 +1,32 @@ +import { PlusSquareIcon } from "@/components/icons"; + +export const ProductsTableSkeleton = () => { + return ( + + + {Array.from({ length: 6 }, (_, i) => i).map((_, index) => ( + + + + ))} + +
+
+
+
+
+
+
+
+
+
+
+
+ + Add to Card +
+
+
+
+ ); +}; diff --git a/examples/finefoods-client/src/components/products/table/table.tsx b/examples/finefoods-client/src/components/products/table/table.tsx new file mode 100644 index 000000000000..4e4f2480686b --- /dev/null +++ b/examples/finefoods-client/src/components/products/table/table.tsx @@ -0,0 +1,206 @@ +"use client"; + +import { useMemo } from "react"; +import { HttpError, useTableProps } from "@refinedev/core"; +import { useTable } from "@refinedev/react-table"; +import { ColumnDef, flexRender } from "@tanstack/react-table"; +import cn from "classnames"; +import { + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, + ChevronUpIcon, + PlusSquareIcon, +} from "@/components/icons"; +import { useBasketContext } from "@/hooks/useBasketContext"; +import { Product } from "@/types"; + +type Props = { + refineCoreProps?: Partial>; +}; + +export const ProductsTable = ({ refineCoreProps }: Props) => { + const columns = useMemo[]>( + () => [ + { + id: "product", + accessorFn: (row) => row, + cell: function render({ row }) { + const product = row.original; + + return ( +
+ +
+

+ {product.name} +

+

{product.description}

+
+
+ ${product.price} +
+ +
+ ); + }, + }, + ], + [], + ); + + const { + options: { + state: { pagination }, + }, + getRowModel, + setPageIndex, + getCanPreviousPage, + getCanNextPage, + getPageOptions, + nextPage, + previousPage, + } = useTable({ + columns, + refineCoreProps: { + syncWithLocation: true, + resource: "products", + initialPageSize: 6, + ...(refineCoreProps || {}), + }, + }); + + return ( + <> + + + {getRowModel().rows.map((row) => { + return ( + + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + ); + })} + +
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} +
+ +
+ + {getPageOptions().map((page) => ( + + ))} + +
+ + ); +}; + +const OrderAmountInput = ({ productId }: { productId: number }) => { + const { dispatch, findOrderByProductId } = useBasketContext(); + + const order = findOrderByProductId(productId); + + return ( +
+
+ + { + let value = Number(event.target.value); + // is not a number + if (!/^\d+$/.test(event.target.value)) { + value = 0; + } + + dispatch({ + type: "setProductAmount", + payload: { + productId: productId, + amount: value, + }, + }); + }} + /> + +
+ +
+ ); +}; diff --git a/examples/finefoods-client/src/components/promotional.tsx b/examples/finefoods-client/src/components/promotional.tsx deleted file mode 100644 index f774df2c3403..000000000000 --- a/examples/finefoods-client/src/components/promotional.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import Link from "next/link"; - -export const Promotional: React.FC = () => { - return ( -
-
-
-

- Delight
in every bite! -

-

- Delivering happiness,{" "} - on time. -

-
- - Explore Menu - -
-
- Plate with pasta -
-
- ); -}; diff --git a/examples/finefoods-client/src/context/basketContextProvider.tsx b/examples/finefoods-client/src/context/basketContextProvider.tsx index 26cff865b01b..ffd90a628614 100644 --- a/examples/finefoods-client/src/context/basketContextProvider.tsx +++ b/examples/finefoods-client/src/context/basketContextProvider.tsx @@ -1,28 +1,90 @@ +"use client"; + import React, { createContext, PropsWithChildren, useReducer } from "react"; import { useMany } from "@refinedev/core"; - -import { IBasketOrder, IProduct } from "../interfaces"; -import { OrdersModalContextProvider } from "@context"; +import { OrdersModalContextProvider } from "@/context"; +import { BasketOrder, Product } from "../types"; export const BasketContext = createContext<{ - orders: IBasketOrder[]; + orders: BasketOrder[]; + findOrderByProductId: (productId: number) => BasketOrder | undefined; dispatch: Function; totalPrice: number; - products: IProduct[]; -}>({ orders: [], dispatch: () => null, totalPrice: 0, products: [] }); + products: Product[]; +}>({ + orders: [], + findOrderByProductId: () => undefined, + dispatch: () => null, + totalPrice: 0, + products: [], +}); -const initialBasket: IBasketOrder[] = []; +const initialBasket: BasketOrder[] = []; const basketReducer = ( - state: IBasketOrder[], + state: BasketOrder[], action: { - payload: IBasketOrder; + payload: BasketOrder; type: string; }, -): IBasketOrder[] => { +): BasketOrder[] => { switch (action.type) { - case "addProduct": - return [...state, { ...action.payload }]; + case "addProduct": { + const currentOrder = state.find( + (order) => order.productId === action.payload.productId, + ); + + if (currentOrder) { + return state.map((order) => + order.productId === action.payload.productId + ? { ...order, amount: order.amount + 1 } + : order, + ); + } + + return [...state, action.payload]; + } + + case "incrementProductAmount": + return state.map((order) => { + return order.productId === action.payload.productId + ? { ...order, amount: order.amount + 1 } + : order; + }); + case "decrementProductAmount": { + const currentOrder = state.find( + (order) => order.productId === action.payload.productId, + ); + if (!currentOrder) { + return state; + } + + if (currentOrder.amount === 1) { + return state.filter( + (order) => order.productId !== action.payload.productId, + ); + } + + return state.map((order) => + order.productId === action.payload.productId + ? { ...order, amount: order.amount - 1 } + : order, + ); + } + case "setProductAmount": { + if (action.payload.amount <= 0) { + return state.filter( + (order) => order.productId !== action.payload.productId, + ); + } + + return state.map((order) => + order.productId === action.payload.productId + ? { ...order, amount: action.payload.amount } + : order, + ); + } + case "resetBasket": return []; default: @@ -39,7 +101,7 @@ export const BasketContextProvider: React.FC = ({ .map((o) => o.productId) .filter((value, index, array) => array.indexOf(value) === index); - const { data: productsData } = useMany({ + const { data: productsData } = useMany({ resource: "products", ids: productIds, queryOptions: { @@ -55,10 +117,15 @@ export const BasketContextProvider: React.FC = ({ return total + currentValue.amount * (product?.price ?? 0); }, 0); + const findOrderByProductId = (productId: number) => { + return orders.find((order) => order.productId === productId); + }; + return ( { const basket = useContext(BasketContext); diff --git a/examples/finefoods-client/src/hooks/useEventListener.ts b/examples/finefoods-client/src/hooks/useEventListener.ts index 77e276664ecc..ad0627cd774a 100644 --- a/examples/finefoods-client/src/hooks/useEventListener.ts +++ b/examples/finefoods-client/src/hooks/useEventListener.ts @@ -1,3 +1,5 @@ +"use client"; + import { RefObject, useEffect, useRef } from "react"; function useEventListener( diff --git a/examples/finefoods-client/src/hooks/useOnClickOutside.ts b/examples/finefoods-client/src/hooks/useOnClickOutside.ts index 7a5aaf433bd5..df56d93f6ab2 100644 --- a/examples/finefoods-client/src/hooks/useOnClickOutside.ts +++ b/examples/finefoods-client/src/hooks/useOnClickOutside.ts @@ -1,3 +1,5 @@ +"use client"; + import { RefObject } from "react"; import { useEventListener } from "./useEventListener"; diff --git a/examples/finefoods-client/src/hooks/useOrdersModalContext.ts b/examples/finefoods-client/src/hooks/useOrdersModalContext.ts index 47e0edbfe458..7fe99a575782 100644 --- a/examples/finefoods-client/src/hooks/useOrdersModalContext.ts +++ b/examples/finefoods-client/src/hooks/useOrdersModalContext.ts @@ -1,6 +1,8 @@ +"use client"; + import { useContext } from "react"; -import { OrdersModalContext } from "@context"; +import { OrdersModalContext } from "@/context"; export const useOrdesModalContext = () => { const { ordersModalVisible, setOrdersModalVisible } = diff --git a/examples/finefoods-client/src/icons/basketIcon.svg b/examples/finefoods-client/src/icons/basketIcon.svg deleted file mode 100644 index 716d31084066..000000000000 --- a/examples/finefoods-client/src/icons/basketIcon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/examples/finefoods-client/src/icons/chevronDownIcon.svg b/examples/finefoods-client/src/icons/chevronDownIcon.svg deleted file mode 100644 index a406c10c4bc5..000000000000 --- a/examples/finefoods-client/src/icons/chevronDownIcon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/finefoods-client/src/icons/chevronLeftIcon.svg b/examples/finefoods-client/src/icons/chevronLeftIcon.svg deleted file mode 100644 index 1359a3bf5364..000000000000 --- a/examples/finefoods-client/src/icons/chevronLeftIcon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/finefoods-client/src/icons/chevronRightIcon.svg b/examples/finefoods-client/src/icons/chevronRightIcon.svg deleted file mode 100644 index 1f6a529096b0..000000000000 --- a/examples/finefoods-client/src/icons/chevronRightIcon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/finefoods-client/src/icons/chevronUpIcon.svg b/examples/finefoods-client/src/icons/chevronUpIcon.svg deleted file mode 100644 index 85ca2bc374dd..000000000000 --- a/examples/finefoods-client/src/icons/chevronUpIcon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/finefoods-client/src/icons/closeIcon.svg b/examples/finefoods-client/src/icons/closeIcon.svg deleted file mode 100644 index 50e0589d120e..000000000000 --- a/examples/finefoods-client/src/icons/closeIcon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/finefoods-client/src/icons/fastMotocycleIcon.svg b/examples/finefoods-client/src/icons/fastMotocycleIcon.svg deleted file mode 100644 index c58673317fe0..000000000000 --- a/examples/finefoods-client/src/icons/fastMotocycleIcon.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/examples/finefoods-client/src/icons/finefoodsIcon.svg b/examples/finefoods-client/src/icons/finefoodsIcon.svg deleted file mode 100644 index f2c817d89539..000000000000 --- a/examples/finefoods-client/src/icons/finefoodsIcon.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - diff --git a/examples/finefoods-client/src/icons/motorcycleIcon.svg b/examples/finefoods-client/src/icons/motorcycleIcon.svg deleted file mode 100644 index c3547e57acad..000000000000 --- a/examples/finefoods-client/src/icons/motorcycleIcon.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/examples/finefoods-client/src/icons/orderIcon.svg b/examples/finefoods-client/src/icons/orderIcon.svg deleted file mode 100644 index caaecb215d7c..000000000000 --- a/examples/finefoods-client/src/icons/orderIcon.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/examples/finefoods-client/src/icons/plusSquareIcon.svg b/examples/finefoods-client/src/icons/plusSquareIcon.svg deleted file mode 100644 index 44844c434fa2..000000000000 --- a/examples/finefoods-client/src/icons/plusSquareIcon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/finefoods-client/src/icons/refineLoveIcon.svg b/examples/finefoods-client/src/icons/refineLoveIcon.svg deleted file mode 100644 index ab68cd459fcb..000000000000 --- a/examples/finefoods-client/src/icons/refineLoveIcon.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/examples/finefoods-client/src/providers/data-provider/client.ts b/examples/finefoods-client/src/providers/data-provider/client.ts new file mode 100644 index 000000000000..2336ec351117 --- /dev/null +++ b/examples/finefoods-client/src/providers/data-provider/client.ts @@ -0,0 +1,6 @@ +"use client"; + +import { API_URL } from "@/constants"; +import dataProviderSimpleRest from "@refinedev/simple-rest"; + +export const dataProvider = dataProviderSimpleRest(API_URL); diff --git a/examples/finefoods-client/src/providers/data-provider/server.ts b/examples/finefoods-client/src/providers/data-provider/server.ts new file mode 100644 index 000000000000..6101af845193 --- /dev/null +++ b/examples/finefoods-client/src/providers/data-provider/server.ts @@ -0,0 +1,4 @@ +import { API_URL } from "@/constants"; +import dataProviderSimpleRest from "@refinedev/simple-rest"; + +export const dataProvider = dataProviderSimpleRest(API_URL); diff --git a/examples/finefoods-client/src/styles/globals.css b/examples/finefoods-client/src/styles/globals.css index 2ca7a98d0aee..b8e5b3553f26 100644 --- a/examples/finefoods-client/src/styles/globals.css +++ b/examples/finefoods-client/src/styles/globals.css @@ -4,34 +4,15 @@ @tailwind components; @tailwind utilities; -.message { - position: absolute; - right: 30px; - top: -60px; - animation: scaleUp 1s; -} - -.message::before { - content: ""; - width: 0px; - height: 0px; - position: absolute; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #fb7a32; - right: 45%; - bottom: -5px; -} - @keyframes scaleUp { - from { - transform: scale(0.3); - transform: translateY(20px); - opacity: 0; - } - to { - transform: scale(1); - transform: translateY(0px); - opacity: 1; - } + from { + transform: scale(0.3); + transform: translateY(20px); + opacity: 0; + } + to { + transform: scale(1); + transform: translateY(0px); + opacity: 1; + } } diff --git a/examples/finefoods-client/src/interfaces/index.d.ts b/examples/finefoods-client/src/types/index.ts similarity index 61% rename from examples/finefoods-client/src/interfaces/index.d.ts rename to examples/finefoods-client/src/types/index.ts index 4b72bb1015e1..5d3a8c5f4502 100644 --- a/examples/finefoods-client/src/interfaces/index.d.ts +++ b/examples/finefoods-client/src/types/index.ts @@ -1,4 +1,4 @@ -export interface IFile { +export type File = { name: string; percent: number; size: number; @@ -6,32 +6,33 @@ export interface IFile { type: string; uid: string; url: string; -} +}; -export interface ICategory { +export type Category = { id: number; title: string; isActive: boolean; cover?: string; -} +}; -export interface IProduct { +export type Product = { id: number; name: string; isActive: boolean; description: string; - images: IFile[]; + images: File[]; createdAt: string; price: number; - category: ICategory; + category: Category; stock: number; -} +}; -export interface IAddress { +export type Address = { text: string; coordinate: [string, string]; -} -export interface IUser { +}; + +export type User = { id: number; firstName: string; lastName: string; @@ -40,25 +41,25 @@ export interface IUser { gsm: string; createdAt: string; isActive: boolean; - avatar: IFile[]; - addresses: IAddress[]; -} + avatar: File[]; + addresses: Address[]; +}; -export interface IOrderStatus { +export type OrderStatus = { id: number; text: "Pending" | "Ready" | "On The Way" | "Delivered" | "Cancelled"; -} +}; -export interface IStore { +export type Store = { id: number; title: string; isActive: boolean; createdAt: string; - address: IAddress; - products: IProduct[]; -} + address: Address; + products: Product[]; +}; -export interface ICourier { +export type Courier = { id: number; name: string; surname: string; @@ -66,29 +67,29 @@ export interface ICourier { gsm: string; createdAt: string; isActive: boolean; - avatar: IFile[]; -} + avatar: File[]; +}; -export interface IEvent { +export type Event = { date: string; status: string; -} +}; -export interface IOrder { +export type Order = { id: number; - user: IUser; + user: User; createdAt: string; - products: IProduct[]; - status: IOrderStatus; - adress: IAddress; - store: IStore; - courier: ICourier; - events: IEvent[]; + products: Product[]; + status: OrderStatus; + adress: Address; + store: Store; + courier: Courier; + events: Event[]; orderNumber: number; amount: number; -} +}; -export interface IBasketOrder { +export type BasketOrder = { productId: number; amount: number; -} +}; diff --git a/examples/finefoods-client/tailwind.config.js b/examples/finefoods-client/tailwind.config.js index 1959fa387d3d..acaeb5e4c0ff 100644 --- a/examples/finefoods-client/tailwind.config.js +++ b/examples/finefoods-client/tailwind.config.js @@ -1,8 +1,6 @@ +/** @type {import('tailwindcss').Config} */ module.exports = { - content: [ - "./pages/**/*.{js,ts,jsx,tsx}", - "./src/components/**/*.{js,ts,jsx,tsx}", - ], + content: ["./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { fontFamily: { diff --git a/examples/finefoods-client/tsconfig.json b/examples/finefoods-client/tsconfig.json index 000b26e7709f..48bdeecb11f9 100644 --- a/examples/finefoods-client/tsconfig.json +++ b/examples/finefoods-client/tsconfig.json @@ -16,15 +16,14 @@ "jsx": "preserve", "incremental": true, "paths": { - "@components/*": ["src/components/*"], - "@components": ["src/components"], - "@hooks/*": ["src/hooks/*"], - "@hooks": ["src/hooks"], - "@interfaces": ["src/interfaces"], - "@context/*": ["src/context/*"], - "@context": ["src/context"] - } + "@/*": ["./src/*"] + }, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a4bb23222b61..a16023b5c5f7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5836,9 +5836,12 @@ importers: '@tanstack/react-table': specifier: ^8.2.6 version: 8.16.0(react-dom@18.3.0(react@18.3.0))(react@18.3.0) - gsap: - specifier: ^3.8.0 - version: 3.12.5 + classnames: + specifier: ^2.3.2 + version: 2.5.1 + dayjs: + specifier: ^1.10.7 + version: 1.11.10 js-confetti: specifier: ^0.9.0 version: 0.9.1 @@ -28502,9 +28505,6 @@ packages: resolution: {integrity: sha512-i1JBi6CnRAVbsld9pThccvEg0jEq+xDiZE1OAkbTTt6bakpic5nv3QASvdgA+nWAoaX754q1ACvntgB7Pf83VQ==} engines: {node: '>= 14'} - gsap@3.12.5: - resolution: {integrity: sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==} - gunzip-maybe@1.4.2: resolution: {integrity: sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==} hasBin: true @@ -55947,8 +55947,6 @@ snapshots: dependencies: zod: 3.22.4 - gsap@3.12.5: {} - gunzip-maybe@1.4.2: dependencies: browserify-zlib: 0.1.4