mirror of
https://github.com/umami-software/umami.git
synced 2026-02-06 05:37:20 +01:00
2727fd6dff
Introduces a complete design dials system that allows designers and PMs to adjust UI parameters at runtime without code changes. **Dials SDK (`packages/dials/`):** - useDynamicColor: Color values with design system integration - useDynamicSpacing: Spacing/padding/margin controls - useDynamicVariant: Discrete choice selections - useDynamicBoolean: Toggle/feature flag controls - useDynamicNumber: Numeric values with min/max/step - DialsOverlay: Compact Leva-inspired UI (Ctrl+D to toggle) - DialsProvider: React context for dial state management - Design manifest integration for design system tokens **App Integration:** - Added DialsProvider to app Providers - Example dials on WebsitePage (metrics bar, panels, navigation) - MetricCard component with adjustable typography dials - TypeScript manifest at src/config/niteshift-manifest.ts **Documentation:** - Comprehensive CLAUDE.md section on dials usage - Best practices for preserving original appearance - Examples for all dial types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
28 lines
616 B
TypeScript
28 lines
616 B
TypeScript
/**
|
|
* React hook for creating a number dial
|
|
*/
|
|
|
|
import { useDial } from './useDial';
|
|
import type { NumberDialConfig } from '../types';
|
|
|
|
/**
|
|
* Create a dynamic number dial
|
|
*
|
|
* @example
|
|
* ```typescript
|
|
* const chartHeight = useDynamicNumber('chart-height', {
|
|
* label: 'Chart Height',
|
|
* default: 400,
|
|
* min: 200,
|
|
* max: 800,
|
|
* step: 50,
|
|
* unit: 'px',
|
|
* group: 'Chart'
|
|
* });
|
|
*
|
|
* <Chart height={chartHeight} />
|
|
* ```
|
|
*/
|
|
export function useDynamicNumber(id: string, config: Omit<NumberDialConfig, 'type'>): number {
|
|
return useDial<number>(id, 'number', { ...config, type: 'number' });
|
|
}
|