@vibe/core 4.2.6 → 4.3.0

package/dist/metadata/examples/Heading.md

@@ -0,0 +1,124 @@
+# Storybook Code Examples
+
+## TypesAndWeights
+
+```tsx
+<Flex gap="large" direction="column" justify="start" align="start">
+      <Flex gap="small" direction="column" justify="start" align="start">
+        <Heading type="h1" weight="bold">
+          Bold H1 title
+        </Heading>
+        <Heading type="h1" weight="medium">
+          Medium H1 title
+        </Heading>
+        <Heading type="h1" weight="normal">
+          Normal H1 title
+        </Heading>
+        <Heading type="h1" weight="light">
+          Light H1 title
+        </Heading>
+      </Flex>
+      <Flex gap="small" direction="column" justify="start" align="start">
+        <Heading type="h2" weight="bold">
+          Bold H2 title
+        </Heading>
+        <Heading type="h2" weight="medium">
+          Medium H2 title
+        </Heading>
+        <Heading type="h2" weight="normal">
+          Normal H2 title
+        </Heading>
+        <Heading type="h2" weight="light">
+          Light H2 title
+        </Heading>
+      </Flex>
+      <Flex gap="small" direction="column" justify="start" align="start">
+        <Heading type="h3" weight="bold">
+          Bold H3 title
+        </Heading>
+        <Heading type="h3" weight="medium">
+          Medium H3 title
+        </Heading>
+        <Heading type="h3" weight="normal">
+          Normal H3 title
+        </Heading>
+        <Heading type="h3" weight="light">
+          Light H3 title
+        </Heading>
+      </Flex>
+    </Flex>
+```
+
+## Colors
+
+```tsx
+<Flex direction="column" align="start" gap="small">
+      <Heading type="h2" color="primary">
+        Primary title
+      </Heading>
+      <Heading type="h2" color="secondary">
+        Secondary title
+      </Heading>
+      <Box style={{
+    backgroundColor: "var(--primary-color)"
+  }} padding="small">
+        <Heading element="div" type="h2" align="center" color="onPrimary">
+          On primary title
+        </Heading>
+      </Box>
+      <Box backgroundColor="invertedColorBackground" padding="small">
+        <Heading element="div" type="h2" align="center" color="onInverted">
+          On inverted title
+        </Heading>
+      </Box>
+    </Flex>
+```
+
+## Overflow
+
+```tsx
+<Flex id={OVERFLOW_TITLE_CONTAINER_ID} direction="column" gap="medium" align="stretch" style={{
+  width: "480px"
+}}>
+      <Heading type="h2">Heading without overflow</Heading>
+      <Heading type="h2"
+  /**for testing purposes**/ data-testid={ONE_LINE_ELLIPSIS_TEST_ID} tooltipProps={{
+    containerSelector: `#${OVERFLOW_TITLE_CONTAINER_ID}`
+  }}>
+        Heading with ellipsis and tooltip when hovering
+      </Heading>
+      <div>
+        <Heading type="h2" maxLines={2}>
+          Heading with two lines overflow and a tooltip. Heading with two lines overflow and a tooltip. Heading with two
+          lines overflow and a tooltip.
+        </Heading>
+      </div>
+    </Flex>
+```
+
+## Built-in page header (not editable)
+
+```tsx
+<div style={{
+  width: "100%"
+}}>
+      <Heading type="h1" id="my-work-id">
+        My work
+      </Heading>
+      <Divider />
+      <Flex align="center" gap="small" aria-labelledby="my-work-id" style={{
+    marginTop: "var(--space-16)"
+  }}>
+        <Box style={{
+      width: "146px"
+    }}>
+          <Search placeholder="Search" />
+        </Box>
+        <Checkbox label="Hide done items" checked />
+        <Button leftIcon={Custom} kind="tertiary">
+          Customize
+        </Button>
+      </Flex>
+    </div>
+```
+

package/dist/metadata/examples/HiddenText.md

@@ -0,0 +1,8 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+return <HiddenText text="Hello hidden text" {...args} />;
+```
+

package/dist/metadata/examples/Icon.md

@@ -0,0 +1,67 @@
+# Storybook Code Examples
+
+## VibeIcon
+
+```tsx
+<Icon id="vibe-icon" type="svg" icon={Bolt} label="my bolt svg icon" size={16} />
+```
+
+## FontIcon
+
+```tsx
+<Icon id="font-icon" type="font" label="my font awesome start icon" icon="fa fa-star" />
+```
+
+## CustomSvg
+
+```tsx
+<Icon id="custom-svg-icon" type="src" icon="https://cdn.monday.com/images/apps/custom-icons/Form.svg" label="my src awesome icon" size={20} useCurrentColor />
+```
+
+## Color
+
+```tsx
+<div style={{
+  color: "var(--sb-color-sofia_pink)"
+}}>
+      <Icon id="colored-icon" type="svg" icon={Bolt} label="my bolt svg icon" size={16} />
+    </div>
+```
+
+## IconsListStory
+
+```tsx
+interface IconMeta {
+  name: string;
+  tags: string;
+  file: string;
+}
+const [query, setQuery] = useState("");
+return <section style={{
+  width: "100%"
+}}>
+        <Search value={query} onChange={setQuery} placeholder="Search for icons" />
+        <div style={{
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
+    gap: "var(--sb-spacing-large)",
+    marginTop: "var(--sb-spacing-large)"
+  }}>
+          {iconsMetaData.filter((icon: IconMeta) => {
+      return `${icon.tags},${icon.name}`.toLowerCase().includes(query.toLowerCase());
+    }).map((icon: IconMeta) => {
+      const fileName = icon.file.split(".")[0] as string;
+      const Component = allIcons[fileName as keyof typeof allIcons] as SubIcon;
+      return <>
+                  <Flex style={{
+          color: "var(--sb-icon-color)"
+        }} gap="small">
+                    <Icon icon={Component} size={26} />
+                    <span>{icon.name}</span>
+                  </Flex>
+                </>;
+    })}
+        </div>
+      </section>;
+```
+

package/dist/metadata/examples/IconButton.md

@@ -0,0 +1,141 @@
+# Storybook Code Examples
+
+## Kinds
+
+```tsx
+<div style={{
+  display: "flex",
+  justifyContent: "space-evenly",
+  alignItems: "center",
+  width: "100%"
+}}>
+      <IconButton id="kinds-primary" icon={Bolt} kind="primary" aria-label="My primary IconButton" />
+      <IconButton id="kinds-secondary" icon={Bolt} kind="secondary" aria-label="My secondary IconButton" />
+      <IconButton id="kinds-tertiary" icon={Bolt} kind="tertiary" aria-label="My tertiary IconButton" />
+    </div>
+```
+
+## Sizes
+
+```tsx
+<div style={{
+  display: "flex",
+  justifyContent: "space-evenly",
+  alignItems: "center",
+  width: "100%"
+}}>
+      <IconButton key="xxs" id="sizes-xxs" icon={Robot} kind="secondary" size="xxs" aria-label="My xxs IconButton" />
+      <IconButton key="xs" id="sizes-xs" icon={Robot} kind="secondary" size="xs" aria-label="My xs IconButton" />
+      <IconButton key="small" id="sizes-small" icon={Robot} kind="secondary" size="small" aria-label="My small IconButton" />
+      <IconButton key="medium" id="sizes-medium" icon={Robot} kind="secondary" size="medium" aria-label="My medium IconButton" />
+      <IconButton key="large" id="sizes-large" icon={Robot} kind="secondary" size="large" aria-label="My large IconButton" />
+    </div>
+```
+
+## Active
+
+```tsx
+<div style={{
+  display: "flex",
+  justifyContent: "space-evenly",
+  alignItems: "center",
+  width: "100%"
+}}>
+      <IconButton id="active-primary" icon={Doc} kind="primary" aria-label="My small active IconButton" active />
+      <IconButton id="active-secondary" icon={Doc} kind="secondary" aria-label="My active medium IconButton" active />
+      <IconButton id="active-tertiary" icon={Doc} kind="tertiary" aria-label="My active large IconButton" active />
+    </div>
+```
+
+## Disabled
+
+```tsx
+<div style={{
+  display: "flex",
+  justifyContent: "space-evenly",
+  alignItems: "center",
+  width: "100%"
+}}>
+      <IconButton id="disabled-primary" icon={Doc} kind="primary" aria-label="My small disabled IconButton" disabled disabledReason="This function is not available" />
+      <IconButton id="disabled-secondary" icon={Doc} kind="secondary" aria-label="My disabled medium IconButton" disabled disabledReason="This function is not available" />
+      <IconButton id="disabled-tertiary" icon={Doc} kind="tertiary" aria-label="My disabled large IconButton" disabled disabledReason="This function is not available" />
+    </div>
+```
+
+## Icon button as toolbar button
+
+```tsx
+<Box border rounded="medium" style={{
+  width: "50%"
+}}>
+      <Flex direction="column" align="start">
+        <Flex gap="small" style={{
+      padding: "var(--sb-spacing-small)"
+    }}>
+          <Icon icon={Drag} />
+          <Text type="text1">Widget name</Text>
+          <IconButton id="toolbar-filter-button" icon={Filter} aria-label="Filter the widget by everything" size="small" />
+        </Flex>
+        <Divider withoutMargin />
+        <div style={{
+      height: "200px",
+      width: "100%",
+      backgroundColor: "var(--sb-primary-background-hover-color)"
+    }} />
+      </Flex>
+    </Box>
+```
+
+## Icon button as close button
+
+```tsx
+<Flex gap="medium" style={{
+  width: "100%"
+}}>
+      <Box border rounded="small" paddingX="large" style={{
+    width: "100%"
+  }}>
+        <Flex justify="start" gap="large" style={{
+      height: "94px"
+    }}>
+          <Flex direction="column" justify="center" style={{
+        color: "var(--sb-icon-color)"
+      }}>
+            <Icon icon={Item} size={40} />
+            <Text type="text1" id="monday-recycle-bin-title">
+              Item
+            </Text>
+          </Flex>
+          <Divider direction="vertical" />
+          <Avatar size="large" src={person1} type="img" />
+          <Flex direction="column" align="start" aria-labelledby="monday-recycle-bin-title" style={{
+        flexGrow: 1
+      }}>
+            <Flex gap="xs">
+              <Link withoutSpacing href="">
+                Hadas Farhi
+              </Link>
+              <span>deleted the item</span>
+              <Text type="text1" element="span" weight="medium">
+                Hello World
+              </Text>
+              <span>from the board</span>
+            </Flex>
+            <Text type="text1" element="span" weight="medium">
+              Tasks
+            </Text>
+            <Flex gap="xs">
+              <Icon icon={Time} />
+              <Text weight="medium">13m</Text>
+              <Text>(Available for restore in the next 1M)</Text>
+            </Flex>
+          </Flex>
+          <Button id="restore-button" aria-label="Restore deleted item">
+            Restore
+          </Button>
+        </Flex>
+      </Box>
+      <IconButton id="close-recycle-button" icon={CloseSmall} size="small" aria-label="Remove from Recycle bin" />
+    </Flex>
+```
+

package/dist/metadata/examples/Info.md

@@ -0,0 +1,80 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<Info {...args} />
+```
+
+## Directions
+
+```tsx
+<Flex justify="center" align="center" style={{
+  minHeight: "400px",
+  width: "100%"
+}}>
+      <Box style={{
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gridTemplateRows: "1fr 1fr",
+    gap: "var(--space-48)",
+    alignItems: "center",
+    justifyItems: "center"
+  }}>
+        <Flex direction="column" gap="medium" align="center">
+          <Text id="bottom-direction" align="center" type="text1" weight="medium" ellipsis={false}>
+            Bottom
+          </Text>
+          <Info id="bottom-direction-info-button" aria-labelledby="bottom-direction" title="Placement: Bottom" body="This dialog's direction is from the bottom" link={{
+        text: "Learn more about dialog direction",
+        href: "#"
+      }} position="bottom-start" />
+        </Flex>
+        <Flex direction="column" gap="medium" align="center">
+          <Text id="left-direction" align="center" type="text1" weight="medium" ellipsis={false}>
+            Left
+          </Text>
+          <Info id="left-direction-info-button" aria-labelledby="left-direction" title="Placement: Left" body="This dialog's direction is from the left" link={{
+        text: "Learn more about dialog direction",
+        href: "#"
+      }} position="left-start" />
+        </Flex>
+        <Flex direction="column" gap="medium" align="center">
+          <Text id="right-direction" align="center" type="text1" weight="medium" ellipsis={false}>
+            Right
+          </Text>
+          <Info id="right-direction-info-button" aria-labelledby="right-direction" title="Placement: Right" body="This dialog's direction is from the right" link={{
+        text: "Learn more about dialog direction",
+        href: "#"
+      }} position="right-start" />
+        </Flex>
+        <Flex direction="column" gap="medium" align="center">
+          <Text id="top-direction" align="center" type="text1" weight="medium" ellipsis={false}>
+            Top
+          </Text>
+          <Info id="top-direction-info-button" aria-labelledby="top-direction" title="Placement: Top" body="This dialog's direction is from the top" link={{
+        text: "Learn more about dialog direction",
+        href: "#"
+      }} position="top-start" />
+        </Flex>
+      </Box>
+    </Flex>
+```
+
+## WithCustomLink
+
+```tsx
+<Info id="custom-link-info" aria-label="Information with external link" title="External link example" body="This info dialog contains a link that opens in a new tab." link={{
+  text: "Visit external site",
+  href: "https://www.example.com",
+  target: "_blank",
+  rel: "noopener noreferrer"
+}} />
+```
+
+## Disabled
+
+```tsx
+<Info id="disabled-info" aria-label="Disabled information" title="Disabled info" body="This info dialog is disabled and cannot be opened." disabled />
+```
+

package/dist/metadata/examples/Label.md

@@ -0,0 +1,109 @@
+# Storybook Code Examples
+
+## Kinds
+
+```tsx
+<Flex style={{
+  marginLeft: "30px",
+  marginTop: "10px",
+  gap: "184px"
+}}>
+      <Flex direction="column" align="start" gap="large">
+        <Label id="kinds-fill" text="New" />
+        <Text>Fill</Text>
+      </Flex>
+      <Flex direction="column" align="start" gap="large">
+        <Label id="kinds-outline" text="New" kind="line" />
+        <Text>Outline</Text>
+      </Flex>
+    </Flex>
+```
+
+## Sizes
+
+```tsx
+<>
+      <Label id="sizes-medium" text="New" />
+      <Label id="sizes-small" text="New" size="small" />
+    </>
+```
+
+## Colors
+
+```tsx
+<>
+      <Label id="colors-default-fill" text="New" />
+      <Label id="colors-negative-fill" text="New" color="negative" />
+      <Label id="colors-positive-fill" text="New" color="positive" />
+      <Label id="colors-dark-fill" text="New" color="dark" />
+      <Label id="colors-default-line" text="New" kind="line" />
+      <Label id="colors-negative-line" text="New" color="negative" kind="line" />
+      <Label id="colors-positive-line" text="New" color="positive" kind="line" />
+      <Label id="colors-dark-line" text="New" color="dark" kind="line" />
+    </>
+```
+
+## Clickable
+
+```tsx
+<>
+      <Label id="clickable-fill" aria-label="Clickable new feature label" text="New" onClick={() => {}} />
+      <Label id="clickable-line" aria-label="Clickable new feature label" text="New" kind="line" onClick={() => {}} />
+    </>
+```
+
+## Secondary label
+
+```tsx
+<Flex direction="column" gap="large">
+      <Box style={{
+    width: "300px"
+  }}>
+        <Flex align="center" gap="small">
+          <Heading id="gantt-heading" type="h3">
+            Gannt
+          </Heading>
+          <Label id="gantt-label" text="New" kind="line" />
+        </Flex>
+        <Text element="p" type="text1">
+          Plan, track and present your projects visually using the Gannt chart
+        </Text>
+      </Box>
+      <Box style={{
+    width: "300px",
+    marginTop: "8px"
+  }}>
+        <Flex align="center" gap="small">
+          <Heading id="apps-heading" type="h3" style={{
+        display: "inline"
+      }}>
+            Apps
+          </Heading>
+          <Label id="apps-label" text="New" kind="line" />
+        </Flex>
+        <Text element="p" type="text1" style={{
+      marginTop: "8px"
+    }}>
+          Enhance your dashboard with widgets built on the monday apps framework
+        </Text>
+      </Box>
+    </Flex>
+```
+
+## Celebration
+
+```tsx
+const [animate, setAnimate] = useState(false);
+useEffect(() => {
+  setTimeout(() => {
+    setAnimate(false);
+  }, 500);
+}, [animate]);
+return <>
+        <Label id="celebration-label" text="New" kind="line" celebrationAnimation={animate} />
+        <Button id="celebration-button" aria-label="Trigger celebration animation" size="small" kind="tertiary" onClick={() => setAnimate(true)}>
+          Click to celebrate
+        </Button>
+      </>;
+```
+

package/dist/metadata/examples/Link.md

@@ -0,0 +1,52 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<Link id="overview-link" text="Read more" href="https://www.monday.com" {...args} />
+```
+
+## States
+
+```tsx
+<Link id="states-default" text="Default" href="https://www.monday.com" />
+```
+
+## RightToLeft
+
+```tsx
+<>
+      <Link id="rtl-arabic" text="اقرأ أكثر" href="https://www.monday.com" icon={IconLink} />
+      <Link id="rtl-hebrew" text="קרא עוד" href="https://www.monday.com" iconPosition="end" icon={Info} />
+    </>
+```
+
+## WithIcons
+
+```tsx
+<>
+      <Link id="icon-start" text="Read more" href="https://www.monday.com" icon={ExternalPage} />
+      <Link id="icon-end" text="Read more" href="https://www.monday.com" iconPosition="end" icon={ExternalPage} />
+    </>
+```
+
+## ReferenceLink
+
+```tsx
+<div>
+      {`Lorem Ipsum has been the industry's `}
+      <Link id="reference-link" inlineText inheritFontSize text="standard" href="https://www.monday.com" />
+      {` dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`}
+    </div>
+```
+
+## ShorteningTexts
+
+```tsx
+<div>
+      {`Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
+      galley of type and scrambled it to make a type specimen book. `}
+      <Link id="shortening-link" text="Read more" href="https://www.monday.com" inheritFontSize inlineText />
+    </div>
+```
+