oneslash-design-system 1.2.24 → 1.2.26

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;

package/dist/stories/Tooltip.stories.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Tooltip from "../components/tooltip";
+import Button from "../components/button";
+import IconButton from "../components/iconButton";
+var meta = {
+    title: "Components/Tooltip",
+    component: Tooltip,
+    argTypes: {
+        title: { control: "text" },
+    },
+};
+export default meta;
+export var Default = {
+    render: function (args) { return (<div style={{ padding: "50px" }}>
+      <Tooltip {...args}>
+        <Button size="medium" type="primary" state="enabled" label="Hover me" onClickButton={function () { }}/>
+      </Tooltip>
+    </div>); },
+    args: {
+        title: "This is a tooltip",
+    },
+};
+export var OnIconButton = {
+    render: function () { return (<div style={{ padding: "50px" }}>
+      <Tooltip title="Settings">
+        <IconButton color="tertiary" state="enabled" size="medium" iconName="Settings"/>
+      </Tooltip>
+    </div>); },
+};
+export var LongText = {
+    render: function () { return (<div style={{ padding: "50px" }}>
+      <Tooltip title="This is a longer tooltip message that provides more context">
+        <Button size="medium" type="secondary" state="enabled" label="Hover for details" onClickButton={function () { }}/>
+      </Tooltip>
+    </div>); },
+};
+export var MultipleTooltips = {
+    render: function () { return (<div style={{ display: "flex", gap: "16px", padding: "50px" }}>
+      <Tooltip title="Edit">
+        <IconButton color="tertiary" state="enabled" size="medium" iconName="Edit"/>
+      </Tooltip>
+      <Tooltip title="Delete">
+        <IconButton color="tertiary" state="enabled" size="medium" iconName="Trash2"/>
+      </Tooltip>
+      <Tooltip title="Share">
+        <IconButton color="tertiary" state="enabled" size="medium" iconName="Share"/>
+      </Tooltip>
+      <Tooltip title="Download">
+        <IconButton color="tertiary" state="enabled" size="medium" iconName="Download"/>
+      </Tooltip>
+    </div>); },
+};

package/dist/stories/UserImage.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import UserImage from "../components/userImage";
+declare const meta: Meta<typeof UserImage>;
+export default meta;
+type Story = StoryObj<typeof UserImage>;
+export declare const WithInitial: Story;
+export declare const SingleName: Story;
+export declare const WithImage: Story;
+export declare const DifferentUsers: Story;
+export declare const MixedWithImages: Story;

package/dist/stories/UserImage.stories.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import UserImage from "../components/userImage";
+var meta = {
+    title: "Components/UserImage",
+    component: UserImage,
+    argTypes: {
+        userHandle: { control: "text" },
+        userImgUrl: { control: "text" },
+    },
+};
+export default meta;
+export var WithInitial = {
+    args: {
+        userHandle: "John Doe",
+    },
+};
+export var SingleName = {
+    args: {
+        userHandle: "Alice",
+    },
+};
+export var WithImage = {
+    args: {
+        userHandle: "Jane Smith",
+        userImgUrl: "https://i.pravatar.cc/150?img=1",
+    },
+};
+export var DifferentUsers = {
+    render: function () { return (<div style={{ display: "flex", gap: "8px" }}>
+      <UserImage userHandle="Alice Brown"/>
+      <UserImage userHandle="Bob Smith"/>
+      <UserImage userHandle="Carol Davis"/>
+      <UserImage userHandle="David Lee"/>
+      <UserImage userHandle="Emma Wilson"/>
+      <UserImage userHandle="Frank Miller"/>
+    </div>); },
+};
+export var MixedWithImages = {
+    render: function () { return (<div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+      <UserImage userHandle="John Doe" userImgUrl="https://i.pravatar.cc/150?img=1"/>
+      <UserImage userHandle="Alice Brown"/>
+      <UserImage userHandle="Jane Smith" userImgUrl="https://i.pravatar.cc/150?img=5"/>
+      <UserImage userHandle="Bob Wilson"/>
+      <UserImage userHandle="Carol Davis" userImgUrl="https://i.pravatar.cc/150?img=9"/>
+    </div>); },
+};

package/dist/tailwind.config.js

@@ -1,5 +1,6 @@
 var designTokens = require('./designTokens');
 var config = {
+    darkMode: 'class',
     content: [
         "./components/**/*.{js,ts,jsx,tsx,mdx}",
     ],