@app-studio/components 0.10.17

package/docs/components/ComboBox.mdx

@@ -0,0 +1,366 @@
+# ComboBox
+
+A customizable dropdown list with optional search functionality.
+
+### **Import**
+  ```tsx
+  import { ComboBox } from '@app-studio/components';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { ComboBox } from '@app-studio/components';
+
+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 '@app-studio/components';
+import { Vertical } from '@app-studio/components';
+import { MessageLayout, showMessage } from '@app-studio/components';
+
+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) => {
+          if (!Array.isArray(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 '@app-studio/components';
+
+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 '@app-studio/components';
+import { ComboBox } from '@app-studio/components';
+
+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 '@app-studio/components';
+import { ComboBox } from '@app-studio/components';
+
+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 '@app-studio/components';
+
+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 '@app-studio/components';
+
+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 '@app-studio/components';
+
+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 '@app-studio/components';
+
+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 '@app-studio/components';
+
+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,204 @@
+# Command
+
+A versatile component for searching, filtering, and executing commands or actions.
+
+### **Import**
+```tsx
+import { Command } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React, { useState } from 'react';
+import { Command } from '@app-studio/components';
+import { Button } from '@app-studio/components';
+import { HomeIcon,
+  SettingsIcon,
+  UserIcon,
+  InfoIcon,
+  SearchIcon, } from '@app-studio/components';
+
+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'),
+    },
+    {
+      id: 'help',
+      name: 'Help',
+      description: 'Get help and support',
+      icon: <InfoIcon widthHeight={16} />,
+      shortcut: '⌘?',
+      onSelect: () => console.log('Help selected'),
+    },
+    {
+      id: 'search',
+      name: 'Search',
+      description: 'Search for content',
+      icon: <SearchIcon widthHeight={16} />,
+      shortcut: '⌘K',
+      onSelect: () => console.log('Search selected'),
+    },
+  ];
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
+      <Command
+        open={open}
+        onOpenChange={setOpen}
+        commands={commands}
+        placeholder="Search commands..."
+      />
+    </>
+  );
+};
+```
+
+### **groups**
+An optional array of command groups to be displayed.
+
+- **Type:** `CommandGroup[]`
+- **Default:** ``
+- **Possible Values:** ``
+
+```tsx
+import React, { useState } from 'react';
+import { Command } from '@app-studio/components';
+import { Button } from '@app-studio/components';
+import { HomeIcon,
+  SettingsIcon,
+  UserIcon,
+  EditIcon,
+  DustBinIcon,
+  CopyIcon,
+  PlayIcon,
+  PauseIcon, } from '@app-studio/components';
+
+export const GroupedCommand = () => {
+  const [open, setOpen] = useState(false);
+
+  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'),
+        },
+        {
+          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'),
+        },
+      ],
+    },
+    {
+      id: 'actions',
+      name: 'Actions',
+      commands: [
+        {
+          id: 'edit',
+          name: 'Edit',
+          description: 'Edit current document',
+          icon: <EditIcon widthHeight={16} />,
+          shortcut: '⌘E',
+          onSelect: () => console.log('Edit selected'),
+        },
+        {
+          id: 'delete',
+          name: 'Delete',
+          description: 'Delete current document',
+          icon: <DustBinIcon widthHeight={16} />,
+          shortcut: '⌘⌫',
+          onSelect: () => console.log('Delete selected'),
+        },
+        {
+          id: 'copy',
+          name: 'Copy',
+          description: 'Copy to clipboard',
+          icon: <CopyIcon widthHeight={16} />,
+          shortcut: '⌘C',
+          onSelect: () => console.log('Copy selected'),
+        },
+      ],
+    },
+    {
+      id: 'media',
+      name: 'Media Controls',
+      commands: [
+        {
+          id: 'play',
+          name: 'Play',
+          description: 'Play media',
+          icon: <PlayIcon widthHeight={16} />,
+          shortcut: 'Space',
+          onSelect: () => console.log('Play selected'),
+        },
+        {
+          id: 'pause',
+          name: 'Pause',
+          description: 'Pause media',
+          icon: <PauseIcon widthHeight={16} />,
+          shortcut: 'Space',
+          onSelect: () => console.log('Pause selected'),
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>
+        Open Grouped Command Palette
+      </Button>
+      <Command
+        open={open}
+        onOpenChange={setOpen}
+        groups={groups}
+        placeholder="Search commands..."
+      />
+    </>
+  );
+};
+```
+

package/docs/components/ContextMenu.mdx

@@ -0,0 +1,95 @@
+# ContextMenu
+
+A floating menu that appears upon user interaction, typically a right-click or long-press.
+
+### **Import**
+```tsx
+import { ContextMenu } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { ContextMenu } from '@app-studio/components';
+import { Text, Vertical, View } from 'app-studio';
+import { CopyIcon,
+  EditIcon,
+  DeleteIcon,
+  DownloadIcon,
+  ShareIcon, } from '@app-studio/components';
+import { ContextMenuItem } from '@app-studio/components';
+
+export const DefaultContextMenu = () => {
+  const handleCopy = () => alert('Copy clicked');
+  const handleEdit = () => alert('Edit clicked');
+  const handleDelete = () => alert('Delete clicked');
+  const handleDownload = () => alert('Download clicked');
+  const handleShare = () => alert('Share clicked');
+
+  const items: ContextMenuItem[] = [
+    {
+      id: 'copy',
+      label: 'Copy',
+      icon: <CopyIcon widthHeight={16} />,
+      onClick: handleCopy,
+    },
+    {
+      id: 'edit',
+      label: 'Edit',
+      icon: <EditIcon widthHeight={16} />,
+      onClick: handleEdit,
+    },
+    // {
+    //   id: 'divider-1',
+    //   divider: true
+    // },
+    {
+      id: 'delete',
+      label: 'Delete',
+      icon: <DeleteIcon widthHeight={16} />,
+      onClick: handleDelete,
+    },
+    {
+      id: 'more',
+      label: 'More Options',
+      items: [
+        {
+          id: 'download',
+          label: 'Download',
+          icon: <DownloadIcon widthHeight={16} />,
+          onClick: handleDownload,
+        },
+        {
+          id: 'share',
+          label: 'Share',
+          icon: <ShareIcon widthHeight={16} />,
+          onClick: handleShare,
+        },
+      ],
+    },
+    {
+      id: 'disabled',
+      label: 'Disabled Option',
+      disabled: true,
+    },
+  ];
+
+  return (
+    <Vertical gap={20} width="100%" maxWidth={400}>
+      <Text marginBottom={10}>Default Context Menu</Text>
+      <ContextMenu items={items}>
+        <View
+          padding={20}
+          backgroundColor="color-gray-100"
+          borderRadius={8}
+          textAlign="center"
+          cursor="context-menu"
+        >
+          <Text>Right-click here to open the context menu</Text>
+        </View>
+      </ContextMenu>
+    </Vertical>
+  );
+};
+```
+

package/docs/components/CookieConsent.mdx

@@ -0,0 +1,53 @@
+# CookieConsent
+
+Displays a customizable banner to manage user consent for cookies, enhancing user experience.
+
+### **Import**
+```tsx
+import { CookieConsent } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+import { Text, View } from 'app-studio';
+import { CookieConsent } from '@app-studio/components';
+
+/**
+ * Default CookieConsent example
+ */
+export const DefaultCookieConsent = () => {
+  // State to control visibility for demo purposes
+  const [showConsent, setShowConsent] = React.useState(false);
+
+  // Reset cookie consent to show the banner
+  const handleShowConsent = () => {
+    // Clear localStorage to simulate a new visit
+    localStorage.removeItem('app-studio-cookie-consent');
+    localStorage.removeItem('app-studio-cookie-consent-expires');
+    setShowConsent(true);
+  };
+
+  return (
+    <View width="100%" maxWidth={600}>
+      <Text marginBottom={16}>
+        Cliquez sur le bouton ci-dessous pour afficher la bannière de
+        consentement des cookies
+      </Text>
+
+      <Button onClick={handleShowConsent}>
+        Afficher le consentement des cookies
+      </Button>
+
+      {showConsent && (
+        <CookieConsent
+          onAccept={() => setShowConsent(false)}
+          onCustomize={() => alert('Préférences de personnalisation cliquées')}
+        />
+      )}
+    </View>
+  );
+};
+```
+