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

package/dist/metadata/examples/List.md

@@ -0,0 +1,125 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const listTemplate = (args: ListProps) => {
+  const onClick = useCallback(() => alert("On click!"), []);
+  return <List {...args}>
+      <ListItem onClick={onClick}>Board Power up</ListItem>
+      <ListItem onClick={onClick}>Team Power up</ListItem>
+      <ListItem onClick={onClick}>Essentials</ListItem>
+    </List>;
+}
+```
+
+## ListWithCategories
+
+```tsx
+<List>
+      <ListTitle>First category</ListTitle>
+      <ListItem>List item 1</ListItem>
+      <ListItem>List item 2</ListItem>
+      <ListTitle>Second category</ListTitle>
+      <ListItem>List item 3</ListItem>
+      <ListItem>List item 4</ListItem>
+    </List>
+```
+
+## ListWithIcons
+
+```tsx
+<List>
+      <ListItem id="list-1">
+        <ListItemIcon icon={Board} />
+        List item 1
+      </ListItem>
+      <ListItem id="list-2">
+        <ListItemIcon icon={Team} />
+        List item 2
+      </ListItem>
+      <ListItem id="list-3">
+        <ListItemIcon icon={ThumbsUp} />
+        List item 3
+      </ListItem>
+    </List>
+```
+
+## ListWithAvatars
+
+```tsx
+<List>
+      <ListItem id="list-1">
+        <ListItemAvatar src={person1} />
+        List item 1
+      </ListItem>
+      <ListItem id="list-2">
+        <ListItemAvatar src={person2} />
+        List item 2
+      </ListItem>
+      <ListItem id="list-3">
+        <ListItemAvatar src={person3} />
+        List item 3
+      </ListItem>
+    </List>
+```
+
+## ListWithVirtualizationOptimization
+
+```tsx
+<Flex align="start" gap="large" style={{
+  width: "100%"
+}} direction="column">
+      <StoryDescription description="Regular">
+        <DialogContentContainer style={{
+      height: "162px",
+      width: "200px"
+    }}>
+          <List renderOnlyVisibleItems style={{
+        height: "100%",
+        width: "100%"
+      }}>
+            <ListItem>List item 1</ListItem>
+            <ListItem>List item 2</ListItem>
+            <ListItem>List item 3</ListItem>
+            <ListItem>List item 4</ListItem>
+            <ListItem>List item 5</ListItem>
+            <ListItem>List item 6</ListItem>
+            <ListItem>List item 7</ListItem>
+            <ListItem>List item 8</ListItem>
+            <ListItem>List item 9</ListItem>
+            <ListItem>List item 10</ListItem>
+            <ListItem>List item 11</ListItem>
+            <ListItem>List item 12</ListItem>
+          </List>
+        </DialogContentContainer>
+      </StoryDescription>
+      <StoryDescription description="With categories">
+        <DialogContentContainer style={{
+      height: "159px",
+      width: "200px"
+    }}>
+          <List renderOnlyVisibleItems style={{
+        height: "100%",
+        width: "100%"
+      }}>
+            <ListTitle>First category</ListTitle>
+            <ListItem>List item 1</ListItem>
+            <ListItem>List item 2</ListItem>
+            <ListTitle>Second category</ListTitle>
+            <ListItem>List item 3</ListItem>
+            <ListItem>List item 4</ListItem>
+            <ListItem>List item 5</ListItem>
+            <ListItem>List item 6</ListItem>
+            <ListItem>List item 7</ListItem>
+            <ListItem>List item 8</ListItem>
+            <ListItem>List item 9</ListItem>
+            <ListItem>List item 10</ListItem>
+            <ListItem>List item 11</ListItem>
+            <ListItem>List item 12</ListItem>
+          </List>
+        </DialogContentContainer>
+      </StoryDescription>
+    </Flex>
+```
+

package/dist/metadata/examples/ListItem.md

@@ -0,0 +1,42 @@
+# Storybook Code Examples
+
+## States
+
+```tsx
+<Flex>
+      <ListItem>Default state</ListItem>
+      <ListItem disabled>Disabled state</ListItem>
+      <ListItem selected>Selected state</ListItem>
+    </Flex>
+```
+
+## Sizes
+
+```tsx
+<Flex>
+      <ListItem size="small">Small item</ListItem>
+      <ListItem size="medium">Medium item</ListItem>
+      <ListItem size="large">Large item</ListItem>
+    </Flex>
+```
+
+## List item with an icon
+
+```tsx
+<Flex>
+      <ListItem>
+        <ListItemIcon icon={Send} />
+        Productivity
+      </ListItem>
+    </Flex>
+```
+
+## List item with an avatar
+
+```tsx
+<ListItem>
+      <ListItemAvatar src={person1} />
+      Sophia Johnson
+    </ListItem>
+```
+

package/dist/metadata/examples/Loader.md

@@ -0,0 +1,148 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<Loader id="overview-loader" size="medium" {...args} />
+```
+
+## Size variants
+
+```tsx
+<Flex align="start" gap={60}>
+      <Flex direction="column" gap="small">
+        <Text type="text1" weight="medium">
+          Xs
+        </Text>
+        <Loader id="loader-xs" size="xs" />
+      </Flex>
+      <Flex direction="column" gap="small">
+        <Text type="text1" weight="medium">
+          Small
+        </Text>
+        <Loader id="loader-small" size="small" />
+      </Flex>
+      <Flex direction="column" gap="small">
+        <Text type="text1" weight="medium">
+          Medium
+        </Text>
+        <Loader id="loader-medium" size="medium" />
+      </Flex>
+      <Flex direction="column" gap="small">
+        <Text type="text1" weight="medium">
+          Large
+        </Text>
+        <Loader id="loader-large" size="large" />
+      </Flex>
+    </Flex>
+```
+
+## Color variants
+
+```tsx
+<Flex direction="row" gap={60}>
+      <Flex direction="column" gap="small">
+        <Text type="text1" weight="medium">
+          Primary
+        </Text>
+        <Loader id="loader-primary" size="medium" color="primary" />
+      </Flex>
+      <Flex direction="column" gap="small">
+        <Text type="text1" weight="medium">
+          Secondary
+        </Text>
+        <Loader id="loader-secondary" size="medium" color="secondary" />
+      </Flex>
+      <Flex direction="column" gap="small">
+        <Text type="text1" weight="medium">
+          Dark
+        </Text>
+        <Loader id="loader-dark" size="medium" color="dark" />
+      </Flex>
+      <Flex direction="column" gap="small">
+        <Text type="text1" weight="medium">
+          OnPrimary
+        </Text>
+        <Flex direction="row">
+          <div style={{
+        background: "var(--sb-primary-text-color)",
+        padding: "var(--space-4)"
+      }}>
+            <Loader id="loader-on-primary" size="medium" color="onPrimary" />
+          </div>
+          <div style={{
+        background: "var(--sb-negative-color)",
+        padding: "var(--space-4)"
+      }}>
+            <Loader id="loader-on-negative" size="medium" color="onPrimary" />
+          </div>
+          <div style={{
+        background: "var(--sb-positive-color)",
+        padding: "var(--space-4)"
+      }}>
+            <Loader id="loader-on-positive" size="medium" color="onPrimary" />
+          </div>
+          <div style={{
+        background: "var(--sb-primary-color)",
+        padding: "var(--space-4)"
+      }}>
+            <Loader id="loader-on-primary-color" size="medium" color="onPrimary" />
+          </div>
+        </Flex>
+      </Flex>
+    </Flex>
+```
+
+## Custom colors
+
+```tsx
+<div style={{
+  color: "var(--color-dark-red)"
+}}>
+      <Loader id="loader-custom-color" size="medium" />
+    </div>
+```
+
+## Visual variants
+
+```tsx
+<Flex direction="row" gap="large">
+      <Flex direction="column" gap="small">
+        <Text type="text1" weight="medium">
+          Casual
+        </Text>
+        <div>
+          <Loader id="loader-casual" size="medium" />
+        </div>
+      </Flex>
+      <Flex direction="column" gap="small">
+        <Text type="text1" weight="medium">
+          With background
+        </Text>
+        <div>
+          <Loader id="loader-with-background" size="medium" hasBackground />
+        </div>
+      </Flex>
+    </Flex>
+```
+
+## Loader in text field
+
+```tsx
+<DialogContentContainer>
+      <Search loading placeholder="Board name" />
+    </DialogContentContainer>
+```
+
+## Loader in button
+
+```tsx
+const [loading, setLoading] = useState(false);
+const onClick = useCallback(() => {
+  setLoading(true);
+}, [setLoading]);
+return <Button loading={loading} onClick={onClick}>
+        Click here for loading
+      </Button>;
+```
+

package/dist/metadata/examples/Menu.md

@@ -0,0 +1,141 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const menuTemplate = (args: MenuProps) => <Menu {...args}>
+    <MenuItem title="Menu item 1" />
+    <MenuItem title="Menu item 2" disabled />
+    <MenuItem title="Menu item 3" />
+  </Menu>
+```
+
+## Sizes
+
+```tsx
+[<Flex gap="medium">
+      <DialogContentContainer key="small">
+        <Menu size="small">
+          <MenuTitle caption="Small menu" />
+          <MenuDivider />
+          <MenuItem title="Menu item 1" />
+          <MenuItem title="Menu item 2" disabled />
+          <MenuItem title="Menu item 3" />
+        </Menu>
+      </DialogContentContainer>
+      <DialogContentContainer key="md">
+        <Menu size="medium">
+          <MenuTitle caption="Medium menu" />
+          <MenuDivider />
+          <MenuItem title="Menu item 1" />
+          <MenuItem title="Menu item 2" disabled />
+          <MenuItem title="Menu item 3" />
+        </Menu>
+      </DialogContentContainer>
+      <DialogContentContainer key="lg">
+        <Menu size="large">
+          <MenuTitle caption="Large menu" />
+          <MenuDivider />
+          <MenuItem title="Menu item 1" />
+          <MenuItem title="Menu item 2" disabled />
+          <MenuItem title="Menu item 3" />
+        </Menu>
+      </DialogContentContainer>
+    </Flex>]
+```
+
+## Menu with icons
+
+```tsx
+<Flex>
+      <DialogContentContainer>
+        <Menu>
+          <MenuItem icon={Email} title="Send" />
+          <MenuItem icon={Delete} title="Delete" disabled />
+          <MenuItem icon={Info} title="More info" />
+        </Menu>
+      </DialogContentContainer>
+    </Flex>
+```
+
+## Menu with sub menu
+
+```tsx
+<Flex>
+      <DialogContentContainer>
+        <Menu>
+          <MenuItem title="Menu item without sub menu" icon={Activity} />
+          <MenuItem title="With Sub menu" icon={Activity}>
+            <Menu>
+              <MenuItem icon={Email} title="Send" />
+              <MenuItem icon={Delete} title="Delete" disabled />
+              <MenuItem icon={Info} title="More info" />
+            </Menu>
+          </MenuItem>
+          <MenuItem title="Another item" icon={Settings} />
+        </Menu>
+      </DialogContentContainer>
+    </Flex>
+```
+
+## Menu with grid items and sub menu
+
+```tsx
+<Flex align="start" style={{
+  height: "500px"
+}}>
+      <DialogContentContainer>
+        <Menu>
+          <MenuItem title="Menu item" icon={Favorite} />
+          <MenuTitle caption="Top level grid item" />
+          <MenuItem title="With Sub menu" icon={Activity}>
+            <Menu>
+              <MenuItem icon={Feedback} title="More info" />
+              <MenuTitle caption="1st level grid item" />
+              <MenuGridItem>
+                <DummyNavigableGrid itemsCount={6} numberOfItemsInLine={3} withoutBorder />
+              </MenuGridItem>
+              <MenuItem icon={Code} title="With Sub menu">
+                <Menu>
+                  <MenuTitle caption="2nd level grid item" />
+                  <MenuGridItem>
+                    <DummyNavigableGrid itemsCount={6} numberOfItemsInLine={3} withoutBorder />
+                  </MenuGridItem>
+                  <MenuItem icon={Invite} title="Another sub sub item" />
+                  <MenuItem icon={Settings} title="More sub sub items" />
+                </Menu>
+              </MenuItem>
+            </Menu>
+          </MenuItem>
+          <MenuItem title="Another item" icon={Settings} />
+        </Menu>
+      </DialogContentContainer>
+    </Flex>
+```
+
+## Menu with 2-depth sub menu
+
+```tsx
+<Flex>
+      <DialogContentContainer>
+        <Menu>
+          <MenuItem title="Menu item" icon={Favorite} />
+          <MenuItem title="With Sub menu" icon={Activity}>
+            <Menu>
+              <MenuItem icon={Emoji} title="Send" />
+              <MenuItem icon={Code} title="Sub Sub menu">
+                <Menu>
+                  <MenuItem icon={Email} title="Sub sub item" />
+                  <MenuItem icon={Invite} title="Another sub sub item" />
+                  <MenuItem icon={Settings} title="More sub sub items" />
+                </Menu>
+              </MenuItem>
+              <MenuItem icon={Feedback} title="More info" />
+            </Menu>
+          </MenuItem>
+          <MenuItem title="Another item" icon={Settings} />
+        </Menu>
+      </DialogContentContainer>
+    </Flex>
+```
+

package/dist/metadata/examples/MenuButton.md

@@ -0,0 +1,127 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<MenuButton id="overview-menu-button" aria-label="Overview menu button" {...args}>
+      <Menu id="overview-menu" size="medium">
+        <MenuItem id="overview-menu-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+        <MenuItem id="overview-menu-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+        <MenuItem id="overview-menu-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
+      </Menu>
+    </MenuButton>
+```
+
+## Sizes
+
+```tsx
+<>
+      <MenuButton id="sizes-xxs" aria-label="Extra extra small menu button" size="xxs">
+        <Menu id="sizes-xxs-menu" size="medium">
+          <MenuItem id="sizes-xxs-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem id="sizes-xxs-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem id="sizes-xxs-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
+        </Menu>
+      </MenuButton>
+      <MenuButton id="sizes-xs" aria-label="Extra small menu button" size="xs">
+        <Menu id="sizes-xs-menu" size="medium">
+          <MenuItem id="sizes-xs-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem id="sizes-xs-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem id="sizes-xs-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
+        </Menu>
+      </MenuButton>
+      <MenuButton id="sizes-small" aria-label="Small menu button" size="small">
+        <Menu id="sizes-small-menu" size="medium">
+          <MenuItem id="sizes-small-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem id="sizes-small-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem id="sizes-small-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
+        </Menu>
+      </MenuButton>
+      <MenuButton id="sizes-medium" aria-label="Medium menu button" size="medium">
+        <Menu id="sizes-medium-menu" size="medium">
+          <MenuItem id="sizes-medium-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem id="sizes-medium-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem id="sizes-medium-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
+        </Menu>
+      </MenuButton>
+      <MenuButton id="sizes-large" aria-label="Large menu button" size="large">
+        <Menu id="sizes-large-menu" size="medium">
+          <MenuItem id="sizes-large-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem id="sizes-large-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem id="sizes-large-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
+        </Menu>
+      </MenuButton>
+    </>
+```
+
+## DifferentIcon
+
+```tsx
+<MenuButton id="different-icon" aria-label="Menu button with different icon" component={MoveArrowDown}>
+      <Menu id="different-icon-menu" size="medium">
+        <MenuItem id="different-icon-sun" icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+        <MenuItem id="different-icon-moon" icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+        <MenuItem id="different-icon-stars" icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
+      </Menu>
+    </MenuButton>
+```
+
+## WithText
+
+```tsx
+<div style={{
+  width: 200
+}}>
+      <MenuButton text="Open">
+        <Menu id="menu" size="medium">
+          <MenuItem icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
+        </Menu>
+      </MenuButton>
+    </div>
+```
+
+## With Text and Icon at the end
+
+```tsx
+<div style={{
+  width: 200
+}}>
+      <MenuButton text="Open" component={DropdownChevronDown} componentPosition="end">
+        <Menu id="menu" size="medium">
+          <MenuItem icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
+        </Menu>
+      </MenuButton>
+    </div>
+```
+
+## Disabled
+
+```tsx
+<MenuButton disabled tooltipContent="This action is not available now">
+      <Menu id="menu" size="medium">
+        <MenuItem icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+        <MenuItem icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+        <MenuItem icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
+      </Menu>
+    </MenuButton>
+```
+
+## CustomTriggerElement
+
+```tsx
+const ref = useRef(null);
+return <MenuButton triggerElement={props => <Button kind="secondary" {...props} className={""} ref={ref}>
+            Button
+          </Button>}>
+        <Menu id="menu" size="medium">
+          <MenuItem icon={Sun} onClick={NOOP} type="svg" title="The sun" />
+          <MenuItem icon={Moon} onClick={NOOP} type="svg" title="The moon" />
+          <MenuItem icon={Favorite} onClick={NOOP} type="svg" title="And the stars" />
+        </Menu>
+      </MenuButton>;
+```
+

package/dist/metadata/examples/MenuDivider.md

@@ -0,0 +1,35 @@
+# Storybook Code Examples
+
+## Menu with divider
+
+```tsx
+<div style={{
+  width: 200
+}}>
+      <Menu>
+        <MenuItem title="Menu item 1" />
+        <MenuDivider />
+        <MenuItem title="Menu item 2" />
+      </Menu>
+    </div>
+```
+
+## Sub menu with divider
+
+```tsx
+<div style={{
+  width: 200,
+  height: 90
+}}>
+      <Menu>
+        <MenuItem title="Item with sub menu">
+          <Menu>
+            <MenuItem title="Item 1" />
+            <MenuDivider />
+            <MenuItem title="Item 2" />
+          </Menu>
+        </MenuItem>
+      </Menu>
+    </div>
+```
+

package/dist/metadata/examples/MenuGridItem.md

@@ -0,0 +1,65 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const menuGridItemTemplate = (args: MenuGridItemProps) => <Menu>
+    <MenuItem title="This is a menu button" />
+    <MenuTitle caption="Try keyboard navigation :)" />
+    <MenuGridItem {...args}>
+      <DummyNavigableGrid itemsCount={8} numberOfItemsInLine={3} withoutBorder />
+    </MenuGridItem>
+  </Menu>
+```
+
+## With disabled states
+
+```tsx
+<DialogContentContainer>
+      <Menu>
+        <MenuTitle caption="This grid has disabled items" />
+        <MenuGridItem>
+          <DummyNavigableGrid itemsCount={4} numberOfItemsInLine={2} disabledIndexes={[2]} withoutBorder />
+        </MenuGridItem>
+        <MenuItem title="I'm a regular item" />
+        <MenuTitle caption="The grid below is disabled entirely" />
+        <MenuGridItem disabled>
+          <DummyNavigableGrid itemsCount={4} numberOfItemsInLine={2} withoutBorder />
+        </MenuGridItem>
+      </Menu>
+    </DialogContentContainer>
+```
+
+## Inside sub-menus
+
+```tsx
+<div className="storybook-menu-grid-item-long-story">
+      <DialogContentContainer>
+        <Menu>
+          <MenuItem title="Menu item" icon={Favorite} />
+          <MenuTitle caption="Top level grid item" />
+          <MenuItem title="Hover me to see the sub menu" icon={Activity}>
+            <Menu>
+              <MenuItem icon={Feedback} title="More info" />
+              <MenuTitle caption="1st level grid item" />
+              <MenuGridItem>
+                <DummyNavigableGrid itemsCount={6} numberOfItemsInLine={3} withoutBorder />
+              </MenuGridItem>
+              <MenuItem icon={Code} title="Hover me to see the sub menu">
+                <Menu>
+                  <MenuTitle caption="2nd level grid item" />
+                  <MenuGridItem>
+                    <DummyNavigableGrid itemsCount={6} numberOfItemsInLine={3} withoutBorder />
+                  </MenuGridItem>
+                  <MenuItem icon={Invite} title="Another sub sub item" />
+                  <MenuItem icon={Settings} title="More sub sub items" />
+                </Menu>
+              </MenuItem>
+            </Menu>
+          </MenuItem>
+          <MenuItem title="Another item" icon={Settings} />
+        </Menu>
+      </DialogContentContainer>
+    </div>
+```
+