mirror of
https://github.com/theoludwig/theoludwig.git
synced 2026-02-20 03:09:20 +01:00
refactor: components struture
This commit is contained in:
148
packages/ui/src/Design/Button/Button.stories.tsx
Normal file
148
packages/ui/src/Design/Button/Button.stories.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
import { expect, fn, userEvent, within } from "@storybook/test"
|
||||
import { FaCheck } from "react-icons/fa6"
|
||||
|
||||
import type { ButtonLinkProps } from "./Button"
|
||||
import { Button } from "./Button"
|
||||
|
||||
const meta = {
|
||||
title: "Design System/Button",
|
||||
component: Button,
|
||||
tags: ["autodocs"],
|
||||
args: { onClick: fn() },
|
||||
} satisfies Meta<typeof Button>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
const ButtonContainer: React.FC<React.PropsWithChildren> = (props) => {
|
||||
const { children } = props
|
||||
|
||||
return <div className="flex gap-4">{children}</div>
|
||||
}
|
||||
|
||||
export const Component: Story = {
|
||||
args: {
|
||||
children: "Button",
|
||||
},
|
||||
play: async ({ canvasElement, args }) => {
|
||||
const canvas = within(canvasElement)
|
||||
await userEvent.click(canvas.getByText("Button"))
|
||||
await expect(args.onClick).toHaveBeenCalled()
|
||||
},
|
||||
}
|
||||
|
||||
export const Variants: Story = {
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button variant="solid" {...args}>
|
||||
Solid
|
||||
</Button>
|
||||
<Button variant="outline" {...args}>
|
||||
Outline
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Sizes: Story = {
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button size="small" {...args}>
|
||||
Small
|
||||
</Button>
|
||||
<Button size="medium" {...args}>
|
||||
Medium
|
||||
</Button>
|
||||
<Button size="large" {...args}>
|
||||
Large
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button variant="solid" disabled {...args}>
|
||||
Solid
|
||||
</Button>
|
||||
<Button variant="outline" disabled {...args}>
|
||||
Outline
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Loading: Story = {
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button variant="solid" isLoading {...args}>
|
||||
Solid
|
||||
</Button>
|
||||
<Button variant="outline" isLoading {...args}>
|
||||
Outline
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Icons: Story = {
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button leftIcon={<FaCheck size={18} />} {...args}>
|
||||
Left Icon
|
||||
</Button>
|
||||
<Button rightIcon={<FaCheck size={18} />} {...args}>
|
||||
Right Icon
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Link: Story = {
|
||||
args: {
|
||||
children: "Link",
|
||||
href: "/",
|
||||
},
|
||||
play: async ({ canvasElement, args }) => {
|
||||
const canvas = within(canvasElement)
|
||||
await expect(
|
||||
canvas.getByRole("link", {
|
||||
name: "Link",
|
||||
}),
|
||||
).toHaveAttribute("href", args.href)
|
||||
},
|
||||
}
|
||||
|
||||
export const LinkWithIcons: Story = {
|
||||
args: {
|
||||
href: "/",
|
||||
},
|
||||
render: (args) => {
|
||||
return (
|
||||
<ButtonContainer>
|
||||
<Button leftIcon={<FaCheck size={18} />} {...(args as ButtonLinkProps)}>
|
||||
Link Left Icon
|
||||
</Button>
|
||||
<Button
|
||||
rightIcon={<FaCheck size={18} />}
|
||||
{...(args as ButtonLinkProps)}
|
||||
>
|
||||
Link Right Icon
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
)
|
||||
},
|
||||
}
|
||||
111
packages/ui/src/Design/Button/Button.tsx
Normal file
111
packages/ui/src/Design/Button/Button.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { classNames } from "@repo/config-tailwind/classNames"
|
||||
import { Link as NextLink } from "@repo/i18n/navigation"
|
||||
import type { VariantProps } from "cva"
|
||||
import { cva } from "cva"
|
||||
|
||||
import { Spinner } from "../Spinner/Spinner"
|
||||
import { Ripple } from "./Ripple"
|
||||
|
||||
const buttonVariants = cva({
|
||||
base: "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
variants: {
|
||||
variant: {
|
||||
solid: "bg-primary hover:bg-primary/80 text-white",
|
||||
outline:
|
||||
"dark:border-primary-dark/60 dark:text-primary-dark dark:hover:border-primary-dark border-primary/60 text-primary hover:border-primary hover:bg-gray border bg-transparent dark:hover:bg-transparent",
|
||||
},
|
||||
size: {
|
||||
small: "h-9 rounded-md px-3",
|
||||
medium: "h-10 px-4 py-2",
|
||||
large: "h-11 rounded-md px-8",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "solid",
|
||||
size: "medium",
|
||||
},
|
||||
})
|
||||
|
||||
interface ButtonBaseProps extends VariantProps<typeof buttonVariants> {
|
||||
leftIcon?: React.ReactNode
|
||||
rightIcon?: React.ReactNode
|
||||
disabled?: boolean
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
interface ButtonElementProps extends React.ComponentPropsWithoutRef<"button"> {}
|
||||
interface LinkElementProps
|
||||
extends React.ComponentPropsWithoutRef<typeof NextLink> {}
|
||||
|
||||
export type ButtonLinkProps = ButtonBaseProps &
|
||||
LinkElementProps & { href: string }
|
||||
export type ButtonButtonProps = ButtonBaseProps &
|
||||
ButtonElementProps & { href?: never }
|
||||
|
||||
export type ButtonProps = ButtonButtonProps | ButtonLinkProps
|
||||
|
||||
/**
|
||||
* Buttons allow users to take actions, and make choices, with a single click.
|
||||
* @param props
|
||||
* @returns
|
||||
*/
|
||||
export const Button: React.FC<ButtonProps> = (props) => {
|
||||
const rippleColor =
|
||||
props.variant === "outline" ? "rgb(30, 64, 175)" : "rgb(229, 231, 235)"
|
||||
|
||||
if (typeof props.href === "string") {
|
||||
const { variant, size, leftIcon, rightIcon, className, children, ...rest } =
|
||||
props
|
||||
|
||||
return (
|
||||
<NextLink
|
||||
className={classNames(buttonVariants({ variant, size }), className)}
|
||||
{...rest}
|
||||
>
|
||||
{leftIcon != null ? <span className="mr-2">{leftIcon}</span> : null}
|
||||
<span>{children}</span>
|
||||
{rightIcon != null ? <span className="ml-2">{rightIcon}</span> : null}
|
||||
|
||||
<Ripple color={rippleColor} />
|
||||
</NextLink>
|
||||
)
|
||||
}
|
||||
|
||||
const {
|
||||
variant,
|
||||
size,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
className,
|
||||
isLoading = false,
|
||||
disabled = false,
|
||||
children,
|
||||
...rest
|
||||
} = props
|
||||
|
||||
const isDisabled = disabled || isLoading
|
||||
|
||||
const leftIconElement = isLoading ? (
|
||||
<Spinner size={18} className="text-inherit dark:text-inherit" />
|
||||
) : (
|
||||
leftIcon
|
||||
)
|
||||
|
||||
return (
|
||||
<button
|
||||
className={classNames(buttonVariants({ variant, size }), className)}
|
||||
disabled={isDisabled}
|
||||
{...rest}
|
||||
>
|
||||
{leftIconElement != null ? (
|
||||
<span className="mr-2">{leftIconElement}</span>
|
||||
) : null}
|
||||
<span>{children}</span>
|
||||
{rightIcon != null && !isLoading ? (
|
||||
<span className="ml-2">{rightIcon}</span>
|
||||
) : null}
|
||||
|
||||
<Ripple color={rippleColor} />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
91
packages/ui/src/Design/Button/Ripple.tsx
Normal file
91
packages/ui/src/Design/Button/Ripple.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
"use client"
|
||||
|
||||
import { useLayoutEffect, useState } from "react"
|
||||
|
||||
const useDebouncedRippleCleanUp = (
|
||||
rippleCount: number,
|
||||
duration: number,
|
||||
cleanUpFunction: () => void,
|
||||
): void => {
|
||||
useLayoutEffect(() => {
|
||||
let bounce: ReturnType<typeof setTimeout> | undefined
|
||||
if (rippleCount > 0) {
|
||||
clearTimeout(bounce)
|
||||
|
||||
bounce = setTimeout(() => {
|
||||
cleanUpFunction()
|
||||
clearTimeout(bounce)
|
||||
}, duration * 4)
|
||||
}
|
||||
|
||||
return () => {
|
||||
return clearTimeout(bounce)
|
||||
}
|
||||
}, [rippleCount, duration, cleanUpFunction])
|
||||
}
|
||||
|
||||
export interface RippleProps {
|
||||
/**
|
||||
* The color of the ripple effect.
|
||||
*/
|
||||
color?: string
|
||||
|
||||
/**
|
||||
* The duration of the ripple animation in milliseconds.
|
||||
*/
|
||||
duration?: number
|
||||
}
|
||||
|
||||
interface RippleItem {
|
||||
x: number
|
||||
y: number
|
||||
size: number
|
||||
}
|
||||
|
||||
export const Ripple: React.FC<RippleProps> = (props) => {
|
||||
const { duration = 1_200, color = "rgb(229, 231, 235)" } = props
|
||||
const [rippleArray, setRippleArray] = useState<RippleItem[]>([])
|
||||
|
||||
useDebouncedRippleCleanUp(rippleArray.length, duration, () => {
|
||||
setRippleArray([])
|
||||
})
|
||||
|
||||
const addRipple: React.MouseEventHandler<HTMLDivElement> = (event) => {
|
||||
const rippleContainer = event.currentTarget.getBoundingClientRect()
|
||||
const size =
|
||||
rippleContainer.width > rippleContainer.height
|
||||
? rippleContainer.width
|
||||
: rippleContainer.height
|
||||
const x = event.pageX - rippleContainer.x - size / 2
|
||||
const y = event.pageY - rippleContainer.y - size / 2
|
||||
const newRipple: RippleItem = {
|
||||
x,
|
||||
y,
|
||||
size,
|
||||
}
|
||||
setRippleArray([...rippleArray, newRipple])
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0" onMouseDown={addRipple}>
|
||||
{rippleArray.map((ripple, index) => {
|
||||
return (
|
||||
<span
|
||||
key={"span" + index}
|
||||
className="absolute rounded-full opacity-75"
|
||||
style={{
|
||||
transform: "scale(0)",
|
||||
backgroundColor: color,
|
||||
animationName: "ripple",
|
||||
animationDuration: `${duration}ms`,
|
||||
top: ripple.y,
|
||||
left: ripple.x,
|
||||
width: ripple.size,
|
||||
height: ripple.size,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user