@vibe/core 4.2.6 → 4.3.0

package/dist/metadata/examples/Accordion.md

@@ -0,0 +1,136 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const accordionTemplate = (args: AccordionProps) => {
+  return <Accordion id="overview-accordion" defaultIndex={[1]} {...args}>
+      <AccordionItem id="overview-notifications" title="Notifications">
+        <div style={{
+        height: 150
+      }} />
+      </AccordionItem>
+      <AccordionItem id="overview-setting" title="Setting">
+        <div style={{
+        height: 150
+      }} />
+      </AccordionItem>
+      <AccordionItem id="overview-info" title="Info">
+        <div style={{
+        height: 150
+      }} />
+      </AccordionItem>
+      <AccordionItem id="overview-profile" title="Profile">
+        <div style={{
+        height: 150
+      }} />
+      </AccordionItem>
+      <AccordionItem id="overview-permissions" title="Permissions">
+        <div style={{
+        height: 150
+      }} />
+      </AccordionItem>
+      <AccordionItem id="overview-security" title="Security">
+        <div style={{
+        height: 150
+      }} />
+      </AccordionItem>
+      <AccordionItem id="overview-connectivity" title="Connectivity">
+        <div style={{
+        height: 150
+      }} />
+      </AccordionItem>
+      <AccordionItem id="overview-integration" title="Integration">
+        <div style={{
+        height: 150
+      }} />
+      </AccordionItem>
+      <AccordionItem id="overview-assets" title="Assets">
+        <div style={{
+        height: 150
+      }} />
+      </AccordionItem>
+    </Accordion>;
+}
+```
+
+## Multi active
+
+```tsx
+<Accordion id="multi-active-accordion" allowMultiple defaultIndex={[1, 3]}>
+      <AccordionItem id="multi-notifications" title="Notifications">
+        <div style={{
+      height: 150
+    }} />
+      </AccordionItem>
+      <AccordionItem id="multi-setting" title="Setting">
+        <div style={{
+      height: 150
+    }} />
+      </AccordionItem>
+      <AccordionItem id="multi-connectivity" title="Connectivity">
+        <div style={{
+      height: 150
+    }} />
+      </AccordionItem>
+      <AccordionItem id="multi-integration" title="Integration">
+        <div style={{
+      height: 150
+    }} />
+      </AccordionItem>
+      <AccordionItem id="multi-assets" title="Assets">
+        <div style={{
+      height: 150
+    }} />
+      </AccordionItem>
+    </Accordion>
+```
+
+## Single active
+
+```tsx
+<Accordion id="single-active-accordion" defaultIndex={[1]}>
+      <AccordionItem id="single-notifications" title="Notifications">
+        <div style={{
+      height: 150
+    }} />
+      </AccordionItem>
+      <AccordionItem id="single-setting" title="Setting">
+        <div style={{
+      height: 150
+    }} />
+      </AccordionItem>
+      <AccordionItem id="single-connectivity" title="Connectivity">
+        <div style={{
+      height: 150
+    }} />
+      </AccordionItem>
+      <AccordionItem id="single-integration" title="Integration">
+        <div style={{
+      height: 150
+    }} />
+      </AccordionItem>
+      <AccordionItem id="single-assets" title="Assets">
+        <div style={{
+      height: 150
+    }} />
+      </AccordionItem>
+    </Accordion>
+```
+
+## Preferences Accordion
+
+```tsx
+<Accordion id="preferences-accordion" defaultIndex={[0]}>
+      <AccordionItem id="preferences-monday" title="In monday">
+        <Flex direction="column" gap={20} align="start">
+          <Checkbox id="pref-likes" label="Likes my update" checked />
+          <Checkbox id="pref-replies" label="Replies to my update" />
+          <Checkbox id="pref-conversation" label="Replies or likes a conversation I'm a part of" checked />
+          <Checkbox id="pref-subscribes" label="Subscribes me to a Board/Item/Team" checked />
+          <Checkbox id="pref-updates" label="Writes an update on an items I'm subscribed to" checked />
+        </Flex>
+      </AccordionItem>
+    </Accordion>
+```
+

package/dist/metadata/examples/AlertBanner.md

@@ -0,0 +1,85 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const alertBannerTemplate = (args: AlertBannerProps) => {
+  return <AlertBanner {...args}>
+      <AlertBannerText text="Alert banner message" />
+      <AlertBannerLink text="this is a CTA" href="https://monday.com" />
+    </AlertBanner>;
+}
+```
+
+## Types
+
+```tsx
+<Flex direction="column" gap={16}>
+      <AlertBanner id="type-primary" aria-label="Primary alert banner">
+        <AlertBannerText text="Alert banner message" />
+        <AlertBannerLink text="this is a CTA" href="https://monday.com" />
+      </AlertBanner>
+      <AlertBanner id="type-positive" aria-label="Success alert banner" backgroundColor="positive">
+        <AlertBannerText text="Alert banner message" />
+        <AlertBannerLink text="this is a CTA" href="https://monday.com" />
+      </AlertBanner>
+      <AlertBanner id="type-negative" aria-label="Error alert banner" backgroundColor="negative">
+        <AlertBannerText text="Alert banner message" />
+        <AlertBannerLink text="this is a CTA" href="https://monday.com" />
+      </AlertBanner>
+      <AlertBanner id="type-warning" aria-label="Warning alert banner" backgroundColor="warning">
+        <AlertBannerText text="Alert banner message" />
+        <AlertBannerLink text="this is a CTA" href="https://monday.com" />
+      </AlertBanner>
+      <AlertBanner id="type-dark" aria-label="Dark alert banner" backgroundColor="dark">
+        <AlertBannerText text="Alert banner message" />
+        <AlertBannerLink text="this is a CTA" href="https://monday.com" />
+      </AlertBanner>
+    </Flex>
+```
+
+## Alert Banner with button
+
+```tsx
+<AlertBanner id="with-button" aria-label="Alert banner with action button">
+      <AlertBannerText text="Lorem ipsum dolor sit amet" />
+      <AlertBannerButton>Lorem Ipsum</AlertBannerButton>
+    </AlertBanner>
+```
+
+## Alert Banner with link
+
+```tsx
+<AlertBanner id="with-link" aria-label="Alert banner with link">
+      <AlertBannerText text="Alert banner message" />
+      <AlertBannerLink text="this is a CTA" href="https://monday.com" />
+    </AlertBanner>
+```
+
+## Alert banner as an announcement
+
+```tsx
+<AlertBanner id="announcement" aria-label="Event announcement" backgroundColor="dark">
+      <AlertBannerText text="Join us at Elevate 2022" />
+      <AlertBannerLink text="RSVP now" href="https://monday.com" />
+    </AlertBanner>
+```
+
+## Alert banner as an opportunity to upgrade
+
+```tsx
+<AlertBanner id="upgrade-opportunity" aria-label="Trial upgrade opportunity" onClose={() => {}} closeButtonAriaLabel="Close upgrade banner">
+      <AlertBannerText text="7 days left on your monday CRM trial" />
+      <AlertBannerLink text="Upgrade now" href="https://monday.com" />
+    </AlertBanner>
+```
+
+## Overflow text
+
+```tsx
+<AlertBanner id="overflow-text" aria-label="Long text alert banner">
+      <AlertBannerText text="This is a really long alert..." />
+      <AlertBannerLink text="Call to action" href="https://monday.com" />
+    </AlertBanner>
+```
+

package/dist/metadata/examples/AttentionBox.md

@@ -0,0 +1,267 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<div style={{
+  maxWidth: 600
+}}>
+      <AttentionBox {...args} />
+    </div>
+```
+
+## Types
+
+```tsx
+<div style={{
+  display: "grid",
+  gridTemplateColumns: "240px 600px",
+  columnGap: "var(--space-16)",
+  rowGap: "var(--space-24)",
+  alignItems: "center"
+}}>
+      <Text type="text1" weight="bold">
+        Primary
+      </Text>
+      <AttentionBox title="Heads up" text="This message gives you helpful context without requiring immediate action." onClose={() => {}} />
+      <Text type="text1" weight="bold">
+        Neutral
+      </Text>
+      <AttentionBox type="neutral" title="General note" text="Use this style for more subtle visual emphasis, or for or neutral custom contexts." onClose={() => {}} />
+      <Text type="text1" weight="bold">
+        Positive
+      </Text>
+      <AttentionBox type="positive" title="You're doing great" text="Indicates success , the user can keep working without interruptions." onClose={() => {}} />
+      <Text type="text1" weight="bold">
+        Warning
+      </Text>
+      <AttentionBox type="warning" title="Caution" text="Shows important warnings the user should review before moving forward." onClose={() => {}} />
+      <Text type="text1" weight="bold">
+        Negative
+      </Text>
+      <AttentionBox type="negative" title="Low on free space" text="Highlights errors or limitations the user should be aware of." onClose={() => {}} />
+    </div>
+```
+
+## Default
+
+```tsx
+<Flex gap="large" align="start">
+      <AttentionBox title="Heads up" text="This message gives you helpful context without requiring immediate action." action={{
+    text: "Button",
+    onClick: () => {}
+  }} link={{
+    href: "#",
+    text: "Read more"
+  }} onClose={() => {}} />
+      <AttentionBox text="This message gives you helpful context without requiring immediate action." action={{
+    text: "Button",
+    onClick: () => {}
+  }} link={{
+    href: "#",
+    text: "Read more"
+  }} onClose={() => {}} />
+    </Flex>
+```
+
+## Compact
+
+```tsx
+<div style={{
+  maxWidth: 600
+}}>
+      <AttentionBox compact text="Here's something you might want to know. This message gives you helpful context without requiring immediate action." action={{
+    text: "Button",
+    onClick: () => {}
+  }} link={{
+    href: "#",
+    text: "Read more"
+  }} onClose={() => {}} />
+    </div>
+```
+
+## LinkAndButton
+
+```tsx
+<div style={{
+  maxWidth: 600
+}}>
+      <AttentionBox title="Heads up" text="Here's something you might want to know. This message gives you helpful context without requiring immediate action." action={{
+    text: "Button",
+    onClick: () => {}
+  }} link={{
+    href: "#",
+    text: "Read more"
+  }} onClose={() => {}} />
+    </div>
+```
+
+## Dismissible
+
+```tsx
+const [visible, setVisible] = useState(true);
+return visible ? <div style={{
+  maxWidth: 600
+}}>
+        <AttentionBox compact text="This message gives you helpful context without requiring immediate action." onClose={() => setVisible(false)} />
+      </div> : <Button onClick={() => setVisible(true)}>Show AttentionBox</Button>;
+```
+
+## Icon
+
+```tsx
+<Flex gap="large" align="start">
+      <AttentionBox icon={false} text="This message gives you helpful context without requiring immediate action." action={{
+    text: "Button",
+    onClick: () => {}
+  }} link={{
+    href: "#",
+    text: "Read more"
+  }} onClose={() => {}} />
+      <AttentionBox text="This message gives you helpful context without requiring immediate action." action={{
+    text: "Button",
+    onClick: () => {}
+  }} link={{
+    href: "#",
+    text: "Read more"
+  }} onClose={() => {}} />
+    </Flex>
+```
+
+## AttentionBoxWithLayouts
+
+```tsx
+<Flex direction="column" align="start" gap="small" style={{
+  width: "100%"
+}}>
+      <Heading type="h3" weight="bold">
+        Cross-Account Copier
+      </Heading>
+      <Text>Copy boards and dashboards to another account</Text>
+      <AttentionBox compact type="neutral" text="First, move the content you want to copy into folder. Only main boards and dashboards can be copied." link={{
+    href: "#",
+    text: "Read more"
+  }} onClose={() => {}} />
+    </Flex>
+```
+
+## AttentionBoxInsideADialogCombobox
+
+```tsx
+return <DialogContentContainer style={{
+  padding: 0
+}}>
+        <Box style={{
+    width: 380
+  }} padding="medium">
+          <Flex direction="column" gap="medium" align="stretch">
+            <Search placeholder="Search by name, role, team, or email" />
+            <Text>Suggested people</Text>
+            <Flex direction="column" gap="medium" align="start">
+              <Flex gap="small">
+                <Avatar size="medium" src={person} type="img" />
+                <Flex gap="xs">
+                  <Text element="span">Julia Martinez </Text>
+                  <Text color="secondary" element="span">
+                    (UX/UI Product Designer)
+                  </Text>
+                </Flex>
+              </Flex>
+              <Flex gap="small">
+                <Icon size="32" icon={Invite} />
+                <Text>Invite new board member by email</Text>
+              </Flex>
+              <AttentionBox text="Hold ⌘ to select more than one person or team" onClose={() => {}} />
+            </Flex>
+          </Flex>
+        </Box>
+      </DialogContentContainer>;
+```
+
+## EntryAnimation
+
+```tsx
+type Stage = "button" | "skeleton" | "content" | "attention";
+const [stage, setStage] = useState<Stage>("button");
+const onClick = useCallback(() => {
+  setStage("skeleton");
+  setTimeout(() => {
+    setStage("content");
+  }, 2000);
+}, []);
+useEffect(() => {
+  if (stage === "content") {
+    setTimeout(() => {
+      setStage("attention");
+    }, 750);
+  }
+}, [stage]);
+const reset = useCallback(() => {
+  setStage("button");
+}, []);
+return <Flex align="start" direction="column" gap="medium" style={{
+  width: "100%",
+  maxWidth: 720,
+  minHeight: 260
+}}>
+        {/* Button Stage */}
+        {stage === "button" && <Button onClick={onClick} kind="secondary">
+            Entry animation
+          </Button>}
+
+        {/* Skeleton Stage */}
+        {stage === "skeleton" && <Flex align="start" direction="column" gap="medium" style={{
+    width: "100%"
+  }}>
+            <Skeleton type="text" size="h2" width={300} />
+            <Flex align="start" gap="medium" style={{
+      width: "100%"
+    }}>
+              <Skeleton width={150} height={150} />
+              <Flex direction="column" align="stretch" gap="small" style={{
+        width: "100%"
+      }}>
+                <Skeleton type="text" size="h5" fullWidth />
+                <Skeleton type="text" size="h5" fullWidth />
+                <Skeleton type="text" size="h5" fullWidth />
+                <Skeleton type="text" size="h5" width={200} />
+              </Flex>
+            </Flex>
+          </Flex>}
+
+        {/* Content Stage */}
+        {(stage === "content" || stage === "attention") && <Flex align="start" direction="column" gap="medium" style={{
+    width: "100%"
+  }}>
+            {stage === "attention" && <AttentionBox compact text="This action will cause your team to lose access to the account until you will use the correct SSO." onClose={reset} />}
+
+            {/* Main Content */}
+            <Flex align="start" direction="column" gap="medium" style={{
+      width: "100%"
+    }}>
+              <Heading type="h3">Entry animation</Heading>
+              <Flex align="stretch" gap="medium" style={{
+        width: "100%"
+      }}>
+                <Box style={{
+          width: 150,
+          height: 150,
+          flexShrink: 0
+        }} rounded="small">
+                  <img src={contentImage} alt="Image placeholder" style={{
+            width: "100%",
+            height: "100%",
+            objectFit: "cover"
+          }} />
+                </Box>
+                <Text ellipsis={false}>
+                  {"Here's"} a sneak peek at how it works. The entry animation is an integral part of the experience we
+                  provide. {"It's"} up to you to ensure that the surrounding layout shifts downward smoothly when the
+                  Attention Box enters the view.
+                </Text>
+              </Flex>
+            </Flex>
+          </Flex>}
+      </Flex>;
+```
+

package/dist/metadata/examples/Avatar.md

@@ -0,0 +1,118 @@
+# Storybook Code Examples
+
+## Size
+
+```tsx
+<Flex gap="medium">
+      <Avatar id="size-xs" size="xs" src={person1} type="img" aria-label="Julia Martinez" />
+      <Avatar id="size-small" size="small" src={person1} type="img" aria-label="Julia Martinez" />
+      <Avatar id="size-medium" size="medium" src={person1} type="img" aria-label="Julia Martinez" />
+      <Avatar id="size-large" size="large" src={person1} type="img" aria-label="Julia Martinez" />
+    </Flex>
+```
+
+## Disable
+
+```tsx
+<Flex gap="medium">
+      <Avatar id="disabled-xs" size="xs" src={person1} type="img" aria-label="Julia Martinez" disabled />
+      <Avatar id="disabled-small" size="small" src={person1} type="img" aria-label="Julia Martinez" disabled />
+      <Avatar id="disabled-medium" size="medium" src={person1} type="img" aria-label="Julia Martinez" disabled />
+      <Avatar id="disabled-large" size="large" src={person1} type="img" aria-label="Julia Martinez" disabled />
+    </Flex>
+```
+
+## AvatarWithText
+
+```tsx
+<Flex gap="medium">
+      <Avatar id="text-xs" size="xs" type="text" text="RM" backgroundColor="lipstick" aria-label="Ron Meir" />
+      <Avatar id="text-small" size="small" type="text" text="RM" backgroundColor="lipstick" aria-label="Ron Meir" />
+      <Avatar id="text-medium" size="medium" type="text" text="RM" backgroundColor="lipstick" aria-label="Ron Meir" />
+      <Avatar id="text-large" size="large" type="text" text="RM" backgroundColor="done-green" aria-label="Ron Meir" />
+    </Flex>
+```
+
+## SquareAvatar
+
+```tsx
+<Flex gap="medium">
+      <Avatar id="square-xs" size="xs" type="text" text="R" backgroundColor="bright-blue" square aria-label="Ron" />
+      <Avatar id="square-small" size="small" type="text" text="R" backgroundColor="bright-blue" square aria-label="Ron" />
+      <Avatar id="square-medium" size="medium" type="icon" icon={WhatsNew} backgroundColor="aquamarine" square aria-label="Present" />
+      <Avatar id="square-large" size="large" type="text" text="RM" backgroundColor="working_orange" square aria-label="Ron Meir" />
+    </Flex>
+```
+
+## AvatarWithRightBadge
+
+```tsx
+<Flex gap="medium">
+      <Avatar id="right-badge-guest" size="large" type="img" src={person1} bottomRightBadgeProps={{
+    src: guest
+  }} aria-label="Julia Martinez with guest badge" />
+      <Avatar id="right-badge-owner" size="large" type="img" src={person1} bottomRightBadgeProps={{
+    src: owner
+  }} aria-label="Julia Martinez with owner badge" />
+    </Flex>
+```
+
+## AvatarWithLeftBadge
+
+```tsx
+<Flex gap="medium">
+      <Avatar id="left-badge-home" size="large" type="img" src={person1} bottomLeftBadgeProps={{
+    src: home
+  }} aria-label="Julia Martinez with home badge" />
+      <Avatar id="left-badge-minus" size="large" type="img" src={person1} bottomLeftBadgeProps={{
+    src: minus
+  }} aria-label="Julia Martinez with minus badge" />
+    </Flex>
+```
+
+## AvatarWithTooltip
+
+```tsx
+<Flex direction="row" gap="large" align="start">
+      <StoryDescription description="Aria label tooltip" vertical align={StoryDescription.align.START}>
+        <Avatar id="tooltip-aria" size="large" type="img" src={person1} aria-label={"Julia Martinez"} />
+      </StoryDescription>
+      <StoryDescription description="Text tooltip" vertical align={StoryDescription.align.START}>
+        <Avatar id="tooltip-text" size="large" type="img" src={person1} tooltipProps={{
+      content: "Julia Martinez"
+    }} aria-label={"Julia Martinez"} />
+      </StoryDescription>
+      <StoryDescription description="JSX tooltip" vertical align={StoryDescription.align.START}>
+        <Avatar id="tooltip-jsx" size="large" type="img" src={person1} tooltipProps={{
+      content: <b>Julia Martinez</b>,
+      position: "bottom"
+    }} aria-label={"Julia Martinez"} />
+      </StoryDescription>
+    </Flex>
+```
+
+## ClickableAvatar
+
+```tsx
+const [count, setCount] = useState(0);
+const incrementCount = useCallback(() => {
+  setCount(prevState => prevState + 1);
+}, []);
+return <Flex>
+        <Flex direction="column" gap="medium">
+          <Avatar id="clickable-avatar" size="large" type="img" src={person1} aria-label="Julia Martinez (clickable)" onClick={incrementCount} />
+          <Counter id="avatar-click-counter" count={count} />
+        </Flex>
+      </Flex>;
+```
+
+## MultipleAvatars
+
+```tsx
+<AvatarGroup id="multiple-avatars-group" max={2} size="large">
+      <Avatar id="multiple-avatar-1" type="img" src={person1} aria-label="Julia Martinez" />
+      <Avatar id="multiple-avatar-2" type="img" src={person2} aria-label="Marco DiAngelo" />
+      <Avatar id="multiple-avatar-3" type="img" src={person3} aria-label="Liam Caldwell" />
+    </AvatarGroup>
+```
+