Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 olly
|
49d6ac8a4e | ||
|
olly
|
4919bc26e5 |
@@ -2,6 +2,26 @@ import type { StorybookConfig } from 'storybook-react-rsbuild';
|
||||
|
||||
/* Dev-only playground. Never shipped — package `files` is ["dist"]. */
|
||||
const config: StorybookConfig = {
|
||||
rsbuildFinal: (config) => {
|
||||
config.tools ??= {};
|
||||
// Append our rule without clobbering storybook-react-rsbuild's own
|
||||
// tools.rspack hook (it injects the storybook-config-entry virtual module
|
||||
// in build mode). Mutate in place and return nothing so its config stays.
|
||||
const prev = config.tools.rspack;
|
||||
config.tools.rspack = [
|
||||
...(Array.isArray(prev) ? prev : prev ? [prev] : []),
|
||||
(rspackConfig) => {
|
||||
rspackConfig.module ??= {};
|
||||
rspackConfig.module.rules ??= [];
|
||||
(rspackConfig.module.rules as unknown[]).push({
|
||||
test: /\.mjs$/,
|
||||
type: 'javascript/auto',
|
||||
resolve: { fullySpecified: false },
|
||||
});
|
||||
},
|
||||
];
|
||||
return config;
|
||||
},
|
||||
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
|
||||
addons: ['@storybook/addon-docs'],
|
||||
staticDirs: ['../src/assets'],
|
||||
|
||||
@@ -37,9 +37,11 @@ Only `dist/` ships (`files: ["dist"]`), so the playground, stories, and `.storyb
|
||||
|
||||
Fonts are NOT in the core stylesheet. `tokens.css` defines `--font-display/sans/mono` chains that degrade to `system-ui`; the actual faces (Anta `@font-face` + Onest/Geist Mono Google Fonts `@import`) live in `src/styles/fonts.css`, shipped as the optional `modern-sk/fonts.css` export. Consumers either import it, or override the `--font-*` tokens to remap typefaces. Storybook's `preview.tsx` and the dev `global.css` both import `fonts.css` so the playgrounds stay branded.
|
||||
|
||||
### Components (`src/components/ui.tsx`)
|
||||
### Components (`src/components/`)
|
||||
|
||||
All components live in one file. Pattern: Radix provides logic/accessibility, every visual comes from CSS. Components are thin wrappers that attach `modern-sk-*` classes and spread props. The `cx()` helper joins class names (no classnames dependency). Components forward refs where they wrap a DOM element. There is no inline styling and no CSS-in-JS — **all appearance is driven by `modern-sk-*` classes resolving against CSS custom properties.**
|
||||
`src/components/ui.tsx` is a barrel that re-exports one folder per component (`button/`, `text-field/`, …); `cx`/shared helpers live in `src/components/utils.ts`. Pattern: Radix provides logic/accessibility, every visual comes from CSS. Components are thin wrappers that attach `modern-sk-*` classes and spread props. The `cx()` helper joins class names (no classnames dependency). Components forward refs where they wrap a DOM element. There is no inline styling and no CSS-in-JS — **all appearance is driven by `modern-sk-*` classes resolving against CSS custom properties.**
|
||||
|
||||
Exception — text inputs (`text-field/`): `TextField`/`TextArea`/`SearchField` animate letters in/out (osu!-lazer style). Native fields can't animate per-glyph, so the real element renders with transparent text (`modern-sk-field--animated`, caret stays visible) over a mirrored per-character `<span>` overlay that plays the `modern-sk-char-in/out` keyframes; an LCS diff preserves letter identity so only inserted/removed glyphs animate. The overlay still derives all appearance from `modern-sk-*` classes/tokens — the only JS-set styles are the per-letter pin offset and scroll-sync transform. Pass `animated={false}` to opt out and render the plain native field.
|
||||
|
||||
### Styling system (`src/styles/`)
|
||||
|
||||
@@ -47,7 +49,7 @@ All components live in one file. Pattern: Radix provides logic/accessibility, ev
|
||||
- `components.css` — the `modern-sk-*` class definitions.
|
||||
- Dark/light is driven by `data-theme` on `<html>`, set by `ThemeProvider` (persisted to `localStorage` under key `modern-sk-theme`, default `dark`).
|
||||
|
||||
When adding or changing a component: add the wrapper in `ui.tsx`, define its `modern-sk-*` styles in `components.css`, and pull any new color/spacing value from a token in `tokens.css` rather than hardcoding.
|
||||
When adding or changing a component: add the wrapper folder under `src/components/` and re-export it from `ui.tsx`, define its `modern-sk-*` styles in `components.css`, and pull any new color/spacing value from a token in `tokens.css` rather than hardcoding.
|
||||
|
||||
## Consumer contract
|
||||
|
||||
|
||||
@@ -238,6 +238,7 @@ const App = () => {
|
||||
<div className="cap">Slider & stepper</div>
|
||||
<div className="cluster">
|
||||
<Slider defaultValue={[62]} max={100} step={1} />
|
||||
<Slider defaultValue={[40]} max={100} step={20} marks />
|
||||
<Stepper
|
||||
onDecrement={() => setCount((n) => Math.max(0, n - 1))}
|
||||
onIncrement={() => setCount((n) => n + 1)}
|
||||
|
||||
+110
-44
@@ -1,59 +1,125 @@
|
||||
import { type ComponentPropsWithoutRef } from 'react';
|
||||
import { type ComponentPropsWithoutRef, type CSSProperties } from 'react';
|
||||
import { Slider as RSlider } from 'radix-ui';
|
||||
|
||||
type Step = { value: number; label?: string };
|
||||
type Mark = { value: number; label?: string };
|
||||
type MarksProp = boolean | Array<number | Mark>;
|
||||
type NotchPlacement = 'top' | 'bottom' | 'both' | 'none';
|
||||
|
||||
type SliderProps = ComponentPropsWithoutRef<typeof RSlider.Root> & {
|
||||
steps?: number | Step[];
|
||||
type KnobStyle = 'square' | 'round';
|
||||
|
||||
type SliderProps = Omit<ComponentPropsWithoutRef<typeof RSlider.Root>, 'className'> & {
|
||||
/**
|
||||
* Step marks.
|
||||
* - `true` — auto-generate one mark per `step` between `min` and `max`.
|
||||
* - array — explicit marks; numbers or `{ value, label }` for tick labels.
|
||||
*/
|
||||
marks?: MarksProp;
|
||||
/**
|
||||
* Where to draw the notch ticks relative to the track.
|
||||
* `'bottom'` (default), `'top'`, `'both'`, or `'none'` to hide ticks
|
||||
* (labels still render when provided). No effect without `marks`.
|
||||
*/
|
||||
notches?: NotchPlacement;
|
||||
/** Thumb shape. `'square'` (default) has a small border-radius; `'round'` is a full circle. */
|
||||
knobStyle?: KnobStyle;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function resolveSteps(steps: number | Step[], min: number, max: number): Step[] {
|
||||
if (Array.isArray(steps)) return steps;
|
||||
if (steps < 2) return [];
|
||||
return Array.from({ length: steps }, (_, i) => ({
|
||||
value: min + (i / (steps - 1)) * (max - min),
|
||||
}));
|
||||
function resolveMarks(
|
||||
marks: MarksProp,
|
||||
min: number,
|
||||
max: number,
|
||||
step: number,
|
||||
): Mark[] {
|
||||
if (Array.isArray(marks)) {
|
||||
return marks
|
||||
.map((m) => (typeof m === 'number' ? { value: m } : m))
|
||||
.filter((m) => m.value >= min && m.value <= max);
|
||||
}
|
||||
if (marks !== true) return [];
|
||||
if (!(step > 0) || max <= min) return [];
|
||||
const count = Math.floor((max - min) / step);
|
||||
// Guard against absurd notch counts (e.g. step=1 over a 0–1000 range).
|
||||
if (count < 1 || count > 100) return [];
|
||||
return Array.from({ length: count + 1 }, (_, i) => ({ value: min + i * step }));
|
||||
}
|
||||
|
||||
export const Slider = ({ steps, min = 0, max = 100, ...props }: SliderProps) => {
|
||||
const resolved = steps != null ? resolveSteps(steps, min, max) : [];
|
||||
const hasSteps = resolved.length > 0;
|
||||
const percent = (value: number, min: number, max: number) =>
|
||||
max === min ? 0 : (value - min) / (max - min);
|
||||
|
||||
return (
|
||||
<RSlider.Root
|
||||
className={`modern-sk-slider${hasSteps ? ' modern-sk-slider--has-steps' : ''}`}
|
||||
min={min}
|
||||
max={max}
|
||||
{...props}
|
||||
>
|
||||
<RSlider.Track className="modern-sk-slider__track">
|
||||
<RSlider.Range className="modern-sk-slider__range" />
|
||||
{hasSteps && resolved.map((step) => (
|
||||
<div
|
||||
key={step.value}
|
||||
className="modern-sk-slider__step-dot"
|
||||
aria-hidden
|
||||
style={{ left: `${((step.value - min) / (max - min)) * 100}%` }}
|
||||
const NotchLayer = ({
|
||||
marks,
|
||||
min,
|
||||
max,
|
||||
side,
|
||||
}: {
|
||||
marks: Mark[];
|
||||
min: number;
|
||||
max: number;
|
||||
side: 'top' | 'bottom';
|
||||
}) => (
|
||||
<div className={`modern-sk-slider__notches modern-sk-slider__notches--${side}`} aria-hidden>
|
||||
{marks.map((mark) => (
|
||||
<span
|
||||
key={mark.value}
|
||||
className="modern-sk-slider__notch"
|
||||
style={{ '--p': percent(mark.value, min, max) } as CSSProperties}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Slider = ({
|
||||
marks,
|
||||
notches = 'bottom',
|
||||
knobStyle = 'square',
|
||||
min = 0,
|
||||
max = 100,
|
||||
step = 1,
|
||||
className,
|
||||
...props
|
||||
}: SliderProps) => {
|
||||
const resolved = marks != null ? resolveMarks(marks, min, max, step) : [];
|
||||
const hasMarks = resolved.length > 0;
|
||||
const hasLabels = resolved.some((m) => m.label != null);
|
||||
const showTop = hasMarks && (notches === 'top' || notches === 'both');
|
||||
const showBottom = hasMarks && (notches === 'bottom' || notches === 'both');
|
||||
|
||||
const cls = [
|
||||
'modern-sk-slider',
|
||||
`modern-sk-slider--knob-${knobStyle}`,
|
||||
hasMarks && 'modern-sk-slider--has-marks',
|
||||
hasLabels && 'modern-sk-slider--has-labels',
|
||||
showTop && 'modern-sk-slider--notch-top',
|
||||
showBottom && 'modern-sk-slider--notch-bottom',
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return (
|
||||
<RSlider.Root className={cls} min={min} max={max} step={step} {...props}>
|
||||
<RSlider.Track className="modern-sk-slider__track">
|
||||
<RSlider.Range className="modern-sk-slider__range" />
|
||||
{showTop && <NotchLayer marks={resolved} min={min} max={max} side="top" />}
|
||||
{showBottom && <NotchLayer marks={resolved} min={min} max={max} side="bottom" />}
|
||||
{hasLabels && (
|
||||
<div className="modern-sk-slider__labels" aria-hidden>
|
||||
{resolved.map((mark) =>
|
||||
mark.label != null ? (
|
||||
<span
|
||||
key={mark.value}
|
||||
className="modern-sk-slider__label"
|
||||
style={{ '--p': percent(mark.value, min, max) } as CSSProperties}
|
||||
>
|
||||
{mark.label}
|
||||
</span>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</RSlider.Track>
|
||||
<RSlider.Thumb className="modern-sk-slider__thumb" aria-label="Value" />
|
||||
{hasSteps && (
|
||||
<div className="modern-sk-slider__steps" aria-hidden>
|
||||
{resolved.map((step) => (
|
||||
<div
|
||||
key={step.value}
|
||||
className="modern-sk-slider__step"
|
||||
style={{ left: `${((step.value - min) / (max - min)) * 100}%` }}
|
||||
>
|
||||
<div className="modern-sk-slider__step-tick" />
|
||||
{step.label != null && (
|
||||
<span className="modern-sk-slider__step-label">{step.label}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</RSlider.Root>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,7 +6,9 @@ export const Spinner = ({
|
||||
className,
|
||||
...props
|
||||
}: ComponentPropsWithoutRef<'span'> & { size?: 'sm' | 'lg' }) => {
|
||||
const gid = `modern-sk-groove-${useId()}`;
|
||||
const uid = useId();
|
||||
const grooveId = `modern-sk-groove-${uid}`;
|
||||
const glowId = `modern-sk-glow-${uid}`;
|
||||
return (
|
||||
<span
|
||||
role="status"
|
||||
@@ -16,21 +18,47 @@ export const Spinner = ({
|
||||
>
|
||||
<svg viewBox="0 0 36 36" fill="none">
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={gid}
|
||||
x1="18"
|
||||
y1="4"
|
||||
x2="18"
|
||||
y2="32"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0" stopColor="var(--spin-groove-1)" />
|
||||
<stop offset="1" stopColor="var(--spin-groove-2)" />
|
||||
</linearGradient>
|
||||
{/* Carved channel: flat ring sunk by a top inner shadow — like the switch well. */}
|
||||
<filter id={grooveId} x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feComponentTransfer in="SourceAlpha" result="inv">
|
||||
<feFuncA type="table" tableValues="1 0" />
|
||||
</feComponentTransfer>
|
||||
<feGaussianBlur in="inv" stdDeviation="1" result="blur" />
|
||||
<feOffset in="blur" dy="1" result="off" />
|
||||
<feFlood floodColor="#000" floodOpacity="0.7" />
|
||||
<feComposite in2="off" operator="in" />
|
||||
<feComposite in2="SourceAlpha" operator="in" result="shadow" />
|
||||
<feMerge>
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
<feMergeNode in="shadow" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
{/* Soft round glow — generous region so it never clips to a square. */}
|
||||
<filter id={glowId} x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="1.6" />
|
||||
</filter>
|
||||
</defs>
|
||||
<circle cx="18" cy="18" r="14" stroke={`url(#${gid})`} strokeWidth="5" />
|
||||
<circle
|
||||
className="modern-sk-spinner__arc"
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="14"
|
||||
stroke="var(--spin-track)"
|
||||
strokeWidth="5"
|
||||
filter={`url(#${grooveId})`}
|
||||
/>
|
||||
<g className="modern-sk-spinner__arc">
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="14"
|
||||
stroke="var(--lime)"
|
||||
strokeWidth="4"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray="22 88"
|
||||
opacity="0.8"
|
||||
filter={`url(#${glowId})`}
|
||||
/>
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="14"
|
||||
@@ -39,6 +67,7 @@ export const Spinner = ({
|
||||
strokeLinecap="round"
|
||||
strokeDasharray="22 88"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
|
||||
@@ -1,24 +1,276 @@
|
||||
import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useId,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type ComponentPropsWithoutRef,
|
||||
type ReactNode,
|
||||
type Ref,
|
||||
} from 'react';
|
||||
import { cx } from '../utils';
|
||||
|
||||
export const TextField = forwardRef<HTMLInputElement, ComponentPropsWithoutRef<'input'>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<input ref={ref} className={cx('modern-sk-field', className)} {...props} />
|
||||
/* ------------------------------------------------------------------ *
|
||||
* Typing animation (osu!-lazer style)
|
||||
*
|
||||
* Native inputs draw their own text, so individual letters can't be
|
||||
* animated. Instead the real field renders transparent (caret stays
|
||||
* visible) and a mirrored per-character <span> overlay sits behind it:
|
||||
* newly typed letters rise + fade in, erased letters fall + fade out.
|
||||
* ------------------------------------------------------------------ */
|
||||
|
||||
type FieldElement = HTMLInputElement | HTMLTextAreaElement;
|
||||
|
||||
interface CharEntry {
|
||||
id: number;
|
||||
char: string;
|
||||
leaving: boolean;
|
||||
x?: number;
|
||||
y?: number;
|
||||
}
|
||||
|
||||
/** Longest-common-subsequence match so unchanged letters keep their id
|
||||
* (and thus don't replay the appear animation on every keystroke). */
|
||||
function diffChars(prev: ReadonlyArray<{ id: number; char: string }>, next: string) {
|
||||
const n = prev.length;
|
||||
const m = next.length;
|
||||
const dp: number[][] = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
|
||||
for (let i = n - 1; i >= 0; i--) {
|
||||
for (let j = m - 1; j >= 0; j--) {
|
||||
dp[i][j] =
|
||||
prev[i].char === next[j]
|
||||
? dp[i + 1][j + 1] + 1
|
||||
: Math.max(dp[i + 1][j], dp[i][j + 1]);
|
||||
}
|
||||
}
|
||||
const reusedId: Array<number | null> = new Array(m).fill(null);
|
||||
const keptPrev = new Array(n).fill(false);
|
||||
let i = 0;
|
||||
let j = 0;
|
||||
while (i < n && j < m) {
|
||||
if (prev[i].char === next[j]) {
|
||||
reusedId[j] = prev[i].id;
|
||||
keptPrev[i] = true;
|
||||
i++;
|
||||
j++;
|
||||
} else if (dp[i + 1][j] >= dp[i][j + 1]) {
|
||||
i++;
|
||||
} else {
|
||||
j++;
|
||||
}
|
||||
}
|
||||
return { reusedId, keptPrev };
|
||||
}
|
||||
|
||||
function useFieldAnimation(
|
||||
multiline: boolean,
|
||||
externalRef: Ref<FieldElement>,
|
||||
controlledValue: ComponentPropsWithoutRef<'input'>['value'],
|
||||
initial: ComponentPropsWithoutRef<'input'>['defaultValue'],
|
||||
) {
|
||||
const innerRef = useRef<FieldElement | null>(null);
|
||||
const overlayRef = useRef<HTMLDivElement | null>(null);
|
||||
const spanRefs = useRef<Map<number, HTMLSpanElement>>(new Map());
|
||||
const present = useRef<Array<{ id: number; char: string }>>([]);
|
||||
const nextId = useRef(0);
|
||||
const idPrefix = useId();
|
||||
|
||||
const [text, setText] = useState(() => String(controlledValue ?? initial ?? ''));
|
||||
const [entries, setEntries] = useState<CharEntry[]>([]);
|
||||
|
||||
const setRef = useCallback(
|
||||
(node: FieldElement | null) => {
|
||||
innerRef.current = node;
|
||||
if (typeof externalRef === 'function') externalRef(node);
|
||||
else if (externalRef) (externalRef as { current: FieldElement | null }).current = node;
|
||||
},
|
||||
[externalRef],
|
||||
);
|
||||
|
||||
const syncScroll = useCallback(() => {
|
||||
const el = innerRef.current;
|
||||
const ov = overlayRef.current;
|
||||
if (el && ov) ov.style.transform = `translate(${-el.scrollLeft}px, ${-el.scrollTop}px)`;
|
||||
}, []);
|
||||
|
||||
// Reconcile the overlay whenever the text changes.
|
||||
useLayoutEffect(() => {
|
||||
const prev = present.current;
|
||||
const { reusedId, keptPrev } = diffChars(prev, text);
|
||||
|
||||
const nextPresent: Array<{ id: number; char: string }> = [];
|
||||
for (let k = 0; k < text.length; k++) {
|
||||
const id = reusedId[k] ?? nextId.current++;
|
||||
nextPresent.push({ id, char: text[k] });
|
||||
}
|
||||
|
||||
// Letters that were removed fall away — pin them where they last sat.
|
||||
const leaving: CharEntry[] = [];
|
||||
for (let k = 0; k < prev.length; k++) {
|
||||
if (keptPrev[k]) continue;
|
||||
const el = spanRefs.current.get(prev[k].id);
|
||||
if (el) {
|
||||
leaving.push({
|
||||
id: prev[k].id,
|
||||
char: prev[k].char,
|
||||
leaving: true,
|
||||
x: el.offsetLeft,
|
||||
y: el.offsetTop,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
present.current = nextPresent;
|
||||
setEntries((current) => [
|
||||
...nextPresent.map((e) => ({ ...e, leaving: false })),
|
||||
...current.filter((e) => e.leaving),
|
||||
...leaving,
|
||||
]);
|
||||
syncScroll();
|
||||
}, [text, syncScroll]);
|
||||
|
||||
// Stay in sync when used as a controlled component.
|
||||
useLayoutEffect(() => {
|
||||
if (controlledValue !== undefined) setText(String(controlledValue));
|
||||
}, [controlledValue]);
|
||||
|
||||
const handleChange = useCallback((value: string) => setText(value), []);
|
||||
|
||||
const onLeaveEnd = useCallback((id: number) => {
|
||||
spanRefs.current.delete(id);
|
||||
setEntries((current) => current.filter((e) => e.id !== id));
|
||||
}, []);
|
||||
|
||||
const overlay = (
|
||||
<div
|
||||
ref={overlayRef}
|
||||
aria-hidden="true"
|
||||
className={cx('modern-sk-field-overlay', multiline && 'modern-sk-field-overlay--multiline')}
|
||||
>
|
||||
{entries.map((e) =>
|
||||
e.leaving ? (
|
||||
<span
|
||||
key={`${idPrefix}-${e.id}`}
|
||||
className="modern-sk-field-char modern-sk-field-char--leaving"
|
||||
style={{ left: e.x, top: e.y }}
|
||||
onAnimationEnd={() => onLeaveEnd(e.id)}
|
||||
>
|
||||
{e.char}
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
key={`${idPrefix}-${e.id}`}
|
||||
ref={(node) => {
|
||||
if (node) spanRefs.current.set(e.id, node);
|
||||
else spanRefs.current.delete(e.id);
|
||||
}}
|
||||
className="modern-sk-field-char"
|
||||
>
|
||||
{e.char}
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return { setRef, overlay, handleChange, syncScroll };
|
||||
}
|
||||
|
||||
type TextFieldProps = ComponentPropsWithoutRef<'input'> & { animated?: boolean };
|
||||
type TextAreaProps = ComponentPropsWithoutRef<'textarea'> & { animated?: boolean };
|
||||
|
||||
export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
({ className, style, onChange, onScroll, animated = true, ...props }, ref) => {
|
||||
const { setRef, overlay, handleChange, syncScroll } = useFieldAnimation(
|
||||
false,
|
||||
ref,
|
||||
props.value,
|
||||
props.defaultValue,
|
||||
);
|
||||
if (!animated) {
|
||||
return (
|
||||
<input
|
||||
ref={ref}
|
||||
className={cx('modern-sk-field', className)}
|
||||
style={style}
|
||||
onChange={onChange}
|
||||
onScroll={onScroll}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={cx('modern-sk-field-wrap', className)} style={style}>
|
||||
<input
|
||||
ref={setRef}
|
||||
className="modern-sk-field modern-sk-field--animated"
|
||||
onChange={(e) => {
|
||||
handleChange(e.currentTarget.value);
|
||||
onChange?.(e);
|
||||
}}
|
||||
onScroll={(e) => {
|
||||
syncScroll();
|
||||
onScroll?.(e);
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
{overlay}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
TextField.displayName = 'TextField';
|
||||
|
||||
export const TextArea = forwardRef<HTMLTextAreaElement, ComponentPropsWithoutRef<'textarea'>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<textarea ref={ref} className={cx('modern-sk-field', className)} {...props} />
|
||||
),
|
||||
export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
||||
({ className, style, onChange, onScroll, animated = true, ...props }, ref) => {
|
||||
const { setRef, overlay, handleChange, syncScroll } = useFieldAnimation(
|
||||
true,
|
||||
ref,
|
||||
props.value,
|
||||
props.defaultValue,
|
||||
);
|
||||
if (!animated) {
|
||||
return (
|
||||
<textarea
|
||||
ref={ref}
|
||||
className={cx('modern-sk-field', className)}
|
||||
style={style}
|
||||
onChange={onChange}
|
||||
onScroll={onScroll}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={cx('modern-sk-field-wrap', 'modern-sk-field-wrap--multiline', className)}
|
||||
style={style}
|
||||
>
|
||||
<textarea
|
||||
ref={setRef}
|
||||
className="modern-sk-field modern-sk-field--animated"
|
||||
onChange={(e) => {
|
||||
handleChange(e.currentTarget.value);
|
||||
onChange?.(e);
|
||||
}}
|
||||
onScroll={(e) => {
|
||||
syncScroll();
|
||||
onScroll?.(e);
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
{overlay}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
TextArea.displayName = 'TextArea';
|
||||
|
||||
export const SearchField = ({
|
||||
icon,
|
||||
...props
|
||||
}: ComponentPropsWithoutRef<'input'> & { icon: ReactNode }) => (
|
||||
}: TextFieldProps & { icon: ReactNode }) => (
|
||||
<div className="modern-sk-search">
|
||||
<span className="ph">{icon}</span>
|
||||
<TextField {...props} />
|
||||
|
||||
@@ -26,6 +26,7 @@ const meta = {
|
||||
iconOnly: { control: 'boolean', description: 'Square padding for a single glyph.' },
|
||||
disabled: { control: 'boolean' },
|
||||
children: { control: 'text' },
|
||||
className: { control: 'text' },
|
||||
},
|
||||
args: { children: 'Button', variant: 'key' },
|
||||
} satisfies Meta<typeof Button>;
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
Th,
|
||||
Td,
|
||||
Badge,
|
||||
Chip,
|
||||
} from '../components/ui';
|
||||
|
||||
const meta = {
|
||||
@@ -18,18 +19,23 @@ const meta = {
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Cards, selectable lists/rows, and the bordered table.',
|
||||
component: 'Cards, selectable lists/rows, badges, chips, and the bordered table.',
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
className: { control: 'text' },
|
||||
},
|
||||
} satisfies Meta<typeof Card>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const CardSurface: Story = {
|
||||
render: () => (
|
||||
<Card style={{ maxWidth: 320, padding: 20 }}>
|
||||
export const CardPlayground: Story = {
|
||||
name: 'Card',
|
||||
args: { children: 'Card content' },
|
||||
render: (args) => (
|
||||
<Card {...args} style={{ maxWidth: 320, padding: 20 }}>
|
||||
<h3 className="modern-sk-h3">Storage</h3>
|
||||
<p className="modern-sk-body">128 GB of 256 GB used.</p>
|
||||
</Card>
|
||||
@@ -47,6 +53,27 @@ export const ListRows: Story = {
|
||||
),
|
||||
};
|
||||
|
||||
export const BadgeShowcase: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<Badge variant="lime">Lime</Badge>
|
||||
<Badge variant="ember">Ember</Badge>
|
||||
<Badge variant="neutral">Neutral</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
<Badge variant="lime" dot>Online</Badge>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Chips: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||||
<Chip>Design</Chip>
|
||||
<Chip onRemove={() => {}}>Removable</Chip>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const DataTable: Story = {
|
||||
render: () => (
|
||||
<Table>
|
||||
|
||||
@@ -14,11 +14,24 @@ const meta = {
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
|
||||
className: { control: 'text' },
|
||||
},
|
||||
args: { value: 40 },
|
||||
} satisfies Meta<typeof Progress>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Playground: Story = {
|
||||
render: (args) => (
|
||||
<div style={{ width: 320 }}>
|
||||
<Progress {...args} />
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
function ProgressDemo() {
|
||||
const [v, setV] = useState(40);
|
||||
return (
|
||||
|
||||
@@ -14,8 +14,17 @@ const meta = {
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: { control: 'inline-radio', options: ['key', 'primary', 'ember', 'ghost'] },
|
||||
size: { control: 'inline-radio', options: ['sm', undefined, 'lg'] },
|
||||
variant: {
|
||||
control: 'inline-radio',
|
||||
options: ['key', 'primary', 'ember', 'ghost'],
|
||||
description: 'Visual emphasis. `key` is the default neutral button.',
|
||||
},
|
||||
size: {
|
||||
control: 'inline-radio',
|
||||
options: ['sm', undefined, 'lg'],
|
||||
description: 'Button size: `sm` compact, default regular, `lg` large.',
|
||||
},
|
||||
disabled: { control: 'boolean' },
|
||||
},
|
||||
} satisfies Meta<typeof IconButton>;
|
||||
|
||||
|
||||
@@ -25,17 +25,32 @@ const meta = {
|
||||
},
|
||||
argTypes: {
|
||||
children: { control: false },
|
||||
content: { control: false },
|
||||
content: { control: 'text' },
|
||||
delayDuration: { control: 'number' },
|
||||
open: { control: 'boolean' },
|
||||
defaultOpen: { control: 'boolean' },
|
||||
onOpenChange: { action: 'open changed' },
|
||||
sideOffset: { control: 'number' },
|
||||
},
|
||||
args: {
|
||||
content: '',
|
||||
content: 'Tooltip text',
|
||||
children: null,
|
||||
delayDuration: 0,
|
||||
},
|
||||
} satisfies Meta<typeof Tooltip>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Playground: Story = {
|
||||
name: 'Tooltip Playground',
|
||||
render: (args) => (
|
||||
<Tooltip {...args}>
|
||||
<Button variant="ghost">Hover me</Button>
|
||||
</Tooltip>
|
||||
),
|
||||
};
|
||||
|
||||
export const TooltipStory: Story = {
|
||||
name: 'Tooltip',
|
||||
render: () => (
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
|
||||
import { ScrollArea } from '../components/ui';
|
||||
|
||||
const meta = {
|
||||
title: 'Layout/ScrollArea',
|
||||
component: ScrollArea,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Radix ScrollArea with custom styled scrollbars. Wraps content in a viewport with vertical and horizontal scrollbars.',
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
children: { control: false },
|
||||
className: { control: 'text' },
|
||||
},
|
||||
} satisfies Meta<typeof ScrollArea>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Playground: Story = {
|
||||
render: () => (
|
||||
<ScrollArea style={{ width: 300, height: 200, border: '1px solid var(--neutral-border)' }}>
|
||||
<div style={{ padding: 16 }}>
|
||||
<h4 className="modern-sk-h4" style={{ marginBottom: 8 }}>Scrollable content</h4>
|
||||
{Array.from({ length: 20 }).map((_, i) => (
|
||||
<p key={i} className="modern-sk-body" style={{ marginBottom: 12 }}>
|
||||
Item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
),
|
||||
};
|
||||
|
||||
export const Vertical: Story = {
|
||||
render: () => (
|
||||
<ScrollArea style={{ width: 280, height: 150, border: '1px solid var(--neutral-border)' }}>
|
||||
<div style={{ padding: 12 }}>
|
||||
{Array.from({ length: 30 }).map((_, i) => (
|
||||
<div key={i} style={{ padding: 8, borderBottom: '1px solid var(--neutral-border)' }}>
|
||||
Row {i + 1}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
),
|
||||
};
|
||||
|
||||
export const Horizontal: Story = {
|
||||
render: () => (
|
||||
<ScrollArea style={{ width: 320, height: 80, border: '1px solid var(--neutral-border)' }}>
|
||||
<div style={{ display: 'flex', gap: 8, padding: 12, width: 'fit-content' }}>
|
||||
{Array.from({ length: 20 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
padding: 8,
|
||||
minWidth: 100,
|
||||
background: 'var(--neutral-surface)',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
Item {i + 1}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,68 @@
|
||||
import { useState } from 'react';
|
||||
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
|
||||
import { SegmentedControl } from '../components/ui';
|
||||
|
||||
const meta = {
|
||||
title: 'Selection/SegmentedControl',
|
||||
component: SegmentedControl,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Single-select button group with animated thumb. Pass `items` array of `{ value, label }` objects, plus `value` and `onValueChange` for control.',
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
value: { control: 'text' },
|
||||
onValueChange: { action: 'value changed' },
|
||||
items: { control: false },
|
||||
className: { control: 'text' },
|
||||
disabled: { control: 'boolean' },
|
||||
},
|
||||
} satisfies Meta<typeof SegmentedControl>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
function SegmentedDemo() {
|
||||
const [v, setV] = useState('day');
|
||||
return (
|
||||
<SegmentedControl
|
||||
value={v}
|
||||
onValueChange={setV}
|
||||
items={[
|
||||
{ value: 'day', label: 'Day' },
|
||||
{ value: 'week', label: 'Week' },
|
||||
{ value: 'month', label: 'Month' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export const Playground: Story = {
|
||||
render: () => <SegmentedDemo />,
|
||||
};
|
||||
|
||||
export const TimeRange: Story = {
|
||||
render: () => <SegmentedDemo />,
|
||||
};
|
||||
|
||||
function OptionsDemo() {
|
||||
const [v, setV] = useState('draft');
|
||||
return (
|
||||
<SegmentedControl
|
||||
value={v}
|
||||
onValueChange={setV}
|
||||
items={[
|
||||
{ value: 'draft', label: 'Draft' },
|
||||
{ value: 'published', label: 'Published' },
|
||||
{ value: 'archived', label: 'Archived' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export const Options: Story = {
|
||||
render: () => <OptionsDemo />,
|
||||
};
|
||||
@@ -19,6 +19,15 @@ const meta = {
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
items: { control: false },
|
||||
placeholder: { control: 'text' },
|
||||
disabled: { control: 'boolean' },
|
||||
defaultValue: { control: 'text' },
|
||||
value: { control: 'text' },
|
||||
onValueChange: { action: 'value changed' },
|
||||
'aria-label': { control: 'text' },
|
||||
},
|
||||
args: { items, placeholder: 'Pick a release…', 'aria-label': 'macOS release' },
|
||||
} satisfies Meta<typeof Select>;
|
||||
|
||||
|
||||
@@ -22,11 +22,21 @@ const meta = {
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
defaultChecked: { control: 'boolean' },
|
||||
checked: { control: 'boolean' },
|
||||
disabled: { control: 'boolean' },
|
||||
onCheckedChange: { action: 'checked changed' },
|
||||
},
|
||||
} satisfies Meta<typeof Switch>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Playground: Story = {
|
||||
args: { defaultChecked: false },
|
||||
};
|
||||
|
||||
export const Switches: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
|
||||
|
||||
@@ -8,16 +8,67 @@ const meta = {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Radix Slider in the carved-track skin. All Radix Slider props pass through (`defaultValue`, `min`, `max`, `step`, `onValueChange`).',
|
||||
'Radix Slider in the carved-track skin. All Radix Slider props pass through (`defaultValue`, `min`, `max`, `step`, `onValueChange`). Set `marks` to carve step notches into the track — `marks` snaps to the Radix `step`.',
|
||||
},
|
||||
},
|
||||
},
|
||||
args: { defaultValue: [60], min: 0, max: 100, step: 1 },
|
||||
argTypes: {
|
||||
defaultValue: { control: 'object', description: 'Uncontrolled starting value(s).' },
|
||||
min: { control: 'number' },
|
||||
max: { control: 'number' },
|
||||
step: { control: 'number', description: 'Snap increment (also drives auto `marks`).' },
|
||||
disabled: { control: 'boolean' },
|
||||
marks: {
|
||||
control: 'boolean',
|
||||
description: 'Step marks. `true` derives one per `step`; or pass an array for custom/labelled marks.',
|
||||
},
|
||||
notches: {
|
||||
control: 'inline-radio',
|
||||
options: ['top', 'bottom', 'both', 'none'],
|
||||
description: 'Notch tick placement relative to the track (labels still render when `none`).',
|
||||
},
|
||||
knobStyle: {
|
||||
control: 'inline-radio',
|
||||
options: ['square', 'round'],
|
||||
description: 'Knob shape: `square` (default) or `round`.',
|
||||
},
|
||||
className: { control: 'text' },
|
||||
},
|
||||
decorators: [(Story) => <div style={{ width: 280 }}><Story /></div>],
|
||||
} satisfies Meta<typeof Slider>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Playground: Story = { args: { defaultValue: [60], max: 100, step: 1 } };
|
||||
export const Playground: Story = {};
|
||||
|
||||
export const Stepped: Story = { args: { defaultValue: [40], max: 100, step: 10 } };
|
||||
/** `marks` auto-derives one notch per `step`. */
|
||||
export const Stepped: Story = {
|
||||
args: { defaultValue: [40], step: 10, marks: true },
|
||||
};
|
||||
|
||||
/** `notches='both'` carves ticks above and below the bar. */
|
||||
export const NotchesBoth: Story = {
|
||||
args: { defaultValue: [60], step: 20, marks: true, notches: 'both' },
|
||||
};
|
||||
|
||||
/** Pass an array of `{ value, label }` for labelled ticks. */
|
||||
export const LabelledMarks: Story = {
|
||||
args: {
|
||||
defaultValue: [50],
|
||||
step: 25,
|
||||
notches: 'bottom',
|
||||
marks: [
|
||||
{ value: 0, label: 'Off' },
|
||||
{ value: 25, label: 'Low' },
|
||||
{ value: 50, label: 'Mid' },
|
||||
{ value: 75, label: 'High' },
|
||||
{ value: 100, label: 'Max' },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: { defaultValue: [30], step: 10, marks: true, disabled: true },
|
||||
};
|
||||
|
||||
@@ -12,6 +12,12 @@ const meta = {
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
defaultValue: { control: 'text' },
|
||||
value: { control: 'text' },
|
||||
onValueChange: { action: 'value changed' },
|
||||
disabled: { control: 'boolean' },
|
||||
},
|
||||
} satisfies Meta<typeof Tabs>;
|
||||
|
||||
export default meta;
|
||||
|
||||
@@ -13,6 +13,16 @@ const meta = {
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
placeholder: { control: 'text' },
|
||||
value: { control: 'text' },
|
||||
defaultValue: { control: 'text' },
|
||||
disabled: { control: 'boolean' },
|
||||
readOnly: { control: 'boolean' },
|
||||
required: { control: 'boolean' },
|
||||
type: { control: 'text' },
|
||||
onChange: { action: 'changed' },
|
||||
},
|
||||
args: { placeholder: 'Type here…' },
|
||||
} satisfies Meta<typeof TextField>;
|
||||
|
||||
|
||||
@@ -12,6 +12,11 @@ const meta = {
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: { control: 'text' },
|
||||
badge: { control: false },
|
||||
children: { control: false },
|
||||
},
|
||||
args: { title: 'Finder' },
|
||||
} satisfies Meta<typeof Window>;
|
||||
|
||||
|
||||
+1329
-259
File diff suppressed because it is too large
Load Diff
@@ -7,7 +7,13 @@
|
||||
@import './tokens.css';
|
||||
@import './components.css';
|
||||
|
||||
/* Non-invasive box-sizing for our own components only (zero specificity). */
|
||||
/* Non-invasive box-sizing + branded font for our own components only
|
||||
(zero specificity, so consumer elements are never touched and the
|
||||
--font-mono / --font-display classes still win by class specificity).
|
||||
This is what carries the typeface onto portalled content (tooltips,
|
||||
menus, dialogs) and bare text nodes (control labels) that never set
|
||||
their own font-family. */
|
||||
:where([class^='modern-sk-'], [class*=' modern-sk-']) {
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
@@ -178,10 +178,9 @@
|
||||
--grain-opacity: 0.45;
|
||||
|
||||
/* ---------- SPINNER GROOVE ----------
|
||||
Carved donut channel — dark at the top rim, catching light at the
|
||||
bottom, exactly like the sunk wells (switch / field). */
|
||||
--spin-groove-1: #090a07; /* top — in shadow */
|
||||
--spin-groove-2: #34352b; /* bottom — catches light */
|
||||
Solid carved channel — flat base felt, sunk by an SVG inner shadow,
|
||||
exactly like the switch well (no gradient). */
|
||||
--spin-track: #23241c;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
@@ -264,9 +263,8 @@
|
||||
radial-gradient(90% 70% at 85% 110%, rgba(233,87,43,0.08), transparent 60%),
|
||||
radial-gradient(100% 100% at 50% 50%, #f2f2ea 0%, #ecece3 60%, #e2e2d6 100%);
|
||||
|
||||
/* carved groove on warm paper — top grey shadow, bottom near-white */
|
||||
--spin-groove-1: #c2c3b6;
|
||||
--spin-groove-2: #ffffff;
|
||||
/* carved groove on warm paper — flat base, sunk by inner shadow */
|
||||
--spin-track: #dcdcd2;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
|
||||
Reference in New Issue
Block a user