@app-studio/web 0.9.31 → 0.9.32

package/docs/components/ComboBox.mdx

@@ -0,0 +1,364 @@
+# ComboBox
+
+A customizable dropdown list with optional search functionality.
+
+### **Import**
+  ```tsx
+  import { ComboBox } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { ComboBox } from '../ComboBox';
+
+export const DefaultDemo = () => {
+  const items = [
+    {
+      value: 'next.js',
+      label: 'Next.js',
+    },
+    {
+      value: 'sveltekit',
+      label: 'SvelteKit',
+    },
+    {
+      value: 'nuxt.js',
+      label: 'Nuxt.js',
+    },
+  ];
+  return <ComboBox id="default" name="default" items={items} />;
+};
+
+```
+
+### **onSelect**
+Optional callback function triggered when an item is selected.
+
+```tsx
+import React from 'react';
+import { ComboBox } from '../ComboBox';
+import { Vertical } from 'app-studio';
+import { MessageLayout, showMessage } from '../../..';
+
+export const OnSelectDemo = () => {
+  const items = [
+    {
+      value: 'next.js',
+      label: 'Next.js',
+    },
+    {
+      value: 'sveltekit',
+      label: 'SvelteKit',
+    },
+    {
+      value: 'nuxt.js',
+      label: 'Nuxt.js',
+    },
+    {
+      value: 'remix',
+      label: 'Remix',
+    },
+    {
+      value: 'astro',
+      label: 'Astro',
+    },
+  ];
+  return (
+    <Vertical gap={15}>
+      <ComboBox
+        id="onSelect"
+        items={items}
+        onSelect={(item) => {
+          showMessage('success', `Item selected: ${item.label}`);
+        }}
+      />
+      <MessageLayout position="bottomRight" />
+    </Vertical>
+  );
+};
+
+```
+
+## Props
+
+| Prop              | Type          | Description                                                                 | Default     |
+| ----------------- | ------------- | --------------------------------------------------------------------------- | ----------- |
+| items             | array         | Array of items to be displayed in the dropdown.                             |             |
+| onSelect          | function      | Callback function triggered when an item is selected.                       |             |
+| searchEnabled     | boolean       | Flag to enable search functionality.                                        | true        |
+| left              | ReactNode     | Element to display on the left side.                                        |             |
+| right             | ReactNode     | Element to display on the right side.                                       |             |
+| label             | string        | Label to describe the ComboBox.                                             |             |
+| showTick          | boolean       | Flag to show a tick mark next to selected items.                            | true        |
+| placeholder       | string        | Placeholder text when nothing is selected.                                  |             |
+| styles            | CSSProperties | Optional custom styles for the ComboBox.                                    |             |
+| searchPlaceholder | string        | Placeholder text for the search input.                                     | 'Search...' |
+| className         | string        | Optional className for the ComboBox container.                              |             |
+
+### **searchEnabled**
+Flag to enable search functionality within the ComboBox.
+
+```tsx
+import React from 'react';
+import { ComboBox } from '../ComboBox';
+
+export const SearchEnabledDemo = () => {
+  const items = [
+    {
+      value: 'next.js',
+      label: 'Next.js',
+    },
+    {
+      value: 'sveltekit',
+      label: 'SvelteKit',
+    },
+    {
+      value: 'nuxt.js',
+      label: 'Nuxt.js',
+    },
+    {
+      value: 'remix',
+      label: 'Remix',
+    },
+    {
+      value: 'astro',
+      label: 'Astro',
+    },
+  ];
+  return <ComboBox id="searchEnabled" items={items} searchEnabled={false} />;
+};
+
+```
+
+### **left**
+Optional element to display on the left side of the ComboBox.
+
+```tsx
+import React from 'react';
+import { Badge } from '../../..';
+import { ComboBox } from '../ComboBox';
+
+export const LeftDemo = () => {
+  const items = [
+    {
+      value: 'enhancement',
+      label: 'Enhancement',
+    },
+    {
+      value: 'bug',
+      label: 'Bugs',
+    },
+  ];
+
+  return (
+    <ComboBox
+      id="left"
+      name="left"
+      items={items}
+      left={<Badge content="Status" />}
+    />
+  );
+};
+
+```
+
+### **right**
+Optional element to display on the right side of the ComboBox.
+
+```tsx
+import React from 'react';
+import { Badge } from '../../..';
+import { ComboBox } from '../ComboBox';
+
+export const RightDemo = () => {
+  const items = [
+    {
+      value: 'enhancement',
+      label: 'Enhancement',
+    },
+    {
+      value: 'bug',
+      label: 'Bugs',
+    },
+  ];
+
+  return (
+    <ComboBox id="right" items={items} right={<Badge content="Status" />} />
+  );
+};
+
+```
+
+### **label**
+Optional label to describe the purpose of the ComboBox.
+
+```tsx
+import React from 'react';
+import PlusIcon from '../../../Icon/Plus';
+import { ComboBox } from '../ComboBox';
+
+export const LabelDemo = () => {
+  const items = [
+    {
+      value: 'todo',
+      label: 'To Do',
+    },
+    {
+      value: 'inprogress',
+      label: 'In Progress',
+    },
+  ];
+  return (
+    <ComboBox
+      id="label"
+      name="label"
+      label="Status"
+      items={items}
+      left={<PlusIcon size={12} />}
+    />
+  );
+};
+
+```
+
+### **showTick**
+Flag to show a tick mark next to selected items.
+
+```tsx
+import React from 'react';
+import { ComboBox } from '../ComboBox';
+
+export const ShowTickDemo = () => {
+  const statuses = [
+    {
+      value: 'backlog',
+      label: 'Backlog',
+    },
+    {
+      value: 'todo',
+      label: 'Todo',
+    },
+    {
+      value: 'in progress',
+      label: 'In Progress',
+    },
+    {
+      value: 'done',
+      label: 'Done',
+    },
+    {
+      value: 'canceled',
+      label: 'Canceled',
+    },
+  ];
+  return <ComboBox id="showTick" items={statuses} showTick={false} />;
+};
+
+```
+
+### **placeholder**
+Text to display when nothing has been selected in the ComboBox.
+
+```tsx
+import React from 'react';
+import { ComboBox } from '../ComboBox';
+
+export const PlaceholderDemo = () => {
+  const items = [
+    {
+      value: 'todo',
+      label: 'To Do',
+    },
+    {
+      value: 'inprogress',
+      label: 'In Progress',
+    },
+  ];
+  return (
+    <ComboBox
+      id="placeholder"
+      name="placeholder"
+      placeholder="Select..."
+      searchEnabled={false}
+      items={items}
+    />
+  );
+};
+
+```
+
+### **styles**
+Optional custom styles to apply to the ComboBox.
+
+```tsx
+import React from 'react';
+import { ComboBox } from '../ComboBox';
+
+export const StylesDemo = () => {
+  const items = [
+    {
+      value: 'todo',
+      label: 'To Do',
+    },
+    {
+      value: 'inprogress',
+      label: 'In Progress',
+    },
+  ];
+  return (
+    <ComboBox
+      id="styles"
+      items={items}
+      searchEnabled={false}
+      views={{
+        container: {
+          boxShadow:
+            'rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset',
+        },
+        item: {
+          margin: '10px',
+        },
+        dropdown: {
+          boxShadow:
+            'rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset',
+        },
+        text: {
+          borderBottom: '1px solid transparent',
+        },
+      }}
+    />
+  );
+};
+
+```
+
+### **searchPlaceholder**
+Placeholder text for the search input when search is enabled.
+
+```tsx
+import React from 'react';
+import { ComboBox } from '../ComboBox';
+
+export const SearchPlaceholderDemo = () => {
+  const items = [
+    {
+      value: 'todo',
+      label: 'To Do',
+    },
+    {
+      value: 'inprogress',
+      label: 'In Progress',
+    },
+  ];
+  return (
+    <ComboBox
+      id="searchPlaceholder"
+      placeholder="Select..."
+      searchPlaceholder="FilterStatus.."
+      items={items}
+    />
+  );
+};
+
+```

package/docs/components/Command.mdx

@@ -0,0 +1,252 @@
+# Command
+
+A command palette for displaying a searchable list of commands.
+
+### **Import**
+  ```tsx
+  import { Command } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React, { useState } from 'react';
+import { Command } from '@app-studio/web';
+import { Button } from '@app-studio/web';
+import { HomeIcon, SettingsIcon, UserIcon } from '@app-studio/web';
+
+export const DefaultCommand = () => {
+  const [open, setOpen] = useState(false);
+
+  const commands = [
+    {
+      id: 'home',
+      name: 'Home',
+      description: 'Go to home page',
+      icon: <HomeIcon widthHeight={16} />,
+      shortcut: '⌘H',
+      onSelect: () => console.log('Home selected'),
+    },
+    {
+      id: 'settings',
+      name: 'Settings',
+      description: 'Open settings page',
+      icon: <SettingsIcon widthHeight={16} />,
+      shortcut: '⌘S',
+      onSelect: () => console.log('Settings selected'),
+    },
+    {
+      id: 'profile',
+      name: 'Profile',
+      description: 'View your profile',
+      icon: <UserIcon widthHeight={16} />,
+      shortcut: '⌘P',
+      onSelect: () => console.log('Profile selected'),
+    },
+  ];
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
+      <Command
+        open={open}
+        onOpenChange={setOpen}
+        commands={commands}
+        placeholder="Search commands..."
+      />
+    </>
+  );
+};
+```
+
+### **Groups**
+The Command component supports grouping commands:
+
+```tsx
+const groups = [
+  {
+    id: 'navigation',
+    name: 'Navigation',
+    commands: [
+      {
+        id: 'home',
+        name: 'Home',
+        description: 'Go to home page',
+        icon: <HomeIcon widthHeight={16} />,
+        shortcut: '⌘H',
+        onSelect: () => console.log('Home selected'),
+      },
+      // More commands...
+    ],
+  },
+  {
+    id: 'actions',
+    name: 'Actions',
+    commands: [
+      {
+        id: 'edit',
+        name: 'Edit',
+        description: 'Edit current document',
+        icon: <EditIcon widthHeight={16} />,
+        shortcut: '⌘E',
+        onSelect: () => console.log('Edit selected'),
+      },
+      // More commands...
+    ],
+  },
+];
+
+<Command
+  open={open}
+  onOpenChange={setOpen}
+  groups={groups}
+  placeholder="Search commands..."
+/>
+```
+
+### **Variants**
+The Command component supports different visual variants:
+
+```tsx
+// Default variant
+<Command variant="default" />
+
+// Filled variant
+<Command variant="filled" />
+
+// Outline variant
+<Command variant="outline" />
+```
+
+### **Sizes**
+The Command component supports different sizes:
+
+```tsx
+// Small size
+<Command size="sm" />
+
+// Medium size (default)
+<Command size="md" />
+
+// Large size
+<Command size="lg" />
+```
+
+### **Custom Empty State**
+The Command component supports a custom empty state:
+
+```tsx
+const customEmptyState = (
+  <View
+    alignItems="center"
+    justifyContent="center"
+    padding="24px"
+    flexDirection="column"
+  >
+    <Text fontSize="16px" fontWeight="bold" color="color.gray.600">
+      No commands found
+    </Text>
+    <Text fontSize="14px" color="color.gray.500" marginTop="8px">
+      Try a different search term
+    </Text>
+  </View>
+);
+
+<Command
+  open={open}
+  onOpenChange={setOpen}
+  commands={commands}
+  emptyState={customEmptyState}
+/>
+```
+
+### **Custom Footer**
+The Command component supports a custom footer:
+
+```tsx
+const customFooter = (
+  <Horizontal justifyContent="space-between" width="100%">
+    <Text fontSize="12px" color="color.gray.500">
+      Press ↑↓ to navigate
+    </Text>
+    <Text fontSize="12px" color="color.gray.500">
+      Press Enter to select
+    </Text>
+    <Text fontSize="12px" color="color.gray.500">
+      Press Esc to close
+    </Text>
+  </Horizontal>
+);
+
+<Command
+  open={open}
+  onOpenChange={setOpen}
+  commands={commands}
+  footer={customFooter}
+/>
+```
+
+### **Customization**
+The Command component can be customized with the views prop:
+
+```tsx
+<Command
+  open={open}
+  onOpenChange={setOpen}
+  commands={commands}
+  views={{
+    container: {
+      backgroundColor: 'color.blue.50',
+      borderColor: 'color.blue.200',
+      borderWidth: '2px',
+      borderRadius: '12px',
+    },
+    searchInput: {
+      container: {
+        backgroundColor: 'color.white',
+        borderBottomColor: 'color.blue.200',
+      },
+      input: {
+        color: 'color.blue.800',
+        fontWeight: 'medium',
+      },
+    },
+    item: {
+      backgroundColor: 'transparent',
+      borderRadius: '8px',
+      _hover: {
+        backgroundColor: 'color.blue.100',
+      },
+    },
+    selectedItem: {
+      backgroundColor: 'color.blue.200',
+      _hover: {
+        backgroundColor: 'color.blue.300',
+      },
+    },
+    name: {
+      color: 'color.blue.800',
+      fontWeight: 'bold',
+    },
+    description: {
+      color: 'color.blue.600',
+    },
+    shortcut: {
+      backgroundColor: 'color.white',
+      padding: '2px 6px',
+      borderRadius: '4px',
+      fontWeight: 'bold',
+    },
+    footer: {
+      backgroundColor: 'color.white',
+      borderTopColor: 'color.blue.200',
+    },
+  }}
+/>
+```
+
+### **Keyboard Navigation**
+The Command component supports keyboard navigation:
+
+- `↑` and `↓` to navigate between commands
+- `Enter` to select a command
+- `Escape` to close the command palette