From 88a3c6ca92717a372cbee312ecd127bf6f29a537 Mon Sep 17 00:00:00 2001 From: wancup Date: Sat, 16 Nov 2024 20:52:42 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20faker=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 9 ++ .../faker/components/faker-playground.tsx | 52 ++++++++ src/features/faker/index.ts | 1 + src/routes/faker.tsx | 123 ++++++++++++++++++ src/site/pages.ts | 4 + 6 files changed, 190 insertions(+) create mode 100644 src/features/faker/components/faker-playground.tsx create mode 100644 src/features/faker/index.ts create mode 100644 src/routes/faker.tsx diff --git a/package.json b/package.json index c556d18..6207626 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "@ark-ui/solid": "^4.1.0", + "@faker-js/faker": "9.2.0", "@solidjs/meta": "0.29.4", "@solidjs/router": "0.14.3", "@solidjs/start": "1.0.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 08083f8..5bdd0f1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@ark-ui/solid': specifier: ^4.1.0 version: 4.1.0(solid-js@1.8.22) + '@faker-js/faker': + specifier: 9.2.0 + version: 9.2.0 '@solidjs/meta': specifier: 0.29.4 version: 0.29.4(solid-js@1.8.22) @@ -559,6 +562,10 @@ packages: resolution: {integrity: sha512-vH9PiIMMwvhCx31Af3HiGzsVNULDbyVkHXwlemn/B0TFj/00ho3y55efXrUZTfQipxoHC5u4xq6zblww1zm1Ig==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@faker-js/faker@9.2.0': + resolution: {integrity: sha512-ulqQu4KMr1/sTFIYvqSdegHT8NIkt66tFAkugGnHA+1WAfEn6hMzNR+svjXGFRVLnapxvej67Z/LwchFrnLBUg==} + engines: {node: '>=18.0.0', npm: '>=9.0.0'} + '@fastify/busboy@2.1.1': resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==} engines: {node: '>=14'} @@ -4298,6 +4305,8 @@ snapshots: dependencies: levn: 0.4.1 + '@faker-js/faker@9.2.0': {} + '@fastify/busboy@2.1.1': {} '@floating-ui/core@1.6.8': diff --git a/src/features/faker/components/faker-playground.tsx b/src/features/faker/components/faker-playground.tsx new file mode 100644 index 0000000..d08c77f --- /dev/null +++ b/src/features/faker/components/faker-playground.tsx @@ -0,0 +1,52 @@ +import { css } from "$panda/css"; +import { Clipboard } from "$park/clipboard"; +import { IconButton } from "$park/icon-button"; +import { CheckIcon, ClipboardCopyIcon, RefreshCwIcon } from "lucide-solid"; +import { createEffect, createSignal, type JSX } from "solid-js"; + +interface FakerPlaygroundProps { + name: string; + generate: () => string; +} + +export function FakerPlayground(props: FakerPlaygroundProps): JSX.Element { + const [value, setValue] = createSignal(""); + + createEffect(() => { + setValue(props.generate()); + }); + + return ( +
+ {props.name} + {value()} + +
+ + + ( + + }> + + + + )} + /> + + + { + const v = props.generate(); + setValue(v); + }} + > + + +
+
+ ); +} diff --git a/src/features/faker/index.ts b/src/features/faker/index.ts new file mode 100644 index 0000000..5a5133b --- /dev/null +++ b/src/features/faker/index.ts @@ -0,0 +1 @@ +export * from "./components/faker-playground"; diff --git a/src/routes/faker.tsx b/src/routes/faker.tsx new file mode 100644 index 0000000..478cdaf --- /dev/null +++ b/src/routes/faker.tsx @@ -0,0 +1,123 @@ +import { css } from "$panda/css"; +import { Heading } from "$park/heading"; +import { Select } from "$park/select"; +import { createListCollection } from "@ark-ui/solid"; +import { allFakers, allLocales, fakerEN } from "@faker-js/faker"; +import { Title } from "@solidjs/meta"; +import { CheckIcon, ChevronsUpDownIcon } from "lucide-solid"; +import { createMemo, createSignal, For, type JSX } from "solid-js"; +import { Container } from "~/components"; +import { FakerPlayground } from "~/features/faker"; +import { makePageTitle, PAGES } from "~/site"; + +const PAGE_TITLE = makePageTitle(PAGES["faker"].name); + +const ALL_LOCALE_LIST = Object.keys(allLocales); + +type FakerLocale = keyof typeof allLocales; +export default function FakerPage(): JSX.Element { + const [selectedLocale, setSelectedLocale] = createSignal("en"); + const localeCollection = createListCollection({ items: ALL_LOCALE_LIST }); + + const localeFaker = createMemo(() => allFakers[selectedLocale()]); + + const generateAddress = (): string => { + let state: string | undefined; + try { + state = localeFaker().location.state(); + } catch { + // Some locales does not have state + } + return [state, localeFaker().location.city(), localeFaker().location.streetAddress()].join(" "); + }; + + return ( +
+ {PAGE_TITLE} + + + {PAGES["faker"].name} + +
+ { + const value = v.value[0]; + if (typeof value !== "undefined") { + setSelectedLocale(value as FakerLocale); + } + }} + > + Locale + + + + + + + + + + + {(item) => ( + + {item} + + + + + )} + + + + + + + `https://example.com/${fakerEN.word.words().replaceAll(" ", "/")}`} + /> + fakerEN.string.nanoid()} + /> + fakerEN.string.uuid()} + /> + localeFaker().person.fullName()} + /> + localeFaker().internet.displayName()} + /> + (fakerEN.internet.exampleEmail())} + /> + (localeFaker().date.anytime().toLocaleString(selectedLocale().replace("_", "-")))} + /> + (localeFaker().location.zipCode())} + /> + + (localeFaker().lorem.lines())} + /> +
+ +
+ ); +} diff --git a/src/site/pages.ts b/src/site/pages.ts index 0934aee..8edb9d3 100644 --- a/src/site/pages.ts +++ b/src/site/pages.ts @@ -22,6 +22,10 @@ export const PAGES = { name: "Keyboard Event", path: "/keyboard-event", }, + "faker": { + name: "Faker", + path: "/faker", + }, "qr-code": { name: "QR code", path: "/qr-code",