@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/shared/accessibility/AccessibilityDashboard.tsx

@@ -0,0 +1,348 @@
+import { forwardRef, useState, useMemo } from 'react'
+import { SingleSelect } from '../../SingleSelect'
+import { SelectMenuVariant, SelectMenuAlignment } from '../../SingleSelect'
+import ButtonAccessibility from '../../Button/accessibility/ButtonAccessibility'
+import TextInputAccessibility from '../../Inputs/TextInput/accessibility/TextInputAccessibility'
+import NumberInputAccessibility from '../../Inputs/NumberInput/accessibility/NumberInputAccessibility'
+import UnitInputAccessibility from '../../Inputs/UnitInput/accessibility/UnitInputAccessibility'
+import DropdownInputAccessibility from '../../Inputs/DropdownInput/accessibility/DropdownInputAccessibility'
+import SearchInputAccessibility from '../../Inputs/SearchInput/accessibility/SearchInputAccessibility'
+import OTPInputAccessibility from '../../Inputs/OTPInput/accessibility/OTPInputAccessibility'
+import TextAreaAccessibility from '../../Inputs/TextArea/accessibility/TextAreaAccessibility'
+import MultiValueInputAccessibility from '../../Inputs/MultiValueInput/accessibility/MultiValueInputAccessibility'
+import CheckboxAccessibility from '../../Checkbox/accessibility/CheckboxAccessibility'
+import RadioAccessibility from '../../Radio/accessibility/RadioAccessibility'
+import SwitchAccessibility from '../../Switch/accessibility/SwitchAccessibility'
+import SingleSelectAccessibility from '../../SingleSelect/accessibility/SingleSelectAccessibility'
+import MultiSelectAccessibility from '../../MultiSelect/accessibility/MultiSelectAccessibility'
+import StatCardAccessibility from '../../StatCard/accessibility/StatCardAccessibility'
+import CardAccessibility from '../../Card/accessibility/CardAccessibility'
+import ChartsAccessibility from '../../Charts/accessibility/ChartsAccessibility'
+import SplitTagAccessibility from '../../SplitTag/accessibility/SplitTagAccessibility'
+import AvatarAccessibility from '../../Avatar/accessibility/AvatarAccessibility'
+import AvatarGroupAccessibility from '../../AvatarGroup/accessibility/AvatarGroupAccessibility'
+import BreadcrumbAccessibility from '../../Breadcrumb/accessibility/BreadcrumbAccessibility'
+import AlertAccessibility from '../../Alert/accessibility/AlertAccessibility'
+import MenuAccessibility from '../../Menu/accessibility/MenuAccessibility'
+import TagAccessibility from '../../Tags/accessibility/TagAccessibility'
+import TooltipAccessibility from '../../Tooltip/accessibility/TooltipAccessibility'
+import ModalAccessibility from '../../Modal/accessibility/ModalAccessibility'
+import PopoverAccessibility from '../../Popover/accessibility/PopoverAccessibility'
+import KeyValuePairAccessibility from '../../KeyValuePair/accessibility/KeyValuePairAccessibility'
+import SnackbarAccessibility from '../../Snackbar/accessibility/SnackbarAccessibility'
+import AccordionAccessibility from '../../Accordion/accessibility/AccordionAccessibility'
+import TabsAccessibility from '../../Tabs/accessibility/TabsAccessibility'
+import SidebarAccessibility from '../../Sidebar/accessibility/SidebarAccessibility'
+import DrawerAccessibility from '../../Drawer/accessibility/DrawerAccessibility'
+import StepperAccessibility from '../../Stepper/accessibility/StepperAccessibility'
+import CodeBlockAccessibility from '../../CodeBlock/accessibility/CodeBlockAccessibility'
+import ProgressBarAccessibility from '../../ProgressBar/accessibility/ProgressBarAccessibility'
+import DataTableAccessibility from '../../DataTable/accessibility/DataTableAccessibility'
+import UploadAccessibility from '../../Upload/accessibility/UploadAccessibility'
+import ButtonGroupAccessibility from '../../ButtonGroup/accessibility/ButtonGroupAccessibility'
+import DateRangePickerAccessibility from '../../DateRangePicker/accessibility/DateRangePickerAccessibility'
+import SliderAccessibility from '../../Slider/accessibility/SliderAccessibility'
+import ChatInputAccessibility from '../../ChatInput/accessibility/ChatInputAccessibility'
+
+export type ComponentAccessibilitySection = {
+    name: string
+    displayName: string
+    component: React.ComponentType<Record<string, never>>
+}
+
+// Component registry - import all accessibility components here
+const componentRegistry: ComponentAccessibilitySection[] = [
+    {
+        name: 'Button',
+        displayName: 'Button',
+        component: ButtonAccessibility,
+    },
+    {
+        name: 'TextInput',
+        displayName: 'Text Input',
+        component: TextInputAccessibility,
+    },
+    {
+        name: 'NumberInput',
+        displayName: 'Number Input',
+        component: NumberInputAccessibility,
+    },
+    {
+        name: 'UnitInput',
+        displayName: 'Unit Input',
+        component: UnitInputAccessibility,
+    },
+    {
+        name: 'DropdownInput',
+        displayName: 'Dropdown Input',
+        component: DropdownInputAccessibility,
+    },
+    {
+        name: 'SearchInput',
+        displayName: 'Search Input',
+        component: SearchInputAccessibility,
+    },
+    {
+        name: 'OTPInput',
+        displayName: 'OTP Input',
+        component: OTPInputAccessibility,
+    },
+    {
+        name: 'TextArea',
+        displayName: 'Text Area',
+        component: TextAreaAccessibility,
+    },
+    {
+        name: 'MultiValueInput',
+        displayName: 'Multi Value Input',
+        component: MultiValueInputAccessibility,
+    },
+    {
+        name: 'Checkbox',
+        displayName: 'Checkbox',
+        component: CheckboxAccessibility,
+    },
+    {
+        name: 'Radio',
+        displayName: 'Radio',
+        component: RadioAccessibility,
+    },
+    {
+        name: 'Switch',
+        displayName: 'Switch',
+        component: SwitchAccessibility,
+    },
+    {
+        name: 'SingleSelect',
+        displayName: 'SingleSelect',
+        component: SingleSelectAccessibility,
+    },
+    {
+        name: 'MultiSelect',
+        displayName: 'MultiSelect',
+        component: MultiSelectAccessibility,
+    },
+    {
+        name: 'StatCard',
+        displayName: 'StatCard',
+        component: StatCardAccessibility,
+    },
+    {
+        name: 'Card',
+        displayName: 'Card',
+        component: CardAccessibility,
+    },
+    {
+        name: 'Charts',
+        displayName: 'Charts',
+        component: ChartsAccessibility,
+    },
+    {
+        name: 'SplitTag',
+        displayName: 'SplitTag',
+        component: SplitTagAccessibility,
+    },
+    {
+        name: 'Avatar',
+        displayName: 'Avatar',
+        component: AvatarAccessibility,
+    },
+    {
+        name: 'AvatarGroup',
+        displayName: 'AvatarGroup',
+        component: AvatarGroupAccessibility,
+    },
+    {
+        name: 'Breadcrumb',
+        displayName: 'Breadcrumb',
+        component: BreadcrumbAccessibility,
+    },
+    {
+        name: 'Alert',
+        displayName: 'Alert',
+        component: AlertAccessibility,
+    },
+    {
+        name: 'Menu',
+        displayName: 'Menu',
+        component: MenuAccessibility,
+    },
+    {
+        name: 'Tag',
+        displayName: 'Tag',
+        component: TagAccessibility,
+    },
+    {
+        name: 'Tooltip',
+        displayName: 'Tooltip',
+        component: TooltipAccessibility,
+    },
+    {
+        name: 'Modal',
+        displayName: 'Modal',
+        component: ModalAccessibility,
+    },
+    {
+        name: 'Popover',
+        displayName: 'Popover',
+        component: PopoverAccessibility,
+    },
+    {
+        name: 'KeyValuePair',
+        displayName: 'KeyValuePair',
+        component: KeyValuePairAccessibility,
+    },
+    {
+        name: 'Snackbar',
+        displayName: 'Snackbar',
+        component: SnackbarAccessibility,
+    },
+    {
+        name: 'Accordion',
+        displayName: 'Accordion',
+        component: AccordionAccessibility,
+    },
+    {
+        name: 'Tabs',
+        displayName: 'Tabs',
+        component: TabsAccessibility,
+    },
+    {
+        name: 'Sidebar',
+        displayName: 'Sidebar',
+        component: SidebarAccessibility,
+    },
+    {
+        name: 'Drawer',
+        displayName: 'Drawer',
+        component: DrawerAccessibility,
+    },
+    {
+        name: 'Stepper',
+        displayName: 'Stepper',
+        component: StepperAccessibility,
+    },
+    {
+        name: 'CodeBlock',
+        displayName: 'Code Block',
+        component: CodeBlockAccessibility,
+    },
+    {
+        name: 'ProgressBar',
+        displayName: 'ProgressBar',
+        component: ProgressBarAccessibility,
+    },
+    {
+        name: 'DataTable',
+        displayName: 'DataTable',
+        component: DataTableAccessibility,
+    },
+    {
+        name: 'Upload',
+        displayName: 'Upload',
+        component: UploadAccessibility,
+    },
+    {
+        name: 'ButtonGroup',
+        displayName: 'ButtonGroup',
+        component: ButtonGroupAccessibility,
+    },
+    {
+        name: 'DateRangePicker',
+        displayName: 'DateRangePicker',
+        component: DateRangePickerAccessibility,
+    },
+    {
+        name: 'Slider',
+        displayName: 'Slider',
+        component: SliderAccessibility,
+    },
+    {
+        name: 'ChatInput',
+        displayName: 'ChatInput',
+        component: ChatInputAccessibility,
+    },
+    // Add more components here as they are added
+]
+
+export type AccessibilityDashboardProps = {
+    className?: string
+    defaultComponent?: string
+}
+
+const AccessibilityDashboard = forwardRef<
+    HTMLDivElement,
+    AccessibilityDashboardProps
+>(({ className, defaultComponent = 'Button' }, ref) => {
+    const [selectedComponent, setSelectedComponent] =
+        useState<string>(defaultComponent)
+
+    const selectedComponentInfo = useMemo(() => {
+        return (
+            componentRegistry.find((c) => c.name === selectedComponent) ||
+            componentRegistry[0]
+        )
+    }, [selectedComponent])
+
+    const componentOptions = useMemo(() => {
+        return componentRegistry.map((component) => ({
+            value: component.name,
+            label: component.displayName,
+        }))
+    }, [])
+
+    const ComponentSection = selectedComponentInfo?.component
+
+    return (
+        <div ref={ref} className={className}>
+            <div className="space-y-6">
+                {/* Component Selector */}
+                {componentRegistry.length > 1 && (
+                    <div className="bg-white border border-gray-200 rounded-lg p-4">
+                        <div className="flex items-center justify-between">
+                            <h2 className="text-xl font-semibold">
+                                Component Accessibility
+                            </h2>
+                            <div className="w-64">
+                                <SingleSelect
+                                    placeholder="Select Component"
+                                    variant={SelectMenuVariant.NO_CONTAINER}
+                                    alignment={SelectMenuAlignment.END}
+                                    selected={selectedComponent}
+                                    onSelect={(value) =>
+                                        setSelectedComponent(value)
+                                    }
+                                    items={[
+                                        {
+                                            items: componentOptions,
+                                        },
+                                    ]}
+                                    enableSearch={true}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* Render Selected Component Section */}
+                {ComponentSection ? (
+                    <ComponentSection />
+                ) : (
+                    <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-8 text-center">
+                        <p className="text-yellow-800 font-semibold mb-2">
+                            No accessibility section available
+                        </p>
+                        <p className="text-yellow-700 text-sm">
+                            Please select a component with an accessibility
+                            section.
+                        </p>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+})
+
+AccessibilityDashboard.displayName = 'AccessibilityDashboard'
+
+export default AccessibilityDashboard

package/lib/components/shared/accessibility/LightHouse-components/AccordionLightHouse.tsx

@@ -0,0 +1,328 @@
+import {
+    Accordion,
+    AccordionItem,
+    AccordionType,
+    AccordionChevronPosition,
+} from '../../../Accordion'
+import { Info, Settings, User } from 'lucide-react'
+
+const AccordionLightHouse = () => {
+    return (
+        <>
+            {/* Single Accordion - No Border */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem value="item-1" title="Accordion Item 1">
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem value="item-2" title="Accordion Item 2">
+                    Content for item 2
+                </AccordionItem>
+                <AccordionItem value="item-3" title="Accordion Item 3">
+                    Content for item 3
+                </AccordionItem>
+            </Accordion>
+
+            {/* Single Accordion - Border */}
+            <Accordion accordionType={AccordionType.BORDER}>
+                <AccordionItem value="item-1" title="Accordion Item 1">
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem value="item-2" title="Accordion Item 2">
+                    Content for item 2
+                </AccordionItem>
+                <AccordionItem value="item-3" title="Accordion Item 3">
+                    Content for item 3
+                </AccordionItem>
+            </Accordion>
+
+            {/* Multiple Accordion - No Border */}
+            <Accordion
+                accordionType={AccordionType.NO_BORDER}
+                isMultiple={true}
+            >
+                <AccordionItem value="item-1" title="Accordion Item 1">
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem value="item-2" title="Accordion Item 2">
+                    Content for item 2
+                </AccordionItem>
+                <AccordionItem value="item-3" title="Accordion Item 3">
+                    Content for item 3
+                </AccordionItem>
+            </Accordion>
+
+            {/* Multiple Accordion - Border */}
+            <Accordion accordionType={AccordionType.BORDER} isMultiple={true}>
+                <AccordionItem value="item-1" title="Accordion Item 1">
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem value="item-2" title="Accordion Item 2">
+                    Content for item 2
+                </AccordionItem>
+                <AccordionItem value="item-3" title="Accordion Item 3">
+                    Content for item 3
+                </AccordionItem>
+            </Accordion>
+
+            {/* With Default Value - Single */}
+            <Accordion
+                accordionType={AccordionType.NO_BORDER}
+                defaultValue="item-2"
+            >
+                <AccordionItem value="item-1" title="Accordion Item 1">
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem value="item-2" title="Accordion Item 2">
+                    Content for item 2
+                </AccordionItem>
+                <AccordionItem value="item-3" title="Accordion Item 3">
+                    Content for item 3
+                </AccordionItem>
+            </Accordion>
+
+            {/* With Default Value - Multiple */}
+            <Accordion
+                accordionType={AccordionType.NO_BORDER}
+                isMultiple={true}
+                defaultValue={['item-1', 'item-3']}
+            >
+                <AccordionItem value="item-1" title="Accordion Item 1">
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem value="item-2" title="Accordion Item 2">
+                    Content for item 2
+                </AccordionItem>
+                <AccordionItem value="item-3" title="Accordion Item 3">
+                    Content for item 3
+                </AccordionItem>
+            </Accordion>
+
+            {/* With Subtext */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem
+                    value="item-1"
+                    title="Accordion Item 1"
+                    subtext="This is subtext for item 1"
+                >
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem
+                    value="item-2"
+                    title="Accordion Item 2"
+                    subtext="This is subtext for item 2"
+                >
+                    Content for item 2
+                </AccordionItem>
+            </Accordion>
+
+            {/* With Left Slot */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem
+                    value="item-1"
+                    title="Accordion Item 1"
+                    leftSlot={<Info size={16} />}
+                >
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem
+                    value="item-2"
+                    title="Accordion Item 2"
+                    leftSlot={<Settings size={16} />}
+                >
+                    Content for item 2
+                </AccordionItem>
+            </Accordion>
+
+            {/* With Right Slot */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem
+                    value="item-1"
+                    title="Accordion Item 1"
+                    rightSlot={<User size={16} />}
+                >
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem
+                    value="item-2"
+                    title="Accordion Item 2"
+                    rightSlot={<Info size={16} />}
+                >
+                    Content for item 2
+                </AccordionItem>
+            </Accordion>
+
+            {/* With Subtext Slot */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem
+                    value="item-1"
+                    title="Accordion Item 1"
+                    subtextSlot={<span>Custom subtext slot</span>}
+                >
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem
+                    value="item-2"
+                    title="Accordion Item 2"
+                    subtextSlot={<span>Another custom subtext</span>}
+                >
+                    Content for item 2
+                </AccordionItem>
+            </Accordion>
+
+            {/* With All Slots */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem
+                    value="item-1"
+                    title="Accordion Item 1"
+                    subtext="Subtext here"
+                    leftSlot={<Info size={16} />}
+                    rightSlot={<User size={16} />}
+                    subtextSlot={<span>Custom subtext slot</span>}
+                >
+                    Content for item 1
+                </AccordionItem>
+            </Accordion>
+
+            {/* Chevron Position Left */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem
+                    value="item-1"
+                    title="Accordion Item 1"
+                    chevronPosition={AccordionChevronPosition.LEFT}
+                >
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem
+                    value="item-2"
+                    title="Accordion Item 2"
+                    chevronPosition={AccordionChevronPosition.LEFT}
+                >
+                    Content for item 2
+                </AccordionItem>
+            </Accordion>
+
+            {/* Chevron Position Right */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem
+                    value="item-1"
+                    title="Accordion Item 1"
+                    chevronPosition={AccordionChevronPosition.RIGHT}
+                >
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem
+                    value="item-2"
+                    title="Accordion Item 2"
+                    chevronPosition={AccordionChevronPosition.RIGHT}
+                >
+                    Content for item 2
+                </AccordionItem>
+            </Accordion>
+
+            {/* Disabled Item */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem value="item-1" title="Accordion Item 1">
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem
+                    value="item-2"
+                    title="Accordion Item 2 (Disabled)"
+                    isDisabled={true}
+                >
+                    Content for item 2
+                </AccordionItem>
+                <AccordionItem value="item-3" title="Accordion Item 3">
+                    Content for item 3
+                </AccordionItem>
+            </Accordion>
+
+            {/* All Disabled */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem
+                    value="item-1"
+                    title="Accordion Item 1"
+                    isDisabled={true}
+                >
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem
+                    value="item-2"
+                    title="Accordion Item 2"
+                    isDisabled={true}
+                >
+                    Content for item 2
+                </AccordionItem>
+            </Accordion>
+
+            {/* Single Item */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem value="item-1" title="Single Accordion Item">
+                    Content for single item
+                </AccordionItem>
+            </Accordion>
+
+            {/* Border Type Single Item */}
+            <Accordion accordionType={AccordionType.BORDER}>
+                <AccordionItem value="item-1" title="Single Accordion Item">
+                    Content for single item
+                </AccordionItem>
+            </Accordion>
+
+            {/* Complex Content */}
+            <Accordion accordionType={AccordionType.NO_BORDER}>
+                <AccordionItem
+                    value="item-1"
+                    title="Accordion with Complex Content"
+                    subtext="This has rich content inside"
+                    leftSlot={<Info size={16} />}
+                >
+                    <div>
+                        <h4>Section Title</h4>
+                        <p>This is a paragraph with detailed information.</p>
+                        <ul>
+                            <li>List item 1</li>
+                            <li>List item 2</li>
+                            <li>List item 3</li>
+                        </ul>
+                    </div>
+                </AccordionItem>
+            </Accordion>
+
+            {/* With onChange Handler */}
+            <Accordion
+                accordionType={AccordionType.NO_BORDER}
+                onValueChange={(value) => {
+                    console.log('Accordion value changed:', value)
+                }}
+            >
+                <AccordionItem value="item-1" title="Accordion Item 1">
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem value="item-2" title="Accordion Item 2">
+                    Content for item 2
+                </AccordionItem>
+            </Accordion>
+
+            {/* Multiple with onChange Handler */}
+            <Accordion
+                accordionType={AccordionType.NO_BORDER}
+                isMultiple={true}
+                onValueChange={(value) => {
+                    console.log('Multiple accordion value changed:', value)
+                }}
+            >
+                <AccordionItem value="item-1" title="Accordion Item 1">
+                    Content for item 1
+                </AccordionItem>
+                <AccordionItem value="item-2" title="Accordion Item 2">
+                    Content for item 2
+                </AccordionItem>
+                <AccordionItem value="item-3" title="Accordion Item 3">
+                    Content for item 3
+                </AccordionItem>
+            </Accordion>
+        </>
+    )
+}
+
+export default AccordionLightHouse