@rovula/ui 0.0.3 → 0.0.5

package/src/components/Button/Button.styles.ts

@@ -0,0 +1,98 @@
+import { cva } from "class-variance-authority";
+
+export const buttonCva = cva(
+  [
+    // "inline-flex items-center justify-center align-middle no-underline transition-colors ease-in-out duration-300",
+    // "font-sans appearance-none select-none rounded-sm border font-medium tracking-[.02857em]",
+    // "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
+    "gap-2 font-bold text-white hover:bg-opacity-90 active:scale-[98%]",
+  ],
+  {
+    variants: {
+      color: {
+        primary: "bg-primary border-primary text-primary hover:bg-primary-80",
+        secondary:
+          "border-secondary bg-secondary-100 text-secondary-foreground hover:bg-secondary-120",
+        tertiary:
+          "border-tertiary-120 bg-tertiary-120 text-tertiary-120 hover:bg-tertiary-100",
+        success: "border-success bg-success text-success  hover:bg-success-120",
+        info: "border-info bg-info text-info hover:bg-info-100",
+        warning:
+          "border-warning bg-warning text-warning hover:bg-warning-100 hover:border-warning-100",
+        error:
+          "border-error bg-error text-error hover:bg-error-120 hover:border-error-120",
+      },
+      size: {
+        sm: "px-3 py-1 text-sm rounded-[--btn-rounded-sm]",
+        md: "px-4 py-2 text-sm rounded-[--btn-rounded-md]",
+        lg: "px-6 py-4 text-base rounded-[--btn-rounded-lg]",
+      },
+      variant: {
+        solid: "border",
+        outline: "border bg-transparent hover:bg-opacity-20",
+        flat: "bg-transparent hover:bg-opacity-20",
+        link: "bg-transparent underline underline-offset-4 hover:bg-transparent hover:text-opacity-80",
+      },
+      disabled: {
+        true: "pointer-events-none border-transparent bg-secondary-110 text-secondary-130",
+      },
+      fullwidth: {
+        true: "w-full",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: ["flat", "link"],
+        disabled: true,
+        class: "border-transparent bg-transparent",
+      },
+      {
+        variant: "solid",
+        color: "primary",
+        class: "text-primary-foreground",
+      },
+      {
+        variant: "solid",
+        color: "secondary",
+        class: "text-secondary-foreground",
+      },
+      {
+        variant: "solid",
+        disabled: true,
+        color: "secondary",
+        class: "text-white",
+      },
+      {
+        variant: "solid",
+        color: "tertiary",
+        class: "text-tertiary-foreground",
+      },
+      {
+        variant: "solid",
+        color: "success",
+        class: "text-success-foreground",
+      },
+      {
+        variant: "solid",
+        color: "info",
+        class: "text-info-foreground",
+      },
+      {
+        variant: "solid",
+        color: "warning",
+        class: "text-warning-foreground",
+      },
+      {
+        variant: "solid",
+        color: "error",
+        class: "text-error-foreground",
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      variant: "solid",
+      fullwidth: true,
+    },
+  }
+);

package/src/components/Button/Button.tsx

@@ -1,32 +1,62 @@
-import React from "react";
+import React, { FC, ReactElement } from "react";
+import { twMerge } from "tailwind-merge";
+import { buttonCva } from "./Button.styles";
 
-interface ButtonProps {
-  children: React.ReactNode;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  type?: "button" | "submit" | "reset";
+type ButtonProps = {
+  title?: string;
+  size?: "sm" | "md" | "lg";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "tertiary"
+    | "info"
+    | "warning"
+    | "error";
+  variant?: "solid" | "outline" | "flat" | "link";
   disabled?: boolean;
-  className?: string;
   isLoading?: boolean;
-  variant?: "primary" | "secondary";
-}
+  fullwidth?: boolean;
+  children?: React.ReactNode;
+  startIcon?: ReactElement;
+  endIcon?: ReactElement;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-const Button: React.FC<ButtonProps> = ({
+const Button: FC<ButtonProps> = ({
+  size = "md",
+  color = "primary",
+  variant = "solid",
+  title,
   children,
-  onClick,
-  type = "button",
+  startIcon,
+  endIcon,
   disabled = false,
-  className = "",
+  fullwidth = false,
   isLoading = false,
-  variant = "primary",
+  className,
+  ...props
 }) => {
+  const isDisabled = disabled || isLoading;
+
   return (
     <button
-      className={`btn ${className} ${variant}`}
-      onClick={onClick}
-      type={type}
-      disabled={disabled || isLoading}
+      type="button"
+      {...props}
+      aria-disabled={isDisabled || undefined}
+      tabIndex={isDisabled ? -1 : 0}
+      className={twMerge(
+        buttonCva({ size, color, variant, disabled, fullwidth }),
+        className
+      )}
+      disabled={isDisabled}
     >
-      {isLoading ? "Loading..." : children}
+      {
+        <>
+          {startIcon}
+          {children || title}
+          {endIcon}
+        </>
+      }
     </button>
   );
 };

package/src/components/Button/Buttons.stories.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Button from "./Button";
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Solid = {
+  args: {
+    title: "Button",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+      className: "capitalize",
+    };
+    return (
+      <div className="flex gap-2">
+        <Button color="primary" {...props} title="primary" />
+        <Button color="secondary" {...props} title="secondary" />
+        <Button color="tertiary" {...props} title="tertiary" />
+        <Button color="info" {...props} title="info" />
+        <Button color="success" {...props} title="success" />
+        <Button color="warning" {...props} title="warning" />
+        <Button color="error" {...props} title="error" />
+      </div>
+    );
+  },
+} satisfies Story;
+
+export const Outline = {
+  args: {
+    title: "Button",
+    variant: "outline",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+      className: "capitalize",
+    };
+    return (
+      <div className="flex gap-2">
+        <Button color="primary" {...props} title="primary" />
+        <Button color="secondary" {...props} title="secondary" />
+        <Button color="tertiary" {...props} title="tertiary" />
+        <Button color="info" {...props} title="info" />
+        <Button color="success" {...props} title="success" />
+        <Button color="warning" {...props} title="warning" />
+        <Button color="error" {...props} title="error" />
+      </div>
+    );
+  },
+} satisfies Story;
+
+export const Flat = {
+  args: {
+    title: "Button",
+    variant: "flat",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+      className: "capitalize",
+    };
+    return (
+      <div className="flex gap-2">
+        <Button color="primary" {...props} title="primary" />
+        <Button color="secondary" {...props} title="secondary" />
+        <Button color="tertiary" {...props} title="tertiary" />
+        <Button color="info" {...props} title="info" />
+        <Button color="success" {...props} title="success" />
+        <Button color="warning" {...props} title="warning" />
+        <Button color="error" {...props} title="error" />
+      </div>
+    );
+  },
+} satisfies Story;
+
+export const Link = {
+  args: {
+    title: "Button",
+    variant: "link",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+      className: "capitalize",
+    };
+    return (
+      <div className="flex gap-2">
+        <Button color="primary" {...props} title="primary" />
+        <Button color="secondary" {...props} title="secondary" />
+        <Button color="tertiary" {...props} title="tertiary" />
+        <Button color="info" {...props} title="info" />
+        <Button color="success" {...props} title="success" />
+        <Button color="warning" {...props} title="warning" />
+        <Button color="error" {...props} title="error" />
+      </div>
+    );
+  },
+} satisfies Story;

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Text from "./Text";
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+  title: "Components/Text",
+  component: Text,
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Text>;
+
+export default meta;
+
+const variant: any = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "subtitile1",
+  "subtitile2",
+  "subtitile3",
+  "subtitile4",
+  "subtitile5",
+  "subtitile6",
+  "body1",
+  "body2",
+  "body3",
+  "body4",
+  "small1",
+  "small2",
+  "small3",
+  "label1",
+  "label2",
+];
+
+const color = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "success",
+  "info",
+  "warning",
+  "error",
+];
+
+export const Default = {
+  args: {},
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-col gap-2 gap-y-6 w-full">
+        {variant.map((value: any) => (
+          <div key={value} className="flex flex-row ">
+            <div className="w-[200px]">
+              <Text variant={value} color="primary">
+                {value}
+              </Text>
+            </div>
+            <div className="w-full">
+              <Text variant={value} color="primary">
+                Lorem ipsum dolor sit amet, adipiscing elit.
+              </Text>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Color = {
+  args: {},
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-col gap-2 gap-y-6 w-full">
+        {color.map((color: any, i) => (
+          <div key={color} className="flex flex-row ">
+            <div className="w-[400px]">
+              <Text variant={variant?.[i]} color={color}>
+                {color}
+              </Text>
+            </div>
+            <div className="w-full">
+              <Text variant={variant?.[i]} color={color}>
+                Lorem ipsum dolor sit amet, adipiscing elit.
+              </Text>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Text/Text.tsx

@@ -0,0 +1,59 @@
+import React, { FC } from "react";
+
+type TextProps = {
+  variant?:
+    | "h1"
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6"
+    | "subtitile1"
+    | "subtitile2"
+    | "subtitile3"
+    | "subtitile4"
+    | "subtitile5"
+    | "subtitile6"
+    | "body1"
+    | "body2"
+    | "body3"
+    | "body4"
+    | "small1"
+    | "small2"
+    | "small3"
+    | "label1"
+    | "label2";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "tertiary"
+    | "info"
+    | "warning"
+    | "error";
+  children?: React.ReactNode;
+  className?: string;
+  tag?: keyof JSX.IntrinsicElements;
+  style?: React.CSSProperties;
+  id?: string;
+};
+
+const Text: FC<TextProps> = ({
+  variant = "body1",
+  tag: Tag = "p",
+  children,
+  className,
+  color,
+  style,
+}) => {
+  return (
+    <Tag
+      className={`typography-${variant} text-${color} ${className}`}
+      style={style}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+export default Text;

package/src/index.ts

@@ -0,0 +1,21 @@
+// UI Components
+// import "./src/styles/style.css";
+import "./theme/global.css";
+export { default as Button } from "./components/Button/Button";
+export { default as Table } from "./components/Table/Table";
+export { default as TextInput } from "./components/Form/TextInput";
+export { default as Text } from "./components/Text/Text";
+export { default as Tabs } from "./components/Tabs/Tabs";
+
+// UTILS
+export {
+  resloveTimestamp,
+  getStartDateOfDay,
+  getEndDateOfDay,
+  getStartEndTimestampOfDay,
+  getTimestampUTC,
+} from "./utils/datetime";
+
+// const mainPreset = require("./theme/main-preset");
+
+// export { mainPreset };

package/src/stories/Typography.mdx

@@ -0,0 +1,160 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="Guidelines/Typography" />
+
+export const code = ['<button className="scroll rounded-lg border border-primary-500">', "  button", "</button>"];
+
+# Typography
+
+The Typography styles makes it easy to apply a default set of font weights and sizes in your application.
+
+<br />
+
+## Styles
+
+<Canvas>
+  <div className="mx-auto max-w-3xl text-gray-100">
+    <div className="grid grid-cols-[auto_1fr] gap-x-8 gap-y-4">
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="whitespace-nowrap typography-code">typography-heading-1</code>
+        </div>
+      </div>
+      <div>
+        <h1 className="typography-heading-1">Heading 1</h1>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="typography-code">typography-heading-2</code>
+        </div>
+      </div>
+      <div>
+        <h2 className="typography-heading-2">Heading 2</h2>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="typography-code">typography-heading-3</code>
+        </div>
+      </div>
+      <div>
+        <h3 className="typography-heading-3">Heading 3</h3>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="typography-code">typography-heading-4</code>
+        </div>
+      </div>
+      <div className="flex items-center">
+        <h4 className="typography-heading-4">Heading 4</h4>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="typography-code">typography-heading-5</code>
+        </div>
+      </div>
+      <div className="flex items-center">
+        <h5 className="typography-heading-5">Heading 5</h5>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="typography-code">typography-heading-6</code>
+        </div>
+      </div>
+      <div className="flex items-center">
+        <h6 className="typography-heading-6">Heading 6</h6>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="whitespace-nowrap typography-code">typography-subtitle-1</code>
+        </div>
+      </div>
+      <div className="">
+        <p className="typography-subtitle-1">
+          Subtitle 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua.
+        </p>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="whitespace-nowrap typography-code">typography-subtitle-2</code>
+        </div>
+      </div>
+      <div className="flex items-center">
+        <p className="typography-subtitle-2">
+          Subtitle 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua.
+        </p>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="typography-code">typography-body-1</code>
+        </div>
+      </div>
+      <div>
+        <p className="typography-body-1">
+          Body 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+          ea commodo consequat.
+        </p>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="typography-code">typography-body-2</code>
+        </div>
+      </div>
+      <div>
+        <p className="typography-body-2">
+          Body 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+          ea commodo consequat.
+        </p>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="typography-code">typography-button</code>
+        </div>
+      </div>
+      <div className="flex items-center">
+        <span className="typography-button">BUTTON TEXT</span>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="typography-code">typography-caption</code>
+        </div>
+      </div>
+      <div className="flex items-center">
+        <span className="typography-caption">caption text</span>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="typography-code">typography-overline</code>
+        </div>
+      </div>
+      <div className="flex items-center">
+        <span className="my-auto typography-overline">OVERLINE TEXT</span>
+      </div>
+      <div className="flex items-center">
+        <div>
+          <div className="typography-subtitle-1">Class Name:</div>
+          <code className="typography-code">typography-code</code>
+        </div>
+      </div>
+      <div className="overflow-x-auto">
+        <pre className="py-2 typography-code">{code.join("\n")}</pre>
+      </div>
+    </div>
+  </div>
+</Canvas>