Re-work multiselect component

packages/components/src/Input/Input.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { Delete, Search } from '@marigold/icons';
 import { Button } from '../Button';
 import { Input } from './Input';
@@ -90,21 +90,26 @@ export const WithLeadingIcons: Story = {
 };
 
 export const WithAction: Story = {
-  render: args => (
-    <Input
-      placeholder="Placeholder..."
-      action={
-        <Button
-          size="small"
-          variant="text"
-          onPress={() => alert('Action executed')}
-        >
-          <Delete />
-        </Button>
-      }
-      {...args}
-    />
-  ),
+  render: args => {
+    const [value, setValue] = useState('value');
+    return (
+      <Input
+        placeholder="Placeholder..."
+        action={
+          <Button
+            size="small"
+            variant="text"
+            onPress={() => alert('Action executed')}
+          >
+            <Delete />
+          </Button>
+        }
+        {...args}
+        // value={value}
+        defaultValue={'Osama'}
+      />
+    );
+  },
 };
 
 export const WithIcons: Story = {

packages/components/src/Multiselect/Multiselect.stories.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { Multiselect } from './Multiselect';
 
 const meta = {
@@ -13,23 +14,45 @@ const meta = {
 
 export default meta;
 
+const fruits = [
+  { id: 10, name: 'Lemon' },
+  { id: 11, name: 'Mango' },
+  { id: 12, name: 'Nectarine' },
+  { id: 13, name: 'Orange' },
+  { id: 14, name: 'Papaya' },
+  { id: 15, name: 'Quince' },
+  { id: 16, name: 'Raspberry' },
+  { id: 17, name: 'Strawberry' },
+  { id: 18, name: 'Tangerine' },
+  { id: 19, name: 'Ugli Fruit' },
+  { id: 20, name: 'Watermelon' },
+];
 export const Basic: StoryObj<typeof Multiselect> = {
   render: () => {
+    // Question: Why should we use selectedItems however we can use selectedKeys
+    const [selectedItems, setSelectedItems] = useState([
+      { id: 10, name: 'Lemon' },
+      { id: 11, name: 'Mango' },
+    ]);
+    console.log('currentSelectedITems', selectedItems);
     return (
       <>
         <Multiselect
-          label="Animals"
-          // disabledKeys={['snake']}
-          defaultSelectedKeys={['cat', 'dog']}
+          className="max-w-xs"
+          label="Fruits"
+          tag={item => (
+            <Multiselect.Tag textValue={item.name}>{item.name}</Multiselect.Tag>
+          )}
         >
-          <Multiselect.Item id="red-panda">Red Panda</Multiselect.Item>
-          <Multiselect.Item id="cat">Cat</Multiselect.Item>
-          <Multiselect.Item id="dog">Dog</Multiselect.Item>
-          <Multiselect.Item id="aardvark">Aardvark</Multiselect.Item>
-          <Multiselect.Item id="kangaroo">Kangaroo</Multiselect.Item>
-          <Multiselect.Item id="snake">Snake</Multiselect.Item>
-          <Multiselect.Item id="vegan">Vegan</Multiselect.Item>
-          <Multiselect.Item id="margrita">Margrita</Multiselect.Item>
+          <Multiselect.Option textValue={'Watermelon'} id={20}>
+            Watermelon
+          </Multiselect.Option>
+          <Multiselect.Option textValue={'Nectarine'} id={12}>
+            Nectarine
+          </Multiselect.Option>
+          <Multiselect.Option textValue={'Strawberry'} id={17}>
+            Strawberry
+          </Multiselect.Option>
         </Multiselect>
       </>
     );