@vibe/core 4.2.6 → 4.3.0

package/dist/metadata/examples/EditableHeading.md

@@ -0,0 +1,33 @@
+# Storybook Code Examples
+
+## Types
+
+```tsx
+<Flex direction="column" gap="large" align="start">
+      <Flex gap="large">
+        <EditableHeading id="h1-light" aria-label="H1 light heading" type="h1" weight="light" value="H1 Light" />
+        <EditableHeading id="h1-normal" aria-label="H1 normal heading" type="h1" weight="normal" value="H1 Normal" />
+        <EditableHeading id="h1-medium" aria-label="H1 medium heading" type="h1" weight="medium" value="H1 Medium" />
+        <EditableHeading id="h1-bold" aria-label="H1 bold heading" type="h1" weight="bold" value="H1 Bold" />
+      </Flex>
+      <Flex gap="large">
+        <EditableHeading id="h2-light" aria-label="H2 light heading" type="h2" weight="light" value="H2 Light" />
+        <EditableHeading id="h2-normal" aria-label="H2 normal heading" type="h2" weight="normal" value="H2 Normal" />
+        <EditableHeading id="h2-medium" aria-label="H2 medium heading" type="h2" weight="medium" value="H2 Medium" />
+        <EditableHeading id="h2-bold" aria-label="H2 bold heading" type="h2" weight="bold" value="H2 Bold" />
+      </Flex>
+      <Flex gap="large">
+        <EditableHeading id="h3-light" aria-label="H3 light heading" type="h3" weight="light" value="H3 Light" />
+        <EditableHeading id="h3-normal" aria-label="H3 normal heading" type="h3" weight="normal" value="H3 Normal" />
+        <EditableHeading id="h3-medium" aria-label="H3 medium heading" type="h3" weight="medium" value="H3 Medium" />
+        <EditableHeading id="h3-bold" aria-label="H3 bold heading" type="h3" weight="bold" value="H3 Bold" />
+      </Flex>
+    </Flex>
+```
+
+## WithPlaceholder
+
+```tsx
+<EditableHeading id="with-placeholder" aria-label="Editable heading with placeholder" value="Clear heading to see placeholder" placeholder="Enter your heading here..." />
+```
+

package/dist/metadata/examples/EditableText.md

@@ -0,0 +1,36 @@
+# Storybook Code Examples
+
+## Types
+
+```tsx
+<Flex direction="column" gap="large" align="start">
+      <Flex gap="large">
+        <EditableText aria-label="Text1 normal editable text" type="text1" weight="normal" value="Text1 Normal" />
+        <EditableText aria-label="Text1 medium editable text" type="text1" weight="medium" value="Text1 Medium" />
+        <EditableText aria-label="Text1 bold editable text" type="text1" weight="bold" value="Text1 Bold" />
+      </Flex>
+      <Flex gap="large">
+        <EditableText aria-label="Text2 normal editable text" type="text2" weight="normal" value="Text2 Normal" />
+        <EditableText aria-label="Text2 medium editable text" type="text2" weight="medium" value="Text2 Medium" />
+        <EditableText aria-label="Text2 bold editable text" type="text2" weight="bold" value="Text2 Bold" />
+      </Flex>
+      <Flex gap="large">
+        <EditableText aria-label="Text3 normal editable text" type="text3" weight="normal" value="Text3 Normal" />
+        <EditableText aria-label="Text3 medium editable text" type="text3" weight="medium" value="Text3 Medium" />
+      </Flex>
+    </Flex>
+```
+
+## Multiline
+
+```tsx
+<EditableText aria-label="Multiline editable text" type="text1" weight="normal" multiline value={`This is a multiline
+here's the second line`} />
+```
+
+## WithPlaceholder
+
+```tsx
+<EditableText aria-label="Editable text with placeholder" value="Clear text to see placeholder" placeholder="Enter your text here..." />
+```
+

package/dist/metadata/examples/EmptyState.md

@@ -0,0 +1,192 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+<EmptyState title="The title should be concise and reflect the purpose" description="This optional paragraph should be use to extend the title. Keep it short and to the point. For longer texts add a link below." visual={<img src={emptyStateImage} alt="No items found" width={280} height={184} />} mainAction={{
+  text: "Main Action",
+  onClick: () => {
+    console.log("Main action clicked");
+  }
+}} supportingAction={{
+  text: "Read more",
+  href: "#",
+  onClick: () => {
+    console.log("Supporting action clicked");
+  }
+}} {...args} />
+```
+
+## Default
+
+```tsx
+<EmptyState title="Visualize data from multiple boards" description="Use charts, timelines, and other widgets to see your data clearly." visual={<img src={emptyStateImage} alt="No items found" width={280} height={184} />} mainAction={{
+  text: "Add your first widget",
+  onClick: () => {
+    console.log("Main action clicked");
+  }
+}} supportingAction={{
+  text: "Read more",
+  href: "#",
+  onClick: () => {
+    console.log("Supporting action clicked");
+  }
+}} {...args} />
+```
+
+## Without title
+
+```tsx
+<EmptyState description="No data available yet. Add some items to get started." visual={<img src={emptyStateImage} alt="No data available" width={280} height={184} />} mainAction={{
+  text: "Add item",
+  onClick: () => {
+    console.log("Main action clicked");
+  }
+}} supportingAction={{
+  text: "Read more",
+  href: "#",
+  onClick: () => {
+    console.log("Supporting action clicked");
+  }
+}} {...args} />
+```
+
+## Compact
+
+```tsx
+<EmptyState title="Visualize data from multiple boards" description="Use charts, timelines, and other widgets to see your data clearly." visual={<img src={emptyStateImage} alt="No notifications" width={280} height={184} />} layout="compact" mainAction={{
+  text: "Add your first widget",
+  onClick: () => {
+    console.log("Main action clicked");
+  }
+}} supportingAction={{
+  text: "Read more",
+  href: "#",
+  onClick: () => {
+    console.log("Supporting action clicked");
+  }
+}} {...args} />
+```
+
+## With button supporting action
+
+```tsx
+<EmptyState title="No files uploaded" description="Upload files to share with your team members." visual={<img src={emptyStateImage} alt="No files uploaded" width={280} height={184} />} mainAction={{
+  kind: "primary",
+  text: "Upload files",
+  leftIcon: Update,
+  onClick: () => {
+    console.log("Main action clicked");
+  }
+}} supportingAction={{
+  text: "Import from drive",
+  leftIcon: Download,
+  onClick: () => {
+    console.log("Supporting action clicked");
+  }
+}} {...args} />
+```
+
+## With disabled actions
+
+```tsx
+<EmptyState title="Processing data" description="Your data is being processed. This might take a few minutes." visual={<img src={emptyStateImage} alt="Processing data" width={280} height={184} />} mainAction={{
+  kind: "secondary",
+  text: "Refresh",
+  disabled: true,
+  loading: true,
+  onClick: () => {
+    console.log("Main action clicked");
+  }
+}} supportingAction={{
+  text: "Cancel",
+  disabled: true,
+  onClick: () => {
+    console.log("Supporting action clicked");
+  }
+}} {...args} />
+```
+
+## Actions comparison
+
+```tsx
+<Flex direction="row" gap="large">
+      <EmptyState title="Your favorites are empty" description="Add boards, docs, or dashboards to your favorites for quick access." visual={<img src={emptyStateImage} alt="No items found" width={280} height={184} />} mainAction={{
+    kind: "secondary",
+    text: "Add favorites",
+    onClick: () => {
+      console.log("First view - Add item clicked");
+    }
+  }} />
+      <EmptyState title="Your favorites are empty" description="Add boards, docs, or dashboards to your favorites for quick access." visual={<img src={emptyStateImage} alt="No items found" width={280} height={184} />} mainAction={{
+    kind: "primary",
+    text: "Add favorites",
+    onClick: () => {
+      console.log("Second view - View details clicked");
+    }
+  }} {...args} />
+    </Flex>
+```
+
+## With link only
+
+```tsx
+<EmptyState title="This workspace is empty" description='To get started, click the "+" above, then click "add new board".' supportingAction={{
+  href: "https://example.com/help",
+  text: "Read more"
+}} {...args} />
+```
+
+## With two buttons
+
+```tsx
+<EmptyState title="This workspace is empty" description="Get started by choosing a board template or creating a board from scratch." mainAction={{
+  kind: "secondary",
+  text: "Browse templates",
+  onClick: () => {
+    console.log("Main action clicked");
+  }
+}} supportingAction={{
+  kind: "tertiary",
+  text: "Start from scratch",
+  onClick: () => {
+    console.log("Supporting action clicked");
+  }
+}} {...args} />
+```
+
+## With and without title comparison
+
+```tsx
+<Flex direction="row" gap="large" justify="space-between" style={{
+  width: "100%"
+}}>
+      <EmptyState title="Create your first Gantt chart" description="Gantt charts keep your projects organized." mainAction={{
+    kind: "secondary",
+    text: "Connect boards to start",
+    onClick: () => {
+      console.log("Main action clicked");
+    }
+  }} />
+      <EmptyState description="Create your first Gantt chart" mainAction={{
+    kind: "secondary",
+    text: "Connect boards to start",
+    onClick: () => {
+      console.log("Main action clicked");
+    }
+  }} {...args} />
+    </Flex>
+```
+
+## With action element props
+
+```tsx
+<EmptyState title="No notifications" description="You're all caught up! Check back later for new notifications." visual={<img src={emptyStateImage} alt="No notifications" width={280} height={184} />} mainAction={<Button kind="secondary" onClick={() => {
+  console.log("Main action clicked");
+}}>
+          Check notifications
+        </Button>} supportingAction={<Link href="#" text="Manage notification settings" onClick={() => {
+  console.log("Supporting action clicked");
+}} />} {...args} />
+```
+

package/dist/metadata/examples/ExpandCollapse.md

@@ -0,0 +1,77 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+return <div style={{
+  width: "300px"
+}}>
+        <ExpandCollapse title="Expand collapse" {...args}>
+          <Text type="text2" maxLines={2}>
+            Insert here any component that you want, here is a robot for you
+          </Text>
+          <Icon type="svg" icon={Robot} size={40} />
+        </ExpandCollapse>
+      </div>;
+```
+
+## OpenByDefault
+
+```tsx
+<div style={{
+  width: "300px"
+}}>
+      <ExpandCollapse title="Open by default" defaultOpenState>
+        <Text type="text2" maxLines={2}>
+          Insert here any component that you want
+        </Text>
+      </ExpandCollapse>
+    </div>
+```
+
+## ControlledOpenState
+
+```tsx
+const [open, setOpen] = useState(false);
+return <div style={{
+  width: "300px"
+}}>
+        <ExpandCollapse title="Controlled open state" open={open} onClick={() => setOpen(prevState => !prevState)}>
+          <Text type="text2" maxLines={2}>
+            Insert here any component that you want
+          </Text>
+        </ExpandCollapse>
+      </div>;
+```
+
+## CustomHeaderRenderer
+
+```tsx
+const ExpandCollapseCustomHeadingComponent = () => {
+  return <Heading type="h3">Any component you want</Heading>;
+};
+return <div style={{
+  width: "300px"
+}}>
+        <ExpandCollapse headerComponentRenderer={ExpandCollapseCustomHeadingComponent}>
+          <Text type="text2" maxLines={2}>
+            Insert here any component that you want
+          </Text>
+        </ExpandCollapse>
+      </div>;
+```
+
+## WithoutBorders
+
+```tsx
+<div style={{
+  width: "300px"
+}}>
+      <ExpandCollapse hideBorder title="Without borders">
+        <Text type="text2" maxLines={2}>
+          Insert here any component that you want
+        </Text>
+      </ExpandCollapse>
+    </div>
+```
+