@app-studio/web 0.9.39 → 0.9.43

package/docs/components/Command.mdx

@@ -1,18 +1,22 @@
 # Command
 
-A command palette for displaying a searchable list of commands.
+A versatile component for searching, filtering, and executing commands or actions.
 
 ### **Import**
-  ```tsx
-  import { Command } from '@app-studio/web';
-  ```
+```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';
+import { HomeIcon,
+  SettingsIcon,
+  UserIcon,
+  InfoIcon,
+  SearchIcon, } from '@app-studio/web';
 
 export const DefaultCommand = () => {
   const [open, setOpen] = useState(false);
@@ -42,6 +46,22 @@ export const DefaultCommand = () => {
       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 (
@@ -58,195 +78,127 @@ export const DefaultCommand = () => {
 };
 ```
 
-### **Groups**
-The Command component supports grouping commands:
+### **groups**
+An optional array of command groups to be displayed.
 
-```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:
+- **Type:** `CommandGroup[]`
+- **Default:** ``
+- **Possible Values:** ``
 
 ```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:
+import React, { useState } from 'react';
+import { Command } from '@app-studio/web';
+import { Button } from '@app-studio/web';
+import { HomeIcon,
+  SettingsIcon,
+  UserIcon,
+  EditIcon,
+  DustBinIcon,
+  CopyIcon,
+  PlayIcon,
+  PauseIcon, } from '@app-studio/web';
+
+export const GroupedCommand = () => {
+  const [open, setOpen] = useState(false);
 
-```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',
+  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'),
+        },
+      ],
     },
-    shortcut: {
-      backgroundColor: 'color.white',
-      padding: '2px 6px',
-      borderRadius: '4px',
-      fontWeight: 'bold',
+    {
+      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'),
+        },
+      ],
     },
-    footer: {
-      backgroundColor: 'color.white',
-      borderTopColor: 'color.blue.200',
+    {
+      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'),
+        },
+      ],
     },
-  }}
-/>
-```
+  ];
 
-### **Keyboard Navigation**
-The Command component supports keyboard navigation:
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>
+        Open Grouped Command Palette
+      </Button>
+      <Command
+        open={open}
+        onOpenChange={setOpen}
+        groups={groups}
+        placeholder="Search commands..."
+      />
+    </>
+  );
+};
+```
 
-- `↑` and `↓` to navigate between commands
-- `Enter` to select a command
-- `Escape` to close the command palette

package/docs/components/ContextMenu.mdx

@@ -1,88 +1,53 @@
 # ContextMenu
 
-A context menu component that appears when right-clicking on an element.
+A floating menu that appears upon user interaction, typically a right-click or long-press.
 
 ### **Import**
-  ```tsx
-  import { ContextMenu } from '@app-studio/web';
-  ```
+```tsx
+import { ContextMenu } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { ContextMenu } from '../ContextMenu';
-import { View, Text } from 'app-studio';
-import { CopyIcon, EditIcon, DeleteIcon } from '../../Icon/Icon';
+import { ContextMenu } from '@app-studio/web';
+import { Text, Vertical, View } from 'app-studio';
+import { CopyIcon,
+  EditIcon,
+  DeleteIcon,
+  DownloadIcon,
+  ShareIcon, } from '@app-studio/web';
+import { ContextMenuItem } from '@app-studio/web';
 
 export const DefaultContextMenu = () => {
-  const items = [
+  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: () => alert('Copy clicked')
+      onClick: handleCopy,
     },
     {
       id: 'edit',
       label: 'Edit',
       icon: <EditIcon widthHeight={16} />,
-      onClick: () => alert('Edit clicked')
-    },
-    {
-      id: 'divider-1',
-      divider: true
+      onClick: handleEdit,
     },
+    // {
+    //   id: 'divider-1',
+    //   divider: true
+    // },
     {
       id: 'delete',
       label: 'Delete',
       icon: <DeleteIcon widthHeight={16} />,
-      onClick: () => alert('Delete clicked')
-    }
-  ];
-
-  return (
-    <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>
-  );
-};
-```
-
-### **Submenu**
-Create nested context menus with submenus.
-
-```tsx
-import React from 'react';
-import { ContextMenu } from '../ContextMenu';
-import { View, Text } from 'app-studio';
-import { 
-  CopyIcon, 
-  EditIcon, 
-  DownloadIcon, 
-  ShareIcon 
-} from '../../Icon/Icon';
-
-export const SubmenuContextMenu = () => {
-  const items = [
-    {
-      id: 'copy',
-      label: 'Copy',
-      icon: <CopyIcon widthHeight={16} />,
-      onClick: () => alert('Copy clicked')
-    },
-    {
-      id: 'edit',
-      label: 'Edit',
-      icon: <EditIcon widthHeight={16} />,
-      onClick: () => alert('Edit clicked')
+      onClick: handleDelete,
     },
     {
       id: 'more',
@@ -92,128 +57,39 @@ export const SubmenuContextMenu = () => {
           id: 'download',
           label: 'Download',
           icon: <DownloadIcon widthHeight={16} />,
-          onClick: () => alert('Download clicked')
+          onClick: handleDownload,
         },
         {
           id: 'share',
           label: 'Share',
           icon: <ShareIcon widthHeight={16} />,
-          onClick: () => alert('Share clicked')
-        }
-      ]
-    }
-  ];
-
-  return (
-    <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 with submenu</Text>
-      </View>
-    </ContextMenu>
-  );
-};
-```
-
-### **Variants**
-Different visual styles for the context menu.
-
-```tsx
-import React from 'react';
-import { ContextMenu } from '../ContextMenu';
-import { View, Text } from 'app-studio';
-import { CopyIcon, EditIcon } from '../../Icon/Icon';
-
-export const ContextMenuVariants = () => {
-  const items = [
-    {
-      id: 'copy',
-      label: 'Copy',
-      icon: <CopyIcon widthHeight={16} />,
-      onClick: () => alert('Copy clicked')
+          onClick: handleShare,
+        },
+      ],
     },
     {
-      id: 'edit',
-      label: 'Edit',
-      icon: <EditIcon widthHeight={16} />,
-      onClick: () => alert('Edit clicked')
-    }
+      id: 'disabled',
+      label: 'Disabled Option',
+      disabled: true,
+    },
   ];
 
   return (
-    <>
-      <ContextMenu items={items} variant="default">
-        <Text>Default Variant</Text>
-      </ContextMenu>
-      
-      <ContextMenu items={items} variant="filled">
-        <Text>Filled Variant</Text>
-      </ContextMenu>
-      
-      <ContextMenu items={items} variant="outline">
-        <Text>Outline Variant</Text>
+    <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>
   );
 };
 ```
 
-### **Custom Styling**
-Customize the appearance of the context menu.
-
-```tsx
-import React from 'react';
-import { ContextMenu } from '../ContextMenu';
-import { View, Text } from 'app-studio';
-import { CopyIcon, EditIcon } from '../../Icon/Icon';
-
-export const CustomContextMenu = () => {
-  const items = [
-    {
-      id: 'copy',
-      label: 'Copy',
-      icon: <CopyIcon widthHeight={16} />,
-      onClick: () => alert('Copy clicked')
-    },
-    {
-      id: 'edit',
-      label: 'Edit',
-      icon: <EditIcon widthHeight={16} />,
-      onClick: () => alert('Edit clicked')
-    }
-  ];
-
-  return (
-    <ContextMenu 
-      items={items}
-      views={{
-        menu: {
-          backgroundColor: 'color.blue',
-          color: 'color.white',
-          borderRadius: '8px',
-        },
-        item: {
-          _hover: {
-            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-          }
-        }
-      }}
-    >
-      <View
-        padding={20}
-        backgroundColor="color.blue.100"
-        borderRadius={8}
-        textAlign="center"
-        cursor="context-menu"
-      >
-        <Text>Right-click here for custom styled menu</Text>
-      </View>
-    </ContextMenu>
-  );
-};
-```

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/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/web';
+import { Text, View } from 'app-studio';
+import { CookieConsent } from '@app-studio/web';
+
+/**
+ * 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>
+  );
+};
+```
+