import React from 'react' ; import type { TComponentConfig } from 'autoprops' ; import { VectorShape } from '@primitives/vector-shape' ; import type { TVectorShape } from '@primitives/vector-shape' ; import type { TComponentControls } from '@revert/sandbox' ; import { SYMBOL_CONTROL_SWITCH } from '@revert/sandbox' ; import { setupVectorShapeTheme } from './src' ; import type { TThemeableVectorShapes } from './src' ; type Mappings = { demo : { status : 'default' | 'error' ; } ; } ; const defaultTheme = { demo : ( { status } ) => ( { path : 'M30,0 L30,0 L0,15 L30,30 Z' , width : 30 , height : 30 , color : status === 'default' ? [ 0x00 , 0xFF , 0x00 , 1 ] : [ 0x00 , 0x00 , 0xFF , 1 ] , } ) , } ; const { VectorShapeTheme , createThemeableVectorShape } = setupVectorShapeTheme ( ) ; const DemoThemeableVectorShape = createThemeableVectorShape < TVectorShape , Mappings > ( 'demo' , VectorShape ) ; type TDemo = { status : 'default' | 'error' ; } ; const newTheme = { demo : ( { status } ) => ( { path : 'M0,30 L0,30 L15,0 L30,30 Z' , width : 30 , height : 30 , color : status === 'default' ? [ 0xFF , 0x00 , 0x00 , 1 ] : [ 0x00 , 0x00 , 0x00 , 1 ] , } ) , } ; type TDemoComponent = TDemo & { hasTheme : boolean ; } ; export const Component = ( { status , hasTheme } ) => ( < VectorShapeTheme . Provider value = { hasTheme ? newTheme : defaultTheme } > < DemoThemeableVectorShape status = { status } /> < /VectorShapeTheme.Provider>); Component . displayName = 'ThemeableVectorShape' ; export const config = { props : { hasTheme : [ true ] , status : [ 'default' , 'error' ] , } , } ; export { default as readme } from './readme.md' ; export const controls = { hasTheme : SYMBOL_CONTROL_SWITCH , } ;