@vibe/core 4.2.6 → 4.3.0

package/dist/metadata/examples/Button.md

@@ -0,0 +1,174 @@
+# Storybook Code Examples
+
+## Button kinds
+
+```tsx
+<>
+      <Button id="button-kinds-primary" aria-label="Primary button">
+        Primary
+      </Button>
+      <Button id="button-kinds-secondary" aria-label="Secondary button" kind="secondary">
+        Secondary
+      </Button>
+      <Button id="button-kinds-tertiary" aria-label="Tertiary button" kind="tertiary">
+        Tertiary
+      </Button>
+    </>
+```
+
+## Sizes
+
+```tsx
+<>
+      <Button id="sizes-large" aria-label="Large button" size="large">
+        Large
+      </Button>
+      <Button id="sizes-medium" aria-label="Medium button" size="medium">
+        Medium
+      </Button>
+      <Button id="sizes-small" aria-label="Small button" size="small">
+        Small
+      </Button>
+    </>
+```
+
+## Disabled
+
+```tsx
+<>
+      <Button id="disabled-primary" aria-label="Primary button disabled" disabled>
+        Primary
+      </Button>
+      <Button id="disabled-secondary" aria-label="Secondary button disabled" kind="secondary" disabled>
+        Secondary
+      </Button>
+      <Button id="disabled-tertiary" aria-label="Tertiary button disabled" kind="tertiary" disabled>
+        Tertiary
+      </Button>
+    </>
+```
+
+## States
+
+```tsx
+<>
+      <Button id="state-regular" aria-label="Regular button">
+        Regular
+      </Button>
+      <Button id="state-active" aria-label="Active button" active>
+        Active
+      </Button>
+    </>
+```
+
+## Positive and Negative
+
+```tsx
+<>
+      <Button id="color-positive" aria-label="Positive button" color="positive">
+        Positive
+      </Button>
+      <Button id="color-negative" aria-label="Negative button" color="negative">
+        Negative
+      </Button>
+    </>
+```
+
+## Icons
+
+```tsx
+<>
+      <Button id="icons-right" rightIcon={Calendar} aria-label="Open calendar on the right icon button">
+        Right icon
+      </Button>
+      <Button id="icons-left" leftIcon={Calendar} aria-label="Open calendar on the left icon button">
+        Left icon
+      </Button>
+    </>
+```
+
+## Loading state
+
+```tsx
+const [loading, setLoading] = useState(false);
+const onClick = useCallback(() => {
+  setLoading(true);
+}, [setLoading]);
+return <Button id="loading-state-button" aria-label="Start loading" loading={loading} onClick={onClick}>
+        Click here for loading
+      </Button>;
+```
+
+## Success state
+
+```tsx
+const [success, setSuccess] = useState(false);
+const onClick = useCallback(() => {
+  setSuccess(true);
+}, [setSuccess]);
+return <Button id="success-state-button" aria-label="Trigger success" success={success} onClick={onClick} successIcon={Check} successText="Success">
+        Click here for success
+      </Button>;
+```
+
+## On color states
+
+```tsx
+<>
+      <div style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  }}>
+        <Text type="text1">Regular</Text>
+        <div style={{
+      backgroundColor: "var(--sb-primary-color)",
+      padding: "16px"
+    }}>
+          <Button id="on-color-primary" aria-label="Primary on color" color="on-primary-color" marginRight>
+            Primary on color
+          </Button>
+          <Button id="on-color-secondary" aria-label="Secondary on color" color="on-primary-color" kind="secondary" marginRight>
+            Secondary on color
+          </Button>
+          <Button id="on-color-tertiary" aria-label="Tertiary on color" color="on-primary-color" kind="tertiary">
+            Tertiary on color
+          </Button>
+        </div>
+        <br />
+        <Text type="text1" style={{
+      marginBottom: "var(--sb-spacing-small)"
+    }}>
+          Disabled
+        </Text>
+        <div style={{
+      backgroundColor: "var(--sb-primary-color)",
+      padding: "16px"
+    }}>
+          <Button id="on-color-primary-disabled" aria-label="Primary on color disabled" color="on-primary-color" disabled marginRight>
+            Primary on color
+          </Button>
+          <Button id="on-color-secondary-disabled" aria-label="Secondary on color disabled" color="on-primary-color" disabled marginRight kind="secondary">
+            Secondary on color
+          </Button>
+          <Button id="on-color-tertiary-disabled" aria-label="Tertiary on color disabled" color="on-primary-color" disabled kind="tertiary">
+            Tertiary on color
+          </Button>
+        </div>
+      </div>
+    </>
+```
+
+## Adjacent buttons
+
+```tsx
+<div>
+      <Button id="decrease-zoom-button" kind="secondary" size="small" aria-label="Decrease zoom level" rightFlat>
+        <Remove />
+      </Button>
+      <Button id="increase-zoom-button" kind="secondary" size="small" aria-label="Increase zoom level" leftFlat>
+        <Add />
+      </Button>
+    </div>
+```
+

package/dist/metadata/examples/ButtonGroup.md

@@ -0,0 +1,180 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<div style={{
+  width: args.fullWidth ? "100%" : "fit-content"
+}}>
+      <ButtonGroup {...args} />
+    </div>
+```
+
+## Default
+
+```tsx
+<ButtonGroup id="default-button-group" groupAriaLabel="Default button group" value={1} options={[{
+  value: 1,
+  text: "Alpha"
+}, {
+  value: 2,
+  text: "Beta"
+}, {
+  value: 3,
+  text: "Gamma"
+}, {
+  value: 4,
+  text: "Delta"
+}]} />
+```
+
+## Tertiary
+
+```tsx
+<ButtonGroup id="tertiary-button-group" groupAriaLabel="Tertiary button group" value={1} kind="tertiary" options={[{
+  value: 1,
+  text: "Alpha"
+}, {
+  value: 2,
+  text: "Beta"
+}, {
+  value: 3,
+  text: "Gamma"
+}, {
+  value: 4,
+  text: "Delta"
+}]} />
+```
+
+## Disabled
+
+```tsx
+<ButtonGroup id="disabled-button-group" disabled groupAriaLabel="Disabled button group" options={[{
+  value: 1,
+  text: "Alpha"
+}, {
+  value: 2,
+  text: "Beta"
+}, {
+  value: 3,
+  text: "Gamma"
+}, {
+  value: 4,
+  text: "Delta"
+}]} />
+```
+
+## Disabled - Singe Button
+
+```tsx
+<ButtonGroup id="disabled-single-button-group" groupAriaLabel="Button group with disabled option" options={[{
+  value: 1,
+  text: "Alpha"
+}, {
+  value: 2,
+  text: "Beta"
+}, {
+  value: 3,
+  text: "Gamma"
+}, {
+  value: 4,
+  text: "Delta",
+  disabled: true,
+  tooltipContent: "I'm the worst variant ever"
+}]} />
+```
+
+## Size
+
+```tsx
+<Flex gap={60}>
+      <Flex direction="column" gap={16} align="start">
+        <Text type="text1">Medium</Text>
+        <ButtonGroup id="size-medium-button-group" groupAriaLabel="Medium size button group" size="medium" value={1} options={[{
+      value: 1,
+      text: "Alpha"
+    }, {
+      value: 2,
+      text: "Beta"
+    }, {
+      value: 3,
+      text: "Gamma"
+    }, {
+      value: 4,
+      text: "Delta"
+    }]} />
+      </Flex>
+      <Flex direction="column" gap={16} align="start">
+        <Text type="text1">Small</Text>
+        <ButtonGroup id="size-small-button-group" groupAriaLabel="Small size button group" size="small" value={1} options={[{
+      value: 1,
+      text: "Alpha"
+    }, {
+      value: 2,
+      text: "Beta"
+    }, {
+      value: 3,
+      text: "Gamma"
+    }, {
+      value: 4,
+      text: "Delta"
+    }]} />
+      </Flex>
+    </Flex>
+```
+
+## Button group in settings
+
+```tsx
+<Flex direction="column" gap={16} align="start">
+      <Text type="text1">Function</Text>
+      <ButtonGroup id="settings-button-group" groupAriaLabel="Function selection button group" size="small" value={1} options={[{
+    value: 1,
+    text: "Sum"
+  }, {
+    value: 2,
+    text: "Average"
+  }, {
+    value: 3,
+    text: "Median"
+  }, {
+    value: 4,
+    text: "Min"
+  }]} />
+    </Flex>
+```
+
+## Button group as toggle
+
+```tsx
+<ButtonGroup id="toggle-button-group" groupAriaLabel="View toggle button group" value={1} options={[{
+  value: 1,
+  text: "Grid"
+}, {
+  value: 2,
+  text: "List"
+}]} />
+```
+
+## Full width button group
+
+```tsx
+<div style={{
+  width: "100%"
+}}>
+      <ButtonGroup id="full-width-button-group" groupAriaLabel="Full width button group" fullWidth value={1} options={[{
+    value: 1,
+    text: "Grid"
+  }, {
+    value: 2,
+    text: "List"
+  }, {
+    value: 3,
+    text: "Table"
+  }, {
+    value: 4,
+    text: "Masonry"
+  }]} />
+    </div>
+```
+

package/dist/metadata/examples/Checkbox.md

@@ -0,0 +1,24 @@
+# Storybook Code Examples
+
+## States
+
+```tsx
+<>
+      <Checkbox label="Regular" id="checkbox-2" aria-label="Regular checkbox" />
+      <Checkbox label="Selected" checked id="checkbox-3" aria-label="Selected checkbox" />
+      <Checkbox label="Indeterminate" indeterminate id="checkbox-4" aria-label="Indeterminate checkbox" />
+      <Checkbox label="Disabled" disabled id="checkbox-5" aria-label="Disabled checkbox" />
+      <Checkbox label="Disabled checked" disabled checked id="checkbox-6" aria-label="Disabled checked checkbox" />
+      <Checkbox label="Disabled indeterminate" disabled indeterminate id="checkbox-7" aria-label="Disabled indeterminate checkbox" />
+    </>
+```
+
+## Single checkbox
+
+```tsx
+<Checkbox id="single-checkbox" aria-label="Agree to terms and privacy policy" checked label={<>
+          I agree to the <Link href={"#"} text="Terms of Service" inlineText></Link> and{" "}
+          <Link href={"#"} text="Privacy Policy" inlineText></Link>.
+        </>} />
+```
+

package/dist/metadata/examples/Chips.md

@@ -0,0 +1,192 @@
+# Storybook Code Examples
+
+## Chips with read only state
+
+```tsx
+<Chips id="readonly-chip" aria-label="Read only chip" label="Read only chip" readOnly />
+```
+
+## Chips with icons
+
+```tsx
+<Flex gap="medium">
+      <Chips id="chip-left-icon" aria-label="Chip with left email icon" label="Chip with left icon" leftIcon={Email} />
+      <Chips id="chip-right-icon" aria-label="Chip with right email icon" label="Chip with right icon" rightIcon={Email} />
+    </Flex>
+```
+
+## Chips with avatars
+
+```tsx
+<Flex gap="medium">
+      <Chips id="chip-left-avatar" aria-label="Chip with left avatar" label="Chip with left avatar" leftAvatar={person1} />
+      <Chips id="chip-right-avatar" aria-label="Chip with right avatar" label="Chip with right avatar" rightAvatar={person1} />
+    </Flex>
+```
+
+## Themes
+
+```tsx
+<>
+      <Chips id="theme-long" aria-label="Long chip" label="This is a long chip" />
+      <Chips id="theme-positive" aria-label="Positive chip" label="Chip positive" color="positive" />
+      <Chips id="theme-negative" aria-label="Negative chip" label="Chip negative" color="negative" />
+      <Chips id="theme-warning" aria-label="Warning chip" label="Chip warning" color="warning" />
+      <Chips id="theme-neutral" aria-label="Neutral chip" label="Chip neutral" color="neutral" />
+      <Chips id="theme-disabled" aria-label="Disabled chip" label="Disabled" disabled />
+    </>
+```
+
+## Clickable
+
+```tsx
+return <Flex direction="row" gap="medium" align="start">
+        <Chips id="clickable-default" aria-label="Clickable default chip" label="Clickable default chip" readOnly onClick={() => {}} />
+        <Chips id="clickable-removable" aria-label="Clickable removable chip" label="Clickable removable chip" onClick={() => {}} />
+      </Flex>;
+```
+
+## Chips palette
+
+```tsx
+const excludedColors = ["dark_indigo", "blackish"];
+const stateColors = ["positive", "negative", "primary", "warning", "neutral"];
+const allColors = [...ColorUtils.contentColors.filter((c: string) => !excludedColors.includes(c)), ...stateColors];
+const allowedColorsChunks = _chunk(allColors, 7);
+return <Flex style={{
+  width: "100%",
+  height: 300
+}} align="stretch">
+        {allowedColorsChunks.map((colorChunk: any) => {
+    return <Flex direction="column" key={colorChunk} justify="space-between" align="stretch">
+              {colorChunk.map((colorName: any) => <Chips label={colorName} key={colorName} color={colorName} readOnly allowTextSelection />)}
+            </Flex>;
+  })}
+      </Flex>;
+```
+
+## On color
+
+```tsx
+<Flex style={{
+  width: "100%"
+}} align="stretch" justify="start">
+      <Flex align="center" justify="center" style={{
+    background: "var(--sb-primary-selected-color)",
+    width: "124px",
+    height: "64px",
+    margin: "var(--sb-spacing-small)",
+    borderRadius: "var(--sb-border-radius-small)"
+  }}>
+        <Chips label="On selected" showBorder readOnly />
+      </Flex>
+      <Flex align="center" justify="center" style={{
+    background: "var(--positive-color-selected)",
+    width: "124px",
+    height: "64px",
+    margin: "var(--sb-spacing-small)",
+    borderRadius: "var(--sb-border-radius-small)"
+  }}>
+        <Chips label="On positive" showBorder color="positive" readOnly />
+      </Flex>
+      <Flex align="center" justify="center" style={{
+    background: "var(--sb-negative-color-selected)",
+    width: "124px",
+    height: "64px",
+    margin: "var(--sb-spacing-small)",
+    borderRadius: "var(--sb-border-radius-small)"
+  }}>
+        <Chips label="On negative" showBorder color="negative" readOnly />
+      </Flex>
+      <Flex align="center" justify="center" style={{
+    background: "var(--ui-background-color)",
+    width: "124px",
+    height: "64px",
+    margin: "var(--sb-spacing-small)",
+    borderRadius: "var(--sb-border-radius-small)"
+  }}>
+        <Chips label="On neutral" showBorder color="neutral" readOnly />
+      </Flex>
+    </Flex>
+```
+
+## Colorful chips for different content
+
+```tsx
+<Flex>
+      <DialogContentContainer>
+        <Flex direction="column" align="start" gap="medium" style={{
+      padding: "var(--space-8)"
+    }}>
+          <div>
+            <Chips label="January" color="positive" />
+          </div>
+          <Search />
+          <div>
+            <Chips label="August" readOnly color="lipstick" />
+          </div>
+          <div>
+            <Chips label="April" readOnly color="bubble" />
+          </div>
+          <div>
+            <Chips label="March" readOnly color="egg_yolk" />
+          </div>
+        </Flex>
+      </DialogContentContainer>
+    </Flex>
+```
+
+## Chips in a person picker combo box
+
+```tsx
+<Flex>
+      <DialogContentContainer>
+        <Flex direction="column" align="start" gap="medium" style={{
+      padding: "var(--space-8)"
+    }}>
+          <Search placeholder="Search names, positions, or a team" />
+          <Flex align="center" justify="center">
+            <Chips label="Julia Martinez" leftAvatar={person1} />
+            <Chips label="Juan Rodriguez" leftAvatar={person3} />
+          </Flex>
+          <Text style={{
+        paddingInlineStart: "var(--space-4)",
+        marginTop: "var(--space-4)"
+      }}>
+            Suggested people
+          </Text>
+          <Flex direction="column" align="start" gap="medium">
+            <Flex align="center" justify="center" key="cont-1" gap="small">
+              <Avatar size="small" src={person1} type="img" />
+              <Flex gap="xs">
+                <Text>May Kishon </Text>
+                <Text color="secondary">(UX/UI Product Designer)</Text>
+              </Flex>
+            </Flex>
+            <Flex align="center" justify="center" key="cont-2" gap="small">
+              <Avatar size="small" backgroundColor="dark_purple" text="LC" type="text" />
+              <Flex gap="xs">
+                <Text>Liron Cohen</Text>
+                <Text color="secondary">(Customer Experience)</Text>
+              </Flex>
+            </Flex>
+            <Flex align="center" justify="center" key="cont-3" gap="small">
+              <Avatar size="small" text="AL" type="text" />
+              <Flex gap="xs">
+                <Text>Amanda Lawrence</Text>
+                <Text color="secondary">(Customer Experience Designer)</Text>
+              </Flex>
+            </Flex>
+            <Flex align="center" justify="center" key="cont-4" gap="small">
+              <Avatar size="small" text="DY" type="text" backgroundColor="peach" />
+              <Flex gap="xs">
+                <Text>Dor Yehuda</Text>
+                <Text color="secondary">(Customer Experience Designer)</Text>
+              </Flex>
+            </Flex>
+          </Flex>
+        </Flex>
+      </DialogContentContainer>
+    </Flex>
+```
+

package/dist/metadata/examples/Clickable.md

@@ -0,0 +1,31 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const clickableTemplate = (args: ClickableProps) => {
+  return <Clickable onClick={() => alert("clicked")} {...args}>
+      <Box border padding="small" rounded="small">
+        I act like a button
+      </Box>
+    </Clickable>;
+}
+```
+
+## States
+
+```tsx
+<Flex gap="medium">
+      <Clickable onClick={() => alert("clicked")} aria-label="clickable button">
+        <Box border padding="small" rounded="small">
+          Regular clickable element
+        </Box>
+      </Clickable>
+      <Clickable onClick={() => alert("clicked")} disabled aria-label="disabled clickable button">
+        <Box border backgroundColor="greyBackgroundColor" padding="small" rounded="small">
+          Disabled clickable element
+        </Box>
+      </Clickable>
+    </Flex>
+```
+

package/dist/metadata/examples/ColorPicker.md

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