@vibe/core 4.2.6 → 4.3.0

package/dist/metadata/examples/Text.md

@@ -0,0 +1,188 @@
+# Storybook Code Examples
+
+## SizesAndWeights
+
+```tsx
+<Flex gap="large" direction="column" justify="start" align="start">
+      <Flex gap="small" direction="column" justify="start" align="start">
+        <Text type="text1" weight="bold">
+          This is text1 bold
+        </Text>
+        <Text type="text1" weight="medium">
+          This is text1 medium
+        </Text>
+        <Text type="text1" weight="normal">
+          This is text1 normal
+        </Text>
+      </Flex>
+
+      <Flex gap="small" direction="column" justify="start" align="start">
+        <Text type="text2" weight="bold">
+          This is text2 bold
+        </Text>
+        <Text type="text2" weight="medium">
+          This is text2 medium
+        </Text>
+        <Text type="text2" weight="normal">
+          This is text2 normal
+        </Text>
+      </Flex>
+      <Flex gap="small" direction="column" justify="start" align="start">
+        <Text type="text3" weight="medium">
+          This is text3 medium
+        </Text>
+        <Text type="text3" weight="normal">
+          This is text3 normal
+        </Text>
+      </Flex>
+    </Flex>
+```
+
+## Colors
+
+```tsx
+<Flex direction="column" align="start" gap="small">
+      <Text color="primary">Primary text</Text>
+      <Text color="secondary">Secondary text</Text>
+      <Box style={{
+    backgroundColor: "var(--primary-color)",
+    width: "150px"
+  }} padding="small">
+        <Text align="center" color="onPrimary">
+          On primary text
+        </Text>
+      </Box>
+      <Box style={{
+    width: "150px"
+  }} backgroundColor="invertedColorBackground" padding="small">
+        <Text align="center" color="onInverted">
+          On inverted text
+        </Text>
+      </Box>
+      <Box style={{
+    width: "150px",
+    backgroundColor: "black"
+  }} padding="small">
+        <Text align="center" color="fixedLight">
+          Fixed light
+        </Text>
+      </Box>
+      <Box style={{
+    width: "150px",
+    backgroundColor: "whitesmoke"
+  }} padding="small">
+        <Text align="center" color="fixedDark">
+          Fixed dark
+        </Text>
+      </Box>
+    </Flex>
+```
+
+## Overflow
+
+```tsx
+<Flex direction="column" id={OVERFLOW_TEXT_CONTAINER_ID} justify="start" align="initial" gap="small" style={{
+  width: "480px"
+}}>
+      <Heading type="h3">Text with 1 line</Heading>
+      <Text data-testid={ONE_LINE_ELLIPSIS_TEST_ID}
+  /**for testing purposes**/ tooltipProps={{
+    containerSelector: `#${OVERFLOW_TEXT_CONTAINER_ID}`
+  }}>
+        This is an example of text with overflow and a Tooltip to help or provide information about specific components
+        when a user hovers over them.
+      </Text>
+      <Heading type="h3">Text with 2 lines</Heading>
+      <Text maxLines={2}>
+        This is an example of text with ellipsis which displayed after two full lines of content this is an example of
+        text with ellipsis which displayed after two full lines of content
+      </Text>
+      <Heading type="h3">Text with array of elements</Heading>
+      <Text maxLines={1}>
+        {["This is an example of array of texts and ", <Link text="Other elements" href="https://www.monday.com" inheritFontSize inlineText />, " that are overflowing and create a tooltip with the correct information"]}
+      </Text>
+    </Flex>
+```
+
+## Paragraph
+
+```tsx
+<Flex direction="column">
+      <Text element="p">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Text>
+      <Text element="p" ellipsis maxLines={3}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Text>
+    </Flex>
+```
+
+## Links inside running text
+
+```tsx
+<Flex direction="column" align="start" gap="small">
+      <Text align="center">
+        This is the story of a{" "}
+        <StorybookLink page="Foundations/Typography" size="small">
+          link
+        </StorybookLink>{" "}
+        inside running text.
+      </Text>
+      <Box style={{
+    backgroundColor: "var(--primary-color)",
+    width: "420px"
+  }} padding="small">
+        <Text align="center" color="onPrimary">
+          This is the story of a{" "}
+          <StorybookLink page="Foundations/Typography" size="small">
+            link
+          </StorybookLink>{" "}
+          inside running text on a primary color
+        </Text>
+      </Box>
+      <Box style={{
+    width: "420px"
+  }} backgroundColor="invertedColorBackground" padding="small">
+        <Text align="center" color="onInverted">
+          This is the story of a{" "}
+          <StorybookLink page="Foundations/Typography" size="small">
+            link
+          </StorybookLink>{" "}
+          inside running text on an inverted color
+        </Text>
+      </Box>
+      <Box style={{
+    backgroundColor: "black",
+    width: "420px"
+  }} padding="small">
+        <Text ellipsis={false} style={{}} align="center" color="fixedLight">
+          This is the story of a{" "}
+          <StorybookLink page="Foundations/Typography" size="small">
+            link
+          </StorybookLink>{" "}
+          inside running text with fixed light color
+        </Text>
+      </Box>
+      <Box style={{
+    backgroundColor: "whitesmoke",
+    width: "420px"
+  }} padding="small">
+        <Text ellipsis={false} align="center" color="fixedDark">
+          This is the story of a{" "}
+          <StorybookLink page="Foundations/Typography" size="small">
+            link
+          </StorybookLink>{" "}
+          inside running text with fixed dark color
+        </Text>
+      </Box>
+    </Flex>
+```
+

package/dist/metadata/examples/TextArea.md

@@ -0,0 +1,28 @@
+# Storybook Code Examples
+
+## Sizes
+
+```tsx
+<>
+      <TextArea id="sizes-large" aria-label="Large text area" size="large" label="Large text area" />
+      <TextArea id="sizes-small" aria-label="Small text area" size="small" label="Small text area" />
+    </>
+```
+
+## States
+
+```tsx
+<>
+      <TextArea id="states-success" aria-label="Success text area" size="small" label="Success state" success />
+      <TextArea id="states-error" aria-label="Error text area" size="small" label="Error state" error />
+      <TextArea id="states-disabled" aria-label="Disabled text area" size="small" label="Disabled state" disabled />
+      <TextArea id="states-readonly" aria-label="Read only text area" size="small" label="Read only state" readOnly />
+    </>
+```
+
+## Validation
+
+```tsx
+<TextArea id="validation-textarea" aria-label="Text area with validation" size="small" label="Text area label" error required helpText="Validation text" />
+```
+

package/dist/metadata/examples/TextField.md

@@ -0,0 +1,119 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<div style={{
+  width: 300
+}}>
+      <TextField {...args} />
+    </div>
+```
+
+## Sizes
+
+```tsx
+<Flex direction="column" gap="medium" style={{
+  width: 300
+}}>
+      <TextField id="sizes-small" inputAriaLabel="Small text field" placeholder="Small" />
+      <TextField id="sizes-medium" inputAriaLabel="Medium text field" placeholder="Medium" size="medium" />
+      <TextField id="sizes-large" inputAriaLabel="Large text field" placeholder="Large" size="large" />
+    </Flex>
+```
+
+## States
+
+```tsx
+<Flex gap="large">
+      <Flex direction="column" gap="medium" style={{
+    marginTop: "var(--space-32)",
+    width: 300
+  }}>
+        <TextField id="states-disabled" inputAriaLabel="Disabled text field" placeholder="Disabled" size="medium" disabled />
+        <TextField id="states-with-icon" inputAriaLabel="Text field with icon" placeholder="With icon" icon={Email} size="medium" />
+        <TextField id="states-clickable-icon" inputAriaLabel="Text field with clickable icon" placeholder="With clickable icon" iconTooltipContent="Copy" icon={Duplicate} onIconClick={() => {}} size="medium" />
+      </Flex>
+      <Flex direction="column" gap="medium" style={{
+    width: 300
+  }}>
+        <TextField id="states-with-label" placeholder="With field label" title="Name" size="medium" />
+        <TextField id="states-success" inputAriaLabel="Success text field" placeholder="Success" validation={{
+      status: "success"
+    }} icon={Check} size="medium" />
+        <TextField id="states-error" inputAriaLabel="Error text field" placeholder="Error" validation={{
+      status: "error"
+    }} icon={CloseSmall} size="medium" />
+      </Flex>
+    </Flex>
+```
+
+## Validation
+
+```tsx
+<div style={{
+  width: 300
+}}>
+      <TextField id="validation-textfield" placeholder="Validate me" title="Name" size="medium" validation={{
+    status: "error",
+    text: "Validation text"
+  }} />
+    </div>
+```
+
+## Text field in a form
+
+```tsx
+<Flex align="stretch" direction="column" gap="large" style={{
+  width: 300
+}}>
+      <Heading type="h1" weight="bold" maxLines={2}>
+        Dark Mode Feedback Form
+      </Heading>
+      <Flex direction="column" gap="medium">
+        <TextField id="form-name" title="Your Name" size="medium" placeholder="John Doe" />
+        <TextField id="form-email" title="Email" size="medium" placeholder="email@monday.com" />
+      </Flex>
+    </Flex>
+```
+
+## Input field with placeholder text
+
+```tsx
+<div style={{
+  width: 300
+}}>
+      <TextField id="placeholder-text-field" title="Invite with email" labelIconName={Email} placeholder="Enter one or more email" size="medium" />
+    </div>
+```
+
+## Required input field
+
+```tsx
+<div style={{
+  width: 300
+}}>
+      <TextField id="required-field" placeholder="Your email" title="Email Address" size="medium" required />
+    </div>
+```
+
+## Input field with date
+
+```tsx
+<div style={{
+  width: 300
+}}>
+      <TextField id="date-field" inputAriaLabel="Select a date" size="medium" type="date" />
+    </div>
+```
+
+## Input field with date and time
+
+```tsx
+<div style={{
+  width: 300
+}}>
+      <TextField id="datetime-field" inputAriaLabel="Select date and time" size="medium" type="datetime-local" />
+    </div>
+```
+

package/dist/metadata/examples/TextWithHighlight.md

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

package/dist/metadata/examples/ThemeProvider.md

@@ -0,0 +1,47 @@
+# Storybook Code Examples
+
+## Colors eligible for theming
+
+```tsx
+<ColorsEligibleForThemingTemplate />
+```
+
+## With systemTheme
+
+```tsx
+const [systemTheme, setSystemTheme] = useState(null);
+const onToggleButtonClick = () => {
+  switch (systemTheme) {
+    case "light":
+      setSystemTheme("dark");
+      break;
+    case "dark":
+      setSystemTheme("light");
+      break;
+    default:
+      setSystemTheme("dark");
+  }
+};
+return <Flex direction="row" gap="large">
+        <ThemeProvider themeConfig={{
+    name: "with-system-theme",
+    colors: {
+      dark: {
+        "primary-color": "var(--positive-color)",
+        "primary-hover-color": "var(--positive-color-hover)"
+      }
+    }
+  }} systemTheme={systemTheme}>
+          <Button onClick={onToggleButtonClick} data-testid={"system-theme-toggle-button"}>
+            Themed
+          </Button>
+        </ThemeProvider>
+      </Flex>;
+```
+
+## monday.com SDK integration
+
+```tsx
+return <Source code={MondaySdkIntegrationSourceCode}></Source>;
+```
+

package/dist/metadata/examples/Tipseen.md

@@ -0,0 +1,111 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const tipseenTemplate = ({
+  title,
+  children,
+  position,
+  ...otherArgs
+}: TipseenProps & TipseenContentProps) => {
+  return <Tipseen middleware={storyMiddleware} position={position} content={<TipseenContent title={title}>{children}</TipseenContent>} {...otherArgs}>
+      <div style={{
+      height: "160px"
+    }} />
+    </Tipseen>;
+}
+```
+
+## Colors
+
+```tsx
+return <Flex direction="column">
+        <Tipseen id="colors-tipseen-1" middleware={storyMiddleware} position="right" content={<TipseenContent id="colors-content-1" title="This is a title">
+              Message for the user will appear here, to give more information about the feature.
+            </TipseenContent>}>
+          <div style={{
+      height: "180px"
+    }} />
+        </Tipseen>
+        <Tipseen id="colors-tipseen-2" middleware={storyMiddleware} position="right" color="primary" content={<TipseenContent id="colors-content-2" title="This is a title">
+              Message for the user will appear here, to give more information about the feature.
+            </TipseenContent>}>
+          <div style={{
+      height: "180px"
+    }} />
+        </Tipseen>
+      </Flex>;
+```
+
+## Tipseen with a wizard
+
+```tsx
+const content = [<div>Popover message №1 will appear here</div>, <div>Popover message №2 will appear here</div>, <div>Popover message №3 will appear here</div>, <div>Popover message №4 will appear here</div>, <div>Popover message №5 will appear here</div>];
+const [activeStepIndex, setActiveStepIndex] = useState(2);
+const onChangeActiveStep = useCallback((_e: any, stepIndex: React.SetStateAction<number>) => {
+  setActiveStepIndex(stepIndex);
+}, []);
+return <Tipseen middleware={storyMiddleware} position="right" content={<TipseenWizard title="This is a title" steps={content} activeStepIndex={activeStepIndex} onChangeActiveStep={onChangeActiveStep} onFinish={() => {}} />}>
+        <div style={{
+    height: "150px"
+  }} />
+      </Tipseen>;
+```
+
+## Tipseen with image
+
+```tsx
+const content = [<div>Message for the user will appear here, to give more information about the feature.</div>, <div>Message for the user will appear here, to give more information about the feature.</div>, <div>Message for the user will appear here, to give more information about the feature.</div>, <div>Message for the user will appear here, to give more information about the feature.</div>, <div>Message for the user will appear here, to give more information about the feature.</div>];
+return <Tipseen middleware={storyMiddleware} position="right" closeButtonTheme="light" content={<>
+            <TipseenMedia>
+              <img src={picture} alt="" style={{
+      objectFit: "cover",
+      width: "100%"
+    }} />
+            </TipseenMedia>
+            <TipseenWizard title="This is a title" steps={content} activeStepIndex={2} />
+          </>}>
+        <div style={{
+    height: "300px"
+  }} />
+      </Tipseen>;
+```
+
+## Tipseen with custom media
+
+```tsx
+return <Tipseen middleware={storyMiddleware} position="right" closeButtonTheme="dark" content={<>
+            <TipseenMedia>
+              <video autoPlay muted loop src={video} style={{
+      width: "100%"
+    }} />
+            </TipseenMedia>
+            <TipseenContent title="This is a title">
+              Message for the user will appear here, to give more information about the feature.
+            </TipseenContent>
+          </>}>
+        <div style={{
+    height: "280px"
+  }} />
+      </Tipseen>;
+```
+
+## Floating Tipseen
+
+```tsx
+return <Tipseen closeButtonTheme="dark" floating content={<>
+            <TipseenMedia>
+              <img src={picture} alt="" style={{
+      objectFit: "cover",
+      width: "100%"
+    }} />
+            </TipseenMedia>
+            <TipseenContent title="This is a Floating Tipseen">
+              Message for the user will appear here, to give more information about the feature.
+            </TipseenContent>
+          </>}
+// You do not have to use containerSelector, in current use this is for story only
+containerSelector="#tipseen-floating-container" />;
+```
+

package/dist/metadata/examples/Toast.md

@@ -0,0 +1,127 @@
+# Storybook Code Examples
+
+## Default with button
+
+```tsx
+return <Toast id="default-with-button" open actions={[{
+  type: "button",
+  content: "Button"
+}]}>
+        General message toast
+      </Toast>;
+```
+
+## Toast with link
+
+```tsx
+return <Toast id="toast-with-link" open actions={[{
+  type: "link",
+  text: "Link to action",
+  href: "https://monday.com"
+}]}>
+        General message toast
+      </Toast>;
+```
+
+## Toast with loading
+
+```tsx
+return <Toast id="toast-loading" open loading>
+        General message toast
+      </Toast>;
+```
+
+## Success message
+
+```tsx
+return <Toast id="success-message" open type="positive" actions={[{
+  type: "button",
+  content: "Undo 5"
+}]}>
+        Positive message toast
+      </Toast>;
+```
+
+## Error message
+
+```tsx
+return <Toast id="error-message" open actions={[{
+  type: "button",
+  content: "Button"
+}]} type="negative">
+        Negative message toast
+      </Toast>;
+```
+
+## Warning message
+
+```tsx
+return <Toast id="warning-message" open actions={[{
+  type: "button",
+  content: "Button"
+}]} type="warning">
+        Warning message toast
+      </Toast>;
+```
+
+## Dark message
+
+```tsx
+return <Toast id="dark-message" open actions={[{
+  type: "button",
+  content: "Button"
+}]} type="dark">
+        Dark message toast
+      </Toast>;
+```
+
+## FeedbackLoop
+
+```tsx
+return <Toast id="feedback-loop" open type="positive" actions={[{
+  type: "button",
+  content: "Undo"
+}]}>
+        We successfully deleted 1 item
+      </Toast>;
+```
+
+## Animation
+
+```tsx
+const [successToastOpen, setSuccessToastOpen] = useState(false);
+const [failureToastOpen, setFailureToastOpen] = useState(false);
+const [isDeleting, setIsDeleting] = useState(false);
+const onSuccessClick = useCallback(() => {
+  setSuccessToastOpen(true);
+  setIsDeleting(true);
+  setTimeout(() => {
+    setIsDeleting(false);
+  }, 1000);
+}, []);
+const onFailureClick = useCallback(() => {
+  setFailureToastOpen(true);
+  setIsDeleting(true);
+  setTimeout(() => {
+    setIsDeleting(false);
+  }, 1000);
+}, []);
+return <Flex gap="medium">
+        <Button id="animation-success-button" aria-label="Trigger success toast" onClick={onSuccessClick} kind="secondary">
+          Success action
+        </Button>
+        <Button id="animation-failure-button" aria-label="Trigger failure toast" onClick={onFailureClick} kind="secondary">
+          Failure action
+        </Button>
+        <Toast id="animation-success-toast" open={successToastOpen} type={isDeleting ? "normal" : "positive"} actions={isDeleting ? [] : [{
+    type: "button",
+    content: "Undo"
+  }]} onClose={() => setSuccessToastOpen(false)} autoHideDuration={2000} loading={isDeleting}>
+          {isDeleting ? "Deleting 1 selected item..." : "We successfully deleted 1 item"}
+        </Toast>
+        <Toast id="animation-failure-toast" open={failureToastOpen} type={isDeleting ? "normal" : "negative"} onClose={() => setFailureToastOpen(false)} autoHideDuration={2000} loading={isDeleting}>
+          {isDeleting ? "Deleting 1 selected item..." : "Something went wrong"}
+        </Toast>
+      </Flex>;
+```
+

package/dist/metadata/examples/Toggle.md

@@ -0,0 +1,38 @@
+# Storybook Code Examples
+
+## States
+
+```tsx
+<Flex direction="column" gap="medium">
+      <Toggle id="states-off" aria-label="Toggle off state" isDefaultSelected={false} />
+      <Toggle id="states-on" aria-label="Toggle on state" />
+    </Flex>
+```
+
+## Size
+
+```tsx
+<Flex gap="large">
+      <Toggle id="size-medium" aria-label="Medium toggle" size="medium" />
+      <Toggle id="size-small" aria-label="Small toggle" size="small" />
+    </Flex>
+```
+
+## Disabled
+
+```tsx
+<Flex direction="column" gap="large">
+      <Toggle id="disabled-off" aria-label="Disabled toggle off" isDefaultSelected={false} disabled />
+      <Toggle id="disabled-on" aria-label="Disabled toggle on" disabled />
+    </Flex>
+```
+
+## Turn on/ off an automation
+
+```tsx
+<Flex gap="medium">
+      <Text id="automation-label">Board automations</Text>
+      <Toggle id="automation-toggle" aria-label="Toggle board automations" />
+    </Flex>
+```
+