From 58bf28b215d88428753e5f92b45502ac2d5079aa Mon Sep 17 00:00:00 2001 From: Croco Dendy Date: Sat, 8 Aug 2026 10:54:40 +0000 Subject: [PATCH 1/4] docs(release): Tier 2 entries: form controls, Modal, feedback components Refs: IDEA-4 --- package.json | 11 +- papercamp/ideas/IDEA-4.md | 2 +- papercamp/ideas/{ => archive}/IDEA-2.md | 3 +- papercamp/ideas/{ => archive}/IDEA-3.md | 4 +- papercamp/ideas/index.md | 2 +- papercamp/run-order.md | 5 +- src/showcase.tsx | 320 +++++++++++++++++++++++- vite.config.ts | 2 +- 8 files changed, 330 insertions(+), 19 deletions(-) rename papercamp/ideas/{ => archive}/IDEA-2.md (97%) rename papercamp/ideas/{ => archive}/IDEA-3.md (99%) diff --git a/package.json b/package.json index 6067e18..81a3fcb 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,7 @@ "version": "0.1.1", "description": "Glossy, noisy, cosy React component library — frosted glass, film grain, and lava glow", "type": "module", - "sideEffects": [ - "**/*.css", - "**/*.scss" - ], + "sideEffects": ["**/*.css", "**/*.scss"], "packageManager": "pnpm@10.12.1", "main": "dist/index.cjs", "module": "dist/index.mjs", @@ -98,10 +95,6 @@ "vitest": "^2.1.9" }, "pnpm": { - "onlyBuiltDependencies": [ - "@biomejs/biome", - "@swc/core", - "esbuild" - ] + "onlyBuiltDependencies": ["@biomejs/biome", "@swc/core", "esbuild"] } } diff --git a/papercamp/ideas/IDEA-4.md b/papercamp/ideas/IDEA-4.md index 5974012..e176b11 100644 --- a/papercamp/ideas/IDEA-4.md +++ b/papercamp/ideas/IDEA-4.md @@ -13,7 +13,7 @@ Every component shipped in IDEA-1..3 needs an entry in the showcase's Components ### Phases - [x] Tier 1 entries: IconButton, Stamp, Tooltip, Toast (+ extend Button entry with danger/icons/isActive) -- [ ] Tier 2 entries: form controls, Modal, feedback components +- [x] Tier 2 entries: form controls, Modal, feedback components - [ ] Tier 3 entries: gap-fillers + icon-set grid ### Log diff --git a/papercamp/ideas/IDEA-2.md b/papercamp/ideas/archive/IDEA-2.md similarity index 97% rename from papercamp/ideas/IDEA-2.md rename to papercamp/ideas/archive/IDEA-2.md index a90df5d..78056d5 100644 --- a/papercamp/ideas/IDEA-2.md +++ b/papercamp/ideas/archive/IDEA-2.md @@ -2,8 +2,9 @@ id: IDEA-2 title: Tier 2 — form controls and overlays type: feat -status: review +status: done created: 2026-08-04 +updated: 2026-08-08 tags: - components - release diff --git a/papercamp/ideas/IDEA-3.md b/papercamp/ideas/archive/IDEA-3.md similarity index 99% rename from papercamp/ideas/IDEA-3.md rename to papercamp/ideas/archive/IDEA-3.md index a0dd122..b32f8a5 100644 --- a/papercamp/ideas/IDEA-3.md +++ b/papercamp/ideas/archive/IDEA-3.md @@ -2,9 +2,9 @@ id: IDEA-3 title: Tier 3 gap-filler components type: feat -status: review +status: done created: 2026-08-04 -updated: 2026-08-07 +updated: 2026-08-08 tags: - components - release diff --git a/papercamp/ideas/index.md b/papercamp/ideas/index.md index 164cd80..5afc1e0 100644 --- a/papercamp/ideas/index.md +++ b/papercamp/ideas/index.md @@ -4,7 +4,7 @@ |----|-------|------|--------|------| | IDEA-1 | Tier 1 — the six workhorse components | feat | done | components, release | | IDEA-2 | Tier 2 — form controls and overlays | feat | done | components, release | -| IDEA-3 | Tier 3 gap-filler components | feat | review | components, release | +| IDEA-3 | Tier 3 gap-filler components | feat | done | components, release | | IDEA-4 | Showcase entries for all components | docs | planned | showcase, release | | IDEA-5 | Migrate paper-camp from paper-ui to func-ui | feat | dropped | migration | | IDEA-6 | Adopt func-ui in the radio project | feat | idea | migration, radio | diff --git a/papercamp/run-order.md b/papercamp/run-order.md index 073faa8..492c402 100644 --- a/papercamp/run-order.md +++ b/papercamp/run-order.md @@ -1,3 +1,2 @@ -IDEA-3 — Tier 3 — gap-fillers paper-ui never had -IDEA-4 — Showcase gallery entries for every release component -IDEA-7 — Radio-parity components — Slider, CircularProgress, Radio, DataTable, Tabs, Menu +IDEA-4 — Showcase entries for all components +IDEA-7 — Radio-parity components diff --git a/src/showcase.tsx b/src/showcase.tsx index ee2dac2..e99f844 100644 --- a/src/showcase.tsx +++ b/src/showcase.tsx @@ -3,18 +3,30 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { type CSSProperties, type ReactNode, type Ref, useEffect, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { + Alert, Backdrop, Button, Card, + Checkbox, + Divider, Glass, IconButton, + Input, + ListItem, + Modal, + Progress, + Select, + Skeleton, + Spinner, Stamp, + Switch, + Textarea, ToastProvider, Tooltip, cn, useToast, } from './index'; -import type { StampVariant, TooltipPlacement } from './index'; +import type { AlertVariant, SelectOption, StampVariant, TooltipPlacement } from './index'; const sections = ['welcome', 'components', 'tokens', 'docs'] as const; @@ -33,6 +45,14 @@ const funkLines = [ { quote: 'Dance to the music', src: 'sly & the family stone · 1968' }, { quote: 'Get down on it', src: 'kool & the gang · 1981' }, ]; +const selectOptions: SelectOption[] = [ + { value: 'funk', label: 'Funk' }, + { value: 'soul', label: 'Soul' }, + { value: 'disco', label: 'Disco' }, + { value: 'boogie', label: 'Boogie (out of stock)', disabled: true }, + { value: 'groove', label: 'Groove' }, +]; + type Section = (typeof sections)[number]; function Control({ @@ -200,6 +220,30 @@ function Showcase() { const [tipPlacement, setTipPlacement] = useState('top'); + const [fieldSize, setFieldSize] = useState<'sm' | 'md'>('md'); + const [fieldError, setFieldError] = useState(false); + + const [selectValue, setSelectValue] = useState(''); + + const [checked, setChecked] = useState(true); + const [switchOn, setSwitchOn] = useState(true); + + const [modalOpen, setModalOpen] = useState(false); + const [modalSize, setModalSize] = useState<'sm' | 'md' | 'lg'>('md'); + + const [activeItem, setActiveItem] = useState('inbox'); + + const [alertVariant, setAlertVariant] = useState('info'); + const [alertShown, setAlertShown] = useState(true); + + const [dividerOrientation, setDividerOrientation] = useState<'horizontal' | 'vertical'>( + 'horizontal', + ); + + const [spinnerSize, setSpinnerSize] = useState<'sm' | 'md' | 'lg'>('md'); + const [progressValue, setProgressValue] = useState(60); + const [skeletonVariant, setSkeletonVariant] = useState<'text' | 'rect' | 'circle'>('text'); + // A different line every visit, like the lamp. const [funkLine] = useState(() => funkLines[Math.floor(Math.random() * funkLines.length)]); @@ -554,6 +598,280 @@ function Showcase() { > + + +
+ +
+
+ + setFieldError(v === 'true')} + /> +
+ + + +
+