oneslash-design-system 1.2.24 → 1.2.25

package/dist/stories/Table.stories.jsx

@@ -0,0 +1,84 @@
+import React from "react";
+import TableContainer from "../components/tableContainer";
+import TableHeader from "../components/tableHeader";
+import TableHeaderCell from "../components/tableHeaderCell";
+import TableRow from "../components/tableRow";
+import TableCell from "../components/tableCell";
+var meta = {
+    title: "Components/Table",
+    component: TableContainer,
+};
+export default meta;
+export var Default = {
+    render: function () { return (<TableContainer>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell width="200px">Name</TableHeaderCell>
+          <TableHeaderCell width="150px">Status</TableHeaderCell>
+          <TableHeaderCell width="150px" align="right">Amount</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableRow>
+        <TableCell width="200px">John Doe</TableCell>
+        <TableCell width="150px">Active</TableCell>
+        <TableCell width="150px" align="right">$1,234.00</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell width="200px">Jane Smith</TableCell>
+        <TableCell width="150px">Pending</TableCell>
+        <TableCell width="150px" align="right">$567.89</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell width="200px">Bob Johnson</TableCell>
+        <TableCell width="150px">Inactive</TableCell>
+        <TableCell width="150px" align="right">$0.00</TableCell>
+      </TableRow>
+    </TableContainer>); },
+};
+export var FlexibleWidth = {
+    render: function () { return (<TableContainer>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Description</TableHeaderCell>
+          <TableHeaderCell width="100px" align="center">Qty</TableHeaderCell>
+          <TableHeaderCell width="120px" align="right">Price</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableRow>
+        <TableCell>Product A - Premium Widget</TableCell>
+        <TableCell width="100px" align="center">5</TableCell>
+        <TableCell width="120px" align="right">$49.99</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Product B - Standard Widget with extended description</TableCell>
+        <TableCell width="100px" align="center">10</TableCell>
+        <TableCell width="120px" align="right">$29.99</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Product C - Basic</TableCell>
+        <TableCell width="100px" align="center">3</TableCell>
+        <TableCell width="120px" align="right">$9.99</TableCell>
+      </TableRow>
+    </TableContainer>); },
+};
+export var CenteredContent = {
+    render: function () { return (<TableContainer>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell align="center">ID</TableHeaderCell>
+          <TableHeaderCell align="center">Status</TableHeaderCell>
+          <TableHeaderCell align="center">Date</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableRow>
+        <TableCell align="center">#001</TableCell>
+        <TableCell align="center">Completed</TableCell>
+        <TableCell align="center">2024-01-15</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell align="center">#002</TableCell>
+        <TableCell align="center">In Progress</TableCell>
+        <TableCell align="center">2024-01-16</TableCell>
+      </TableRow>
+    </TableContainer>); },
+};

package/dist/stories/TabsContainer.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import TabsContainer from "../components/tabsContainer";
+declare const meta: Meta<typeof TabsContainer>;
+export default meta;
+type Story = StoryObj<typeof TabsContainer>;
+export declare const Default: Story;
+export declare const TwoTabs: Story;
+export declare const ManyTabs: Story;
+export declare const WithIcons: Story;
+export declare const WithSecondLabel: Story;

package/dist/stories/TabsContainer.stories.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import TabsContainer from "../components/tabsContainer";
+import Tab from "../components/tab";
+var meta = {
+    title: "Components/TabsContainer",
+    component: TabsContainer,
+};
+export default meta;
+var TabsWrapper = function (_a) {
+    var tabs = _a.tabs;
+    var _b = useState(0), selected = _b[0], setSelected = _b[1];
+    return (<TabsContainer>
+      {tabs.map(function (tab, index) { return (<Tab key={tab} label={tab} isSelected={selected === index} onClickTab={function () { return setSelected(index); }}/>); })}
+    </TabsContainer>);
+};
+export var Default = {
+    render: function () { return <TabsWrapper tabs={["Tab 1", "Tab 2", "Tab 3"]}/>; },
+};
+export var TwoTabs = {
+    render: function () { return <TabsWrapper tabs={["Active", "Archived"]}/>; },
+};
+export var ManyTabs = {
+    render: function () { return (<TabsWrapper tabs={["Overview", "Analytics", "Reports", "Settings", "Users", "Billing"]}/>); },
+};
+var TabsWithIconsWrapper = function () {
+    var _a = useState(0), selected = _a[0], setSelected = _a[1];
+    var tabs = [
+        { label: "Home", icon: "Home" },
+        { label: "Files", icon: "Folder" },
+        { label: "Settings", icon: "Settings" },
+    ];
+    return (<TabsContainer>
+      {tabs.map(function (tab, index) { return (<Tab key={tab.label} label={tab.label} decoIcon={tab.icon} isSelected={selected === index} onClickTab={function () { return setSelected(index); }}/>); })}
+    </TabsContainer>);
+};
+export var WithIcons = {
+    render: function () { return <TabsWithIconsWrapper />; },
+};
+var TabsWithSecondLabelWrapper = function () {
+    var _a = useState(0), selected = _a[0], setSelected = _a[1];
+    var tabs = [
+        { label: "Dashboard", secondLabel: "Overview" },
+        { label: "Analytics", secondLabel: "Last 7 days" },
+        { label: "Reports", secondLabel: "12 new" },
+    ];
+    return (<TabsContainer>
+      {tabs.map(function (tab, index) { return (<Tab key={tab.label} label={tab.label} secondLabel={tab.secondLabel} isSelected={selected === index} onClickTab={function () { return setSelected(index); }}/>); })}
+    </TabsContainer>);
+};
+export var WithSecondLabel = {
+    render: function () { return <TabsWithSecondLabelWrapper />; },
+};

package/dist/stories/Tag.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Tag from "../components/tag";
+declare const meta: Meta<typeof Tag>;
+export default meta;
+type Story = StoryObj<typeof Tag>;
+export declare const Contained: Story;
+export declare const TextOnly: Story;
+export declare const Selected: Story;
+export declare const WithIcon: Story;
+export declare const Small: Story;
+export declare const Clickable: Story;
+export declare const AllVariants: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const Info: Story;
+export declare const AllColors: Story;

package/dist/stories/Tag.stories.jsx

@@ -0,0 +1,143 @@
+import React from "react";
+import Tag from "../components/tag";
+var meta = {
+    title: "Components/Tag",
+    component: Tag,
+    decorators: [
+        function (Story) { return (<div style={{ display: "flex" }}>
+        <Story />
+      </div>); },
+    ],
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["contained", "textOnly"],
+        },
+        size: {
+            control: "select",
+            options: ["medium", "small"],
+        },
+        state: {
+            control: "select",
+            options: ["enabled", "selected"],
+        },
+        color: {
+            control: "select",
+            options: [undefined, "default", "success", "warning", "error", "info"],
+        },
+        label: { control: "text" },
+        iconName: { control: "text" },
+    },
+};
+export default meta;
+export var Contained = {
+    args: {
+        variant: "contained",
+        size: "medium",
+        state: "enabled",
+        label: "Tag Label",
+    },
+};
+export var TextOnly = {
+    args: {
+        variant: "textOnly",
+        size: "medium",
+        state: "enabled",
+        label: "Text Tag",
+    },
+};
+export var Selected = {
+    args: {
+        variant: "contained",
+        size: "medium",
+        state: "selected",
+        label: "Selected",
+    },
+};
+export var WithIcon = {
+    args: {
+        variant: "contained",
+        size: "medium",
+        state: "enabled",
+        label: "With Icon",
+        iconName: "Star",
+    },
+};
+export var Small = {
+    args: {
+        variant: "contained",
+        size: "small",
+        state: "enabled",
+        label: "Small Tag",
+    },
+};
+export var Clickable = {
+    args: {
+        variant: "contained",
+        size: "medium",
+        state: "enabled",
+        label: "Click me",
+        onClick: function () { return alert("Tag clicked!"); },
+    },
+};
+export var AllVariants = {
+    render: function () { return (<div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
+      <Tag variant="contained" size="medium" label="Contained"/>
+      <Tag variant="textOnly" size="medium" label="Text Only"/>
+      <Tag variant="contained" size="medium" state="selected" label="Selected"/>
+      <Tag variant="contained" size="small" label="Small"/>
+      <Tag variant="contained" size="medium" label="With Icon" iconName="Check"/>
+    </div>); },
+};
+export var Success = {
+    args: {
+        variant: "contained",
+        size: "medium",
+        color: "success",
+        label: "Success",
+    },
+};
+export var Warning = {
+    args: {
+        variant: "contained",
+        size: "medium",
+        color: "warning",
+        label: "Warning",
+    },
+};
+export var Error = {
+    args: {
+        variant: "contained",
+        size: "medium",
+        color: "error",
+        label: "Error",
+    },
+};
+export var Info = {
+    args: {
+        variant: "contained",
+        size: "medium",
+        color: "info",
+        label: "Info",
+    },
+};
+export var AllColors = {
+    render: function (args) { return (<div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+      <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+        <span style={{ width: "80px" }}>Contained:</span>
+        <Tag variant="contained" size="medium" color="default" label="Default"/>
+        <Tag variant="contained" size="medium" color="success" label="Success"/>
+        <Tag variant="contained" size="medium" color="warning" label="Warning"/>
+        <Tag variant="contained" size="medium" color="error" label="Error"/>
+        <Tag variant="contained" size="medium" color="info" label="Info"/>
+      </div>
+      <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+        <span style={{ width: "80px" }}>Text Only:</span>
+        <Tag variant="textOnly" size="medium" color="default" label="Default"/>
+        <Tag variant="textOnly" size="medium" color="success" label="Success"/>
+        <Tag variant="textOnly" size="medium" color="warning" label="Warning"/>
+        <Tag variant="textOnly" size="medium" color="error" label="Error"/>
+        <Tag variant="textOnly" size="medium" color="info" label="Info"/>
+      </div>
+    </div>); },
+};

package/dist/stories/TextField.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import TextField from "../components/textField";
+declare const meta: Meta<typeof TextField>;
+export default meta;
+type Story = StoryObj<typeof TextField>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;
+export declare const LargeSize: Story;
+export declare const SmallSize: Story;
+export declare const Multiline: Story;
+export declare const AllSizes: Story;

package/dist/stories/TextField.stories.jsx

@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import TextField from "../components/textField";
+var meta = {
+    title: "Components/TextField",
+    component: TextField,
+    argTypes: {
+        label: { control: "text" },
+        disabled: { control: "boolean" },
+        error: { control: "boolean" },
+        multiline: { control: "boolean" },
+        maxRows: { control: "number" },
+        size: {
+            control: "select",
+            options: ["large", "medium", "small"],
+        },
+    },
+};
+export default meta;
+var TextFieldWrapper = function (args) {
+    var _a = useState(args.value || ""), value = _a[0], setValue = _a[1];
+    return (<TextField {...args} value={value} onChange={function (e) { return setValue(e.target.value); }}/>);
+};
+export var Default = {
+    render: function (args) { return <TextFieldWrapper {...args}/>; },
+    args: {
+        id: "default-textfield",
+        label: "Label",
+        value: "",
+        size: "medium",
+    },
+};
+export var WithValue = {
+    render: function (args) { return <TextFieldWrapper {...args}/>; },
+    args: {
+        id: "with-value-textfield",
+        label: "Name",
+        value: "John Doe",
+        size: "medium",
+    },
+};
+export var Disabled = {
+    render: function (args) { return <TextFieldWrapper {...args}/>; },
+    args: {
+        id: "disabled-textfield",
+        label: "Disabled Field",
+        value: "Cannot edit",
+        disabled: true,
+        size: "medium",
+    },
+};
+export var WithError = {
+    render: function (args) { return <TextFieldWrapper {...args}/>; },
+    args: {
+        id: "error-textfield",
+        label: "Required Field",
+        value: "",
+        error: true,
+        size: "medium",
+    },
+};
+export var LargeSize = {
+    render: function (args) { return <TextFieldWrapper {...args}/>; },
+    args: {
+        id: "large-textfield",
+        label: "Large Input",
+        value: "",
+        size: "large",
+    },
+};
+export var SmallSize = {
+    render: function (args) { return <TextFieldWrapper {...args}/>; },
+    args: {
+        id: "small-textfield",
+        label: "Small Input",
+        value: "",
+        size: "small",
+    },
+};
+export var Multiline = {
+    render: function (args) { return <TextFieldWrapper {...args}/>; },
+    args: {
+        id: "multiline-textfield",
+        label: "Description",
+        value: "",
+        multiline: true,
+        maxRows: 4,
+        size: "medium",
+    },
+};
+export var AllSizes = {
+    render: function () { return (<div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "300px" }}>
+      <TextFieldWrapper id="size-small" label="Small" size="small"/>
+      <TextFieldWrapper id="size-medium" label="Medium" size="medium"/>
+      <TextFieldWrapper id="size-large" label="Large" size="large"/>
+    </div>); },
+};

package/dist/stories/Textarea.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Textarea from "../components/textarea";
+declare const meta: Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;
+export declare const SmallSize: Story;
+export declare const AutoExpanding: Story;
+export declare const AllSizes: Story;

package/dist/stories/Textarea.stories.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import Textarea from "../components/textarea";
+var meta = {
+    title: "Components/Textarea",
+    component: Textarea,
+    argTypes: {
+        label: { control: "text" },
+        disabled: { control: "boolean" },
+        error: { control: "boolean" },
+        maxRows: { control: "number" },
+        size: {
+            control: "select",
+            options: ["medium", "small"],
+        },
+    },
+};
+export default meta;
+var TextareaWrapper = function (args) {
+    var _a = useState(args.value || ""), value = _a[0], setValue = _a[1];
+    return (<Textarea {...args} value={value} onChange={function (e) { return setValue(e.target.value); }}/>);
+};
+export var Default = {
+    render: function (args) { return <TextareaWrapper {...args}/>; },
+    args: {
+        id: "default-textarea",
+        label: "Description",
+        value: "",
+        size: "medium",
+    },
+};
+export var WithValue = {
+    render: function (args) { return <TextareaWrapper {...args}/>; },
+    args: {
+        id: "with-value-textarea",
+        label: "Notes",
+        value: "This is some sample text that demonstrates the textarea component.",
+        size: "medium",
+    },
+};
+export var Disabled = {
+    render: function (args) { return <TextareaWrapper {...args}/>; },
+    args: {
+        id: "disabled-textarea",
+        label: "Disabled",
+        value: "This textarea is disabled",
+        disabled: true,
+        size: "medium",
+    },
+};
+export var WithError = {
+    render: function (args) { return <TextareaWrapper {...args}/>; },
+    args: {
+        id: "error-textarea",
+        label: "Required Field",
+        value: "",
+        error: true,
+        size: "medium",
+    },
+};
+export var SmallSize = {
+    render: function (args) { return <TextareaWrapper {...args}/>; },
+    args: {
+        id: "small-textarea",
+        label: "Small Textarea",
+        value: "",
+        size: "small",
+    },
+};
+export var AutoExpanding = {
+    render: function (args) { return <TextareaWrapper {...args}/>; },
+    args: {
+        id: "auto-expand-textarea",
+        label: "Type to see auto-expansion (max 6 rows)",
+        value: "",
+        maxRows: 6,
+        size: "medium",
+    },
+};
+export var AllSizes = {
+    render: function () { return (<div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "300px" }}>
+      <TextareaWrapper id="size-small" label="Small" size="small"/>
+      <TextareaWrapper id="size-medium" label="Medium" size="medium"/>
+    </div>); },
+};

package/dist/stories/TimeStamp.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import TimeStamp from "../components/timeStamp";
+declare const meta: Meta<typeof TimeStamp>;
+export default meta;
+type Story = StoryObj<typeof TimeStamp>;
+export declare const AbsoluteDateAndTime: Story;
+export declare const AbsoluteDateOnly: Story;
+export declare const AbsoluteTimeOnly: Story;
+export declare const RelativeRecent: Story;
+export declare const RelativeHours: Story;
+export declare const RelativeDays: Story;
+export declare const RelativeWeeks: Story;
+export declare const RelativeMonths: Story;
+export declare const PrimaryColor: Story;
+export declare const LargeSize: Story;
+export declare const AllFormats: Story;

package/dist/stories/TimeStamp.stories.jsx

@@ -0,0 +1,140 @@
+import React from "react";
+import TimeStamp from "../components/timeStamp";
+var meta = {
+    title: "Components/TimeStamp",
+    component: TimeStamp,
+    argTypes: {
+        dateFormat: {
+            control: "select",
+            options: ["absolute", "relative"],
+        },
+        textSize: {
+            control: "select",
+            options: ["small", "medium", "large"],
+        },
+        textColor: {
+            control: "select",
+            options: ["secondary", "primary"],
+        },
+        data: {
+            control: "select",
+            options: ["date-and-time", "date", "time"],
+        },
+    },
+};
+export default meta;
+var now = new Date();
+var oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);
+var oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+var oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+var oneMonthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+export var AbsoluteDateAndTime = {
+    args: {
+        createdAt: oneDayAgo,
+        dateFormat: "absolute",
+        textSize: "small",
+        textColor: "secondary",
+        data: "date-and-time",
+    },
+};
+export var AbsoluteDateOnly = {
+    args: {
+        createdAt: oneWeekAgo,
+        dateFormat: "absolute",
+        textSize: "small",
+        textColor: "secondary",
+        data: "date",
+    },
+};
+export var AbsoluteTimeOnly = {
+    args: {
+        createdAt: oneHourAgo,
+        dateFormat: "absolute",
+        textSize: "small",
+        textColor: "secondary",
+        data: "time",
+    },
+};
+export var RelativeRecent = {
+    args: {
+        createdAt: new Date(now.getTime() - 5 * 60 * 1000), // 5 minutes ago
+        dateFormat: "relative",
+        textSize: "small",
+        textColor: "secondary",
+        data: "date-and-time",
+    },
+};
+export var RelativeHours = {
+    args: {
+        createdAt: oneHourAgo,
+        dateFormat: "relative",
+        textSize: "small",
+        textColor: "secondary",
+        data: "date-and-time",
+    },
+};
+export var RelativeDays = {
+    args: {
+        createdAt: oneDayAgo,
+        dateFormat: "relative",
+        textSize: "small",
+        textColor: "secondary",
+        data: "date-and-time",
+    },
+};
+export var RelativeWeeks = {
+    args: {
+        createdAt: oneWeekAgo,
+        dateFormat: "relative",
+        textSize: "small",
+        textColor: "secondary",
+        data: "date-and-time",
+    },
+};
+export var RelativeMonths = {
+    args: {
+        createdAt: oneMonthAgo,
+        dateFormat: "relative",
+        textSize: "small",
+        textColor: "secondary",
+        data: "date-and-time",
+    },
+};
+export var PrimaryColor = {
+    args: {
+        createdAt: oneDayAgo,
+        dateFormat: "relative",
+        textSize: "medium",
+        textColor: "primary",
+        data: "date-and-time",
+    },
+};
+export var LargeSize = {
+    args: {
+        createdAt: oneDayAgo,
+        dateFormat: "absolute",
+        textSize: "large",
+        textColor: "primary",
+        data: "date-and-time",
+    },
+};
+export var AllFormats = {
+    render: function () { return (<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      <div>
+        <strong>Absolute - Date and Time:</strong>
+        <TimeStamp createdAt={oneDayAgo} dateFormat="absolute" data="date-and-time"/>
+      </div>
+      <div>
+        <strong>Absolute - Date only:</strong>
+        <TimeStamp createdAt={oneDayAgo} dateFormat="absolute" data="date"/>
+      </div>
+      <div>
+        <strong>Absolute - Time only:</strong>
+        <TimeStamp createdAt={oneHourAgo} dateFormat="absolute" data="time"/>
+      </div>
+      <div>
+        <strong>Relative:</strong>
+        <TimeStamp createdAt={oneDayAgo} dateFormat="relative" data="date-and-time"/>
+      </div>
+    </div>); },
+};

package/dist/stories/Tooltip.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Tooltip from "../components/tooltip";
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Default: Story;
+export declare const OnIconButton: Story;
+export declare const LongText: Story;
+export declare const MultipleTooltips: Story;