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>
29 lines
703 B
TypeScript
29 lines
703 B
TypeScript
/**
|
|
* React hook for creating a variant dial
|
|
*/
|
|
|
|
import { useDial } from './useDial';
|
|
import type { VariantDialConfig } from '../types';
|
|
|
|
/**
|
|
* Create a dynamic variant dial for discrete choices
|
|
*
|
|
* @example
|
|
* ```typescript
|
|
* const layout = useDynamicVariant('dashboard-layout', {
|
|
* label: 'Layout Style',
|
|
* default: 'grid',
|
|
* options: ['grid', 'list', 'compact'] as const,
|
|
* group: 'Dashboard'
|
|
* });
|
|
*
|
|
* {layout === 'grid' && <GridView />}
|
|
* {layout === 'list' && <ListView />}
|
|
* ```
|
|
*/
|
|
export function useDynamicVariant<T extends string>(
|
|
id: string,
|
|
config: Omit<VariantDialConfig<T>, 'type'>,
|
|
): T {
|
|
return useDial<T>(id, 'variant', { ...config, type: 'variant' });
|
|
}
|