From 824eef95f666fa27492ea8a58c0c8ce4de83215f Mon Sep 17 00:00:00 2001 From: Corey Johnson Date: Mon, 7 Jul 2025 16:24:49 -0700 Subject: [PATCH] set up examples --- packages/werewolf-ui/src/examples/cards.tsx | 24 +++---- packages/werewolf-ui/src/index.css | 19 ++++++ .../src/lib/{break.tsx => divider.tsx} | 10 +-- packages/werewolf-ui/src/lib/icon.tsx | 65 ++++++++++--------- packages/werewolf-ui/src/lib/linebreak.tsx | 55 ---------------- .../werewolf-ui/src/routes/tests/[test].tsx | 21 +----- packages/werewolf-ui/src/types.ts | 4 ++ 7 files changed, 77 insertions(+), 121 deletions(-) rename packages/werewolf-ui/src/lib/{break.tsx => divider.tsx} (75%) delete mode 100644 packages/werewolf-ui/src/lib/linebreak.tsx diff --git a/packages/werewolf-ui/src/examples/cards.tsx b/packages/werewolf-ui/src/examples/cards.tsx index 26fed91..235f30a 100644 --- a/packages/werewolf-ui/src/examples/cards.tsx +++ b/packages/werewolf-ui/src/examples/cards.tsx @@ -5,7 +5,7 @@ import { Button } from "@/lib/button" import { Input } from "@/lib/input" import { Select } from "@/lib/select" import { Grid } from "@/lib/grid" -import { Break } from "@/lib/break" +import { Divider } from "@/lib/divider" export const Cards = () => { return ( @@ -93,15 +93,15 @@ CreateAccount = Card(
Enter your email below to create your account
- OR CONTINUE WITH + OR CONTINUE WITH Email @@ -208,11 +208,11 @@ TeamCard = Card( - +

Alexandria, VA

- - - + + + ) @@ -252,9 +252,9 @@ section_content =(('bell','Everything',"Email digest, mentions & all activity.") - - - + + +

People with access

{teamMembers.map((member) => ( @@ -303,7 +303,7 @@ Notifications = Card(

Choose what you want to be notified about.

{sectionContent.map((item) => ( - +

{item.title}

{item.description}

diff --git a/packages/werewolf-ui/src/index.css b/packages/werewolf-ui/src/index.css index a71eb94..1b7545b 100644 --- a/packages/werewolf-ui/src/index.css +++ b/packages/werewolf-ui/src/index.css @@ -1,5 +1,24 @@ @import "tailwindcss"; +@utility spacing { + .w-*: width: *; + .h-*: height: *; + .p-*: padding: *; + .pt-*: padding-top: *; + .pb-*: padding-bottom: *; + .pl-*: padding-left: *; + .pr-*: padding-right: *; + .px-*: padding-left: *; padding-right: *; + .py-*: padding-top: *; padding-bottom: *; + .m-*: margin: *; + .mt-*: margin-top: *; + .mb-*: margin-bottom: *; + .ml-*: margin-left: *; + .mr-*: margin-right: *; + .mx-*: margin-left: *; margin-right: *; + .my-*: margin-top: *; margin-bottom: *; +} + @theme { --color-background: #ffffff; --color-foreground: #09090b; diff --git a/packages/werewolf-ui/src/lib/break.tsx b/packages/werewolf-ui/src/lib/divider.tsx similarity index 75% rename from packages/werewolf-ui/src/lib/break.tsx rename to packages/werewolf-ui/src/lib/divider.tsx index b1c2e5b..787e52e 100644 --- a/packages/werewolf-ui/src/lib/break.tsx +++ b/packages/werewolf-ui/src/lib/divider.tsx @@ -1,11 +1,11 @@ import "hono/jsx" import { FC, PropsWithChildren } from "hono/jsx" -type BreakProps = PropsWithChildren & { +type DividerProps = PropsWithChildren & { class?: string } -export const Break: FC = ({ children, class: className }) => { +export const Divider: FC = ({ children, class: className }) => { return (
@@ -22,18 +22,18 @@ export const Break: FC = ({ children, class: className }) => { export const Test = () => { return (
-

Break Examples

+

Divider Examples

Would you like to continue

- OR WOULD YOU LIKE TO + OR WOULD YOU LIKE TO

Submit to certain dealth

{/* Just a line */}

Look a line 👇

- +

So cool, so straight!

diff --git a/packages/werewolf-ui/src/lib/icon.tsx b/packages/werewolf-ui/src/lib/icon.tsx index 9066be3..8d5e5e0 100644 --- a/packages/werewolf-ui/src/lib/icon.tsx +++ b/packages/werewolf-ui/src/lib/icon.tsx @@ -1,3 +1,4 @@ +import { TailwindSize } from "@/types" import "hono/jsx" import { FC } from "hono/jsx" import * as icons from "lucide-static" @@ -6,7 +7,7 @@ export type IconName = keyof typeof icons type IconProps = { name: IconName - size?: number | string + size?: TailwindSize class?: string } @@ -16,7 +17,7 @@ type IconLinkProps = IconProps & { } export const Icon: FC = (props) => { - const { name, size = 24, class: className } = props + const { name, size = 6, class: className } = props const iconSvg = icons[name] @@ -24,17 +25,16 @@ export const Icon: FC = (props) => { throw new Error(`Icon "${name}" not found in Lucide icons`) } + // Convert size to Tailwind classes if provided + const sizeClass = size ? getSizeClass(size) : "" + const allClasses = [sizeClass, className].filter(Boolean).join(" ") + // Modify the SVG string to include our custom attributes const modifiedSvg = iconSvg - .replace(/width="[^"]*"/, `width="${size}"`) - .replace(/height="[^"]*"/, `height="${size}"`) - .replace(/class="[^"]*"/, className ? `class="${className}"` : "") - .replace( - /]*)>/, - `` - ) + .replace(/width="[^"]*"/, "") + .replace(/height="[^"]*"/, "") + .replace(/class="[^"]*"/, "") + .replace(/]*)>/, ``) return
} @@ -76,23 +76,23 @@ export const Test = () => {

Styling with CSS Classes

- +

Default

- +

Blue Color

- +

Thin Stroke

- +

Filled

- +

Hover Effect

@@ -103,19 +103,19 @@ export const Test = () => {

Advanced Styling

- +

Filled Heart

- +

Thick Stroke

- +

Animated

- +

Drop Shadow

@@ -128,19 +128,19 @@ export const Test = () => {

Icon Links

- +

Home Link

- +

External Link

- +

Email Link

- +

Phone Link

@@ -153,7 +153,7 @@ export const Test = () => {
@@ -162,7 +162,7 @@ export const Test = () => {
@@ -171,7 +171,7 @@ export const Test = () => {
@@ -180,7 +180,7 @@ export const Test = () => {
@@ -192,7 +192,10 @@ export const Test = () => { ) } -const getIconContent = (svgString: string): string => { - const match = svgString.match(/]*>(.*?)<\/svg>/s) - return match ? match[1] : "" +const getSizeClass = (size: TailwindSize): string => { + return `size-${size}` } + +const tailwindSafeWidthStrings = [ "w-0", "w-0.5", "w-1", "w-1.5", "w-2", "w-2.5", "w-3", "w-3.5", "w-4", "w-5", "w-6", "w-7", "w-8", "w-9", "w-10", "w-11", "w-12", "w-14", "w-16", "w-20", "w-24", "w-28", "w-32", "w-36", "w-40", "w-44", "w-48", "w-52", "w-56", "w-60", "w-64", "w-72", "w-80", "w-96" ] // prettier-ignore +const tailwindSafeHeightStrings = [ "h-0", "h-0.5", "h-1", "h-1.5", "h-2", "h-2.5", "h-3", "h-3.5", "h-4", "h-5", "h-6", "h-7", "h-8", "h-9", "h-10", "h-11", "h-12", "h-14", "h-16", "h-20", "h-24", "h-28", "h-32", "h-36", "h-40", "h-44", "h-48", "h-52", "h-56", "h-60", "h-64", "h-72", "h-80", "h-96", ] // prettier-ignore +const tailwindSafeSizeStrings = [ "size-0", "size-0.5", "size-1", "size-1.5", "size-2", "size-2.5", "size-3", "size-3.5", "size-4", "size-5", "size-6", "size-7", "size-8", "size-9", "size-10", "size-11", "size-12", "size-14", "size-16", "size-20", "size-24", "size-28", "size-32", "size-36", "size-40", "size-44", "size-48", "size-52", "size-56", "size-60", "size-64", "size-72", "size-80", "size-96", ] // prettier-ignore diff --git a/packages/werewolf-ui/src/lib/linebreak.tsx b/packages/werewolf-ui/src/lib/linebreak.tsx deleted file mode 100644 index 0250d33..0000000 --- a/packages/werewolf-ui/src/lib/linebreak.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import "hono/jsx" -import { FC, PropsWithChildren } from "hono/jsx" - -type BreakProps = PropsWithChildren & { - class?: string -} - -export const Break: FC = ({ children, class: className }) => { - return ( -
-
- {children && ( - <> - {children} -
- - )} -
- ) -} - -export const Test = () => { - return ( -
-

Break Examples

- - {/* With text */} -
-

Would you like to sign in?

- OR DO YOU SUBMIT TO -

Certain death

-
- - {/* Simple divider */} -
-

Payment methods

- -

Billing information

-
- - {/* Different text examples */} -
-

Existing user?

- OR -

Create new account

-
- -
-

Personal info

- STEP 2 -

Payment details

-
-
- ) -} diff --git a/packages/werewolf-ui/src/routes/tests/[test].tsx b/packages/werewolf-ui/src/routes/tests/[test].tsx index 254995d..8c09168 100644 --- a/packages/werewolf-ui/src/routes/tests/[test].tsx +++ b/packages/werewolf-ui/src/routes/tests/[test].tsx @@ -1,25 +1,12 @@ import { LoaderProps } from "@workshop/nano-remix" import "@/index.css" -/* -break -button -grid -icon -image -input -linebreak -placeholder -select -stack -*/ import { Test as AvatarTest } from "@/lib/avatar" -import { Test as BreakTest } from "@/lib/break" +import { Test as DividerTest } from "@/lib/divider" import { Test as ButtonTest } from "@/lib/button" import { Test as GridTest } from "@/lib/grid" import { Test as IconTest } from "@/lib/icon" import { Test as ImageTest } from "@/lib/image" import { Test as InputTest } from "@/lib/input" -import { Test as LinebreakTest } from "@/lib/linebreak" import { Test as PlaceholderTest } from "@/lib/placeholder" import { Test as SelectTest } from "@/lib/select" import { Test as StackTest } from "@/lib/stack" @@ -39,8 +26,8 @@ export default function Test({ testName }: LoaderProps) { if (testName === "avatar") { component = - } else if (testName === "break") { - component = + } else if (testName === "divider") { + component = } else if (testName === "button") { component = } else if (testName === "grid") { @@ -51,8 +38,6 @@ export default function Test({ testName }: LoaderProps) { component = } else if (testName === "input") { component = - } else if (testName === "linebreak") { - component = } else if (testName === "placeholder") { component = } else if (testName === "select") { diff --git a/packages/werewolf-ui/src/types.ts b/packages/werewolf-ui/src/types.ts index 8c10404..9b4a692 100644 --- a/packages/werewolf-ui/src/types.ts +++ b/packages/werewolf-ui/src/types.ts @@ -1,8 +1,12 @@ type TailwindSizeNumber = | 0 + | 0.5 | 1 + | 1.5 | 2 + | 2.5 | 3 + | 3.5 | 4 | 5 | 6