@vibe/core 4.2.6 → 4.3.0

package/dist/metadata/examples/Slider.md

@@ -0,0 +1,109 @@
+# Storybook Code Examples
+
+## Sizes
+
+```tsx
+<Flex gap="medium" flex="1">
+      <Slider id="sizes-small" aria-label="Small slider" size="small" defaultValue={12} />
+      <Slider id="sizes-medium" aria-label="Medium slider" size="medium" defaultValue={24} />
+      <Slider id="sizes-large" aria-label="Large slider" size="large" defaultValue={35} />
+    </Flex>
+```
+
+## Ranged
+
+```tsx
+<Flex gap="medium" flex="1">
+      <Slider id="ranged-small" aria-label="Small ranged slider" data-testid={"monday-ranged-slider-s"} size="small" ranged={true} />
+      <Slider id="ranged-medium" aria-label="Medium ranged slider" data-testid={"monday-ranged-slider-m"} size="medium" ranged={true} defaultValue={[12, 55]} />
+      <Slider id="ranged-large" aria-label="Large ranged slider" size="large" ranged={true} defaultValue={[25, 32]} />
+    </Flex>
+```
+
+## Colors
+
+```tsx
+<Flex gap="medium" flex="1">
+      <Slider id="color-positive" aria-label="Positive color slider" color="positive" defaultValue={34} size="medium" />
+      <Slider id="color-negative" aria-label="Negative color ranged slider" color="negative" ranged={true} defaultValue={[12, 55]} size="medium" />
+      <Slider id="color-primary" aria-label="Primary color slider" color="primary" defaultValue={12} size="medium" />
+    </Flex>
+```
+
+## Disabled
+
+```tsx
+<Flex gap="medium" flex="1">
+      <Slider id="disabled-positive" aria-label="Disabled positive slider" disabled={true} defaultValue={24} color="positive" size="medium" />
+      <Slider id="disabled-negative" aria-label="Disabled negative slider" disabled={true} color="negative" size="medium" />
+      <Slider id="disabled-ranged" aria-label="Disabled ranged primary slider" disabled={true} ranged={true} defaultValue={[12, 55]} color="primary" size="medium" />
+    </Flex>
+```
+
+## WithLabels
+
+```tsx
+<Flex direction="column" gap="large" style={{
+  width: "500px"
+}}>
+      <Slider id="labeled-simple" aria-label="Simple labeled slider" indicateSelection={true} defaultValue={12} size="small" />
+      <Slider id="labeled-ranged" aria-label="Labeled ranged slider" indicateSelection={true} ranged={true} defaultValue={[12, 55]} size="small" />
+      <Slider id="labeled-sound" aria-label="Sound slider with icon"
+  // @ts-ignore
+  prefix={{
+    icon: Sound
+  }} indicateSelection={true} defaultValue={70} size="small" />
+      <Slider id="labeled-video" aria-label="Video slider with icons"
+  // @ts-ignore
+  prefix={{
+    icon: Video
+  }}
+  // @ts-ignore
+  postfix={{
+    icon: Sound
+  }} defaultValue={45} size="medium" />
+      <Slider id="labeled-volume" aria-label="Volume slider" prefix="Vol" indicateSelection={true} defaultValue={0} size="large" />
+    </Flex>
+```
+
+## ShowValue
+
+```tsx
+<Flex gap="medium" flex="1">
+      <Slider id="show-value-small" aria-label="Small slider showing value" data-testid={"monday-slider-show-value-s"} showValue={true} defaultValue={12} size="small" />
+      <Slider id="show-value-medium" aria-label="Medium slider showing value" data-testid={"monday-slider-show-value-m"} showValue={true} defaultValue={55} size="medium" />
+      <Slider id="show-value-large" aria-label="Large slider showing value" data-testid={"monday-slider-show-value-l"} showValue={true} defaultValue={89} size="large" />
+    </Flex>
+```
+
+## Limits, Steps
+
+```tsx
+<Flex direction="column" gap="large" style={{
+  width: "500px"
+}}>
+      <Slider id="step-10" aria-label="Slider with step 10" prefix="Step 10" step={10} indicateSelection={true} defaultValue={10} size="small" />
+      <Slider id="step-2-max-20" aria-label="Slider with step 2 max 20" prefix="Step 2, Max: 20" max={20} step={2} indicateSelection={true} defaultValue={4} size="medium" />
+      <Slider id="percentage-range" aria-label="Percentage range slider from 20% to 80%" prefix="from 20%" postfix="till 80%" min={20} max={80} showValue={true} defaultValue={62} size="large" />
+      <Slider id="ranged-100-200" aria-label="Ranged slider from 100 to 200" ranged={true} indicateSelection={true} min={100} max={200} step={10} size="large" />
+    </Flex>
+```
+
+## Customisation
+
+```tsx
+<Flex direction="column" gap="large" style={{
+  width: "500px"
+}}>
+      <Slider id="my-app-slider" data-testid={"my-app-slider"} className="my-custom-class" defaultValue={19} prefix="Check Dev-Tools for Custom Classes" size="medium" />
+      <Slider id="custom-value-formatter" className="my-custom-formatter" defaultValue={3} min={1} max={10} indicateSelection={true} valueFormatter={(value: number) => `${value}GB`} prefix="Custom value formatter" size="medium" />
+      <Slider id="custom-value-formatter" className="my-long-formatter" defaultValue={3} min={1} max={10} indicateSelection={true} selectionIndicatorWidth="120px" valueFormatter={(value: number) => `${value} meter/hour`} prefix="Long value formatter" size="medium" />
+      <Slider id="custom-prefix" className="my-slider-wide" defaultValue={50} prefix={<Chips label="Custom component" readOnly />} postfix={(value: number, valueText: string) => {
+    // set css: .my-slider-wide { max-width: none }
+    return <span style={{
+      whiteSpace: "nowrap"
+    }}>{`RenderProps: ${valueText} (${value}) `}</span>;
+  }} size="medium" />
+    </Flex>
+```
+

package/dist/metadata/examples/SplitButton.md

@@ -0,0 +1,120 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<SplitButton id="overview-split-button" aria-label="Overview split button" {...args}>
+      Button
+    </SplitButton>
+```
+
+## Types
+
+```tsx
+<>
+      <SplitButton id="types-primary" aria-label="Primary split button" secondaryDialogContent={<SplitButtonMenu id="types-primary-menu">
+            <MenuItem id="types-primary-check" icon={Check} title="Hey" />
+            <MenuItem id="types-primary-announcement" icon={Announcement} title="There" />
+          </SplitButtonMenu>}>
+        Primary
+      </SplitButton>
+      <SplitButton id="types-secondary" aria-label="Secondary split button" kind="secondary" secondaryDialogContent={<SplitButtonMenu id="types-secondary-menu">
+            <MenuItem id="types-secondary-check" icon={Check} title="Hey" />
+            <MenuItem id="types-secondary-announcement" icon={Announcement} title="There" />
+          </SplitButtonMenu>}>
+        Secondary
+      </SplitButton>
+      <SplitButton id="types-tertiary" aria-label="Tertiary split button" kind="tertiary" secondaryDialogContent={<SplitButtonMenu id="types-tertiary-menu">
+            <MenuItem id="types-tertiary-check" icon={Check} title="Hey" />
+            <MenuItem id="types-tertiary-announcement" icon={Announcement} title="There" />
+          </SplitButtonMenu>}>
+        Tertiary
+      </SplitButton>
+    </>
+```
+
+## Sizes
+
+```tsx
+<>
+      <SplitButton id="sizes-small" aria-label="Small split button" size="small" secondaryDialogContent={<SplitButtonMenu id="sizes-small-menu">
+            <MenuItem id="sizes-small-check" icon={Check} title="Hey" />
+            <MenuItem id="sizes-small-announcement" icon={Announcement} title="There" />
+          </SplitButtonMenu>}>
+        Small
+      </SplitButton>
+      <SplitButton id="sizes-medium" aria-label="Medium split button" size="medium" secondaryDialogContent={<SplitButtonMenu id="sizes-medium-menu">
+            <MenuItem id="sizes-medium-check" icon={Check} title="Hey" />
+            <MenuItem id="sizes-medium-announcement" icon={Announcement} title="There" />
+          </SplitButtonMenu>}>
+        Medium
+      </SplitButton>
+      <SplitButton id="sizes-large" aria-label="Large split button" size="large" secondaryDialogContent={<SplitButtonMenu id="sizes-large-menu">
+            <MenuItem id="sizes-large-check" icon={Check} title="Hey" />
+            <MenuItem id="sizes-large-announcement" icon={Announcement} title="There" />
+          </SplitButtonMenu>}>
+        Large
+      </SplitButton>
+    </>
+```
+
+## Split button with icons
+
+```tsx
+<>
+      <SplitButton id="icons-left" aria-label="Split button with left icon" leftIcon={Add} secondaryDialogContent={<SplitButtonMenu id="icons-left-menu">
+            <MenuItem id="icons-left-check" icon={Check} title="Hey" />
+            <MenuItem id="icons-left-announcement" icon={Announcement} title="There" />
+          </SplitButtonMenu>}>
+        Left icon
+      </SplitButton>
+      <SplitButton id="icons-right" aria-label="Split button with right icon" rightIcon={Add} secondaryDialogContent={<SplitButtonMenu id="icons-right-menu">
+            <MenuItem id="icons-right-check" icon={Check} title="Hey" />
+            <MenuItem id="icons-right-announcement" icon={Announcement} title="There" />
+          </SplitButtonMenu>}>
+        Right icon
+      </SplitButton>
+    </>
+```
+
+## Split button as the primary action
+
+```tsx
+<SplitButton id="primary-action" aria-label="Use template split button" secondaryDialogPosition="bottom-start" secondaryDialogContent={<SplitButtonMenu id="primary-action-menu">
+          <MenuItem id="primary-action-import" icon={Download} title="Import template" />
+          <MenuItem id="primary-action-export" icon={Upload} title="Export template" />
+        </SplitButtonMenu>}>
+      Use template
+    </SplitButton>
+```
+
+## Secondary split button
+
+```tsx
+<>
+      <SplitButton id="secondary-export" aria-label="Export options split button" kind="secondary" secondaryDialogPosition="bottom-start" secondaryDialogContent={<SplitButtonMenu id="secondary-export-menu">
+            <MenuItem id="secondary-export-pdf" title="Export to PDF" />
+            <MenuItem id="secondary-export-docx" title="Export to DOCX" />
+            <MenuItem id="secondary-export-excel" title="Export to Excel" />
+          </SplitButtonMenu>}>
+        Export to CSV
+      </SplitButton>
+      <Button id="new-item-button" aria-label="Create new item">
+        New item
+      </Button>
+    </>
+```
+
+## Custom menu
+
+```tsx
+<SplitButton id="custom-menu" aria-label="Custom menu split button" secondaryDialogContent={<Menu focusItemIndexOnMount={2} id="custom-menu-content" size="medium">
+          <MenuTitle caption="Look up, you might see" captionPosition="top" />
+          <MenuItem id="custom-menu-sun" icon={Sun} type="svg" title="The sun" />
+          <MenuItem id="custom-menu-moon" icon={Moon} type="svg" title="The moon" />
+          <MenuItem id="custom-menu-stars" icon={Favorite} type="svg" title="And the stars" />
+        </Menu>}>
+      Custom menu
+    </SplitButton>
+```
+

package/dist/metadata/examples/Steps.md

@@ -0,0 +1,106 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const NavigableStepsTemplate = (args: StepsProps) => {
+  const [activeStepIndex, setActiveStepIndex] = useState(2);
+  const stepPrev = useCallback(() => {
+    setActiveStepIndex(prevState => prevState - 1);
+  }, []);
+  const stepNext = useCallback(() => {
+    setActiveStepIndex(prevState => prevState + 1);
+  }, []);
+  const onChangeActiveStep = useCallback((_e: any, stepIndex: React.SetStateAction<number>) => {
+    setActiveStepIndex(stepIndex);
+  }, []);
+  return <Steps id="overview-steps" activeStepIndex={activeStepIndex} backButtonProps={{
+    onClick: stepPrev
+  }} nextButtonProps={{
+    onClick: stepNext
+  }} {...args} onChangeActiveStep={onChangeActiveStep} />;
+}
+```
+
+## Types
+
+```tsx
+<Flex direction="column" gap="medium">
+      <Steps id="types-numbers" type="numbers" steps={steps5} activeStepIndex={2} />
+      <Steps id="types-default" steps={steps5} activeStepIndex={2} />
+      <div style={{
+    padding: "15px 103px 20px"
+  }}>
+        <Steps id="types-no-nav" steps={steps5} activeStepIndex={2} areNavigationButtonsHidden />
+      </div>
+    </Flex>
+```
+
+## OnPrimary
+
+```tsx
+<Flex direction="column" gap="medium" style={{
+  padding: "var(--sb-spacing-small)",
+  backgroundColor: "var(--sb-primary-color)"
+}}>
+      <Steps id="primary-numbers" steps={steps5} activeStepIndex={2} color="on-primary-color" type="numbers" />
+      <Steps id="primary-default" steps={steps5} activeStepIndex={2} color="on-primary-color" />
+      <div style={{
+    padding: "15px 103px 20px"
+  }}>
+        <Steps id="primary-no-nav" steps={steps5} activeStepIndex={2} color="on-primary-color" areNavigationButtonsHidden />
+      </div>
+    </Flex>
+```
+
+## NavigableSteps
+
+```tsx
+const [activeStepIndex, setActiveStepIndex] = useState(2);
+const stepPrev = useCallback(() => {
+  setActiveStepIndex(prevState => prevState - 1);
+}, []);
+const stepNext = useCallback(() => {
+  setActiveStepIndex(prevState => prevState + 1);
+}, []);
+const onChangeActiveStep = useCallback((_e: any, stepIndex: React.SetStateAction<number>) => {
+  setActiveStepIndex(stepIndex);
+}, []);
+return <div>
+        <Steps id="navigable-steps" steps={steps5} isContentOnTop activeStepIndex={activeStepIndex} onChangeActiveStep={onChangeActiveStep} backButtonProps={{
+    onClick: stepPrev
+  }} nextButtonProps={{
+    onClick: stepNext
+  }} />
+      </div>;
+```
+
+## StepsInsideATipseen
+
+```tsx
+const steps = [<div>Message number 1</div>, <div>Message number 2</div>, <div>Message number 3</div>, <div>Message number 4</div>, <div>Message number 5</div>];
+const [activeStepIndex, setActiveStepIndex] = useState(2);
+const stepPrev = useCallback(() => {
+  setActiveStepIndex(prevState => prevState - 1);
+}, []);
+const stepNext = useCallback(() => {
+  setActiveStepIndex(prevState => prevState + 1);
+}, []);
+const onChangeActiveStep = useCallback((_e: any, stepIndex: React.SetStateAction<number>) => {
+  setActiveStepIndex(stepIndex);
+}, []);
+return <Tipseen id="tipseen-with-steps" position="right" modifiers={modifiers} animationType="opacity-and-slide" content={<TipseenWizard id="tipseen-wizard" title="This is a title" steps={steps} onChangeActiveStep={onChangeActiveStep} activeStepIndex={activeStepIndex} backButtonProps={{
+  size: "small",
+  onClick: stepPrev
+}} nextButtonProps={{
+  kind: "primary",
+  size: "small",
+  onClick: stepNext
+}} />}>
+        <div style={{
+    width: "10px",
+    height: "150px"
+  }} />
+      </Tipseen>;
+```
+