@vibe/core 4.2.6 → 4.3.0

package/dist/metadata/examples/AvatarGroup.md

@@ -0,0 +1,390 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const avatarGroupTemplate = ({
+  persons,
+  ...args
+}: AvatarGroupTemplateProps) => {
+  return <AvatarGroup size="large" max={3} {...args}>
+      <Avatar type="img" src={persons.person2} aria-label="Sophia Johnson" />
+      <Avatar type="img" src={persons.person3} aria-label="Marco DiAngelo" />
+      <Avatar type="img" src={persons.person4} aria-label="Liam Caldwell" />
+      <Avatar type="img" src={persons.person1} aria-label="Julia Martinez" />
+      <Avatar type="img" src={persons.person2} aria-label="Sophia Johnson" />
+      <Avatar type="img" src={persons.person3} aria-label="Marco DiAngelo" />
+      <Avatar type="img" src={persons.person4} aria-label="Liam Caldwell" />
+      <Avatar type="img" src={persons.person1} aria-label="Julia Martinez" />
+      <Avatar type="img" src={persons.person2} aria-label="Sophia Johnson" />
+      <Avatar type="img" src={persons.person3} aria-label="Marco DiAngelo" />
+      <Avatar type="img" src={persons.person4} aria-label="Liam Caldwell" />
+      <Avatar type="img" src={persons.person1} aria-label="Julia Martinez" />
+      <Avatar type="text" text="MR" aria-label="Mark Roytstein" />
+    </AvatarGroup>;
+}
+```
+
+## Size
+
+```tsx
+<Flex direction="column" gap="large" align="start">
+      <StoryDescription description="Large" vertical align={StoryDescription.align.START}>
+        <AvatarGroup size="large" type="img" max={4}>
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        </AvatarGroup>
+      </StoryDescription>
+      <StoryDescription description="Medium" vertical align={StoryDescription.align.START}>
+        <AvatarGroup size="medium" type="img" max={4}>
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        </AvatarGroup>
+      </StoryDescription>
+      <StoryDescription description="Small" vertical align={StoryDescription.align.START}>
+        <AvatarGroup size="small" type="img" max={4}>
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        </AvatarGroup>
+      </StoryDescription>
+      <StoryDescription description="XS" vertical align={StoryDescription.align.START}>
+        <AvatarGroup size="xs" type="img" max={4}>
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        </AvatarGroup>
+      </StoryDescription>
+    </Flex>
+```
+
+## ColorVariants
+
+```tsx
+<Flex direction="column" gap="large" align="start">
+      <StoryDescription description="Light" vertical align={StoryDescription.align.START}>
+        <AvatarGroup size="large" type="img" max={4} counterProps={{
+      color: "light"
+    }}>
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        </AvatarGroup>
+      </StoryDescription>
+      <StoryDescription description="Dark" vertical align={StoryDescription.align.START}>
+        <AvatarGroup size="large" type="img" max={4} counterProps={{
+      color: "dark"
+    }}>
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        </AvatarGroup>
+      </StoryDescription>
+    </Flex>
+```
+
+## MaxAvatarsToDisplay
+
+```tsx
+const [max, setMax] = useState(4);
+return <Flex direction="column" gap="medium" align="start" style={{
+  width: "100%"
+}}>
+        <Slider size="small" min={1} max={14} defaultValue={max} onChange={value => setMax(value as number)} valueText={`${max}`} />
+        <AvatarGroup size="large" max={max}>
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+          <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+          <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+          <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+          <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        </AvatarGroup>
+      </Flex>;
+```
+
+## HoverVsClickable
+
+```tsx
+const getDummyAvatarsProps = useCallback((numItems: number) => {
+  const avatarsProps = [{
+    type: "img",
+    src: person1,
+    "aria-label": "Julia Martinez"
+  }, {
+    type: "img",
+    src: person2,
+    "aria-label": "Sophia Johnson"
+  }, {
+    type: "img",
+    src: person3,
+    "aria-label": "Marco DiAngelo"
+  }, {
+    type: "img",
+    src: person4,
+    "aria-label": "Liam Caldwell"
+  }];
+  const result = [];
+  for (let i = 0; i < numItems; i++) {
+    result.push(avatarsProps[i % avatarsProps.length]);
+  }
+  return result;
+}, []);
+return <Flex direction="row" gap="large">
+        <StoryDescription description="Counter hover" vertical align={StoryDescription.align.START}>
+          <AvatarGroup size="large" max={4} counterTooltipCustomProps={{
+      position: "bottom"
+    }}>
+            {getDummyAvatarsProps(14).map(avatarProps => <Avatar {...avatarProps} />)}
+          </AvatarGroup>
+        </StoryDescription>
+        <StoryDescription description="Counter click" vertical align={StoryDescription.align.START}>
+          <Flex>
+            <AvatarGroup size="large" max={4}>
+              {getDummyAvatarsProps(14).map((avatarProps, index) => <Avatar {...avatarProps} onClick={() => {}} id={String(index)} />)}
+            </AvatarGroup>
+          </Flex>
+        </StoryDescription>
+      </Flex>;
+```
+
+## Disabled
+
+```tsx
+return <AvatarGroup size="large" max={4} disabled>
+        <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+        <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+        <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+        <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+        <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+        <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+        <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+        <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+        <Avatar type="img" src={person3} aria-label="Marco DiAngelo" />
+        <Avatar type="img" src={person4} aria-label="Liam Caldwell" />
+        <Avatar type="img" src={person1} aria-label="Julia Martinez" />
+        <Avatar type="img" src={person2} aria-label="Sophia Johnson" />
+      </AvatarGroup>;
+```
+
+## LastSeenUsers
+
+```tsx
+<Flex direction="row" gap="medium">
+      <div>Last seen</div>
+      <AvatarGroup size="medium" max={4} counterProps={{
+    color: "dark"
+  }} type="img">
+        <Avatar src={person1} aria-label="Julia Martinez" />
+        <Avatar src={person2} aria-label="Sophia Johnson" />
+        <Avatar src={person3} aria-label="Marco DiAngelo" />
+        <Avatar src={person4} aria-label="Liam Caldwell" />
+        <Avatar src={person1} aria-label="Julia Martinez" />
+        <Avatar src={person2} aria-label="Sophia Johnson" />
+        <Avatar src={person3} aria-label="Marco DiAngelo" />
+        <Avatar src={person4} aria-label="Liam Caldwell" />
+        <Avatar src={person1} aria-label="Julia Martinez" />
+        <Avatar src={person2} aria-label="Sophia Johnson" />
+        <Avatar src={person3} aria-label="Marco DiAngelo" />
+        <Avatar src={person4} aria-label="Liam Caldwell" />
+        <Avatar src={person1} aria-label="Julia Martinez" />
+        <Avatar src={person2} aria-label="Sophia Johnson" />
+      </AvatarGroup>
+    </Flex>
+```
+
+## CustomCounter
+
+```tsx
+<AvatarGroup size="large" type="img" max={4} counterProps={{
+  count: 100500,
+  color: "dark",
+  prefix: "",
+  maxDigits: 5
+}}>
+      <Avatar src={person1} aria-label="Julia Martinez" />
+      <Avatar src={person2} aria-label="Sophia Johnson" />
+      <Avatar src={person3} aria-label="Marco DiAngelo" />
+      <Avatar src={person4} aria-label="Liam Caldwell" />
+    </AvatarGroup>
+```
+
+## GridTooltip
+
+```tsx
+<AvatarGroup size="large" type="img" max={4}>
+      <Avatar src={person1} />
+      <Avatar src={person2} />
+      <Avatar src={person3} />
+      <Avatar src={person4} />
+      <Avatar src={person1} />
+      <Avatar src={person2} />
+      <Avatar src={person3} />
+      <Avatar src={person4} />
+      <Avatar src={person1} />
+      <Avatar src={person2} />
+      <Avatar src={person3} />
+      <Avatar src={person4} />
+      <Avatar src={person1} />
+      <Avatar src={person2} />
+      <Avatar src={person3} />
+      <Avatar src={person4} />
+    </AvatarGroup>
+```
+
+## CounterCustomTooltipContent
+
+```tsx
+<AvatarGroup size="large" type="img" max={4} counterTooltipCustomProps={{
+  content: "... and plenty more employees"
+}}>
+      <Avatar src={person1} aria-label="Julia Martinez" />
+      <Avatar src={person2} aria-label="Sophia Johnson" />
+      <Avatar src={person3} aria-label="Marco DiAngelo" />
+      <Avatar src={person4} aria-label="Liam Caldwell" />
+      <Avatar src={person1} aria-label="Julia Martinez" />
+      <Avatar src={person2} aria-label="Sophia Johnson" />
+      <Avatar src={person3} aria-label="Marco DiAngelo" />
+      <Avatar src={person4} aria-label="Liam Caldwell" />
+    </AvatarGroup>
+```
+
+## VirtualizedList
+
+```tsx
+const avatars = [<Avatar src={person1} aria-label="Julia Martinez" />, <Avatar src={person2} aria-label="Sophia Johnson" />, <Avatar src={person3} aria-label="Marco DiAngelo" />, <Avatar src={person4} aria-label="Liam Caldwell" />];
+const getDummyAvatars = (multiplier: number) => {
+  let result: typeof avatars = [];
+  for (let i = 0; i < multiplier; ++i) {
+    result = result.concat(avatars);
+  }
+  return result;
+};
+return <AvatarGroup size="large" max={4} counterTooltipIsVirtualizedList type="img">
+        {getDummyAvatars(334)}
+      </AvatarGroup>;
+```
+
+## DisplayingTeams
+
+```tsx
+<Table columns={[{
+  id: "name",
+  title: "Name"
+}, {
+  id: "email",
+  title: "Email"
+}, {
+  id: "title",
+  title: "Title"
+}, {
+  id: "teams",
+  title: "Teams"
+}]} errorState={<div />} emptyState={<div />}>
+      <TableHeader>
+        <TableHeaderCell title="Name" />
+        <TableHeaderCell title="Email" />
+        <TableHeaderCell title="Title" />
+        <TableHeaderCell title="Teams" />
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Flex direction="row" gap="small">
+              <Avatar type="img" src={person1} size="medium" aria-label="Julia Martinez" />
+              Julia Martinez
+            </Flex>
+          </TableCell>
+          <TableCell>julia@martinez.com</TableCell>
+          <TableCell>Developer</TableCell>
+          <TableCell>
+            <AvatarGroup size="medium" max={2} counterProps={{
+          ariaLabelItemsName: "teams"
+        }}>
+              <Avatar type="text" text="T1" backgroundColor="peach" aria-label="Team 1" />
+              <Avatar type="text" text="T2" backgroundColor="bubble" aria-label="Team 2" />
+              <Avatar type="text" text="T3" backgroundColor="berry" aria-label="Team 3" />
+            </AvatarGroup>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+```
+

package/dist/metadata/examples/Badge.md

@@ -0,0 +1,59 @@
+# Storybook Code Examples
+
+## States
+
+```tsx
+<Flex gap="large" justify="start" align="start">
+      <Flex direction="column" gap="medium" align="start">
+        Indicator
+        <Badge id="indicator-badge">
+          <Button id="indicator-button" aria-label="What's new button with indicator" leftIcon={WhatsNew}>
+            {"What's new"}
+          </Button>
+        </Badge>
+      </Flex>
+      <Flex direction="column" gap="medium" align="start">
+        Counter
+        <Badge id="counter-badge" type="counter" count={100} maxDigits={2} aria-label="100 notifications">
+          <Button id="counter-button" aria-label="What's new button with counter" leftIcon={WhatsNew}>
+            {"What's new"}
+          </Button>
+        </Badge>
+      </Flex>
+    </Flex>
+```
+
+## Button
+
+```tsx
+<Badge id="button-badge" alignment="rectangular">
+      <Button id="button-story-button" aria-label="Button with external page icon and badge" leftIcon={ExternalPage}>
+        Button
+      </Button>
+    </Badge>
+```
+
+## Avatar
+
+```tsx
+<Badge id="avatar-badge" alignment="circular">
+      <Avatar id="badge-avatar" size="large" src={person} type="img" />
+    </Badge>
+```
+
+## Inline elements
+
+```tsx
+<Flex direction="column" gap="medium" align="start">
+      <Badge id="inline-badge-1" alignment="outside">
+        <Link id="inline-link-1" text="Read more" />
+      </Badge>
+      <Badge id="inline-badge-2" alignment="outside">
+        <Link id="inline-link-2" text="What's new" iconPosition="start" icon={WhatsNew} />
+      </Badge>
+      <Badge id="inline-badge-3" alignment="outside">
+        <Link id="inline-link-3" text="Learn more" iconPosition="end" icon={ExternalPage} />
+      </Badge>
+    </Flex>
+```
+

package/dist/metadata/examples/BaseInput.md

@@ -0,0 +1,2 @@
+# Storybook Code Examples
+