@vibe/core 4.2.6 → 4.3.0

package/dist/metadata/examples/MultiStepIndicator.md

@@ -0,0 +1,189 @@
+# Storybook Code Examples
+
+## Placements
+
+```tsx
+const steps: Step[] = useMemo(() => [{
+  key: "FULFILLED",
+  status: "fulfilled",
+  titleText: "Fulfilled title",
+  subtitleText: "Fulfilled subtitle"
+}, {
+  key: "ACTIVE",
+  status: "active",
+  titleText: "Active title",
+  subtitleText: "Active subtitle"
+}, {
+  key: "PENDING",
+  status: "pending",
+  titleText: "Pending title",
+  subtitleText: "Pending subtitle"
+}], []);
+return <div>
+        Vertical
+        <MultiStepIndicator id="placements-vertical" textPlacement="vertical" steps={steps} />
+        Horizontal
+        <MultiStepIndicator id="placements-horizontal" steps={steps} />
+      </div>;
+```
+
+## Types
+
+```tsx
+const steps: Step[] = useMemo(() => [{
+  key: "FULFILLED",
+  status: "fulfilled",
+  titleText: "Fulfilled title",
+  subtitleText: "Fulfilled subtitle"
+}, {
+  key: "ACTIVE",
+  status: "active",
+  titleText: "Active title",
+  subtitleText: "Active subtitle"
+}, {
+  key: "PENDING",
+  status: "pending",
+  titleText: "Pending title",
+  subtitleText: "Pending subtitle"
+}], []);
+return <div>
+        Primary
+        <MultiStepIndicator id="types-primary" steps={steps} type="primary" />
+        Success
+        <MultiStepIndicator id="types-success" steps={steps} type="success" />
+        Danger
+        <MultiStepIndicator id="types-danger" steps={steps} type="danger" />
+        Dark
+        <MultiStepIndicator id="types-dark" aria-label="Dark type multi-step indicator" steps={steps} type="dark" />
+      </div>;
+```
+
+## Sizes
+
+```tsx
+const steps: Step[] = useMemo(() => [{
+  key: "FULFILLED",
+  status: "fulfilled",
+  titleText: "Fulfilled title",
+  subtitleText: "Fulfilled subtitle"
+}, {
+  key: "ACTIVE",
+  status: "active",
+  titleText: "Active title",
+  subtitleText: "Active subtitle"
+}, {
+  key: "PENDING",
+  status: "pending",
+  titleText: "Pending",
+  subtitleText: "Pending subtitle"
+}], []);
+return <div>
+        Regular
+        <MultiStepIndicator id="sizes-regular" steps={steps} size="regular" />
+        Compact
+        <MultiStepIndicator id="sizes-compact" steps={steps} size="compact" />
+      </div>;
+```
+
+## FulfilledIcons
+
+```tsx
+const steps: Step[] = useMemo(() => [{
+  key: "FULFILLED",
+  status: "fulfilled",
+  titleText: "Fulfilled title",
+  subtitleText: "Fulfilled subtitle"
+}, {
+  key: "ACTIVE",
+  status: "active",
+  titleText: "Active title",
+  subtitleText: "Active subtitle"
+}, {
+  key: "PENDING",
+  status: "pending",
+  titleText: "Pending title",
+  subtitleText: "Pending subtitle"
+}], []);
+return <div>
+        Default (check)
+        <MultiStepIndicator id="icons-default" steps={steps} />
+        Number instead of icon
+        <MultiStepIndicator id="icons-numbers" steps={steps} isFulfilledStepDisplayNumber={true} />
+        Custom
+        <MultiStepIndicator id="icons-custom" steps={steps} fulfilledStepIcon={Upgrade} />
+      </div>;
+```
+
+## TransitionAnimation
+
+```tsx
+const initialSteps = useMemo<Step[]>(() => [{
+  key: "PENDING",
+  status: "pending",
+  titleText: "First step title",
+  subtitleText: "First subtitle"
+}, {
+  key: "PENDING-2",
+  status: "pending",
+  titleText: "Second step title",
+  subtitleText: "Second subtitle"
+}, {
+  key: "PENDING-3",
+  status: "pending",
+  titleText: "Third step title",
+  subtitleText: "Third subtitle"
+}], []);
+const [steps, setSteps] = useState<Step[]>(initialSteps);
+useEffect(() => {
+  const getNextStepsState = (currentSteps: Step[]): Step[] => {
+    const currentStepIndex = currentSteps.findIndex(step => step.status !== "fulfilled");
+    if (currentStepIndex === -1) {
+      return initialSteps;
+    }
+    const newSteps = [...currentSteps];
+    const stepToUpdate = newSteps[currentStepIndex];
+    if (stepToUpdate.status === "pending") {
+      newSteps[currentStepIndex] = {
+        ...stepToUpdate,
+        status: "active"
+      };
+    } else {
+      newSteps[currentStepIndex] = {
+        ...stepToUpdate,
+        status: "fulfilled"
+      };
+    }
+    return newSteps;
+  };
+  const interval = setInterval(() => {
+    setSteps(prevSteps => getNextStepsState(prevSteps));
+  }, 2000);
+  return () => {
+    clearInterval(interval);
+  };
+}, [initialSteps]);
+return <MultiStepIndicator id="transition-animation" steps={steps} />;
+```
+
+## MultiStepWizard
+
+```tsx
+const steps: Step[] = useMemo(() => [{
+  key: "FULFILLED",
+  status: "fulfilled",
+  titleText: "Step 1",
+  subtitleText: "Learn how to use monday CRM"
+}, {
+  key: "PENDING",
+  status: "pending",
+  titleText: "Step 2",
+  subtitleText: "Integrate your email"
+}, {
+  key: "PENDING-3",
+  status: "pending",
+  titleText: "Step 3",
+  subtitleText: "Import your data"
+}], []);
+return <MultiStepIndicator id="multi-step-wizard" steps={steps} textPlacement="vertical" />;
+```
+

package/dist/metadata/examples/NumberField.md

@@ -0,0 +1,68 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const [value, setValue] = useState(args.value || 0);
+return <div style={{
+  width: 300
+}}>
+        <NumberField id="overview-number-field" {...args} value={value} onChange={newValue => setValue(newValue)} />
+      </div>;
+```
+
+## Sizes
+
+```tsx
+const [valueL, setValueL] = useState(2);
+const [valueM, setValueM] = useState(2);
+const [valueS, setValueS] = useState(2);
+return <Flex gap="medium" align="start">
+        <NumberField id="size-large" value={valueL} onChange={setValueL} label="Large" size="large" />
+        <NumberField id="size-medium" value={valueM} onChange={setValueM} label="Medium" size="medium" />
+        <NumberField id="size-small" value={valueS} onChange={setValueS} label="Small" size="small" />
+      </Flex>;
+```
+
+## States
+
+```tsx
+const [successValue, setSuccessValue] = useState(10);
+const [errorValue, setErrorValue] = useState(5);
+return <Flex direction="column" gap="medium" align="start">
+        <NumberField id="success-state" value={successValue} onChange={setSuccessValue} label="Success State" success infoText="This is a success message" />
+        <NumberField id="error-state" value={errorValue} onChange={setErrorValue} label="Error State" error infoText="This is an error message" />
+        <NumberField id="readonly-state" value={42} onChange={() => {}} label="Read Only State" readOnly infoText="Read-only field" />
+        <NumberField id="disabled-state" value={5} onChange={() => {}} label="Disabled State" disabled infoText="Cannot edit when disabled" />
+      </Flex>;
+```
+
+## Validation
+
+```tsx
+const [value, setValue] = useState(50);
+const [isValid, setIsValid] = useState(true);
+const handleChange = (newValue: number) => {
+  setValue(newValue);
+};
+const handleValidityChange = (valid: boolean) => {
+  setIsValid(valid);
+};
+return <Flex direction="column" gap="medium" align="start" style={{
+  width: 300
+}}>
+        <NumberField id="validation-example" value={value} onChange={handleChange} onValidityChange={handleValidityChange} label="Validation Example (Range: 0-100)" min={0} max={100} allowOutOfBounds success={isValid} error={!isValid} infoText={isValid ? "Value is within valid range!" : "Value is outside the valid range (0-100)"} />
+      </Flex>;
+```
+
+## Variants
+
+```tsx
+const [iconValue, setIconValue] = useState(1);
+const [infoValue, setInfoValue] = useState(100);
+return <Flex direction="column" gap="medium" align="start">
+        <NumberField id="with-icon" value={iconValue} onChange={setIconValue} label="With Icon" leftIcon={TextBig} />
+        <NumberField id="with-info" value={infoValue} onChange={setInfoValue} label="With Info Text" infoText="You are doing great!" />
+      </Flex>;
+```
+

package/dist/metadata/examples/ProgressBar.md

@@ -0,0 +1,152 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<div style={{
+  width: "400px"
+}}>
+      <ProgressBar value={20} size="large" id="overview-linear-progress-bar" aria-label="Overview linear progress bar" {...args} />
+    </div>
+```
+
+## Regular
+
+```tsx
+<Flex direction="column" gap="large">
+      <Flex direction="column" gap="small" align="start" style={{
+    width: "400px"
+  }}>
+        <ProgressBar id="regular-linear-progress-bar" aria-label="Regular linear progress bar" indicateProgress value={30} size="large" />
+        With label
+      </Flex>
+      <Flex direction="column" gap="small" align="start" style={{
+    width: "400px"
+  }}>
+        <ProgressBar id="regular-linear-progress-bar-without-label" value={30} size="large" />
+        Without label
+      </Flex>
+    </Flex>
+```
+
+## WithSecondaryValue
+
+```tsx
+<div style={{
+  width: "400px"
+}}>
+      <ProgressBar id="with-secondary-value-linear-progress-bar" aria-label="With secondary value linear progress bar" value={50} indicateProgress valueSecondary={65} size="large" />
+    </div>
+```
+
+## Multi progress bar
+
+```tsx
+const multiValues = useMemo(() => [{
+  value: 25,
+  color: "var(--primary-color)"
+}, {
+  value: 75,
+  color: "var(--warning-color)"
+}, {
+  value: 100,
+  color: "var(--positive-color)"
+}], []);
+return <div style={{
+  width: "600px"
+}}>
+        <ProgressBar id="multi-progress-bar" aria-label="Multi progress bar" value={25} size="large" indicateProgress multi multiValues={multiValues} />
+      </div>;
+```
+
+## Progress bar as a counter
+
+```tsx
+<div style={{
+  width: 200
+}}>
+      <Text type="text1" weight="bold" style={{
+    marginBottom: "var(--space-48)"
+  }}>
+        Loading files
+      </Text>
+      <Flex justify="space-between" style={{
+    marginBottom: "var(--space-4)"
+  }}>
+        <Flex gap="xs">
+          <Text>Items</Text>
+          <Icon icon={Info} style={{
+        color: "var(--icon-color)"
+      }} />
+        </Flex>
+        <Text>142/200</Text>
+      </Flex>
+      <ProgressBar id="progress-bar-as-a-counter" aria-label="Progress bar as a counter" value={71} size="large" barStyle="positive" />
+    </div>
+```
+
+## Progress bar as loading indicator
+
+```tsx
+<Box border padding="medium" style={{
+  width: 400
+}}>
+      <Flex gap="small" style={{
+    marginBottom: "var(--space-8)",
+    height: 80
+  }}>
+        <Box style={{
+      flexShrink: 0,
+      height: "100%"
+    }}>
+          <img src={Logo} alt="Frame 697.jpg" style={{
+        height: "100%"
+      }} />
+        </Box>
+        <Flex direction="column" align="stretch" justify="space-between" style={{
+      flex: 1,
+      height: "100%"
+    }}>
+          <Text type="text1" weight="bold">
+            Frame 697.jpg
+          </Text>
+          <Flex justify="space-between">
+            <Text>2KB</Text>
+            <Text>Saving...</Text>
+          </Flex>
+        </Flex>
+      </Flex>
+      <ProgressBar id="progress-bar-as-loading-indicator" aria-label="Progress bar as loading indicator" value={71} />
+    </Box>
+```
+
+## Exceeding max value
+
+```tsx
+<Flex direction="column" gap="large" align="start">
+      <Flex direction="column" gap="small" style={{
+    width: "400px"
+  }}>
+        <Text type="text1" weight="bold">
+          Standard behavior (capped at 100%)
+        </Text>
+        <ProgressBar id="standard-progress-bar" ariaLabel="Standard progress bar" value={120} max={100} indicateProgress size="large" />
+        <Text type="text2" color="secondary">
+          Value: 120, Max: 100 → Shows 100%
+        </Text>
+      </Flex>
+
+      <Flex direction="column" gap="small" style={{
+    width: "400px"
+  }}>
+        <Text type="text1" weight="bold">
+          Allowing exceeding max
+        </Text>
+        <ProgressBar id="exceeding-progress-bar" ariaLabel="Exceeding progress bar" value={120} max={100} indicateProgress allowExceedingMax size="large" barStyle="positive" />
+        <Text type="text2" color="secondary">
+          Value: 120, Max: 100 → Shows 120%
+        </Text>
+      </Flex>
+    </Flex>
+```
+

package/dist/metadata/examples/RadioButton.md

@@ -0,0 +1,41 @@
+# Storybook Code Examples
+
+## States
+
+```tsx
+<Flex gap="medium">
+      <RadioButton id="states-regular" text="Regular" />
+      <RadioButton id="states-selected" text="Selected" checked />
+      <RadioButton id="states-disabled" text="Disabled" disabled disabledReason="Disabled reason" />
+      <RadioButton id="states-disabled-checked" text="Disabled" checked disabled />
+    </Flex>
+```
+
+## Radio button in items list
+
+```tsx
+<Flex direction="column" gap="medium" align="start">
+      <div id="inbox-view-label">Inbox view options</div>
+      <RadioButton id="inbox-updates" text="Inbox updates" name="radio-buttons-group-4" defaultChecked />
+      <RadioButton id="was-mentioned" text="I was mentioned" name="radio-buttons-group-4" />
+      <RadioButton id="all-updates" text="All updates" name="radio-buttons-group-4" />
+    </Flex>
+```
+
+## Controlled Radio buttons
+
+```tsx
+const [selectedIndex, setSelectedIndex] = useState(0);
+const onClickCB = useCallback(() => {
+  setSelectedIndex(prev => (prev + 1) % 3);
+}, [setSelectedIndex]);
+const onChange = useCallback(() => {}, []);
+return <Flex direction="column" gap="medium" align="start">
+        <div id="controlled-radio-label">Controlled radio buttons</div>
+        <Button id="select-next-button" kind="secondary" onClick={onClickCB}>{`Select next radio button (Radio ${(selectedIndex + 1) % 3 + 1}) `}</Button>
+        <RadioButton id="radio-1" text="Radio 1" name="radio-buttons-group-5" checked={selectedIndex === 0} onSelect={onChange} />
+        <RadioButton id="radio-2" text="Radio 2" name="radio-buttons-group-5" checked={selectedIndex === 1} onSelect={onChange} />
+        <RadioButton id="radio-3" text="Radio 3" name="radio-buttons-group-5" checked={selectedIndex === 2} onSelect={onChange} />
+      </Flex>;
+```
+

package/dist/metadata/examples/Search.md

@@ -0,0 +1,24 @@
+# Storybook Code Examples
+
+## Sizes
+
+```tsx
+<>
+      <Search id="sizes-small" inputAriaLabel="Small search input" placeholder="Small" size="small" />
+      <Search id="sizes-medium" inputAriaLabel="Medium search input" placeholder="Medium" size="medium" />
+      <Search id="sizes-large" inputAriaLabel="Large search input" placeholder="Large" size="large" />
+    </>
+```
+
+## WithAdditionalAction
+
+```tsx
+<Search id="search-with-action" inputAriaLabel="Search with filter action" placeholder="Search with icon" renderAction={<IconButton id="filter-action-button" icon={FilterIcon} aria-label="Filter results" size="small" />} />
+```
+
+## FilterInCombobox
+
+```tsx
+<Combobox id="filter-combobox" searchInputAriaLabel="Filter options" placeholder="Placeholder text here" options={options} size="small" optionLineHeight={28} />
+```
+

package/dist/metadata/examples/Skeleton.md

@@ -0,0 +1,161 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<Flex direction="column" gap="small">
+      <Skeleton id="overview-skeleton-1" {...args} />
+      <Skeleton id="overview-skeleton-2" {...args} />
+      <Skeleton id="overview-skeleton-3" {...args} />
+    </Flex>
+```
+
+## Shapes
+
+```tsx
+<Flex align="end" gap="large">
+      <Flex direction="column" align="stretch" gap="large">
+        <Skeleton id="shapes-circle" type="circle" />
+        <Text type="text1">Circle</Text>
+      </Flex>
+      <Flex direction="column" align="stretch" gap="large">
+        <Skeleton id="shapes-square" />
+        <Text type="text1">Square</Text>
+      </Flex>
+      <Flex direction="column" align="stretch" gap="large">
+        <Skeleton id="shapes-rectangle" width={112} height={46} />
+        <Text type="text1">Rectangle</Text>
+      </Flex>
+    </Flex>
+```
+
+## Text
+
+```tsx
+<Flex align="end" gap="large">
+      <Flex direction="column" align="stretch" gap="large">
+        <Skeleton type="text" size="h1" />
+        <Text type="text1">H1</Text>
+      </Flex>
+      <Flex direction="column" align="stretch" gap="large">
+        <Skeleton type="text" size="h2" />
+        <Text type="text1">H2</Text>
+      </Flex>
+      <Flex direction="column" align="stretch" gap="large">
+        <Skeleton type="text" size="small" />
+        <Text type="text1">Paragraph</Text>
+      </Flex>
+    </Flex>
+```
+
+## ComplexExample
+
+```tsx
+return <Flex align="stretch" direction="column" gap="small">
+        <Flex gap="small">
+          <Skeleton type="circle" />
+          <Skeleton type="text" width={110} size="small" />
+        </Flex>
+        <Flex align="stretch" gap="medium">
+          <Skeleton />
+          <Flex align="stretch" direction="column" gap="small">
+            <Skeleton type="text" size="h1" />
+            <Skeleton type="text" size="h4" />
+            <Skeleton type="text" size="h4" />
+            <Skeleton type="text" size="h4" />
+            <Skeleton type="text" size="h4" width={82} />
+          </Flex>
+        </Flex>
+      </Flex>;
+```
+
+## Update in the system
+
+```tsx
+const [showSkeleton, setShowSkeleton] = useState(false);
+const [showBlock, setShowBlock] = useState(false);
+const [showReload, setShowReload] = useState(true);
+const onClickCallback = useCallback(() => {
+  setShowReload(false);
+  setShowBlock(false);
+  setShowSkeleton(true);
+  setTimeout(() => {
+    setShowSkeleton(false);
+  }, 4000);
+  setTimeout(() => {
+    setShowBlock(true);
+  }, 4000);
+}, []);
+return <Flex direction="column" gap="large" flex="1">
+        {showBlock && <Box border>
+            <Flex direction="column" align="start" gap="medium" style={{
+      width: "730px",
+      padding: "16px"
+    }}>
+              <Flex gap="small">
+                <Avatar src={person} type="img" />
+                <Text weight="bold">Julia Martinez</Text>
+              </Flex>
+              <Text type="text1" 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>
+            </Flex>
+            <Flex style={{
+      marginTop: "var(--space-24)",
+      width: "100%"
+    }}>
+              <Button style={{
+        flexGrow: 1,
+        flexShrink: 1,
+        borderBottom: "none",
+        borderRight: "none",
+        borderLeft: "none"
+      }} leftIcon={ThumbsUp} kind="secondary">
+                Like
+              </Button>
+              <Button style={{
+        flexGrow: 1,
+        flexShrink: 1,
+        borderBottom: "none",
+        borderRight: "none"
+      }} leftIcon={Reply} kind="secondary">
+                Reply
+              </Button>
+            </Flex>
+          </Box>}
+        {showSkeleton && <Box border>
+            <Flex direction="column" align="stretch" gap="medium" style={{
+      width: "730px",
+      padding: "16px"
+    }}>
+              <Flex align="center" gap="small">
+                <Skeleton type="circle" width={50} height={50} />
+                <Skeleton type="text" size="h5" width={110} />
+              </Flex>
+              <Flex direction="column" align="stretch" gap="small">
+                <Skeleton type="text" size="small" width={655} />
+                <Skeleton type="text" size="small" width={680} />
+                <Skeleton type="text" size="small" width={670} />
+                <Skeleton type="text" size="small" width={675} />
+                <Skeleton type="text" size="small" width={400} />
+              </Flex>
+            </Flex>
+            <Flex justify="center" gap={300} style={{
+      marginTop: "var(--space-24)",
+      width: "100%",
+      paddingBlock: "var(--space-8)"
+    }}>
+              <Skeleton type="text" size="h2" width={60} />
+              <Skeleton type="text" size="h2" width={60} />
+            </Flex>
+          </Box>}
+        <Button kind="secondary" onClick={onClickCallback}>
+          {showReload ? "Load update" : "Reload update"}
+        </Button>
+      </Flex>;
+```
+