diff --git a/.changeset/shiny-pumpkins-shave.md b/.changeset/shiny-pumpkins-shave.md new file mode 100644 index 0000000..59ec2b3 --- /dev/null +++ b/.changeset/shiny-pumpkins-shave.md @@ -0,0 +1,5 @@ +--- +"cunningham-demo": major +--- + +new demo diff --git a/apps/demo/cunningham.ts b/apps/demo/cunningham.ts index d1920b9..d16ad01 100644 --- a/apps/demo/cunningham.ts +++ b/apps/demo/cunningham.ts @@ -1,14 +1,5 @@ import { Configuration } from "@openfun/cunningham-react"; -const config: Configuration = { - themes: { - default: { - components: { - button: { - "border-radius": "30px", - }, - }, - }, - }, -}; -export default config; +const defaultConfig: Configuration = { themes: {} }; + +export default defaultConfig; diff --git a/apps/demo/package.json b/apps/demo/package.json index 3152aae..b9f4bb8 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -11,6 +11,7 @@ "preview": "vite preview" }, "dependencies": { + "@faker-js/faker": "8.3.1", "@openfun/cunningham-react": "*", "@openfun/cunningham-tokens": "*", "@openfun/typescript-configs": "*", diff --git a/apps/demo/public/pattern_dark.png b/apps/demo/public/pattern_dark.png new file mode 100644 index 0000000..8256464 Binary files /dev/null and b/apps/demo/public/pattern_dark.png differ diff --git a/apps/demo/public/pattern_default.png b/apps/demo/public/pattern_default.png new file mode 100644 index 0000000..9764ce8 Binary files /dev/null and b/apps/demo/public/pattern_default.png differ diff --git a/apps/demo/src/App.tsx b/apps/demo/src/App.tsx index e52a1b4..991e2ab 100644 --- a/apps/demo/src/App.tsx +++ b/apps/demo/src/App.tsx @@ -1,62 +1,69 @@ -import { - Button, - CunninghamProvider, - Pagination, - Select, - SUPPORTED_LOCALES, - Switch, - usePagination, -} from "@openfun/cunningham-react"; -import React, { useState } from "react"; -import { tokens } from "./cunningham-tokens"; +import { Button, CunninghamProvider } from "@openfun/cunningham-react"; +import React, { useEffect, useState } from "react"; +import { Create } from "./Create"; +import { Home } from "./Home"; enum Theme { DEFAULT = "default", DARK = "dark", } -const THEMES: Theme[] = [Theme.DEFAULT, Theme.DARK]; +export enum Page { + HOME, + CREATE, +} + +export interface PageProps { + changePage: (page: Page) => void; +} + +const preferredScheme = window.matchMedia("(prefers-color-scheme: dark)") + .matches + ? Theme.DARK + : Theme.DEFAULT; export const App = () => { - const pagination = usePagination({ defaultPage: 50, defaultPagesCount: 100 }); - const [locale, setLocale] = useState("en-US"); - const [theme, setTheme] = useState(Theme.DEFAULT); + const [locale] = useState("en-US"); + const [theme, setTheme] = useState(preferredScheme); + const [page, setPage] = useState(Page.HOME); + const handleThemeChange = (event: MediaQueryListEvent) => + setTheme(event.matches ? Theme.DARK : Theme.DEFAULT); + + useEffect(() => { + const query = window.matchMedia("(prefers-color-scheme: dark)"); + query.addEventListener("change", handleThemeChange); + + return () => { + query.removeEventListener("change", handleThemeChange); + }; + }, []); + return ( -
-

Cunningham Demo.

- -
- ({ - label: v, - }))} - clearable={false} - value={THEMES[0]} - onChange={(e) => setTheme(e.target.value as Theme)} +
+ Background pattern + {page === Page.HOME && setPage(p)} />} + {page === Page.CREATE && setPage(p)} />} +
-
- -
- -

- Primary-500 color is{" "} - {tokens.themes[theme].theme.colors["primary-500"]} -

- +
+
); diff --git a/apps/demo/src/Character.ts b/apps/demo/src/Character.ts new file mode 100644 index 0000000..701f5a6 --- /dev/null +++ b/apps/demo/src/Character.ts @@ -0,0 +1,168 @@ +import { faker } from "@faker-js/faker"; + +export interface Character { + id: string; + name: string; + gender: "male" | "female" | "other"; + birthDate: Date; + firstAppearanceDate: Date; + lastAppearanceDate: Date; + isGuest: boolean; +} + +export const randomDates = () => { + return { + birthDate: faker.date.between({ + from: "1950-01-01T00:00:00.000Z", + to: "1970-01-01T00:00:00.000Z", + }), + firstAppearanceDate: faker.date.between({ + from: "1974-01-01T00:00:00.000Z", + to: "1984-01-01T00:00:00.000Z", + }), + lastAppearanceDate: faker.date.past(), + }; +}; + +export const database: Character[] = [ + { + id: faker.string.uuid(), + name: "Richie Cunningham", + gender: "male", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Joanie Cunningham", + gender: "female", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Arthur Fonzarelli", + gender: "male", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Marion Cunningham", + gender: "female", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Ralph Malph", + gender: "male", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Howard Cunningham", + gender: "male", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Marsha Simms", + gender: "female", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Warren Berlinger", + gender: "male", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Al Molinaro", + gender: "male", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Verna LaVerne", + gender: "female", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Arnold Takahashi", + gender: "male", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Linda Purl", + gender: "female", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Crystal Bernard", + gender: "female", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Heather O'Rourke", + gender: "female", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Scott Bernstein", + gender: "male", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Ed Peck", + gender: "male", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Beatrice Colen", + gender: "female", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Dody Goodman", + gender: "female", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Linda Dano", + gender: "female", + isGuest: false, + ...randomDates(), + }, + { + id: faker.string.uuid(), + name: "Gavan O'Herlihy", + gender: "male", + isGuest: false, + ...randomDates(), + }, +]; diff --git a/apps/demo/src/Create.tsx b/apps/demo/src/Create.tsx new file mode 100644 index 0000000..384df61 --- /dev/null +++ b/apps/demo/src/Create.tsx @@ -0,0 +1,132 @@ +import React from "react"; +import { + Alert, + AlertType, + Button, + Checkbox, + DatePicker, + DateRangePicker, + FileUploader, + Input, + Radio, + RadioGroup, + Select, + Switch, + TextArea, + ToastType, + useToastProvider, +} from "@openfun/cunningham-react"; +import { faker } from "@faker-js/faker"; +import { Character, database, randomDates } from "./Character"; +import { Page, PageProps } from "./App"; + +export const Create = ({ changePage }: PageProps) => { + const { toast } = useToastProvider(); + const inputRef = React.useRef(null); + + const submit = () => { + const character: Character = { + id: faker.string.uuid(), + name: inputRef.current?.value || "", + gender: "male", + isGuest: false, + ...randomDates(), + }; + database.unshift(character); + + changePage(Page.HOME); + toast("Character created successfully", ToastType.SUCCESS); + }; + + return ( +
+

Add a character

+
+

General Information

+ + You are about to add a new character to the collection + + +