@rovula/ui 0.0.4 → 0.0.6

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/components/TextInput/TextInput.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import TextInput from "./TextInput";
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+  title: "Components/TextInput",
+  component: TextInput,
+  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 TextInput>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    label: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <TextInput id="1" placeholder="placeholder" size="lg" {...args} />
+        <TextInput id="2" placeholder="placeholder" size="md" {...args} />
+        <TextInput id="3" placeholder="placeholder" size="sm" {...args} />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/TextInput/TextInput.styles.ts

@@ -0,0 +1,177 @@
+import { cva } from "class-variance-authority";
+
+export const inputVariant = cva(
+  [
+    "border-0 outline-none",
+    "p-1 flex",
+    "peer text-black placeholder:text-transparent",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-2 px-3 typography-small1",
+        md: "py-2 px-3 typography-subtitile4",
+        lg: "p-4 typography-subtitile1",
+      },
+      rounded: {
+        none: "rounded-none",
+        normal: "rounded-xl",
+        full: "rounded-full",
+      },
+      variant: {
+        flat: "",
+        outline:
+          "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-2 focus:ring-inset focus:ring-input-active",
+        underline:
+          "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
+      },
+      fullwidth: {
+        true: "w-full",
+      },
+      disabled: {
+        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+      },
+      error: {
+        true: "ring-error",
+      },
+      hasClearIcon: {
+        true: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "underline",
+        className: "rounded-none",
+      },
+      {
+        hasClearIcon: true,
+        size: "sm",
+        class: "focus:pe-6",
+      },
+      {
+        hasClearIcon: true,
+        size: "md",
+        class: "focus:pe-8",
+      },
+      {
+        hasClearIcon: true,
+        size: "lg",
+        class: "focus:pe-10",
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      variant: "outline",
+      rounded: "normal",
+      fullwidth: false,
+      disabled: false,
+      error: false,
+      hasClearIcon: false,
+    },
+  }
+);
+
+export const labelVariant = cva(
+  [
+    "absolute block transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+  ],
+  {
+    variants: {
+      size: {
+        sm: [
+          "left-3 top-2 typography-small1 peer-focus:-top-1.5 peer-focus:typography-label2",
+          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label2",
+        ],
+        md: [
+          "left-3 top-2 typography-subtitile4 peer-focus:-top-1.5 peer-focus:typography-label1",
+          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+        ],
+        lg: [
+          "left-4 top-4 typography-subtitile1 peer-focus:-top-1.5 peer-focus:typography-label1",
+          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+        ],
+      },
+      disabled: {
+        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+      },
+      error: {
+        true: "ring-error",
+      },
+      isFloating: {
+        true: "-top-1.5 typography-label1 bg-input-label-background",
+      },
+    },
+    compoundVariants: [
+      {
+        size: "sm",
+        isFloating: true,
+        class: "-top-1.5 typography-label2 bg-input-label-background",
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      error: false,
+      isFloating: false,
+    },
+  }
+);
+
+export const helperTextVariant = cva(
+  ["text-small1 flex flex-row items-center gap-1"],
+  {
+    variants: {
+      size: {
+        sm: "mt-1",
+        md: "mt-[6px]",
+        lg: "mt-[6px]",
+      },
+      disabled: {
+        true: "text-input-text-disabled",
+      },
+      error: {
+        true: "text-error",
+        false: "text-input-text",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      error: false,
+    },
+  }
+);
+
+export const iconWrapperVariant = cva(
+  [
+    "absolute inset-y-0 right-0 items-center justify-center hidden peer-focus:flex",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "mr-2",
+        md: "mr-3",
+        lg: "mr-4",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export const iconVariant = cva(
+  ["cursor-pointer z-50 fill-input-stroke-active hover:fill-input-text"],
+  {
+    variants: {
+      size: {
+        sm: "size-3",
+        md: "size-4",
+        lg: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);