@app-studio/web 0.9.31 → 0.9.32

package/docs/components/ContextMenu.mdx

@@ -0,0 +1,219 @@
+# ContextMenu
+
+A context menu component that appears when right-clicking on an element.
+
+### **Import**
+  ```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';
+
+export const DefaultContextMenu = () => {
+  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')
+    },
+    {
+      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')
+    },
+    {
+      id: 'more',
+      label: 'More Options',
+      items: [
+        {
+          id: 'download',
+          label: 'Download',
+          icon: <DownloadIcon widthHeight={16} />,
+          onClick: () => alert('Download clicked')
+        },
+        {
+          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')
+    },
+    {
+      id: 'edit',
+      label: 'Edit',
+      icon: <EditIcon widthHeight={16} />,
+      onClick: () => alert('Edit clicked')
+    }
+  ];
+
+  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>
+      </ContextMenu>
+    </>
+  );
+};
+```
+
+### **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/CountryPicker.mdx

@@ -0,0 +1,123 @@
+# CountryPicker
+
+Enables users to select a country from a dropdown list with various styling options.
+
+### **Import**
+  ```tsx
+  import { CountryPicker } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';
+
+export const DefaultCountryPicker = () => <CountryPicker label="Country" />;
+
+```
+
+### **error**
+Optional error flag to indicate validation state
+
+```tsx
+import React from 'react';
+import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';
+
+export const ErrorCountryPicker = () => (
+  <CountryPicker id="error" label="Country" error />
+);
+
+```
+
+### **helperText**
+Optional helper text for guiding the user
+
+```tsx
+import React from 'react';
+
+import { CountryPicker } from '../CountryPicker';
+
+export const HelperTextCountryPicker = () => (
+  <CountryPicker helperText="CountryPicker one item!" error />
+);
+
+```
+
+## Props
+
+| Prop        | Type          | Description                                                              | Default |
+| ----------- | ------------- | ------------------------------------------------------------------------ | ------- |
+| label       | string        | The label text for the country picker.                                  |         |
+| error       | boolean       | Flag to indicate validation state.                                       | false   |
+| helperText  | string        | Helper text for guiding the user.                                        |         |
+| shape       | Shape         | Shape of the CountryPicker for visual views.                            |         |
+| variant     | Variant       | Variant for different visual types of CountryPicker.                     |         |
+| shadow      | Shadow/Elevation | Shadow or Elevation styles for visual depth and perspective.            |         |
+| styles      | CSSProperties | Optional custom styles for the CountryPicker (container, input, label). |         |
+| className   | string        | Optional className for the CountryPicker container.                      |         |
+| placeholder | string        | Placeholder text when no country is selected.                           |         |
+
+### **shape**
+Optional shape of the CountryPicker for visual styles
+
+```tsx
+import React from 'react';
+import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';
+
+import { Vertical } from 'app-studio';
+
+import { Shape } from '../CountryPicker/CountryPicker.type';
+
+export const ShapeCountryPicker = () => (
+  <Vertical gap={10}>
+    {['default', 'sharp', 'rounded', 'pillShaped'].map((shape) => (
+      <CountryPicker
+        key={shape}
+        label={shape}
+        shape={shape as Shape}
+        placeholder="Select a country..."
+      />
+    ))}
+  </Vertical>
+);
+
+```
+
+### **variant**
+Variant for different visual types of CountryPicker
+
+```tsx
+import React from 'react';
+import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';
+
+import { Vertical } from 'app-studio';
+
+import { Variant } from '../CountryPicker/CountryPicker.type';
+
+export const VariantCountryPicker = () => (
+  <Vertical gap={10}>
+    {['outline', 'default', 'none'].map((variant) => (
+      <CountryPicker
+        key={variant}
+        variant={variant as Variant}
+        label={variant}
+        placeholder="Select a country..."
+      />
+    ))}
+  </Vertical>
+);
+
+```
+
+### **shadow**
+Shadow or Elevation styles for visual depth and perspective
+
+```tsx
+import React from 'react';
+import { CountryPicker } from '../../../Form/CountryPicker/CountryPicker';
+
+export const ShadowCountryPicker = () => (
+  <CountryPicker shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }} />
+);
+
+```

package/docs/components/DatePicker.mdx

@@ -0,0 +1,77 @@
+# DatePicker
+
+A customizable date selection input for user interfaces.
+
+### **Import**
+  ```tsx
+  import { DatePicker } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { DatePicker } from '../../../Form/DatePicker/DatePicker';
+
+export const DefaultDatePicker = () => <DatePicker label="Select a date" />;
+
+```
+
+### **colorScheme**
+The color scheme that changes the background color of the DatePicker.
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+
+import { DatePicker } from '../DatePicker';
+
+export const ColorDatePicker = () => (
+  <Vertical gap={15}>
+    {[
+      'theme.primary',
+      'theme.secondary',
+      'theme.error',
+      'theme.success',
+      'theme.warning',
+    ].map((color) => (
+      <DatePicker
+        key={color}
+        name="name"
+        colorScheme={color}
+        label="Select a date:"
+      />
+    ))}
+  </Vertical>
+);
+
+```
+
+### **shadow**
+Adds a shadow effect to the DatePicker.
+
+```tsx
+import React from 'react';
+import { DatePicker } from '../../../Form/DatePicker/DatePicker';
+
+export const ShadowDatePicker = () => (
+  <DatePicker
+    shadow={{
+      boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px',
+    }}
+  />
+);
+
+```
+
+## Props
+
+| Prop         | Type          | Description                                                              | Default     |
+| ------------ | ------------- | ------------------------------------------------------------------------ | ----------- |
+| label        | string        | The label text for the date picker.                                     |             |
+| colorScheme  | string        | The color scheme that changes the background color.                      |             |
+| shadow       | Shadow/Elevation | Adds a shadow effect to the DatePicker.                                  |             |
+| styles       | CSSProperties | Optional custom styles for the DatePicker (container, input, calendar). |             |
+| className    | string        | Optional className for the DatePicker container.                         |             |
+| placeholder  | string        | Placeholder text when no date is selected.                              |             |
+| selectedDate | Date          | The currently selected date (controlled component).                      |             |
+| onChange     | function      | Callback function when the selected date changes.                        |             |