@tiny-server/design 0.0.0-pre202605241751

package/src/components/checkbox-card/CheckboxCard.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CheckboxCard } from './CheckboxCard';
+
+const meta: Meta<typeof CheckboxCard> = {
+  component: CheckboxCard,
+  title: 'Components/CheckboxCard',
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+    },
+    description: {
+      control: { type: 'text' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    children: {
+      control: false,
+    },
+  },
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Accept terms',
+    description: 'I agree to the terms and conditions.',
+    defaultChecked: true,
+  },
+};
+
+export default meta;

package/src/components/checkbox-card/CheckboxCard.tsx

@@ -0,0 +1,22 @@
+import { Checkbox, Group, Input, type CheckboxCardProps as MantineCheckboxCardProps } from '@mantine/core';
+import type { ReactNode } from 'react';
+
+export interface CheckboxCardProps extends MantineCheckboxCardProps {
+  label?: ReactNode;
+  description?: ReactNode;
+}
+
+export function CheckboxCard({ label, description, children, disabled, ...rest }: CheckboxCardProps) {
+  return (
+    <Checkbox.Card radius="md" p="md" disabled={disabled} {...rest}>
+      <Group h="100%" wrap="nowrap" align="flex-start">
+        <Checkbox.Indicator mt="calc(var(--mantine-spacing-xs) / 2)" disabled={disabled} />
+        <div>
+          {label && <Input.Label htmlFor={rest.id}>{label}</Input.Label>}
+          {description && <Input.Description>{description}</Input.Description>}
+          {children}
+        </div>
+      </Group>
+    </Checkbox.Card>
+  );
+}

package/src/components/checkbox-card/index.ts

@@ -0,0 +1 @@
+export * from './CheckboxCard';

package/src/components/form/Form.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button, TextInput } from '@mantine/core';
+import { Form } from './Form';
+
+const meta: Meta<typeof Form> = {
+  component: Form,
+  title: 'Components/Form',
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Form>
+      <Form.Alert kind="success" title="Success!">
+        Your changes have been saved.
+      </Form.Alert>
+      <Form.Section>
+        <TextInput label="Email" placeholder="Enter your email" />
+        <TextInput label="Password" type="password" placeholder="Enter your password" />
+      </Form.Section>
+      <Form.Footer>
+        <Button variant="default">Cancel</Button>
+        <Button>Submit</Button>
+      </Form.Footer>
+    </Form>
+  ),
+};
+
+export default meta;

package/src/components/form/Form.tsx

@@ -0,0 +1,22 @@
+import { Container, type ContainerProps, type StackProps, Stack, type ElementProps } from '@mantine/core';
+import { type ReactNode, type Ref } from 'react';
+import { FormSection } from './FormSection';
+import { FormFooter } from './FormFooter';
+import { FormAlert } from './FormAlert';
+
+export interface FormProps extends ElementProps<'form'>, Omit<ContainerProps, keyof ElementProps<'div'>> {
+  gap?: StackProps['gap'];
+  children?: ReactNode;
+}
+
+export function Form({ ref, size = 'xs', p = 0, gap = 'lg', children, ...rest }: FormProps) {
+  return (
+    <Container {...(rest as any)} component="form" ref={ref as Ref<HTMLDivElement>} mx={0} size={size} p={p}>
+      <Stack gap={gap}>{children}</Stack>
+    </Container>
+  );
+}
+
+Form.Alert = FormAlert;
+Form.Section = FormSection;
+Form.Footer = FormFooter;

package/src/components/form/FormAlert.tsx

@@ -0,0 +1,25 @@
+import { Alert, type AlertProps } from '@mantine/core';
+import { Check, CircleAlert } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+export type FormAlertKind = 'success' | 'error';
+
+export interface FormAlertProps extends Omit<AlertProps, 'color' | 'icon'> {
+  kind: FormAlertKind;
+}
+
+const colorMap: Record<FormAlertKind, AlertProps['color']> = {
+  success: 'green',
+  error: 'red',
+};
+
+const iconMap: Record<FormAlertKind, ReactNode> = {
+  success: <Check size={16} />,
+  error: <CircleAlert size={16} />,
+};
+
+export function FormAlert({ kind, variant = 'outline', ...rest }: FormAlertProps) {
+  const color = colorMap[kind];
+  const icon = iconMap[kind];
+  return <Alert variant={variant} color={color} icon={icon} {...rest} />;
+}

package/src/components/form/FormFooter.tsx

@@ -0,0 +1,7 @@
+import { type GroupProps, Group } from '@mantine/core';
+
+export interface FormFooterProps extends GroupProps {}
+
+export function FormFooter({ gap = 'md', wrap = 'wrap', ...rest }: FormFooterProps) {
+  return <Group gap={gap} wrap={wrap} {...rest} />;
+}

package/src/components/form/FormSection.tsx

@@ -0,0 +1,7 @@
+import { type StackProps, Stack } from '@mantine/core';
+
+export interface FormSectionProps extends StackProps {}
+
+export function FormSection({ gap = 'md', ...rest }: FormSectionProps) {
+  return <Stack gap={gap} {...rest} />;
+}

package/src/components/form/index.ts

@@ -0,0 +1 @@
+export * from './Form';

package/src/components/image-cropper/ImageCropper.tsx

@@ -0,0 +1,73 @@
+import { useState, type ReactNode } from 'react';
+import Cropper, { type Area, type CropperProps, type Point } from 'react-easy-crop';
+import { cropImage } from './cropImage';
+import { Box, LoadingOverlay } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+
+export interface ImageCropperProps extends Partial<
+  Omit<
+    CropperProps,
+    'crop' | 'zoom' | 'rotation' | 'onCropChange' | 'onZoomChange' | 'onRotationChange' | 'onCropComplete'
+  >
+> {
+  src?: string;
+  initialCrop?: CropperProps['crop'];
+  initialZoom?: CropperProps['zoom'];
+  initialRotation?: CropperProps['rotation'];
+  fallback?: ReactNode;
+  onCropped?(croppedImageBlob: File): void;
+}
+
+export function ImageCropper({
+  src,
+  initialCrop = { x: 0, y: 0 },
+  initialZoom = 1,
+  initialRotation = 0,
+  fallback,
+  onCropped,
+  ...rest
+}: ImageCropperProps) {
+  const [crop, setCrop] = useState<Point>(initialCrop);
+  const [zoom, setZoom] = useState(initialZoom);
+  const [rotation, setRotation] = useState(initialRotation);
+
+  const [isCropping, setIsCropping] = useState(false);
+  const [debouncedIsCropping] = useDebouncedValue(isCropping, 250, { leading: false });
+
+  const handleCropComplete = async (_: Area, croppedAreaPixels: Area) => {
+    try {
+      if (isCropping) {
+        return;
+      }
+
+      setIsCropping(true);
+      const blob = await cropImage(src!, croppedAreaPixels!);
+      onCropped?.(blob);
+    } catch (e) {
+      console.error('Image cropping failed.', e);
+    } finally {
+      setIsCropping(false);
+    }
+  };
+
+  if (!src) {
+    return fallback;
+  }
+
+  return (
+    <Box pos="relative" w="100%" h="100%">
+      <LoadingOverlay visible={debouncedIsCropping} />
+      <Cropper
+        {...rest}
+        image={src}
+        crop={crop}
+        zoom={zoom}
+        rotation={rotation}
+        onCropChange={setCrop}
+        onZoomChange={setZoom}
+        onRotationChange={setRotation}
+        onCropComplete={handleCropComplete}
+      />
+    </Box>
+  );
+}

package/src/components/image-cropper/cropImage.ts

@@ -0,0 +1,87 @@
+import type { Area } from 'react-easy-crop';
+
+/**
+ * Creates an image blob, representing a cropped version of the source image.
+ *
+ * Source:
+ * https://valentinh.github.io/react-easy-crop/docs/examples/output
+ */
+export async function cropImage(
+  imageSrc: string,
+  pixelCrop: Area,
+  rotation = 0,
+  flip = { horizontal: false, vertical: false },
+) {
+  const image = await createImage(imageSrc);
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+
+  if (!ctx) {
+    throw new Error('Failed to create canvas context.');
+  }
+
+  const rotRad = getRadianAngle(rotation);
+  const { width: bBoxWidth, height: bBoxHeight } = rotateSize(image.width, image.height, rotation);
+
+  canvas.width = bBoxWidth;
+  canvas.height = bBoxHeight;
+
+  ctx.translate(bBoxWidth / 2, bBoxHeight / 2);
+  ctx.rotate(rotRad);
+  ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1);
+  ctx.translate(-image.width / 2, -image.height / 2);
+  ctx.drawImage(image, 0, 0);
+
+  const croppedCanvas = document.createElement('canvas');
+  const croppedCtx = croppedCanvas.getContext('2d');
+
+  if (!croppedCtx) {
+    throw new Error('Failed to create canvas context.');
+  }
+
+  croppedCanvas.width = pixelCrop.width;
+  croppedCanvas.height = pixelCrop.height;
+
+  croppedCtx.drawImage(
+    canvas,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    pixelCrop.width,
+    pixelCrop.height,
+  );
+
+  return new Promise<File>((res, rej) =>
+    croppedCanvas.toBlob(
+      (blob) =>
+        blob ? res(new File([blob], 'img.png', { type: blob.type })) : rej(new Error('Failed to crop image.')),
+      'image/png',
+    ),
+  );
+}
+
+function getRadianAngle(degreeValue: number) {
+  return (degreeValue * Math.PI) / 180;
+}
+
+function rotateSize(width: number, height: number, rotation: number) {
+  const rotRad = getRadianAngle(rotation);
+
+  return {
+    width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+    height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height),
+  };
+}
+
+function createImage(url: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', reject);
+    image.setAttribute('crossOrigin', 'anonymous');
+    image.src = url;
+  });
+}

package/src/components/image-cropper/index.ts

@@ -0,0 +1 @@
+export * from './ImageCropper';

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './badge-group';
+export * from './checkbox-card';
+export * from './form';
+export * from './image-cropper';
+export * from './labeled-info';
+export * from './section-card';

package/src/components/labeled-info/LabeledInfo.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Info } from 'lucide-react';
+import { LabeledInfo } from './LabeledInfo';
+
+const meta: Meta<typeof LabeledInfo> = {
+  component: LabeledInfo,
+  title: 'Components/LabeledInfo',
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'inline'],
+    },
+  },
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: <Info size="1em" />,
+    label: 'Label',
+    children: 'Child content',
+    fallback: '--',
+  },
+};
+
+export default meta;

package/src/components/labeled-info/LabeledInfo.tsx

@@ -0,0 +1,54 @@
+import { Center, Group, Stack, Text, Tooltip } from '@mantine/core';
+import type { ReactNode } from 'react';
+
+/**
+ * {@link LabeledInfo} variants.
+ *
+ * - `default`: Renders an icon, label as header and children below.
+ * - `inline`: Renders an icon and the children in a single row.
+ */
+export type LabeledInfoVariant = 'default' | 'inline';
+
+export interface LabeledInfoProps {
+  variant?: LabeledInfoVariant;
+  icon?: ReactNode;
+  label?: ReactNode;
+  children?: ReactNode;
+  fallback?: ReactNode;
+}
+
+/**
+ * Enriches the children with an optional label and icon.
+ */
+export function LabeledInfo({ icon, label, children, variant = 'default', fallback = '–' }: LabeledInfoProps) {
+  const wrappedChildren = <Text component="div">{children || fallback}</Text>;
+
+  if (variant === 'inline') {
+    const wrappedIcon = (
+      <Text component="div" c="dimmed">
+        <Center>{icon}</Center>
+      </Text>
+    );
+
+    return (
+      <Group gap="xs" align="center" wrap="nowrap">
+        {label ? <Tooltip label={label}>{wrappedIcon}</Tooltip> : wrappedIcon}
+        {wrappedChildren}
+      </Group>
+    );
+  }
+
+  return (
+    <Stack gap={0}>
+      <Text component="div" c="dimmed" fz="sm">
+        <Group gap="xs" align="center" wrap="nowrap">
+          {icon && <Center>{icon}</Center>}
+          <Text component="div" truncate inherit>
+            {label}
+          </Text>
+        </Group>
+      </Text>
+      {wrappedChildren}
+    </Stack>
+  );
+}

package/src/components/labeled-info/index.ts

@@ -0,0 +1 @@
+export * from './LabeledInfo';

package/src/components/section-card/Header.tsx

@@ -0,0 +1,81 @@
+import {
+  Box,
+  factory,
+  Group,
+  Stack,
+  Text,
+  Title,
+  useProps,
+  type BoxProps,
+  type ElementProps,
+  type Factory,
+  type StylesApiProps,
+  type TextProps,
+  type TitleProps,
+} from '@mantine/core';
+import type { ReactNode } from 'react';
+import classes from './SectionCard.module.css';
+
+export interface SectionCardHeaderProps
+  extends BoxProps, StylesApiProps<SectionCardHeaderFactory>, ElementProps<'header', 'title'> {
+  illustration?: ReactNode;
+  title?: ReactNode;
+  titleProps?: Omit<TitleProps, 'children'>;
+  subTitle?: ReactNode;
+  subTitleProps?: Omit<TextProps, 'children'>;
+  actions?: ReactNode;
+}
+
+export type SectionCardHeaderFactory = Factory<{
+  props: SectionCardHeaderProps;
+  ref: HTMLDivElement;
+}>;
+
+const defaultSectionCardHeaderProps = {
+  p: 'md',
+} satisfies Partial<SectionCardHeaderProps>;
+
+export const SectionCardHeader = factory<SectionCardHeaderFactory>((_props) => {
+  const { illustration, title, titleProps, subTitle, subTitleProps, actions, children, className, ...rest } = useProps(
+    'SectionCard.Header',
+    defaultSectionCardHeaderProps,
+    _props,
+  );
+
+  const titleElement = (
+    <Stack gap="xs" className={`${classes['section-card__header__header__title']} ${classes['ellipsis']}`}>
+      {title && (
+        <Title order={2} {...titleProps} className={`${classes['ellipsis']} ${titleProps?.className ?? ''}`}>
+          {title}
+        </Title>
+      )}
+
+      {subTitle && (
+        <Text
+          component="div"
+          c="dimmed"
+          {...subTitleProps}
+          className={`${classes['ellipsis']} ${subTitleProps?.className ?? ''}`}>
+          {subTitle}
+        </Text>
+      )}
+    </Stack>
+  );
+
+  return (
+    <Box component="header" className={`${classes['section-card__header']} ${className ?? ''}`} {...rest}>
+      <div className={classes['section-card__header__header']}>
+        {illustration && <div className={classes['section-card__header__header__illustration']}>{illustration}</div>}
+        {titleElement}
+        {actions && (
+          <Group gap="xs" className={classes['section-card__header__header__actions']}>
+            {actions}
+          </Group>
+        )}
+      </div>
+      {children && <div>{children}</div>}
+    </Box>
+  );
+});
+
+SectionCardHeader.displayName = 'SectionCard.Header';

package/src/components/section-card/Section.tsx

@@ -0,0 +1,48 @@
+import {
+  Box,
+  factory,
+  Title,
+  useProps,
+  type BoxProps,
+  type ElementProps,
+  type Factory,
+  type StylesApiProps,
+  type TitleProps,
+} from '@mantine/core';
+import type { ReactNode } from 'react';
+import classes from './SectionCard.module.css';
+
+export interface SectionCardSectionProps
+  extends BoxProps, StylesApiProps<SectionCardSectionFactory>, ElementProps<'section', 'title'> {
+  title?: ReactNode;
+  titleProps?: Omit<TitleProps, 'children'>;
+}
+
+export type SectionCardSectionFactory = Factory<{
+  props: SectionCardSectionProps;
+  ref: HTMLDivElement;
+}>;
+
+const defaultSectionCardSectionProps = {
+  p: 'md',
+} satisfies Partial<SectionCardSectionProps>;
+
+export const SectionCardSection = factory<SectionCardSectionFactory>((_props) => {
+  const { title, titleProps, className, children, ...rest } = useProps(
+    'SectionCard.Section',
+    defaultSectionCardSectionProps,
+    _props,
+  );
+  return (
+    <Box component="section" className={`${classes['section-card__section']} ${className ?? ''}`} {...rest}>
+      {title && (
+        <Title order={3} {...titleProps} className={`${classes['ellipsis']} ${titleProps?.className ?? ''}`}>
+          {title}
+        </Title>
+      )}
+      {children && <div>{children}</div>}
+    </Box>
+  );
+});
+
+SectionCardSection.displayName = 'SectionCard.Section';

package/src/components/section-card/SectionCard.module.css

@@ -0,0 +1,40 @@
+.section-card {
+  color: var(--mantine-color-text);
+
+  .section-card__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mantine-spacing-md);
+
+    .section-card__header__header {
+      display: flex;
+      flex-direction: row;
+      gap: var(--mantine-spacing-md);
+      align-items: center;
+
+      .section-card__header__header__illustration {
+        flex: 0 0 auto;
+      }
+
+      .section-card__header__header__title {
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+
+      .section-card__header__header__actions {
+        flex: 0 0 auto;
+      }
+    }
+  }
+
+  .section-card__header + .section-card__section,
+  .section-card__section + .section-card__section {
+    padding-top: 0px !important;
+  }
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/components/section-card/SectionCard.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SectionCard } from './SectionCard';
+import { ActionIcon, ThemeIcon } from '@mantine/core';
+import { Ellipsis, Info } from 'lucide-react';
+
+const meta: Meta<typeof SectionCard> = {
+  component: SectionCard,
+  title: 'Components/SectionCard',
+  argTypes: {
+    withBorder: {
+      control: { type: 'boolean' },
+    },
+    radius: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    shadow: {
+      control: { type: 'select' },
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    children: {
+      control: false,
+    },
+  },
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <SectionCard.Header
+          illustration={
+            <ThemeIcon variant="light" radius="xl" size="xl">
+              <Info size="1em" />
+            </ThemeIcon>
+          }
+          title="SectionCard.Header Title"
+          subTitle="Sub title."
+          actions={
+            <ActionIcon variant="light">
+              <Ellipsis size="1em" />
+            </ActionIcon>
+          }
+        />
+        <SectionCard.Section title="Section Title">Content</SectionCard.Section>
+        <SectionCard.Section title="Section Title">Content</SectionCard.Section>
+        <SectionCard.Section title="Section Title">Content</SectionCard.Section>
+      </>
+    ),
+  },
+};
+
+export const TitleOnly: Story = {
+  args: {
+    children: <SectionCard.Header title="Demo Title" />,
+  },
+};
+
+export default meta;