React TypeScript/MUI Atomic Design Wizard-AI React component generator

Example

Molecule example composing an atom and MUI field ```tsx // src/components/molecules/SearchBar/SearchBar.tsx import React from 'react' import TextField from '@mui/material/TextField' import { ButtonAtom, ButtonAtomProps } from '../../atoms/ButtonAtom/ButtonAtom' export interface SearchBarProps { value: string onChange: (v: string) => void onSearch: () => void } export const SearchBar: React.FC<SearchBarProps> = ({ value, onChange, onSearch }): JSX.Element => ( <div className='searchBar'> <TextField value={value} onChange={(e): void => onChange((e.target as HTMLInputElement).value)} /> <ButtonAtom label={'Search'} onClick={onSearch} /> </div> ) export default SearchBar ``` Scaffolding note: the wizard supplies consistent folder patterns, example Storybook stories, test stubs and a linting config so each component ships with docs and test coverage.

Scenario

Enterprise dashboard: a small design system team uses the scaffold to create a consistent search molecule composed of text fields and a shared ButtonAtom. Storybook stories make QA and product review iterative and visual, while SCSS modules prevent CSS bleed between components.

Example

Discriminated union to force valid prop combinations ```ts export interface IconPropsBase { ariaLabel: string onClick: () => void } export type IconButtonProps = | { variant: 'action'; iconName: 'edit' | 'delete' | 'add' } | { variant: 'status'; status: 'success' | 'warning' | 'error' } export const IconButtonAtom: React.FC<IconButtonProps & IconPropsBase> = (props): JSX.Element => { // explicit narrowing ensures compile time safety and clear intellisense if (props.variant === 'action') { // typescript knows iconName exists return <button aria-label={props.ariaLabel} onClick={props.onClick}>{props.iconName}</button> } // status branch return <button aria-label={props.ariaLabel} onClick={props.onClick}>{props.status}</button> } ``` Benefits: explicit props and unions prevent invalid runtime combinations and improve developer DX.

Scenario

Product with feature flags: when a component supports multiple operating modes the discriminated unions prevent accidental prop combos. This reduces bug surface in large codebases and improves code completion in editors.

Example

Theme augmentation and SCSS tokens ```ts // src/theme/theme.ts import { createTheme } from '@mui/material/styles' import type { Theme } from '@mui/material/styles' declare module '@mui/material/styles' { interface Palette { brand: Palette['primary'] } interface PaletteOptions { brand?: PaletteOptions['primary'] } } export const theme: Theme = createTheme({ palette: { brand: { main: '#0b72ff', contrastText: '#ffffff' } } }) export default theme ``` ```scss // src/styles/tokens/_colors.scss $brand-500: #0b72ff $brand-300: #5aa0ff ``` ```scss // src/components/atoms/ButtonAtom/ButtonAtom.module.scss .root { background-color: $brand-500 } ``` This creates a single source of truth for colors and tokens consumable by both the MUI theme and SCSS modules.

Scenario

Agency multi-tenant product: the design token layer lets you swap brand palettes per tenant at build time or runtime, while maintaining a single codebase. QA can preview brand variants in Storybook using theme decorator knobs.