@vibe/core 4.2.6 → 4.3.0

package/dist/metadata/examples/Combobox.md

@@ -0,0 +1,438 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const comboboxTemplate = (args: ComboboxProps) => {
+  return <DialogContentContainer>
+      <Combobox {...args} />
+    </DialogContentContainer>;
+}
+```
+
+## Default
+
+```tsx
+const options = useMemo(() => [{
+  id: "1",
+  label: "Option 1"
+}, {
+  id: "2",
+  label: "Option 2"
+}, {
+  id: "3",
+  label: "Option 3"
+}], []);
+return <Combobox placeholder="Placeholder text here" options={options} />;
+```
+
+## Combobox inside a dialog
+
+```tsx
+const options = useMemo(() => [{
+  id: "1",
+  label: "Option 1"
+}, {
+  id: "2",
+  label: "Option 2"
+}, {
+  id: "3",
+  label: "Option 3"
+}, {
+  id: "4",
+  label: "Option 4"
+}, {
+  id: "5",
+  label: "Option 5"
+}], []);
+return <DialogContentContainer>
+        <Combobox options={options} placeholder="Placeholder text here" />
+      </DialogContentContainer>;
+```
+
+## Sizes
+
+```tsx
+const options = useMemo(() => [{
+  id: "1",
+  label: "Option 1"
+}, {
+  id: "2",
+  label: "Option 2"
+}, {
+  id: "3",
+  label: "Option 3"
+}, {
+  id: "4",
+  label: "Option 4"
+}, {
+  id: "5",
+  label: "Option 5"
+}], []);
+return <Flex gap="large">
+        <DialogContentContainer>
+          <Combobox options={options} size="small" placeholder="Placeholder text here" />
+        </DialogContentContainer>
+        <DialogContentContainer>
+          <Combobox options={options} placeholder="Placeholder text here" />
+        </DialogContentContainer>
+        <DialogContentContainer>
+          <Combobox options={options} size="large" placeholder="Placeholder text here" />
+        </DialogContentContainer>
+      </Flex>;
+```
+
+## With categories
+
+```tsx
+const options = useMemo(() => [{
+  id: "1",
+  label: "Favorites",
+  categoryId: "favorites"
+}, {
+  id: "2",
+  label: "Main workspace",
+  categoryId: "workspace"
+}, {
+  id: "3",
+  label: "Client Foundations",
+  categoryId: "workspace"
+}, {
+  id: "4",
+  label: "Design",
+  categoryId: "workspace"
+}, {
+  id: "5",
+  label: "Marketing Cluster",
+  categoryId: "workspace"
+}, {
+  id: "6",
+  label: "Mobile",
+  categoryId: "workspace"
+}], []);
+const categories = useMemo(() => ({
+  favorites: {
+    id: "favorites",
+    label: "Favorites"
+  },
+  workspace: {
+    id: "Workspaces",
+    label: "Workspaces"
+  }
+}), []);
+return <Flex gap="large" justify="start" align="start">
+        <Flex direction="column" gap="medium" align="start">
+          Regular
+          <DialogContentContainer style={{
+      height: "200px"
+    }}>
+            <Combobox options={options} categories={categories} placeholder="Placeholder text here" />
+          </DialogContentContainer>
+        </Flex>
+        <Flex direction="column" gap="medium" align="start">
+          Sticky mode
+          <DialogContentContainer style={{
+      height: "200px"
+    }}>
+            <Combobox stickyCategories options={options} categories={categories} placeholder="Placeholder text here" />
+          </DialogContentContainer>
+        </Flex>
+        <Flex direction="column" gap="medium" align="start">
+          With divider
+          <DialogContentContainer style={{
+      height: "200px"
+    }}>
+            <Combobox stickyCategories options={options} categories={categories} withCategoriesDivider placeholder="Placeholder text here" />
+          </DialogContentContainer>
+        </Flex>
+      </Flex>;
+```
+
+## With icons
+
+```tsx
+const options = useMemo(() => [{
+  id: "1",
+  label: "Option 1",
+  leftIcon: Wand
+}, {
+  id: "2",
+  label: "Option 2",
+  leftIcon: ThumbsUp
+}, {
+  id: "3",
+  label: "Option 3",
+  leftIcon: Time
+}, {
+  id: "4",
+  label: "Option 4",
+  leftIcon: Update
+}, {
+  id: "5",
+  label: "Option 5",
+  leftIcon: Upgrade
+}], []);
+return <DialogContentContainer>
+        <Combobox options={options} placeholder="Placeholder text here" />
+      </DialogContentContainer>;
+```
+
+## With optionRenderer
+
+```tsx
+const options = useMemo(() => [{
+  id: "1",
+  label: "Option 1"
+}, {
+  id: "2",
+  label: "Option 2"
+}, {
+  id: "3",
+  label: "Option 3"
+}, {
+  id: "4",
+  label: "Option 4"
+}, {
+  id: "5",
+  label: "Option 5"
+}, {
+  id: "6",
+  label: "Option 6"
+}, {
+  id: "7",
+  label: "Option 7"
+}, {
+  id: "8",
+  label: "Option 8"
+}, {
+  id: "9",
+  label: "Option 9"
+}], []);
+const optionRenderer = (option: any) => <div>
+        <Icon icon={Person} /> I can render anything with {option.label}
+      </div>;
+return <DialogContentContainer>
+        <Combobox options={options} optionRenderer={optionRenderer} placeholder="Placeholder text here" maxOptionsWithoutScroll={3} />
+      </DialogContentContainer>;
+```
+
+## WithButton
+
+```tsx
+const options = useMemo(() => [{
+  id: "1",
+  label: "Option 1",
+  leftIcon: Wand
+}, {
+  id: "2",
+  label: "Option 2",
+  leftIcon: ThumbsUp
+}, {
+  id: "3",
+  label: "Option 3",
+  leftIcon: Time
+}, {
+  id: "4",
+  label: "Option 4",
+  leftIcon: Update
+}, {
+  id: "5",
+  label: "Option 5",
+  leftIcon: Upgrade
+}], []);
+return <DialogContentContainer>
+        <Flex direction="column" align="stretch">
+          <Combobox options={options} placeholder="Placeholder text here" />
+          <Button kind="tertiary" leftIcon={Edit}>
+            Edit
+          </Button>
+        </Flex>
+      </DialogContentContainer>;
+```
+
+## WithCreation
+
+```tsx
+const [options, setOptions] = useState([]);
+return <DialogContentContainer>
+        <Combobox options={options} placeholder="Type to create" addNewLabel="Create new item" onAddNew={() => setOptions([...options, {
+    id: options.length + 1,
+    label: `Option: ${options.length + 1}`
+  }])} />
+      </DialogContentContainer>;
+```
+
+## With virtualization optimization
+
+```tsx
+const options = useMemo(() => [{
+  id: "1",
+  label: "Option 1",
+  categoryId: "Group1"
+}, {
+  id: "2",
+  label: "Option 2",
+  categoryId: "Group1"
+}, {
+  id: "3",
+  label: "Option 3",
+  categoryId: "Group1"
+}, {
+  id: "4",
+  label: "Option 4",
+  categoryId: "Group1"
+}, {
+  id: "5",
+  label: "Option 5",
+  categoryId: "Group1"
+}, {
+  id: "6",
+  label: "Option 6",
+  categoryId: "Group1"
+}, {
+  id: "7",
+  label: "Option 7",
+  categoryId: "Group1"
+}, {
+  id: "8",
+  label: "Option 8",
+  categoryId: "Group1"
+}, {
+  id: "9",
+  label: "Option 9",
+  categoryId: "Group1"
+}, {
+  id: "10",
+  label: "Option 10",
+  categoryId: "Group2"
+}, {
+  id: "11",
+  label: "Option 11",
+  categoryId: "Group2"
+}, {
+  id: "12",
+  label: "Option 12",
+  categoryId: "Group2"
+}, {
+  id: "13",
+  label: "Option 13",
+  categoryId: "Group2"
+}, {
+  id: "14",
+  label: "Option 14",
+  categoryId: "Group2"
+}, {
+  id: "15",
+  label: "Option 15",
+  categoryId: "Group2"
+}, {
+  id: "16",
+  label: "Option 16",
+  categoryId: "Group2"
+}, {
+  id: "17",
+  label: "Option 17",
+  categoryId: "Group2"
+}, {
+  id: "18",
+  label: "Option 18",
+  categoryId: "Group2"
+}, {
+  id: "19",
+  label: "Option 19",
+  categoryId: "Group2"
+}, {
+  id: "20",
+  label: "Option 20",
+  categoryId: "Group2"
+}], []);
+const categories = useMemo(() => ({
+  Group1: {
+    id: "Group1",
+    label: "Group 1"
+  },
+  Group2: {
+    id: "Group2",
+    label: "Group 2"
+  }
+}), []);
+return <Flex gap="large" justify="center" align="start">
+        <Flex direction="column" gap="small" align="start">
+          Virtualization without categories
+          <DialogContentContainer>
+            <Combobox options={options} renderOnlyVisibleOptions placeholder="Placeholder text here" maxOptionsWithoutScroll={3} />
+          </DialogContentContainer>
+        </Flex>
+        <Flex direction="column" gap="small" align="start">
+          Virtualization with categories
+          <DialogContentContainer>
+            <Combobox options={options} renderOnlyVisibleOptions categories={categories} placeholder="Placeholder text here" maxOptionsWithoutScroll={3} />
+          </DialogContentContainer>
+        </Flex>
+        <Flex direction="column" gap="small" align="start">
+          Virtualization with sticky categories
+          <DialogContentContainer>
+            <Combobox stickyCategories options={options} renderOnlyVisibleOptions categories={categories} placeholder="Placeholder text here" maxOptionsWithoutScroll={3} />
+          </DialogContentContainer>
+        </Flex>
+      </Flex>;
+```
+
+## Loading state
+
+```tsx
+const options = useMemo(() => [], []);
+return <DialogContentContainer>
+        <Combobox loading options={options} placeholder="Board name" />
+      </DialogContentContainer>;
+```
+
+## Combobox as person picker
+
+```tsx
+const options = useMemo(() => [{
+  id: "1",
+  label: "Julia Martinez",
+  src: person1,
+  type: "img",
+  position: "(Frontend Developer)",
+  categoryId: "suggestedPeople"
+}, {
+  id: "2",
+  label: "Marco DiAngelo",
+  src: person2,
+  type: "img",
+  position: "(Product Designer)",
+  categoryId: "suggestedPeople"
+}, {
+  id: "3",
+  label: "Liam Caldwell",
+  src: person3,
+  type: "img",
+  position: "(Brand Designer)",
+  categoryId: "suggestedPeople"
+}], []);
+const categories = useMemo(() => ({
+  suggestedPeople: {
+    id: "suggestedPeople",
+    label: "Suggested people"
+  }
+}), []);
+const optionRenderer = (option: any) => <Flex gap="xs">
+        <Avatar customSize={22} src={option.src} type="img" key={option.id} />
+        <Text>{option.label}</Text>
+        <Text color="secondary">{option.position}</Text>
+      </Flex>;
+return <Flex style={{
+  height: "270px"
+}} flex="1" justify="center" align="start">
+        <Dialog content={() => <DialogContentContainer>
+              <Combobox options={options} categories={categories} optionRenderer={optionRenderer} size="small" placeholder="Search" />
+            </DialogContentContainer>} tooltip position="bottom" open>
+          <Button kind="secondary" size="small">
+            Select people
+          </Button>
+        </Dialog>
+      </Flex>;
+```
+

package/dist/metadata/examples/Counter.md

@@ -0,0 +1,188 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<Counter id="overview-counter" aria-label="Count of 5 items" count={5} {...args} />
+```
+
+## Sizes
+
+```tsx
+<Flex gap={160}>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="sizes-xs" aria-label="Extra small counter showing 5" count={5} size="xs" />
+        <Text>XS</Text>
+      </Flex>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="sizes-small" aria-label="Small counter showing 5" count={5} size="small" />
+        <Text>Small</Text>
+      </Flex>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="sizes-large" aria-label="Large counter showing 5" count={5} />
+        <Text>Large</Text>
+      </Flex>
+    </Flex>
+```
+
+## Colors
+
+```tsx
+<Flex gap={160}>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="colors-primary" aria-label="Primary counter showing 5" count={5} />
+        <Text>Primary</Text>
+      </Flex>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="colors-negative" aria-label="Negative counter showing 5 notifications" count={5} color="negative" />
+        <Text>Negative or notification</Text>
+      </Flex>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="colors-dark" aria-label="Dark counter showing 5" count={5} color="dark" />
+        <Text>Dark</Text>
+      </Flex>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="colors-light" aria-label="Light counter showing 5" count={5} color="light" />
+        <Text>Light</Text>
+      </Flex>
+    </Flex>
+```
+
+## Outline
+
+```tsx
+<Flex gap={160}>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="outline-primary" aria-label="Primary outline counter showing 5" count={5} kind="line" />
+        <Text>Primary</Text>
+      </Flex>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="outline-negative" aria-label="Negative outline counter showing 5 notifications" count={5} color="negative" kind="line" />
+        <Text>Negative or notification</Text>
+      </Flex>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="outline-dark" aria-label="Dark outline counter showing 5" count={5} color="dark" kind="line" />
+        <Text>Dark</Text>
+      </Flex>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="outline-light" aria-label="Light outline counter showing 5" count={5} color="light" kind="line" />
+        <Text>Light</Text>
+      </Flex>
+    </Flex>
+```
+
+## Limits
+
+```tsx
+<Flex gap={160}>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="limits-one-digit" aria-label="Counter showing 9+ items (10 with 1 digit limit)" count={10} maxDigits={1} />
+        <Text>One digit limit</Text>
+      </Flex>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="limits-two-digit" aria-label="Counter showing 99+ items (100 with 2 digit limit)" count={100} maxDigits={2} />
+        <Text>Two digits limit</Text>
+      </Flex>
+      <Flex direction="column" gap="large" style={{
+    width: "100px"
+  }} align="start">
+        <Counter id="limits-three-digit" aria-label="Counter showing 1000 items" count={1000} />
+        <Text>Three digits limit</Text>
+      </Flex>
+    </Flex>
+```
+
+## NotificationCounter
+
+```tsx
+return <div style={{
+  position: "relative"
+}}>
+        <Avatar id="notification-avatar" type="icon" icon={Notifications} backgroundColor="royal" aria-label="Notifications" />
+        <div style={{
+    position: "absolute",
+    top: "-5px",
+    right: "-5px"
+  }}>
+          <Counter id="notification-counter" aria-label="5 unread notifications" count={5} maxDigits={1} color="negative" />
+        </div>
+      </div>;
+```
+
+## CounterOnInboxFilters
+
+```tsx
+<Flex gap={28}>
+      <Flex direction="column" gap="large" align="start">
+        <Text>UX Writing & microcopy Re...</Text>
+        <Text>Mobile Data- Iteration Plan...</Text>
+        <Text>Q Plans.</Text>
+      </Flex>
+      <Flex direction="column" gap="large" align="start">
+        <Counter id="inbox-counter-1" aria-label="195 items in UX Writing & microcopy" count={195} color="dark" />
+        <Counter id="inbox-counter-2" aria-label="141 items in Mobile Data Iteration Plan" count={141} color="dark" />
+        <Counter id="inbox-counter-3" aria-label="99 items in Q Plans" count={99} color="dark" />
+      </Flex>
+    </Flex>
+```
+
+## CountTheNumberOfUpdates
+
+```tsx
+<Flex gap={12} direction="column" align="start">
+      <Icon icon={AddUpdate} size="36" />
+      <Divider />
+      <div style={{
+    position: "relative"
+  }}>
+        <Icon icon={Update} size="36" />
+        <div style={{
+      position: "absolute",
+      bottom: 0,
+      right: -3
+    }}>
+          <Counter count={5} size="small" id="count-the-number-of-updates-1" aria-label="5 updates" />
+        </div>
+      </div>
+      <Divider />
+      <div style={{
+    position: "relative"
+  }}>
+        <Icon icon={Update} size="36" />
+        <div style={{
+      position: "absolute",
+      bottom: 0,
+      right: -3
+    }}>
+          <Counter count={5} color="dark" size="small" id="count-the-number-of-updates-2" aria-label="5 updates" />
+        </div>
+      </div>
+    </Flex>
+```
+

package/dist/metadata/examples/DatePicker.md

@@ -0,0 +1,43 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const DatePickerTemplate = (args: DatePickerProps) => {
+  const [date, setDate] = useState(new Date("2023-05-01"));
+  return <DatePicker id="overview-date-picker" date={date} onDateChange={setDate} {...args} />;
+}
+```
+
+## Single Day
+
+```tsx
+const [date, setDate] = useState(new Date("2023-05-01"));
+return <DialogContentContainer>
+        <DatePicker id="single-day-picker" date={date} onDateChange={setDate} />
+      </DialogContentContainer>;
+```
+
+## Date Range
+
+```tsx
+const [date, setDate] = useState({
+  start: new Date("2023-05-01"),
+  end: new Date("2023-05-03")
+});
+return <DialogContentContainer>
+        <DatePicker id="date-range-picker" mode="range" date={date.start} endDate={date.end} onDateChange={range => setDate({
+    start: range.date,
+    end: range.endDate
+  })} />
+      </DialogContentContainer>;
+```
+
+## With Locale
+
+```tsx
+// import ja from 'date-fns/locale/ja';
+const [date, setDate] = useState(new Date("2023-05-01"));
+return <DatePicker id="ja-locale-picker" date={date} onDateChange={setDate} locale={ja} />;
+```
+