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

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

@@ -0,0 +1,349 @@
+import Charts from '../../../Charts/Charts'
+import {
+    ChartType,
+    ChartLegendPosition,
+    NewNestedDataPoint,
+    AxisType,
+    LegendsChangeType,
+} from '../../../Charts/types'
+import {
+    TrendingUp,
+    DollarSign,
+    Activity,
+    BarChart3,
+    PieChart,
+} from 'lucide-react'
+
+// Helper function to generate sample chart data
+const generateChartData = (): NewNestedDataPoint[] => [
+    {
+        name: 'Jan',
+        data: {
+            revenue: { primary: { label: 'Revenue', val: 4000 } },
+            profit: { primary: { label: 'Profit', val: 2400 } },
+            expenses: { primary: { label: 'Expenses', val: 1600 } },
+        },
+    },
+    {
+        name: 'Feb',
+        data: {
+            revenue: { primary: { label: 'Revenue', val: 3000 } },
+            profit: { primary: { label: 'Profit', val: 1398 } },
+            expenses: { primary: { label: 'Expenses', val: 1602 } },
+        },
+    },
+    {
+        name: 'Mar',
+        data: {
+            revenue: { primary: { label: 'Revenue', val: 2000 } },
+            profit: { primary: { label: 'Profit', val: 800 } },
+            expenses: { primary: { label: 'Expenses', val: 1200 } },
+        },
+    },
+    {
+        name: 'Apr',
+        data: {
+            revenue: { primary: { label: 'Revenue', val: 2780 } },
+            profit: { primary: { label: 'Profit', val: 1908 } },
+            expenses: { primary: { label: 'Expenses', val: 872 } },
+        },
+    },
+    {
+        name: 'May',
+        data: {
+            revenue: { primary: { label: 'Revenue', val: 1890 } },
+            profit: { primary: { label: 'Profit', val: 800 } },
+            expenses: { primary: { label: 'Expenses', val: 1090 } },
+        },
+    },
+    {
+        name: 'Jun',
+        data: {
+            revenue: { primary: { label: 'Revenue', val: 2390 } },
+            profit: { primary: { label: 'Profit', val: 1200 } },
+            expenses: { primary: { label: 'Expenses', val: 1190 } },
+        },
+    },
+]
+
+const ChartsLightHouse = () => {
+    const chartData = generateChartData()
+
+    return (
+        <div className="flex flex-col gap-4">
+            {/* All Chart Types */}
+            <Charts
+                chartType={ChartType.LINE}
+                data={chartData}
+                height={400}
+                chartHeaderSlot={<h3>Monthly Financial Overview</h3>}
+                xAxis={{ label: 'Month', showLabel: true, show: true }}
+                yAxis={{
+                    label: 'Amount ($)',
+                    showLabel: true,
+                    show: true,
+                    type: AxisType.CURRENCY,
+                }}
+            />
+
+            <Charts
+                chartType={ChartType.BAR}
+                data={chartData}
+                height={400}
+                chartHeaderSlot={<h3>Sales Performance by Month</h3>}
+                xAxis={{ label: 'Month', showLabel: true, show: true }}
+                yAxis={{
+                    label: 'Sales Volume',
+                    showLabel: true,
+                    show: true,
+                    type: AxisType.NUMBER,
+                }}
+            />
+
+            <Charts
+                chartType={ChartType.PIE}
+                data={chartData}
+                height={400}
+                chartHeaderSlot={<h3>Sales Distribution</h3>}
+                legendPosition={ChartLegendPosition.RIGHT}
+                xAxis={{ show: false }}
+                yAxis={{ show: false }}
+            />
+
+            {/* With Icons */}
+            <Charts
+                chartType={ChartType.LINE}
+                data={chartData}
+                height={400}
+                chartHeaderSlot={<h3>Revenue Trend</h3>}
+                slot1={
+                    <TrendingUp size={20} color="#10b981" aria-hidden="true" />
+                }
+                slot2={
+                    <span style={{ color: '#10b981', fontSize: '14px' }}>
+                        +12.5%
+                    </span>
+                }
+                xAxis={{ label: 'Month', showLabel: true, show: true }}
+                yAxis={{
+                    label: 'Amount ($)',
+                    showLabel: true,
+                    show: true,
+                    type: AxisType.CURRENCY,
+                }}
+            />
+
+            <Charts
+                chartType={ChartType.BAR}
+                data={chartData}
+                height={400}
+                chartHeaderSlot={<h3>Sales Performance</h3>}
+                slot1={
+                    <BarChart3 size={20} color="#3b82f6" aria-hidden="true" />
+                }
+                xAxis={{ label: 'Month', showLabel: true, show: true }}
+                yAxis={{
+                    label: 'Sales',
+                    showLabel: true,
+                    show: true,
+                    type: AxisType.NUMBER,
+                }}
+            />
+
+            <Charts
+                chartType={ChartType.PIE}
+                data={chartData}
+                height={400}
+                chartHeaderSlot={<h3>Category Distribution</h3>}
+                slot1={
+                    <PieChart size={20} color="#8b5cf6" aria-hidden="true" />
+                }
+                legendPosition={ChartLegendPosition.RIGHT}
+                xAxis={{ show: false }}
+                yAxis={{ show: false }}
+            />
+
+            {/* With Stacked Legends */}
+            <Charts
+                chartType={ChartType.LINE}
+                data={chartData}
+                height={400}
+                chartHeaderSlot={<h3>Revenue Trends</h3>}
+                slot1={
+                    <DollarSign size={20} color="#10b981" aria-hidden="true" />
+                }
+                slot2={
+                    <span style={{ color: '#10b981', fontSize: '14px' }}>
+                        +12.5%
+                    </span>
+                }
+                legendPosition={ChartLegendPosition.TOP}
+                stackedLegends={true}
+                stackedLegendsData={[
+                    {
+                        value: 12000,
+                        delta: 12.5,
+                        changeType: LegendsChangeType.INCREASE,
+                    },
+                    {
+                        value: 8000,
+                        delta: 8.3,
+                        changeType: LegendsChangeType.INCREASE,
+                    },
+                    {
+                        value: 6000,
+                        delta: 5.2,
+                        changeType: LegendsChangeType.INCREASE,
+                    },
+                ]}
+                xAxis={{ label: 'Month', showLabel: true, show: true }}
+                yAxis={{
+                    label: 'Revenue ($)',
+                    showLabel: true,
+                    show: true,
+                    type: AxisType.CURRENCY,
+                }}
+            />
+
+            {/* With Collapse Icon */}
+            <Charts
+                chartType={ChartType.LINE}
+                data={chartData}
+                height={400}
+                showHeader={true}
+                showCollapseIcon={true}
+                chartHeaderSlot={<h3>Expandable Chart</h3>}
+                slot1={
+                    <Activity size={20} color="#3b82f6" aria-hidden="true" />
+                }
+                xAxis={{ label: 'Month', showLabel: true, show: true }}
+                yAxis={{
+                    label: 'Amount ($)',
+                    showLabel: true,
+                    show: true,
+                    type: AxisType.CURRENCY,
+                }}
+            />
+
+            {/* Collapsed State */}
+            <Charts
+                chartType={ChartType.LINE}
+                data={chartData}
+                height={400}
+                showHeader={true}
+                showCollapseIcon={true}
+                isExpanded={false}
+                chartHeaderSlot={<h3>Collapsed Chart</h3>}
+                xAxis={{ label: 'Month', showLabel: true, show: true }}
+                yAxis={{
+                    label: 'Amount ($)',
+                    showLabel: true,
+                    show: true,
+                    type: AxisType.CURRENCY,
+                }}
+            />
+
+            {/* Legend Position Right */}
+            <Charts
+                chartType={ChartType.PIE}
+                data={chartData}
+                height={400}
+                chartHeaderSlot={<h3>Sales by Category</h3>}
+                legendPosition={ChartLegendPosition.RIGHT}
+                xAxis={{ show: false }}
+                yAxis={{ show: false }}
+            />
+
+            {/* All Chart Types with All Features */}
+            <Charts
+                chartType={ChartType.LINE}
+                data={chartData}
+                height={400}
+                showHeader={true}
+                showCollapseIcon={true}
+                chartHeaderSlot={<h3>Comprehensive Line Chart</h3>}
+                slot1={
+                    <TrendingUp size={20} color="#10b981" aria-hidden="true" />
+                }
+                slot2={
+                    <span style={{ color: '#10b981', fontSize: '14px' }}>
+                        +12.5%
+                    </span>
+                }
+                slot3={
+                    <span style={{ color: '#6b7280', fontSize: '12px' }}>
+                        Last 6 months
+                    </span>
+                }
+                legendPosition={ChartLegendPosition.TOP}
+                stackedLegends={true}
+                stackedLegendsData={[
+                    {
+                        value: 12000,
+                        delta: 12.5,
+                        changeType: LegendsChangeType.INCREASE,
+                    },
+                    {
+                        value: 8000,
+                        delta: 8.3,
+                        changeType: LegendsChangeType.INCREASE,
+                    },
+                    {
+                        value: 6000,
+                        delta: 5.2,
+                        changeType: LegendsChangeType.INCREASE,
+                    },
+                ]}
+                xAxis={{
+                    label: 'Month',
+                    showLabel: true,
+                    show: true,
+                    type: AxisType.DATE_TIME,
+                }}
+                yAxis={{
+                    label: 'Amount ($)',
+                    showLabel: true,
+                    show: true,
+                    type: AxisType.CURRENCY,
+                }}
+            />
+
+            <Charts
+                chartType={ChartType.BAR}
+                data={chartData}
+                height={400}
+                showHeader={true}
+                showCollapseIcon={true}
+                chartHeaderSlot={<h3>Comprehensive Bar Chart</h3>}
+                slot1={
+                    <BarChart3 size={20} color="#3b82f6" aria-hidden="true" />
+                }
+                legendPosition={ChartLegendPosition.TOP}
+                xAxis={{ label: 'Month', showLabel: true, show: true }}
+                yAxis={{
+                    label: 'Sales',
+                    showLabel: true,
+                    show: true,
+                    type: AxisType.NUMBER,
+                }}
+            />
+
+            <Charts
+                chartType={ChartType.PIE}
+                data={chartData}
+                height={400}
+                showHeader={true}
+                showCollapseIcon={true}
+                chartHeaderSlot={<h3>Comprehensive Pie Chart</h3>}
+                slot1={
+                    <PieChart size={20} color="#8b5cf6" aria-hidden="true" />
+                }
+                legendPosition={ChartLegendPosition.RIGHT}
+                xAxis={{ show: false }}
+                yAxis={{ show: false }}
+            />
+        </div>
+    )
+}
+
+export default ChartsLightHouse

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

@@ -0,0 +1,231 @@
+import { ChatInput } from '../../../ChatInput'
+import { Send, Mic } from 'lucide-react'
+
+const ChatInputLightHouse = () => {
+    return (
+        <>
+            {/* Basic ChatInput */}
+            <ChatInput
+                value=""
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* With Value */}
+            <ChatInput
+                value="Hello, this is a message"
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* With Placeholder */}
+            <ChatInput
+                value=""
+                placeholder="Type your message here..."
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* Disabled */}
+            <ChatInput
+                value=""
+                disabled={true}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* With MaxLength */}
+            <ChatInput
+                value=""
+                maxLength={100}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* Auto Resize Disabled */}
+            <ChatInput
+                value=""
+                autoResize={false}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* With Attached Files */}
+            <ChatInput
+                value=""
+                attachedFiles={[
+                    {
+                        id: '1',
+                        name: 'document.pdf',
+                        type: 'pdf',
+                    },
+                    {
+                        id: '2',
+                        name: 'image.jpg',
+                        type: 'image',
+                    },
+                ]}
+                onAttachFiles={(files) => {
+                    console.log('Files attached:', files)
+                }}
+                onFileRemove={(fileId) => {
+                    console.log('File removed:', fileId)
+                }}
+                onFileClick={(file) => {
+                    console.log('File clicked:', file)
+                }}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* With Many Attached Files (triggers overflow) */}
+            <ChatInput
+                value=""
+                attachedFiles={[
+                    { id: '1', name: 'file1.pdf', type: 'pdf' },
+                    { id: '2', name: 'file2.csv', type: 'csv' },
+                    { id: '3', name: 'file3.txt', type: 'text' },
+                    { id: '4', name: 'file4.jpg', type: 'image' },
+                    { id: '5', name: 'file5.pdf', type: 'pdf' },
+                    { id: '6', name: 'file6.csv', type: 'csv' },
+                ]}
+                onAttachFiles={(files) => {
+                    console.log('Files attached:', files)
+                }}
+                onFileRemove={(fileId) => {
+                    console.log('File removed:', fileId)
+                }}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* With Top Queries */}
+            <ChatInput
+                value=""
+                topQueries={[
+                    { id: '1', text: 'What is React?' },
+                    { id: '2', text: 'How to use hooks?' },
+                    { id: '3', text: 'Best practices for components' },
+                ]}
+                onTopQuerySelect={(query) => {
+                    console.log('Query selected:', query)
+                }}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* With Custom Attach Button Icon */}
+            <ChatInput
+                value=""
+                attachButtonIcon={<Send size={14} />}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* With Slot1 */}
+            <ChatInput
+                value=""
+                slot1={
+                    <button
+                        onClick={() => {
+                            console.log('Custom button clicked')
+                        }}
+                    >
+                        Custom Action
+                    </button>
+                }
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* With Multiple Slots */}
+            <ChatInput
+                value=""
+                slot1={
+                    <>
+                        <button
+                            onClick={() => {
+                                console.log('Button 1 clicked')
+                            }}
+                        >
+                            Action 1
+                        </button>
+                        <button
+                            onClick={() => {
+                                console.log('Button 2 clicked')
+                            }}
+                        >
+                            Action 2
+                        </button>
+                    </>
+                }
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* Complex Example */}
+            <ChatInput
+                value="Type your message"
+                placeholder="Enter your message here..."
+                maxLength={500}
+                autoResize={true}
+                attachedFiles={[
+                    { id: '1', name: 'document.pdf', type: 'pdf' },
+                    { id: '2', name: 'photo.jpg', type: 'image' },
+                ]}
+                topQueries={[
+                    { id: '1', text: 'Quick question 1' },
+                    { id: '2', text: 'Quick question 2' },
+                ]}
+                topQueriesMaxHeight={150}
+                attachButtonIcon={<Mic size={14} />}
+                slot1={
+                    <button
+                        onClick={() => {
+                            console.log('Send clicked')
+                        }}
+                    >
+                        Send
+                    </button>
+                }
+                onAttachFiles={(files) => {
+                    console.log('Files attached:', files)
+                }}
+                onFileRemove={(fileId) => {
+                    console.log('File removed:', fileId)
+                }}
+                onFileClick={(file) => {
+                    console.log('File clicked:', file)
+                }}
+                onTopQuerySelect={(query) => {
+                    console.log('Query selected:', query)
+                }}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+
+            {/* Long Value */}
+            <ChatInput
+                value="This is a very long message that demonstrates how the ChatInput component handles longer text content. It should wrap properly and maintain good readability while showing all the necessary information to the user."
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+            />
+        </>
+    )
+}
+
+export default ChatInputLightHouse