oneslash-design-system 1.2.24 → 1.2.25

package/dist/stories/Link.stories.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import Link from "../components/link";
+var meta = {
+    title: "Components/Link",
+    component: Link,
+    argTypes: {
+        href: { control: "text" },
+        color: {
+            control: "select",
+            options: ["info", "error", "warning", "success"],
+        },
+        size: {
+            control: "select",
+            options: ["h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "caption"],
+        },
+        openInNewTab: { control: "boolean" },
+    },
+};
+export default meta;
+export var Info = {
+    args: {
+        href: "https://example.com",
+        children: "Info Link",
+        color: "info",
+        size: "body1",
+    },
+};
+export var Error = {
+    args: {
+        href: "https://example.com",
+        children: "Error Link",
+        color: "error",
+        size: "body1",
+    },
+};
+export var Warning = {
+    args: {
+        href: "https://example.com",
+        children: "Warning Link",
+        color: "warning",
+        size: "body1",
+    },
+};
+export var Success = {
+    args: {
+        href: "https://example.com",
+        children: "Success Link",
+        color: "success",
+        size: "body1",
+    },
+};
+export var AllColors = {
+    render: function () { return (<div style={{ display: "flex", gap: "16px" }}>
+      <Link href="https://example.com" color="info">Info</Link>
+      <Link href="https://example.com" color="error">Error</Link>
+      <Link href="https://example.com" color="warning">Warning</Link>
+      <Link href="https://example.com" color="success">Success</Link>
+    </div>); },
+};

package/dist/stories/LoadingScreen.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import LoadingScreen, { LoadingSmall } from "../components/loadingScreen";
+declare const meta: Meta<typeof LoadingScreen>;
+export default meta;
+type Story = StoryObj<typeof LoadingScreen>;
+export declare const Default: Story;
+export declare const Small: StoryObj<typeof LoadingSmall>;
+export declare const Medium: StoryObj<typeof LoadingSmall>;
+export declare const Large: StoryObj<typeof LoadingSmall>;
+export declare const AllSizes: Story;

package/dist/stories/LoadingScreen.stories.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import LoadingScreen, { LoadingSmall } from "../components/loadingScreen";
+var meta = {
+    title: "Components/LoadingScreen",
+    component: LoadingScreen,
+};
+export default meta;
+export var Default = {
+    decorators: [
+        function (Story) { return (<div style={{ height: "300px" }}>
+        <Story />
+      </div>); },
+    ],
+};
+export var Small = {
+    render: function () { return <LoadingSmall size="small"/>; },
+};
+export var Medium = {
+    render: function () { return <LoadingSmall size="medium"/>; },
+};
+export var Large = {
+    render: function () { return <LoadingSmall size="large"/>; },
+};
+export var AllSizes = {
+    render: function () { return (<div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <div>
+        <p style={{ marginBottom: "8px" }}>Small</p>
+        <LoadingSmall size="small"/>
+      </div>
+      <div>
+        <p style={{ marginBottom: "8px" }}>Medium</p>
+        <LoadingSmall size="medium"/>
+      </div>
+      <div>
+        <p style={{ marginBottom: "8px" }}>Large</p>
+        <LoadingSmall size="large"/>
+      </div>
+    </div>); },
+};

package/dist/stories/Menu.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Menu from "../components/menu";
+declare const meta: Meta<typeof Menu>;
+export default meta;
+type Story = StoryObj<typeof Menu>;
+export declare const Default: Story;
+export declare const WithSelectedItem: Story;
+export declare const WithTags: Story;

package/dist/stories/Menu.stories.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Menu from "../components/menu";
+import MenuItem from "../components/menuItem";
+var meta = {
+    title: "Components/Menu",
+    component: Menu,
+    argTypes: {
+        width: { control: "text" },
+    },
+};
+export default meta;
+export var Default = {
+    render: function (args) { return (<Menu {...args}>
+      <MenuItem label="Profile" iconName="User"/>
+      <MenuItem label="Settings" iconName="Settings"/>
+      <MenuItem label="Logout" iconName="LogOut"/>
+    </Menu>); },
+    args: {
+        width: 200,
+    },
+};
+export var WithSelectedItem = {
+    render: function (args) { return (<Menu {...args}>
+      <MenuItem label="Dashboard" iconName="Home"/>
+      <MenuItem label="Projects" iconName="Folder" isSelected/>
+      <MenuItem label="Team" iconName="Users"/>
+      <MenuItem label="Settings" iconName="Settings"/>
+    </Menu>); },
+    args: {
+        width: 200,
+    },
+};
+export var WithTags = {
+    render: function (args) { return (<Menu {...args}>
+      <MenuItem label="Inbox" iconName="Mail" tag={{ label: "12" }}/>
+      <MenuItem label="Notifications" iconName="Bell" tag={{ label: "New" }}/>
+      <MenuItem label="Messages" iconName="MessageSquare"/>
+    </Menu>); },
+    args: {
+        width: 220,
+    },
+};

package/dist/stories/MenuItem.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import MenuItem from "../components/menuItem";
+declare const meta: Meta<typeof MenuItem>;
+export default meta;
+type Story = StoryObj<typeof MenuItem>;
+export declare const Default: Story;
+export declare const Selected: Story;
+export declare const WithRightIcon: Story;
+export declare const WithTag: Story;
+export declare const WithUserImage: Story;
+export declare const LargeSize: Story;

package/dist/stories/MenuItem.stories.jsx

@@ -0,0 +1,62 @@
+import MenuItem from "../components/menuItem";
+var meta = {
+    title: "Components/MenuItem",
+    component: MenuItem,
+    argTypes: {
+        label: { control: "text" },
+        iconName: { control: "text" },
+        isSelected: { control: "boolean" },
+        size: {
+            control: "select",
+            options: ["medium", "large"],
+        },
+        iconRight: { control: "text" },
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        label: "Menu Item",
+        iconName: "File",
+        isSelected: false,
+    },
+};
+export var Selected = {
+    args: {
+        label: "Selected Item",
+        iconName: "Check",
+        isSelected: true,
+    },
+};
+export var WithRightIcon = {
+    args: {
+        label: "Expandable Item",
+        iconName: "Folder",
+        iconRight: "ChevronRight",
+        isSelected: false,
+    },
+};
+export var WithTag = {
+    args: {
+        label: "Notifications",
+        iconName: "Bell",
+        tag: { label: "5", iconName: "Star" },
+        isSelected: false,
+    },
+};
+export var WithUserImage = {
+    args: {
+        label: "John Doe",
+        userHandle: "johndoe",
+        userImgUrl: "",
+        isSelected: false,
+    },
+};
+export var LargeSize = {
+    args: {
+        label: "Large Menu Item",
+        iconName: "Settings",
+        size: "large",
+        isSelected: false,
+    },
+};

package/dist/stories/Modal.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Modal from "../components/modal";
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Default: Story;
+export declare const Large: Story;
+export declare const NoTitle: Story;
+export declare const WithActions: Story;
+export declare const LongContent: Story;

package/dist/stories/Modal.stories.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import Modal from "../components/modal";
+import Button from "../components/button";
+var meta = {
+    title: "Components/Modal",
+    component: Modal,
+    argTypes: {
+        title: { control: "text" },
+        size: {
+            control: "select",
+            options: ["small", "medium", "large"],
+        },
+    },
+};
+export default meta;
+var ModalWrapper = function (args) {
+    var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1];
+    return (<div>
+      <Button size="medium" type="primary" state="enabled" label="Open Modal" onClickButton={function () { return setIsOpen(true); }}/>
+      <Modal {...args} isOpen={isOpen} onClose={function () { return setIsOpen(false); }}>
+        {args.children}
+      </Modal>
+    </div>);
+};
+export var Default = {
+    render: function (args) { return <ModalWrapper {...args}/>; },
+    args: {
+        title: "Modal Title",
+        children: "This is the modal content. You can put any content here.",
+        size: "medium",
+        actions: (<div style={{ display: "flex", gap: "8px" }}>
+        <Button size="medium" type="tertiary" state="enabled" label="Cancel"/>
+        <Button size="medium" type="primary" state="enabled" label="Confirm"/>
+      </div>),
+    },
+};
+export var Large = {
+    render: function (args) { return <ModalWrapper {...args}/>; },
+    args: {
+        title: "Large Modal",
+        children: "This is a larger modal for more complex content.",
+        size: "large",
+    },
+};
+export var NoTitle = {
+    render: function (args) { return <ModalWrapper {...args}/>; },
+    args: {
+        children: "Modal without a title. Content goes directly here.",
+        size: "medium",
+    },
+};
+export var WithActions = {
+    render: function (args) { return <ModalWrapper {...args}/>; },
+    args: {
+        title: "Confirm Action",
+        children: "Are you sure you want to proceed with this action?",
+        size: "medium",
+        actions: (<div style={{ display: "flex", gap: "8px", justifyContent: "flex-end", width: "100%" }}>
+        <Button size="medium" type="tertiary" state="enabled" label="Cancel"/>
+        <Button size="medium" type="primary" state="enabled" label="Delete"/>
+      </div>),
+    },
+};
+var longContent = (<div>
+    {Array.from({ length: 30 }, function (_, i) { return (<p key={i}>
+        This is paragraph {i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>); })}
+  </div>);
+export var LongContent = {
+    render: function (args) { return <ModalWrapper {...args}/>; },
+    args: {
+        title: "Scrollable Modal",
+        children: longContent,
+        size: "medium",
+    },
+};

package/dist/stories/Navigation.stories.d.ts

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

package/dist/stories/Navigation.stories.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Navigation from "../components/navigation";
+import MenuItem from "../components/menuItem";
+var meta = {
+    title: "Components/Navigation",
+    component: Navigation,
+};
+export default meta;
+export var Default = {
+    render: function () { return (<div style={{ height: "400px" }}>
+      <Navigation>
+        <MenuItem label="Home" iconName="Home" isSelected/>
+        <MenuItem label="Projects" iconName="Folder"/>
+        <MenuItem label="Team" iconName="Users"/>
+        <MenuItem label="Calendar" iconName="Calendar"/>
+        <MenuItem label="Settings" iconName="Settings"/>
+      </Navigation>
+    </div>); },
+};
+export var WithNestedItems = {
+    render: function () { return (<div style={{ height: "500px" }}>
+      <Navigation>
+        <MenuItem label="Dashboard" iconName="LayoutDashboard" isSelected/>
+        <MenuItem label="Projects" iconName="Folder" iconRight="ChevronRight"/>
+        <MenuItem label="Tasks" iconName="CheckSquare" tag={{ label: "5" }}/>
+        <MenuItem label="Messages" iconName="MessageSquare" tag={{ label: "12" }}/>
+        <MenuItem label="Reports" iconName="BarChart2"/>
+        <MenuItem label="Settings" iconName="Settings"/>
+      </Navigation>
+    </div>); },
+};

package/dist/stories/Popover.stories.d.ts

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

package/dist/stories/Popover.stories.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useRef } from "react";
+import Popover from "../components/popover";
+import Button from "../components/button";
+import Menu from "../components/menu";
+import MenuItem from "../components/menuItem";
+var meta = {
+    title: "Components/Popover",
+    component: Popover,
+};
+export default meta;
+var PopoverWrapper = function () {
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    var buttonRef = useRef(null);
+    return (<div style={{ padding: "100px" }}>
+      <div ref={buttonRef} style={{ display: "inline-block" }}>
+        <Button size="medium" type="primary" state="enabled" label="Open Popover" onClickButton={function () { return setOpen(!open); }}/>
+      </div>
+      <Popover open={open} anchorEl={buttonRef.current} onClose={function () { return setOpen(false); }}>
+        <div style={{ padding: "8px" }}>
+          <p>Popover content goes here</p>
+        </div>
+      </Popover>
+    </div>);
+};
+export var Default = {
+    render: function () { return <PopoverWrapper />; },
+};
+var PopoverWithMenuWrapper = function () {
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    var buttonRef = useRef(null);
+    return (<div style={{ padding: "100px" }}>
+      <div ref={buttonRef} style={{ display: "inline-block" }}>
+        <Button size="medium" type="secondary" state="enabled" label="Actions" onClickButton={function () { return setOpen(!open); }}/>
+      </div>
+      <Popover open={open} anchorEl={buttonRef.current} onClose={function () { return setOpen(false); }}>
+        <Menu width={180}>
+          <MenuItem label="Edit" iconName="Edit" onClick={function () { return setOpen(false); }}/>
+          <MenuItem label="Duplicate" iconName="Copy" onClick={function () { return setOpen(false); }}/>
+          <MenuItem label="Archive" iconName="Archive" onClick={function () { return setOpen(false); }}/>
+          <MenuItem label="Delete" iconName="Trash2" onClick={function () { return setOpen(false); }}/>
+        </Menu>
+      </Popover>
+    </div>);
+};
+export var WithMenu = {
+    render: function () { return <PopoverWithMenuWrapper />; },
+};

package/dist/stories/RadioGroup.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import RadioGroup from "../components/radioGroup";
+declare const meta: Meta<typeof RadioGroup>;
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;
+export declare const PaymentOptions: Story;

package/dist/stories/RadioGroup.stories.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import RadioGroup from "../components/radioGroup";
+var meta = {
+    title: "Components/RadioGroup",
+    component: RadioGroup,
+    argTypes: {
+        direction: {
+            control: "select",
+            options: ["horizontal", "vertical"],
+        },
+    },
+};
+export default meta;
+var RadioGroupWrapper = function (args) {
+    var _a = useState(args.selectedValue || "option1"), selected = _a[0], setSelected = _a[1];
+    return (<RadioGroup {...args} selectedValue={selected} onChange={setSelected}/>);
+};
+export var Vertical = {
+    render: function (args) { return <RadioGroupWrapper {...args}/>; },
+    args: {
+        options: [
+            { label: "Option 1", value: "option1" },
+            { label: "Option 2", value: "option2" },
+            { label: "Option 3", value: "option3" },
+        ],
+        selectedValue: "option1",
+        direction: "vertical",
+    },
+};
+export var Horizontal = {
+    render: function (args) { return <RadioGroupWrapper {...args}/>; },
+    args: {
+        options: [
+            { label: "Small", value: "small" },
+            { label: "Medium", value: "medium" },
+            { label: "Large", value: "large" },
+        ],
+        selectedValue: "medium",
+        direction: "horizontal",
+    },
+};
+export var PaymentOptions = {
+    render: function (args) { return <RadioGroupWrapper {...args}/>; },
+    args: {
+        options: [
+            { label: "Credit Card", value: "credit" },
+            { label: "PayPal", value: "paypal" },
+            { label: "Bank Transfer", value: "bank" },
+        ],
+        selectedValue: "credit",
+        direction: "vertical",
+    },
+};

package/dist/stories/Select.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Select from "../components/select";
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const WithIcons: Story;
+export declare const WithDecoIcon: Story;
+export declare const Disabled: Story;
+export declare const MultiSelect: Story;

package/dist/stories/Select.stories.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import Select from "../components/select";
+var meta = {
+    title: "Components/Select",
+    component: Select,
+    argTypes: {
+        placeholder: { control: "text" },
+        disabled: { control: "boolean" },
+        multiple: { control: "boolean" },
+        width: { control: "text" },
+        decoIconName: { control: "text" },
+    },
+};
+export default meta;
+var SelectWrapper = function (args) {
+    var _a = useState(args.value || ""), value = _a[0], setValue = _a[1];
+    return <Select {...args} value={value} onChange={setValue}/>;
+};
+var MultiSelectWrapper = function (args) {
+    var _a = useState(args.value || []), values = _a[0], setValues = _a[1];
+    return <Select {...args} value={values} onChange={setValues}/>;
+};
+export var Default = {
+    render: function (args) { return <SelectWrapper {...args}/>; },
+    args: {
+        placeholder: "Select an option",
+        options: [
+            { value: "option1", label: "Option 1" },
+            { value: "option2", label: "Option 2" },
+            { value: "option3", label: "Option 3" },
+        ],
+        width: 200,
+    },
+};
+export var WithIcons = {
+    render: function (args) { return <SelectWrapper {...args}/>; },
+    args: {
+        placeholder: "Choose a status",
+        options: [
+            { value: "active", label: "Active", iconName: "CheckCircle" },
+            { value: "pending", label: "Pending", iconName: "Clock" },
+            { value: "inactive", label: "Inactive", iconName: "XCircle" },
+        ],
+        width: 200,
+    },
+};
+export var WithDecoIcon = {
+    render: function (args) { return <SelectWrapper {...args}/>; },
+    args: {
+        placeholder: "Select category",
+        decoIconName: "Folder",
+        options: [
+            { value: "work", label: "Work" },
+            { value: "personal", label: "Personal" },
+            { value: "other", label: "Other" },
+        ],
+        width: 200,
+    },
+};
+export var Disabled = {
+    render: function (args) { return <SelectWrapper {...args}/>; },
+    args: {
+        placeholder: "Disabled select",
+        disabled: true,
+        options: [
+            { value: "option1", label: "Option 1" },
+            { value: "option2", label: "Option 2" },
+        ],
+        width: 200,
+    },
+};
+export var MultiSelect = {
+    render: function (args) { return <MultiSelectWrapper {...args}/>; },
+    args: {
+        placeholder: "Select multiple",
+        multiple: true,
+        options: [
+            { value: "react", label: "React" },
+            { value: "vue", label: "Vue" },
+            { value: "angular", label: "Angular" },
+            { value: "svelte", label: "Svelte" },
+        ],
+        width: 250,
+    },
+};

package/dist/stories/Tab.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Tab from "../components/tab";
+declare const meta: Meta<typeof Tab>;
+export default meta;
+type Story = StoryObj<typeof Tab>;
+export declare const Default: Story;
+export declare const Selected: Story;
+export declare const WithDecoIcon: Story;
+export declare const WithActionIcon: Story;
+export declare const WithBothIcons: Story;
+export declare const TabGroup: Story;

package/dist/stories/Tab.stories.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import Tab from "../components/tab";
+import TabsContainer from "../components/tabsContainer";
+var meta = {
+    title: "Components/Tab",
+    component: Tab,
+    argTypes: {
+        label: { control: "text" },
+        isSelected: { control: "boolean" },
+        decoIcon: { control: "text" },
+        actionIcon: { control: "text" },
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        label: "Tab Label",
+        isSelected: false,
+        onClickTab: function () { },
+    },
+};
+export var Selected = {
+    args: {
+        label: "Selected Tab",
+        isSelected: true,
+        onClickTab: function () { },
+    },
+};
+export var WithDecoIcon = {
+    args: {
+        label: "With Icon",
+        isSelected: false,
+        decoIcon: "Home",
+        onClickTab: function () { },
+    },
+};
+export var WithActionIcon = {
+    args: {
+        label: "With Action",
+        isSelected: false,
+        actionIcon: "X",
+        onClickTab: function () { },
+    },
+};
+export var WithBothIcons = {
+    args: {
+        label: "Full Tab",
+        isSelected: true,
+        decoIcon: "File",
+        actionIcon: "X",
+        onClickTab: function () { },
+    },
+};
+var TabGroupWrapper = function () {
+    var _a = useState(0), selected = _a[0], setSelected = _a[1];
+    var tabs = ["Overview", "Projects", "Tasks", "Settings"];
+    return (<TabsContainer>
+      {tabs.map(function (tab, index) { return (<Tab key={tab} label={tab} isSelected={selected === index} onClickTab={function () { return setSelected(index); }}/>); })}
+    </TabsContainer>);
+};
+export var TabGroup = {
+    render: function () { return <TabGroupWrapper />; },
+};

package/dist/stories/Table.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import TableContainer from "../components/tableContainer";
+declare const meta: Meta<typeof TableContainer>;
+export default meta;
+type Story = StoryObj<typeof TableContainer>;
+export declare const Default: Story;
+export declare const FlexibleWidth: Story;
+export declare const CenteredContent: Story;