diff --git a/package.json b/package.json index 6067e18..21e2513 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ }, "devDependencies": { "@biomejs/biome": "^1.9.4", - "@dendelion/paper-camp": "link:../paper-camp-island", + "@dendelion/paper-camp": "link:../paper-camp-build", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@vitejs/plugin-react-swc": "^3.7.1", diff --git a/papercamp/config.json b/papercamp/config.json index 353bcb7..e42eac5 100644 --- a/papercamp/config.json +++ b/papercamp/config.json @@ -32,5 +32,8 @@ "effort": "medium" } }, - "port": 3041 + "port": 3041, + "commands": { + "build": "pnpm --dir node_modules/@dendelion/paper-camp run build:toolbar" + } } diff --git a/papercamp/ideas/IDEA-4.md b/papercamp/ideas/IDEA-4.md index 5974012..b1451e2 100644 --- a/papercamp/ideas/IDEA-4.md +++ b/papercamp/ideas/IDEA-4.md @@ -2,20 +2,22 @@ id: IDEA-4 title: Showcase entries for all components type: docs -status: planned +status: review created: 2026-08-04 +updated: 2026-08-10 tags: - showcase - release +order: 1 --- Every component shipped in IDEA-1..3 needs an entry in the showcase's Components section (src/showcase.tsx), following the existing Entry + Control pattern (live component + variant/size/state toggles). The showcase is the library's documentation surface — nothing ships undocumented. ### Phases - [x] Tier 1 entries: IconButton, Stamp, Tooltip, Toast (+ extend Button entry with danger/icons/isActive) -- [ ] Tier 2 entries: form controls, Modal, feedback components -- [ ] Tier 3 entries: gap-fillers + icon-set grid +- [x] Tier 2 entries: form controls, Modal, feedback components +- [x] Tier 3 entries: gap-fillers + icon-set grid -### Log -- 2026-08-04 — IconButton and Stamp entries live (with variant/size/dot controls, clickable-stamp counter demo); Button entry gained the danger option; Card entry shows sm/md sizes plus a keyboard-accessible clickable card. Tooltip/Toast entries now live too. -- 2026-08-04 — Structure fix: an earlier Log insertion accidentally split the Phases list, orphaning the Tier 2/3 phases inside the Log — the idea parsed as one checked phase. Restored all three phases under Phases. +### Thread +- [x] 2026-08-10 [chat] test +- [x] 2026-08-10 [chat] [agent] Noted — nothing to change here, just say the word if you've got a real question or edit for the showcase entries. 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..c18a95a 100644 --- a/papercamp/ideas/index.md +++ b/papercamp/ideas/index.md @@ -4,8 +4,8 @@ |----|-------|------|--------|------| | 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-4 | Showcase entries for all components | docs | planned | showcase, release | +| IDEA-3 | Tier 3 gap-filler components | feat | done | components, release | +| IDEA-4 | Showcase entries for all components | docs | review | 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 | | IDEA-7 | Radio-parity components | feat | planned | components, release, 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/pnpm-lock.yaml b/pnpm-lock.yaml index 868a463..64f6572 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,8 +22,8 @@ importers: specifier: ^1.9.4 version: 1.9.4 '@dendelion/paper-camp': - specifier: link:../paper-camp-island - version: link:../paper-camp-island + specifier: link:../paper-camp-build + version: link:../paper-camp-build '@types/react': specifier: ^18.3.12 version: 18.3.31 diff --git a/src/showcase.tsx b/src/showcase.tsx index ee2dac2..d5d6c6b 100644 --- a/src/showcase.tsx +++ b/src/showcase.tsx @@ -3,18 +3,53 @@ 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, + Breadcrumb, Button, Card, + Checkbox, + Chip, + CodeBlock, + CopyButton, + Divider, + Drawer, + EmptyState, + FileButton, Glass, + Icon, IconButton, + InlineCode, + Input, + Kbd, + LinkButton, + ListItem, + Menu, + Modal, + Progress, + SegmentedControl, + Select, + Skeleton, + Spinner, Stamp, + StatusDot, + Switch, + Textarea, ToastProvider, Tooltip, cn, useToast, } from './index'; -import type { StampVariant, TooltipPlacement } from './index'; +import type { + AlertVariant, + DrawerSide, + EmptyStateStatus, + IconName, + SelectOption, + StampVariant, + StatusDotVariant, + TooltipPlacement, +} from './index'; const sections = ['welcome', 'components', 'tokens', 'docs'] as const; @@ -33,6 +68,41 @@ const funkLines = [ { quote: 'Dance to the music', src: 'sly & the family stone · 1968' }, { quote: 'Get down on it', src: 'kool & the gang · 1981' }, ]; +const iconNames: IconName[] = [ + 'close', + 'check', + 'copy', + 'plus', + 'folder', + 'lightbulb', + 'chevron-up', + 'chevron-down', + 'chevron-left', + 'chevron-right', + 'play', + 'flag', + 'sort-asc', + 'sort-desc', + 'refresh', + 'more', + 'wand', + 'merge', + 'push', + 'pull', + 'shuffle', + 'commit', + 'github', + 'note', +]; + +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 +270,47 @@ 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'); + + const [linkColor, setLinkColor] = useState<'inherit' | 'accent'>('accent'); + const [linkSize, setLinkSize] = useState<'sm' | 'md' | 'lg'>('md'); + + const [emptyStatus, setEmptyStatus] = useState('empty'); + + const [dotVariant, setDotVariant] = useState('success'); + const [dotPulse, setDotPulse] = useState(false); + + const [chipFilters, setChipFilters] = useState(['funk']); + + const [segValue, setSegValue] = useState('list'); + + const [drawerOpen, setDrawerOpen] = useState(false); + const [drawerSide, setDrawerSide] = useState('right'); + + const [fileName, setFileName] = useState(null); + // A different line every visit, like the lamp. const [funkLine] = useState(() => funkLines[Math.floor(Math.random() * funkLines.length)]); @@ -554,6 +665,566 @@ function Showcase() { > + + +
+ +
+
+ + setFieldError(v === 'true')} + /> +
+ + + +
+