@idealyst/components 1.0.83 → 1.0.84

package/src/examples/TabBarExamples.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import { Screen, View, Text } from '@idealyst/components';
+import TabBar from '../TabBar';
+import type { TabBarItem } from '../TabBar/types';
+
+export const TabBarExamples: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('tab1');
+  const [variantTab, setVariantTab] = useState('home');
+  const [pillTab, setPillTab] = useState('tab1');
+
+  const basicTabs: TabBarItem[] = [
+    { value: 'tab1', label: 'Tab 1' },
+    { value: 'tab2', label: 'Tab 2' },
+    { value: 'tab3', label: 'Tab 3' },
+  ];
+
+  const variantTabs: TabBarItem[] = [
+    { value: 'home', label: 'Home' },
+    { value: 'search', label: 'Search' },
+    { value: 'settings', label: 'Settings' },
+  ];
+
+  const disabledTabs: TabBarItem[] = [
+    { value: 'tab1', label: 'Enabled' },
+    { value: 'tab2', label: 'Disabled', disabled: true },
+    { value: 'tab3', label: 'Enabled' },
+  ];
+
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">TabBar Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic TabBar</Text>
+        <TabBar
+          items={basicTabs}
+          value={activeTab}
+          onChange={setActiveTab}
+        />
+        <Text size="sm" color="secondary">
+          Active tab: {activeTab}
+        </Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Variants</Text>
+        <View spacing="sm">
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Standard</Text>
+            <TabBar
+              items={variantTabs}
+              value={variantTab}
+              onChange={setVariantTab}
+              type="standard"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Pills</Text>
+            <TabBar
+              items={variantTabs}
+              value={variantTab}
+              onChange={setVariantTab}
+              type="pills"
+              pillMode="light"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Underline</Text>
+            <TabBar
+              items={variantTabs}
+              value={variantTab}
+              onChange={setVariantTab}
+              type="underline"
+            />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm">
+          <TabBar
+            items={basicTabs}
+            value={activeTab}
+            onChange={setActiveTab}
+            size="sm"
+          />
+          <TabBar
+            items={basicTabs}
+            value={activeTab}
+            onChange={setActiveTab}
+            size="md"
+          />
+          <TabBar
+            items={basicTabs}
+            value={activeTab}
+            onChange={setActiveTab}
+            size="lg"
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Pill Modes</Text>
+        <View spacing="sm">
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Light Mode (dark pill on light background)</Text>
+            <TabBar
+              items={basicTabs}
+              value={pillTab}
+              onChange={setPillTab}
+              type="pills"
+              pillMode="light"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Dark Mode (light pill on dark background)</Text>
+            <TabBar
+              items={basicTabs}
+              value={pillTab}
+              onChange={setPillTab}
+              type="pills"
+              pillMode="dark"
+            />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Disabled Tabs</Text>
+        <TabBar
+          items={disabledTabs}
+          value={activeTab}
+          onChange={setActiveTab}
+        />
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default TabBarExamples;

package/src/examples/TableExamples.tsx

@@ -0,0 +1,280 @@
+import React from 'react';
+import { Screen, View, Text, Badge, Button } from '@idealyst/components';
+import Table from '../Table';
+import type { TableColumn } from '../Table/types';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+}
+
+interface Product {
+  id: number;
+  name: string;
+  category: string;
+  price: number;
+  stock: number;
+}
+
+export const TableExamples: React.FC = () => {
+  const users: User[] = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive' },
+    { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'Manager', status: 'active' },
+  ];
+
+  const products: Product[] = [
+    { id: 1, name: 'Laptop', category: 'Electronics', price: 999.99, stock: 15 },
+    { id: 2, name: 'Mouse', category: 'Electronics', price: 29.99, stock: 150 },
+    { id: 3, name: 'Keyboard', category: 'Electronics', price: 79.99, stock: 75 },
+    { id: 4, name: 'Monitor', category: 'Electronics', price: 299.99, stock: 30 },
+    { id: 5, name: 'Desk', category: 'Furniture', price: 399.99, stock: 10 },
+  ];
+
+  const userColumns: TableColumn<User>[] = [
+    {
+      key: 'name',
+      title: 'Name',
+      dataIndex: 'name',
+      width: '200px',
+    },
+    {
+      key: 'email',
+      title: 'Email',
+      dataIndex: 'email',
+    },
+    {
+      key: 'role',
+      title: 'Role',
+      dataIndex: 'role',
+      width: '120px',
+    },
+    {
+      key: 'status',
+      title: 'Status',
+      dataIndex: 'status',
+      width: '100px',
+      render: (status: string) => (
+        <Badge
+          type="filled"
+          color={status === 'active' ? 'green' : 'gray'}
+        >
+          {status}
+        </Badge>
+      ),
+    },
+  ];
+
+  const productColumns: TableColumn<Product>[] = [
+    {
+      key: 'name',
+      title: 'Product',
+      dataIndex: 'name',
+    },
+    {
+      key: 'category',
+      title: 'Category',
+      dataIndex: 'category',
+      width: '150px',
+    },
+    {
+      key: 'price',
+      title: 'Price',
+      dataIndex: 'price',
+      width: '120px',
+      align: 'right',
+      render: (price: number) => `$${price.toFixed(2)}`,
+    },
+    {
+      key: 'stock',
+      title: 'Stock',
+      dataIndex: 'stock',
+      width: '100px',
+      align: 'center',
+      render: (stock: number) => (
+        <Badge
+          type="filled"
+          color={stock > 50 ? 'green' : stock > 20 ? 'yellow' : 'red'}
+        >
+          {stock}
+        </Badge>
+      ),
+    },
+  ];
+
+  const actionColumns: TableColumn<User>[] = [
+    {
+      key: 'name',
+      title: 'Name',
+      dataIndex: 'name',
+    },
+    {
+      key: 'email',
+      title: 'Email',
+      dataIndex: 'email',
+    },
+    {
+      key: 'actions',
+      title: 'Actions',
+      width: '200px',
+      render: (_, user) => (
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          <Button size="sm" type="outlined" onPress={() => console.log('Edit', user.id)}>
+            Edit
+          </Button>
+          <Button size="sm" type="outlined" intent="error" onPress={() => console.log('Delete', user.id)}>
+            Delete
+          </Button>
+        </View>
+      ),
+    },
+  ];
+
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">Table Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic Table</Text>
+        <Table columns={userColumns} data={users} />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Variants</Text>
+        <View spacing="sm">
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Default</Text>
+            <Table
+              columns={userColumns}
+              data={users}
+              type="standard"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Bordered</Text>
+            <Table
+              columns={userColumns}
+              data={users}
+              type="bordered"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Striped</Text>
+            <Table
+              columns={userColumns}
+              data={users}
+              type="striped"
+            />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm">
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Small</Text>
+            <Table
+              columns={userColumns}
+              data={users.slice(0, 2)}
+              size="sm"
+              type="bordered"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Medium (default)</Text>
+            <Table
+              columns={userColumns}
+              data={users.slice(0, 2)}
+              size="md"
+              type="bordered"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Large</Text>
+            <Table
+              columns={userColumns}
+              data={users.slice(0, 2)}
+              size="lg"
+              type="bordered"
+            />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Custom Rendering</Text>
+        <Table columns={productColumns} data={products} type="striped" />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Clickable Rows</Text>
+        <Table
+          columns={userColumns}
+          data={users}
+          type="bordered"
+          onRowPress={(user) => console.log('Clicked user:', user)}
+        />
+        <Text size="sm" color="secondary">
+          Click any row to see console output
+        </Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Actions</Text>
+        <Table
+          columns={actionColumns}
+          data={users}
+          type="bordered"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Column Alignment</Text>
+        <Table
+          columns={[
+            { key: 'name', title: 'Product', dataIndex: 'name', align: 'left' },
+            { key: 'category', title: 'Category', dataIndex: 'category', align: 'center', width: '150px' },
+            { key: 'price', title: 'Price', dataIndex: 'price', align: 'right', width: '120px', render: (price: number) => `$${price.toFixed(2)}` },
+          ]}
+          data={products.slice(0, 3)}
+          type="bordered"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Fixed Column Widths</Text>
+        <Table
+          columns={[
+            { key: 'id', title: 'ID', dataIndex: 'id', width: '60px' },
+            { key: 'name', title: 'Name', dataIndex: 'name', width: '200px' },
+            { key: 'email', title: 'Email', dataIndex: 'email' },
+            { key: 'role', title: 'Role', dataIndex: 'role', width: '120px' },
+          ]}
+          data={users}
+          type="bordered"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Empty Table</Text>
+        <Table
+          columns={userColumns}
+          data={[]}
+          type="bordered"
+        />
+        <Text size="sm" color="secondary">
+          No data to display
+        </Text>
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default TableExamples;

package/src/examples/TextAreaExamples.tsx

@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import { Screen, View, Text } from '@idealyst/components';
+import TextArea from '../TextArea';
+
+export const TextAreaExamples: React.FC = () => {
+  const [basicValue, setBasicValue] = useState('');
+  const [limitedValue, setLimitedValue] = useState('');
+  const [errorValue, setErrorValue] = useState('');
+  const [autoGrowValue, setAutoGrowValue] = useState('');
+
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">TextArea Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic TextArea</Text>
+        <TextArea
+          value={basicValue}
+          onChange={setBasicValue}
+          placeholder="Enter your text here..."
+          rows={4}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Auto-Growing TextArea</Text>
+        <TextArea
+          label="Auto-grow with min/max height"
+          value={autoGrowValue}
+          onChange={setAutoGrowValue}
+          placeholder="Type multiple lines to see auto-grow in action..."
+          autoGrow
+          minHeight={60}
+          maxHeight={200}
+          helperText="This textarea grows as you type, up to 200px"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Label</Text>
+        <TextArea
+          label="Description"
+          value={basicValue}
+          onChange={setBasicValue}
+          placeholder="Enter description..."
+          helperText="Provide a detailed description"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm">
+          <TextArea
+            size="sm"
+            placeholder="Small textarea"
+            rows={3}
+          />
+          <TextArea
+            size="md"
+            placeholder="Medium textarea (default)"
+            rows={3}
+          />
+          <TextArea
+            size="lg"
+            placeholder="Large textarea"
+            rows={3}
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Intent Colors</Text>
+        <View spacing="sm">
+          <TextArea
+            intent="primary"
+            placeholder="Primary intent"
+            rows={2}
+          />
+          <TextArea
+            intent="success"
+            placeholder="Success intent"
+            rows={2}
+          />
+          <TextArea
+            intent="warning"
+            placeholder="Warning intent"
+            rows={2}
+          />
+          <TextArea
+            intent="neutral"
+            placeholder="Neutral intent"
+            rows={2}
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Character Limit</Text>
+        <TextArea
+          label="Limited Input"
+          value={limitedValue}
+          onChange={setLimitedValue}
+          placeholder="Maximum 100 characters"
+          maxLength={100}
+          showCharacterCount
+          rows={3}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Error State</Text>
+        <TextArea
+          label="Required Field"
+          value={errorValue}
+          onChange={setErrorValue}
+          placeholder="This field is required"
+          error="This field cannot be empty"
+          rows={3}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Resize Options</Text>
+        <View spacing="sm">
+          <TextArea
+            placeholder="Resize: none"
+            resize="none"
+            rows={2}
+          />
+          <TextArea
+            placeholder="Resize: vertical"
+            resize="vertical"
+            rows={2}
+          />
+          <TextArea
+            placeholder="Resize: horizontal"
+            resize="horizontal"
+            rows={2}
+          />
+          <TextArea
+            placeholder="Resize: both"
+            resize="both"
+            rows={2}
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Custom Styling</Text>
+        <TextArea
+          label="Monospace Font"
+          placeholder="Code or monospace text..."
+          textareaStyle={{ fontFamily: 'monospace' }}
+          rows={4}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Disabled State</Text>
+        <TextArea
+          label="Disabled"
+          value="This textarea is disabled"
+          disabled
+          rows={3}
+        />
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default TextAreaExamples;