@vibe/core 4.2.5 → 4.3.0-alpha-9bd83.0

package/dist/metadata/examples/BaseList.md

@@ -0,0 +1,342 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<BaseList {...args} aria-label="Example list" style={{
+  width: 300
+}}>
+      <BaseItem item={{
+    value: "1",
+    label: "First item",
+    startElement: {
+      type: "icon",
+      value: Person
+    }
+  }} />
+      <BaseItem item={{
+    value: "2",
+    label: "Second item",
+    startElement: {
+      type: "icon",
+      value: Email
+    }
+  }} />
+      <BaseItem item={{
+    value: "3",
+    label: "Third item",
+    startElement: {
+      type: "icon",
+      value: Settings
+    }
+  }} />
+    </BaseList>
+```
+
+## WithSelectedItem
+
+```tsx
+<BaseList aria-label="List with selection" style={{
+  width: 300
+}} size="small">
+      <BaseItem item={{
+    value: "1",
+    label: "Unselected item"
+  }} />
+      <BaseItem item={{
+    value: "2",
+    label: "Selected item"
+  }} selected />
+      <BaseItem item={{
+    value: "3",
+    label: "Another unselected item"
+  }} />
+    </BaseList>
+```
+
+## WithDisabledItems
+
+```tsx
+<BaseList aria-label="List with disabled items" style={{
+  width: 300
+}}>
+      <BaseItem item={{
+    value: "1",
+    label: "Enabled item"
+  }} />
+      <BaseItem item={{
+    value: "2",
+    label: "Disabled item",
+    disabled: true
+  }} />
+      <BaseItem item={{
+    value: "3",
+    label: "Another enabled item"
+  }} />
+    </BaseList>
+```
+
+## ScrollableList
+
+```tsx
+<BaseList aria-label="Scrollable list" maxHeight={200} style={{
+  width: 300
+}}>
+      {Array.from({
+    length: 10
+  }, (_, i) => <BaseItem key={i} item={{
+    value: String(i),
+    label: `Item ${i + 1}`
+  }} />)}
+    </BaseList>
+```
+
+## Sizes
+
+```tsx
+<div style={{
+  display: "flex",
+  gap: 24
+}}>
+      <div>
+        <p style={{
+      marginBottom: 8
+    }}>Small</p>
+        <BaseList aria-label="Small list" size="small" style={{
+      width: 200
+    }}>
+          <BaseItem item={{
+        value: "1",
+        label: "Small item 1"
+      }} />
+          <BaseItem item={{
+        value: "2",
+        label: "Small item 2"
+      }} />
+        </BaseList>
+      </div>
+      <div>
+        <p style={{
+      marginBottom: 8
+    }}>Medium</p>
+        <BaseList aria-label="Medium list" size="medium" style={{
+      width: 200
+    }}>
+          <BaseItem item={{
+        value: "1",
+        label: "Medium item 1"
+      }} />
+          <BaseItem item={{
+        value: "2",
+        label: "Medium item 2"
+      }} />
+        </BaseList>
+      </div>
+      <div>
+        <p style={{
+      marginBottom: 8
+    }}>Large</p>
+        <BaseList aria-label="Large list" size="large" style={{
+      width: 200
+    }}>
+          <BaseItem item={{
+        value: "1",
+        label: "Large item 1"
+      }} />
+          <BaseItem item={{
+        value: "2",
+        label: "Large item 2"
+      }} />
+        </BaseList>
+      </div>
+    </div>
+```
+
+## AsMenu
+
+```tsx
+<BaseList aria-label="Menu example" role="menu" style={{
+  width: 250
+}}>
+      <BaseItem item={{
+    value: "profile",
+    label: "View Profile",
+    startElement: {
+      type: "icon",
+      value: Person
+    }
+  }} role="menuitem" />
+      <BaseItem item={{
+    value: "settings",
+    label: "Settings",
+    startElement: {
+      type: "icon",
+      value: Settings
+    }
+  }} role="menuitem" />
+      <BaseItem item={{
+    value: "favorites",
+    label: "Favorites",
+    startElement: {
+      type: "icon",
+      value: Favorite
+    }
+  }} role="menuitem" />
+    </BaseList>
+```
+
+## KeyboardNavigationWithLooping
+
+```tsx
+<div>
+      <p style={{
+    marginBottom: 16
+  }}>
+        Try using arrow keys to navigate. The focus will wrap from the last item to the first (and vice versa).
+      </p>
+      <BaseList aria-label="List with keyboard navigation" style={{
+    width: 300
+  }}>
+        <BaseItem item={{
+      value: "1",
+      label: "First item - Press ↑ to wrap to last"
+    }} />
+        <BaseItem item={{
+      value: "2",
+      label: "Second item"
+    }} />
+        <BaseItem item={{
+      value: "3",
+      label: "Third item"
+    }} />
+        <BaseItem item={{
+      value: "4",
+      label: "Fourth item - Press ↓ to wrap to first"
+    }} />
+      </BaseList>
+    </div>
+```
+
+## HomeEndNavigation
+
+```tsx
+<div>
+      <p style={{
+    marginBottom: 16
+  }}>
+        Press <strong>Home</strong> to jump to the first item, or <strong>End</strong> to jump to the last item.
+      </p>
+      <BaseList aria-label="List with Home/End navigation" style={{
+    width: 300
+  }}>
+        {Array.from({
+      length: 8
+    }, (_, i) => <BaseItem key={i} item={{
+      value: String(i),
+      label: `Item ${i + 1}`
+    }} />)}
+      </BaseList>
+    </div>
+```
+
+## PageUpDownNavigation
+
+```tsx
+<div>
+      <p style={{
+    marginBottom: 16
+  }}>
+        Press <strong>Page Up</strong> or <strong>Page Down</strong> to move by 10 items at a time.
+      </p>
+      <BaseList aria-label="List with PageUp/PageDown navigation" maxHeight={300} style={{
+    width: 300
+  }}>
+        {Array.from({
+      length: 25
+    }, (_, i) => <BaseItem key={i} item={{
+      value: String(i),
+      label: `Item ${i + 1}`
+    }} />)}
+      </BaseList>
+    </div>
+```
+
+## DefaultFocusIndex
+
+```tsx
+<div>
+      <p style={{
+    marginBottom: 16
+  }}>This list starts with the third item focused (defaultFocusIndex=2).</p>
+      <BaseList aria-label="List with default focus" defaultFocusIndex={2} style={{
+    width: 300
+  }}>
+        <BaseItem item={{
+      value: "1",
+      label: "First item"
+    }} />
+        <BaseItem item={{
+      value: "2",
+      label: "Second item"
+    }} />
+        <BaseItem item={{
+      value: "3",
+      label: "Third item (initially focused)"
+    }} />
+        <BaseItem item={{
+      value: "4",
+      label: "Fourth item"
+    }} />
+      </BaseList>
+    </div>
+```
+
+## WithAriaControls
+
+```tsx
+const detailsId = "list-details";
+return <div>
+        <p style={{
+    marginBottom: 16
+  }}>
+          This list controls the details panel below (using <code>aria-controls</code>).
+        </p>
+        <BaseList aria-label="Navigation list" aria-controls={detailsId} style={{
+    width: 300
+  }}>
+          <BaseItem item={{
+      value: "1",
+      label: "Settings",
+      startElement: {
+        type: "icon",
+        value: Settings
+      }
+    }} />
+          <BaseItem item={{
+      value: "2",
+      label: "Profile",
+      startElement: {
+        type: "icon",
+        value: Person
+      }
+    }} />
+          <BaseItem item={{
+      value: "3",
+      label: "Favorites",
+      startElement: {
+        type: "icon",
+        value: Favorite
+      }
+    }} />
+        </BaseList>
+        <div id={detailsId} style={{
+    marginTop: 16,
+    padding: 16,
+    border: "1px solid #ccc",
+    borderRadius: 4
+  }}>
+          <p>Details panel controlled by the list above</p>
+        </div>
+      </div>;
+```
+

package/dist/metadata/examples/Box.md

@@ -0,0 +1,208 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const boxTemplate = (args: BoxProps) => <Box border rounded="medium" padding="large" marginBottom="medium" {...args} style={{
+  width: "100%"
+}}>
+    Box composite component
+  </Box>
+```
+
+## BackgroundColors
+
+```tsx
+<>
+      <Box backgroundColor="primaryBackgroundColor" padding="large" marginBottom="medium">
+        primaryBackgroundColor
+      </Box>
+      <Box backgroundColor="secondaryBackgroundColor" padding="large" marginBottom="medium">
+        secondaryBackgroundColor
+      </Box>
+      <Box backgroundColor="greyBackgroundColor" padding="large" marginBottom="medium">
+        greyBackgroundColor
+      </Box>
+      <Box backgroundColor="allgreyBackgroundColor" padding="large" marginBottom="medium">
+        allgreyBackgroundColor
+      </Box>
+      <Box textColor="textColorOnInverted" backgroundColor="invertedColorBackground" padding="large" marginBottom="medium">
+        invertedColorBackground
+      </Box>
+    </>
+```
+
+## TextColors
+
+```tsx
+<>
+      <Box textColor="primaryTextColor" padding="large" marginBottom="medium">
+        textPrimaryTextColor
+      </Box>
+      <Box backgroundColor="invertedColorBackground" textColor="textColorOnInverted" padding="large" marginBottom="medium">
+        textColorOnInverted
+      </Box>
+      <Box textColor="secondaryTextColor" padding="large" marginBottom="medium">
+        secondaryTextColor
+      </Box>
+    </>
+```
+
+## Border
+
+```tsx
+<>
+      <Box border padding="large" marginBottom="medium">
+        default
+      </Box>
+    </>
+```
+
+## BorderColor
+
+```tsx
+<>
+      <Box border borderColor="uiBorderColor" padding="large" marginBottom="medium">
+        uiBorderColor
+      </Box>
+      <Box border borderColor="layoutBorderColor" padding="large" marginBottom="medium">
+        layoutBorderColor
+      </Box>
+    </>
+```
+
+## RoundCorners
+
+```tsx
+<>
+      <Box border rounded="small" padding="large" marginBottom="medium">
+        small
+      </Box>
+      <Box border rounded="medium" padding="large" marginBottom="medium">
+        medium
+      </Box>
+      <Box border rounded="big" padding="large" marginBottom="medium">
+        big
+      </Box>
+    </>
+```
+
+## Shadow
+
+```tsx
+<>
+      <Box shadow="xs" padding="large" marginBottom="medium">
+        xs
+      </Box>
+      <Box shadow="small" padding="large" marginBottom="medium">
+        small
+      </Box>
+      <Box shadow="medium" padding="large" marginBottom="medium">
+        medium
+      </Box>
+      <Box shadow="large" padding="large" marginBottom="medium">
+        large
+      </Box>
+    </>
+```
+
+## Margin
+
+```tsx
+<>
+      <Box backgroundColor="allgreyBackgroundColor">
+        <Box backgroundColor="primaryBackgroundColor" border margin="xs">
+          xs
+        </Box>
+      </Box>
+      <Divider withoutMargin />
+      <Box backgroundColor="allgreyBackgroundColor">
+        <Box backgroundColor="primaryBackgroundColor" border margin="small">
+          small
+        </Box>
+      </Box>
+      <Divider withoutMargin />
+      <Box backgroundColor="allgreyBackgroundColor">
+        <Box backgroundColor="primaryBackgroundColor" border margin="medium">
+          medium
+        </Box>
+      </Box>
+      <Divider withoutMargin />
+      <Box backgroundColor="allgreyBackgroundColor">
+        <Box backgroundColor="primaryBackgroundColor" border margin="large">
+          large
+        </Box>
+      </Box>
+      <Divider withoutMargin />
+      <Box backgroundColor="allgreyBackgroundColor">
+        <Box backgroundColor="primaryBackgroundColor" border margin="xl">
+          xl
+        </Box>
+      </Box>
+      <Divider withoutMargin />
+      <Box backgroundColor="allgreyBackgroundColor">
+        <Box backgroundColor="primaryBackgroundColor" border margin="xxl">
+          xxl
+        </Box>
+      </Box>
+      <Divider withoutMargin />
+      <Box backgroundColor="allgreyBackgroundColor">
+        <Box backgroundColor="primaryBackgroundColor" border margin="xxxl">
+          xxxl
+        </Box>
+      </Box>
+      <Divider withoutMargin />
+    </>
+```
+
+## Padding
+
+```tsx
+<>
+      <Box style={{
+    backgroundColor: "var(--color-sky-selected)"
+  }} marginBottom="medium" border padding="xs">
+        <Box backgroundColor="primaryBackgroundColor">xs</Box>
+      </Box>
+      <Box style={{
+    backgroundColor: "var(--color-sky-selected)"
+  }} marginBottom="medium" border padding="small">
+        <Box backgroundColor="primaryBackgroundColor">small</Box>
+      </Box>
+      <Box style={{
+    backgroundColor: "var(--color-sky-selected)"
+  }} marginBottom="medium" border padding="medium">
+        <Box backgroundColor="primaryBackgroundColor">medium</Box>
+      </Box>
+      <Box style={{
+    backgroundColor: "var(--color-sky-selected)"
+  }} marginBottom="medium" border padding="large">
+        <Box backgroundColor="primaryBackgroundColor">large</Box>
+      </Box>
+      <Divider withoutMargin />
+      <Box style={{
+    backgroundColor: "var(--color-sky-selected)"
+  }} marginBottom="medium" border padding="xl">
+        <Box backgroundColor="primaryBackgroundColor">xl</Box>
+      </Box>
+      <Box style={{
+    backgroundColor: "var(--color-sky-selected)"
+  }} marginBottom="medium" border padding="xxl">
+        <Box backgroundColor="primaryBackgroundColor">xxl</Box>
+      </Box>
+      <Box style={{
+    backgroundColor: "var(--color-sky-selected)"
+  }} marginBottom="medium" border padding="xxxl">
+        <Box backgroundColor="primaryBackgroundColor">xxxl</Box>
+      </Box>
+    </>
+```
+
+## Disabled
+
+```tsx
+<Box backgroundColor="allgreyBackgroundColor" border disabled padding="large" marginBottom="medium">
+      disabled
+    </Box>
+```
+

package/dist/metadata/examples/BreadcrumbItem.md

@@ -0,0 +1,54 @@
+# Storybook Code Examples
+
+## States
+
+```tsx
+<div className="monday-storybook-breadcrumb-item_column-wrapper">
+      <div className="monday-storybook-breadcrumb-item_row-wrapper">
+        <span>Link</span>
+        <BreadcrumbsBar type="navigation">
+          <BreadcrumbItem text="Workspace" icon={Workspace} link="https://www.google.com" />
+        </BreadcrumbsBar>
+      </div>
+      <div className="monday-storybook-breadcrumb-item_row-wrapper">
+        <span>Function</span>
+        <BreadcrumbsBar type="navigation">
+          <BreadcrumbItem text="Workspace" icon={Workspace} onClick={() => {
+        alert("Hello");
+      }} />
+        </BreadcrumbsBar>
+      </div>
+      <div className="monday-storybook-breadcrumb-item_row-wrapper">
+        <span>Disabled</span>
+        <BreadcrumbsBar type="indication">
+          <BreadcrumbItem text="Workspace" icon={Workspace} disabled />
+        </BreadcrumbsBar>
+      </div>
+      <div className="monday-storybook-breadcrumb-item_row-wrapper">
+        <span>Current</span>
+        <BreadcrumbsBar type="indication">
+          <BreadcrumbItem text="Workspace" icon={Workspace} isCurrent />
+        </BreadcrumbsBar>
+      </div>
+    </div>
+```
+
+## With icon
+
+```tsx
+<div className="monday-storybook-breadcrumb-item_column-wrapper">
+      <div className="monday-storybook-breadcrumb-item_row-wrapper">
+        <span>With Icon</span>
+        <BreadcrumbsBar type="indication">
+          <BreadcrumbItem text="Workspace" icon={Workspace} />
+        </BreadcrumbsBar>
+      </div>
+      <div className="monday-storybook-breadcrumb-item_row-wrapper">
+        <span>Without Icon</span>
+        <BreadcrumbsBar type="indication">
+          <BreadcrumbItem text="Workspace" />
+        </BreadcrumbsBar>
+      </div>
+    </div>
+```
+

package/dist/metadata/examples/BreadcrumbsBar.md

@@ -0,0 +1,64 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<BreadcrumbsBar {...args}>
+      {args.children && (args.children as BreadcrumbItemProps[]).map(item => <BreadcrumbItem key={item.text} text={item.text} icon={item.icon} />)}
+    </BreadcrumbsBar>
+```
+
+## Text only
+
+```tsx
+<BreadcrumbsBar type="indication">
+      <BreadcrumbItem text="Workspace" isCurrent />
+      <BreadcrumbItem text="Folder" />
+      <BreadcrumbItem text="Board" />
+      <BreadcrumbItem text="Group" />
+    </BreadcrumbsBar>
+```
+
+## With icons
+
+```tsx
+<BreadcrumbsBar type="navigation">
+      <BreadcrumbItem text="Workspace" icon={Workspace} isCurrent />
+      <BreadcrumbItem text="Folder" icon={Folder} />
+      <BreadcrumbItem text="Board" icon={Board} />
+      <BreadcrumbItem text="Group" icon={Group} />
+    </BreadcrumbsBar>
+```
+
+## Navigatable breadcrumbs
+
+```tsx
+<Flex gap="small">
+      <Avatar size="medium" src={person3} type="img" />
+      <div className={styles.list}>
+        <Text type="text1" weight="medium">
+          Rotem Dekel
+        </Text>
+        <BreadcrumbsBar type="navigation">
+          <BreadcrumbItem text="User research" icon={Board} />
+          <BreadcrumbItem text="Video sessions" icon={Group} />
+        </BreadcrumbsBar>
+      </div>
+    </Flex>
+```
+
+## WithBreadcrumbMenu
+
+```tsx
+<BreadcrumbsBar type="navigation">
+      <BreadcrumbItem text="Board" icon={Board} />
+      <BreadcrumbItem text="Group" icon={Group} />
+      <BreadcrumbMenu>
+        <BreadcrumbMenuItem title="Item 1" onClick={() => alert("Item 1 clicked")} />
+        <BreadcrumbMenuItem title="Item 2" link="https://www.monday.com" />
+        <BreadcrumbMenuItem title="Item 3" link="https://www.monday.com" />
+      </BreadcrumbMenu>
+      <BreadcrumbItem text="My Item" icon={Item} isCurrent />
+    </BreadcrumbsBar>
+```
+