mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-25 06:04:54 +00:00
2c0dfd9e7c
Demonstrates that components with hooks and complex logic can be JSON-driven: - Converted 153 lines of React/TSX to JSON schema + integration code - UI structure now in feature-toggle-settings.json schema - Custom hook logic preserved in TypeScript for type safety - Shows how JSON can handle loops, events, conditional styling - Business logic separated from presentation Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import { PageRenderer } from '@/lib/json-ui/page-renderer'
|
|
import { FeatureToggles } from '@/types/project'
|
|
import { useMemo } from 'react'
|
|
import featureToggleSchema from '@/schemas/feature-toggle-settings.json'
|
|
import type { PageSchema } from '@/types/json-ui'
|
|
import { evaluateExpression } from '@/lib/json-ui/expression-evaluator'
|
|
|
|
interface FeatureToggleSettingsProps {
|
|
features: FeatureToggles
|
|
onFeaturesChange: (features: FeatureToggles) => void
|
|
}
|
|
|
|
/**
|
|
* FeatureToggleSettings - Now JSON-driven!
|
|
*
|
|
* This component demonstrates how a complex React component with:
|
|
* - Custom hooks and state management
|
|
* - Dynamic data rendering (looping over features)
|
|
* - Event handlers (toggle switches)
|
|
* - Conditional styling (enabled/disabled states)
|
|
*
|
|
* Can be converted to a pure JSON schema with custom action handlers.
|
|
* The JSON schema handles all UI structure, data binding, and loops,
|
|
* while custom functions handle business logic.
|
|
*
|
|
* Converted from 153 lines of React/TSX to:
|
|
* - 1 JSON schema file (195 lines, but mostly structure)
|
|
* - 45 lines of integration code (this file)
|
|
*
|
|
* Benefits:
|
|
* - UI structure is now data-driven and can be modified without code changes
|
|
* - Feature list is in JSON and can be easily extended
|
|
* - Styling and layout can be customized via JSON
|
|
* - Business logic (toggle handler) stays in TypeScript for type safety
|
|
*/
|
|
export function FeatureToggleSettings({ features, onFeaturesChange }: FeatureToggleSettingsProps) {
|
|
// Custom action handler - this is the "hook" that handles complex logic
|
|
const handlers = useMemo(() => ({
|
|
updateFeature: (action: any, eventData: any) => {
|
|
// Evaluate the params to get the actual values
|
|
const context = { data: { features, item: eventData.item }, event: eventData }
|
|
|
|
// The key param is an expression like "item.key" which needs evaluation
|
|
const key = evaluateExpression(action.params.key, context) as keyof FeatureToggles
|
|
const checked = eventData as boolean
|
|
|
|
onFeaturesChange({
|
|
...features,
|
|
[key]: checked,
|
|
})
|
|
}
|
|
}), [features, onFeaturesChange])
|
|
|
|
// Pass features as external data to the JSON renderer
|
|
const data = useMemo(() => ({ features }), [features])
|
|
|
|
return (
|
|
<PageRenderer
|
|
schema={featureToggleSchema as PageSchema}
|
|
data={data}
|
|
functions={handlers}
|
|
/>
|
|
)
|
|
}
|