oneslash-design-system 1.2.24 → 1.2.25

package/dist/stories/Alert.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Alert from "../components/alert";
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const Info: Story;
+export declare const AutoDismiss: Story;
+export declare const InlineSuccess: Story;
+export declare const InlineWarning: Story;
+export declare const InlineError: Story;
+export declare const InlineInfo: Story;
+export declare const InlineAllTypes: Story;

package/dist/stories/Alert.stories.jsx

@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+import Alert from "../components/alert";
+import Button from "../components/button";
+var meta = {
+    title: "Components/Alert",
+    component: Alert,
+    argTypes: {
+        type: {
+            control: "select",
+            options: ["success", "warning", "error", "info", "default"],
+        },
+        variant: {
+            control: "select",
+            options: ["toast", "inline"],
+        },
+        message: { control: "text" },
+        showCloseButton: { control: "boolean" },
+    },
+};
+export default meta;
+// Wrapper component to handle state
+var AlertWrapper = function (args) {
+    var _a = useState(true), open = _a[0], setOpen = _a[1];
+    return (<div>
+      <Button size="medium" type="primary" state="enabled" label="Show Alert" onClickButton={function () { return setOpen(true); }}/>
+      <Alert {...args} open={open} onClose={function () { return setOpen(false); }}/>
+    </div>);
+};
+export var Success = {
+    render: function (args) { return <AlertWrapper {...args}/>; },
+    args: {
+        type: "success",
+        message: "Operation completed successfully!",
+        showCloseButton: true,
+    },
+};
+export var Warning = {
+    render: function (args) { return <AlertWrapper {...args}/>; },
+    args: {
+        type: "warning",
+        message: "Please review your changes before proceeding.",
+        showCloseButton: true,
+    },
+};
+export var Error = {
+    render: function (args) { return <AlertWrapper {...args}/>; },
+    args: {
+        type: "error",
+        message: "An error occurred. Please try again.",
+        showCloseButton: true,
+    },
+};
+export var Info = {
+    render: function (args) { return <AlertWrapper {...args}/>; },
+    args: {
+        type: "info",
+        message: "This is an informational message.",
+        showCloseButton: true,
+    },
+};
+export var AutoDismiss = {
+    render: function (args) { return <AlertWrapper {...args}/>; },
+    args: {
+        type: "info",
+        message: "This alert will auto-dismiss in 5 seconds.",
+        showCloseButton: false,
+    },
+};
+// Inline variant stories
+var InlineAlertWrapper = function (args) {
+    var _a = useState(true), open = _a[0], setOpen = _a[1];
+    return (<div style={{ maxWidth: "500px" }}>
+      {!open && (<Button size="medium" type="primary" state="enabled" label="Show Alert" onClickButton={function () { return setOpen(true); }}/>)}
+      <Alert {...args} open={open} onClose={function () { return setOpen(false); }}/>
+    </div>);
+};
+export var InlineSuccess = {
+    render: function (args) { return <InlineAlertWrapper {...args}/>; },
+    args: {
+        type: "success",
+        message: "Your changes have been saved.",
+        variant: "inline",
+        showCloseButton: true,
+    },
+};
+export var InlineWarning = {
+    render: function (args) { return <InlineAlertWrapper {...args}/>; },
+    args: {
+        type: "warning",
+        message: "Your session will expire in 5 minutes.",
+        variant: "inline",
+        showCloseButton: true,
+    },
+};
+export var InlineError = {
+    render: function (args) { return <InlineAlertWrapper {...args}/>; },
+    args: {
+        type: "error",
+        message: "Failed to save changes. Please try again.",
+        variant: "inline",
+        showCloseButton: true,
+    },
+};
+export var InlineInfo = {
+    render: function (args) { return <InlineAlertWrapper {...args}/>; },
+    args: {
+        type: "info",
+        message: "New features are available. Check them out!",
+        variant: "inline",
+        showCloseButton: true,
+    },
+};
+export var InlineAllTypes = {
+    render: function () { return (<div style={{ display: "flex", flexDirection: "column", gap: "12px", maxWidth: "500px" }}>
+      <Alert type="success" message="Success alert message" variant="inline" showCloseButton/>
+      <Alert type="warning" message="Warning alert message" variant="inline" showCloseButton/>
+      <Alert type="error" message="Error alert message" variant="inline" showCloseButton/>
+      <Alert type="info" message="Info alert message" variant="inline" showCloseButton/>
+      <Alert type="default" message="Default alert message" variant="inline" showCloseButton/>
+    </div>); },
+};

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "../components/button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const WithIcons: Story;
+export declare const Disabled: Story;
+export declare const Small: Story;
+export declare const Large: Story;

package/dist/stories/Button.stories.jsx

@@ -0,0 +1,81 @@
+import Button from "../components/button";
+var meta = {
+    title: "Components/Button",
+    component: Button,
+    argTypes: {
+        size: {
+            control: "select",
+            options: ["small", "medium", "large"],
+        },
+        type: {
+            control: "select",
+            options: ["primary", "secondary", "tertiary", "textOnly"],
+        },
+        state: {
+            control: "select",
+            options: ["enabled", "hovered", "focused", "disabled"],
+        },
+        label: { control: "text" },
+        decoIcon: { control: "text" },
+        actionIcon: { control: "text" },
+    },
+};
+export default meta;
+export var Primary = {
+    args: {
+        size: "medium",
+        type: "primary",
+        state: "enabled",
+        label: "Primary Button",
+    },
+};
+export var Secondary = {
+    args: {
+        size: "medium",
+        type: "secondary",
+        state: "enabled",
+        label: "Secondary Button",
+    },
+};
+export var Tertiary = {
+    args: {
+        size: "medium",
+        type: "tertiary",
+        state: "enabled",
+        label: "Tertiary Button",
+    },
+};
+export var WithIcons = {
+    args: {
+        size: "medium",
+        type: "primary",
+        state: "enabled",
+        label: "With Icons",
+        decoIcon: "Star",
+        actionIcon: "ChevronRight",
+    },
+};
+export var Disabled = {
+    args: {
+        size: "medium",
+        type: "primary",
+        state: "disabled",
+        label: "Disabled Button",
+    },
+};
+export var Small = {
+    args: {
+        size: "small",
+        type: "primary",
+        state: "enabled",
+        label: "Small Button",
+    },
+};
+export var Large = {
+    args: {
+        size: "large",
+        type: "primary",
+        state: "enabled",
+        label: "Large Button",
+    },
+};

package/dist/stories/Checkbox.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Checkbox from "../components/checkBox";
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const NoLabel: Story;

package/dist/stories/Checkbox.stories.jsx

@@ -0,0 +1,45 @@
+import Checkbox from "../components/checkBox";
+var meta = {
+    title: "Components/Checkbox",
+    component: Checkbox,
+    argTypes: {
+        label: { control: "text" },
+        checked: { control: "boolean" },
+        disabled: { control: "boolean" },
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        label: "Accept terms and conditions",
+        checked: false,
+        disabled: false,
+    },
+};
+export var Checked = {
+    args: {
+        label: "I agree to the privacy policy",
+        checked: true,
+        disabled: false,
+    },
+};
+export var Disabled = {
+    args: {
+        label: "This option is disabled",
+        checked: false,
+        disabled: true,
+    },
+};
+export var DisabledChecked = {
+    args: {
+        label: "Disabled and checked",
+        checked: true,
+        disabled: true,
+    },
+};
+export var NoLabel = {
+    args: {
+        checked: false,
+        disabled: false,
+    },
+};

package/dist/stories/EmptyBox.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import EmptyBox from "../components/emptyBox";
+declare const meta: Meta<typeof EmptyBox>;
+export default meta;
+type Story = StoryObj<typeof EmptyBox>;
+export declare const Small: Story;
+export declare const Large: Story;

package/dist/stories/EmptyBox.stories.jsx

@@ -0,0 +1,30 @@
+import EmptyBox from "../components/emptyBox";
+var meta = {
+    title: "Components/EmptyBox",
+    component: EmptyBox,
+    argTypes: {
+        text: { control: "text" },
+        size: {
+            control: "select",
+            options: ["small", "large"],
+        },
+    },
+};
+export default meta;
+export var Small = {
+    args: {
+        text: "No items found",
+        size: "small",
+    },
+};
+export var Large = {
+    args: {
+        text: "No data available. Try adding some items to get started.",
+        size: "large",
+    },
+    decorators: [
+        function (Story) { return (<div style={{ height: "300px" }}>
+        <Story />
+      </div>); },
+    ],
+};

package/dist/stories/Icon.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Icon from "../components/icon";
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const CustomSize: Story;
+export declare const AllColors: Story;
+export declare const AllSizes: Story;
+export declare const CommonIcons: Story;
+export declare const StrokeWidths: Story;

package/dist/stories/Icon.stories.jsx

@@ -0,0 +1,130 @@
+import React from "react";
+import Icon from "../components/icon";
+var meta = {
+    title: "Components/Icon",
+    component: Icon,
+    argTypes: {
+        name: {
+            control: "text",
+            description: "Lucide icon name",
+        },
+        size: {
+            control: "select",
+            options: ["small", "medium", "large"],
+        },
+        color: {
+            control: "select",
+            options: ["primary", "secondary", "disabled", "error", "warning", "success", "info", "accent", "inherit"],
+        },
+        strokeWidth: {
+            control: { type: "range", min: 1, max: 4, step: 0.5 },
+        },
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        name: "House",
+        size: "medium",
+        color: "primary",
+    },
+};
+export var Small = {
+    args: {
+        name: "Settings",
+        size: "small",
+        color: "primary",
+    },
+};
+export var Large = {
+    args: {
+        name: "Star",
+        size: "large",
+        color: "primary",
+    },
+};
+export var CustomSize = {
+    args: {
+        name: "Heart",
+        size: 48,
+        color: "error",
+    },
+};
+export var AllColors = {
+    render: function (args) { return (<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <Icon {...args} color="primary"/>
+      <Icon {...args} color="secondary"/>
+      <Icon {...args} color="disabled"/>
+      <Icon {...args} color="error"/>
+      <Icon {...args} color="warning"/>
+      <Icon {...args} color="success"/>
+      <Icon {...args} color="info"/>
+      <Icon {...args} color="accent"/>
+    </div>); },
+    args: {
+        name: "Circle",
+        size: "large",
+    },
+};
+export var AllSizes = {
+    render: function (args) { return (<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <Icon {...args} size="small"/>
+      <Icon {...args} size="medium"/>
+      <Icon {...args} size="large"/>
+      <Icon {...args} size={48}/>
+    </div>); },
+    args: {
+        name: "Star",
+        color: "accent",
+    },
+};
+export var CommonIcons = {
+    render: function (args) { return (<div style={{ display: "flex", gap: "16px", flexWrap: "wrap" }}>
+      <Icon {...args} name="House"/>
+      <Icon {...args} name="Settings"/>
+      <Icon {...args} name="User"/>
+      <Icon {...args} name="Mail"/>
+      <Icon {...args} name="Bell"/>
+      <Icon {...args} name="Search"/>
+      <Icon {...args} name="Heart"/>
+      <Icon {...args} name="Star"/>
+      <Icon {...args} name="Pencil"/>
+      <Icon {...args} name="Trash2"/>
+      <Icon {...args} name="Download"/>
+      <Icon {...args} name="Upload"/>
+      <Icon {...args} name="Share"/>
+      <Icon {...args} name="Copy"/>
+      <Icon {...args} name="Check"/>
+      <Icon {...args} name="X"/>
+      <Icon {...args} name="Plus"/>
+      <Icon {...args} name="Minus"/>
+      <Icon {...args} name="ChevronLeft"/>
+      <Icon {...args} name="ChevronRight"/>
+      <Icon {...args} name="ChevronUp"/>
+      <Icon {...args} name="ChevronDown"/>
+      <Icon {...args} name="ArrowLeft"/>
+      <Icon {...args} name="ArrowRight"/>
+      <Icon {...args} name="Info"/>
+      <Icon {...args} name="CircleAlert"/>
+      <Icon {...args} name="TriangleAlert"/>
+      <Icon {...args} name="CircleCheck"/>
+    </div>); },
+    args: {
+        size: "medium",
+        color: "primary",
+    },
+};
+export var StrokeWidths = {
+    render: function (args) { return (<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <Icon {...args} strokeWidth={1}/>
+      <Icon {...args} strokeWidth={1.5}/>
+      <Icon {...args} strokeWidth={2}/>
+      <Icon {...args} strokeWidth={2.5}/>
+      <Icon {...args} strokeWidth={3}/>
+    </div>); },
+    args: {
+        name: "Heart",
+        size: "large",
+        color: "primary",
+    },
+};

package/dist/stories/IconButton.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import IconButton from "../components/iconButton";
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const IconOnly: Story;
+export declare const Selected: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const AllSizes: Story;

package/dist/stories/IconButton.stories.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import IconButton from "../components/iconButton";
+var meta = {
+    title: "Components/IconButton",
+    component: IconButton,
+    argTypes: {
+        color: {
+            control: "select",
+            options: ["primary", "secondary", "tertiary", "iconOnly"],
+        },
+        state: {
+            control: "select",
+            options: ["enabled", "selected", "disabled"],
+        },
+        size: {
+            control: "select",
+            options: ["large", "medium", "small"],
+        },
+        iconName: { control: "text" },
+        loading: { control: "boolean" },
+    },
+};
+export default meta;
+export var Primary = {
+    args: {
+        color: "primary",
+        state: "enabled",
+        size: "medium",
+        iconName: "Plus",
+    },
+};
+export var Secondary = {
+    args: {
+        color: "secondary",
+        state: "enabled",
+        size: "medium",
+        iconName: "Settings",
+    },
+};
+export var Tertiary = {
+    args: {
+        color: "tertiary",
+        state: "enabled",
+        size: "medium",
+        iconName: "Search",
+    },
+};
+export var IconOnly = {
+    args: {
+        color: "iconOnly",
+        state: "enabled",
+        size: "medium",
+        iconName: "X",
+    },
+};
+export var Selected = {
+    args: {
+        color: "primary",
+        state: "selected",
+        size: "medium",
+        iconName: "Check",
+    },
+};
+export var Disabled = {
+    args: {
+        color: "primary",
+        state: "disabled",
+        size: "medium",
+        iconName: "Plus",
+    },
+};
+export var Loading = {
+    args: {
+        color: "primary",
+        state: "enabled",
+        size: "medium",
+        iconName: "RefreshCw",
+        loading: true,
+    },
+};
+export var AllSizes = {
+    render: function () { return (<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <IconButton color="primary" state="enabled" size="small" iconName="Star"/>
+      <IconButton color="primary" state="enabled" size="medium" iconName="Star"/>
+      <IconButton color="primary" state="enabled" size="large" iconName="Star"/>
+    </div>); },
+};

package/dist/stories/Line.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Line from "../components/line";
+declare const meta: Meta<typeof Line>;
+export default meta;
+type Story = StoryObj<typeof Line>;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+export declare const InFlexContainer: Story;
+export declare const BetweenSections: Story;

package/dist/stories/Line.stories.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import Line from "../components/line";
+var meta = {
+    title: "Components/Line",
+    component: Line,
+    argTypes: {
+        direction: {
+            control: "select",
+            options: ["horizontal", "vertical"],
+        },
+    },
+};
+export default meta;
+export var Horizontal = {
+    args: {
+        direction: "horizontal",
+    },
+    decorators: [
+        function (Story) { return (<div style={{ width: "100%", padding: "16px" }}>
+        <p>Content above</p>
+        <Story />
+        <p>Content below</p>
+      </div>); },
+    ],
+};
+export var Vertical = {
+    args: {
+        direction: "vertical",
+    },
+    decorators: [
+        function (Story) { return (<div style={{ display: "flex", alignItems: "center", height: "100px", gap: "16px" }}>
+        <span>Left</span>
+        <Story />
+        <span>Right</span>
+      </div>); },
+    ],
+};
+export var InFlexContainer = {
+    render: function () { return (<div style={{ display: "flex", alignItems: "center", gap: "16px", height: "40px" }}>
+      <span>Item 1</span>
+      <Line direction="vertical"/>
+      <span>Item 2</span>
+      <Line direction="vertical"/>
+      <span>Item 3</span>
+    </div>); },
+};
+export var BetweenSections = {
+    render: function () { return (<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div>
+        <h3>Section 1</h3>
+        <p>Some content here</p>
+      </div>
+      <Line direction="horizontal"/>
+      <div>
+        <h3>Section 2</h3>
+        <p>More content here</p>
+      </div>
+      <Line direction="horizontal"/>
+      <div>
+        <h3>Section 3</h3>
+        <p>Even more content</p>
+      </div>
+    </div>); },
+};

package/dist/stories/Link.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Link from "../components/link";
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj<typeof Link>;
+export declare const Info: Story;
+export declare const Error: Story;
+export declare const Warning: Story;
+export declare const Success: Story;
+export declare const AllColors: Story;