@rovula/ui 0.0.12 → 0.0.14

package/src/components/Avatar/AvatarGroup.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React, { Children, FC, ReactNode, cloneElement } from "react";
+import Avatar from "./Avatar";
+
+export type AvatarGroupProps = {
+  maxDisplay?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  remainingText?: string;
+  children?: ReactNode;
+  remainingAvatar?: ReactNode;
+};
+
+const AvatarGroup: FC<AvatarGroupProps> = ({
+  borderWidth = 2,
+  borderColor = "white",
+  maxDisplay = 4,
+  children,
+  remainingText,
+  remainingAvatar,
+}) => {
+  const avatars = Children.toArray(children);
+  const displayAvatars = avatars.slice(0, maxDisplay);
+  const remainingCount = Math.max(0, avatars.length - maxDisplay);
+
+  const remainingComp =
+    remainingAvatar ||
+    cloneElement(displayAvatars[0] as React.ReactElement, {
+      style: { borderWidth, borderColor },
+      className: "relative z-0",
+      children: remainingText || `+${remainingCount}`,
+    });
+
+  return (
+    <div className="flex items-center -space-x-2">
+      {displayAvatars.map((avatar, index) => {
+        return (
+          <div
+            key={index}
+            className="relative"
+            style={{ zIndex: avatars.length - index }}
+          >
+            {cloneElement(avatar as React.ReactElement, {
+              style: { borderWidth, borderColor },
+            })}
+          </div>
+        );
+      })}
+      {remainingCount > 0 && remainingComp}
+    </div>
+  );
+};
+
+export default AvatarGroup;

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

@@ -56,12 +56,12 @@ export const buttonVariants = cva(
         color: "secondary",
         class: "text-secondary-foreground",
       },
-      {
-        variant: "solid",
-        disabled: true,
-        color: "secondary",
-        class: "text-white",
-      },
+      // {
+      //   variant: "solid",
+      //   disabled: true,
+      //   color: "secondary",
+      //   class: "text-white",
+      // },
       {
         variant: "solid",
         color: "tertiary",

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import Dropdown, { Options } from "./Dropdown";
 import Button from "../Button/Button";
@@ -53,15 +53,37 @@ export const Default = {
 const DropdownWithRef = (props: any) => {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
+  const [options, setOptions] = useState(customOptions);
+  const [value, setValue] = useState<Options>({
+    label: "",
+    value: "",
+  });
+  const [text, setText] = useState("");
+
   return (
     <Dropdown
       id="1"
       size="lg"
       {...props}
+      value={value}
+      options={options}
       ref={inputRef}
       labelClassName="peer-focus:bg-red-500"
+      onSelect={setValue}
+      onChangeText={(e) => setText(e.target.value)}
       onKeyDown={(e) => {
         if (e.code === "Enter") {
+          setOptions((options) => [
+            ...options,
+            {
+              label: text,
+              value: text,
+            },
+          ]);
+          setValue({
+            label: text,
+            value: text,
+          });
           inputRef.current?.blur?.();
         }
       }}
@@ -83,7 +105,7 @@ export const WithRef = {
     };
     return (
       <div className="flex flex-row gap-4 w-full">
-        <DropdownWithRef id="1" size="lg" options={options} {...args} />\
+        <DropdownWithRef id="1" size="lg" options={options} {...args} />
       </div>
     );
   },
@@ -126,7 +148,7 @@ export const CustomOption = {
     };
     return (
       <div className="flex flex-row gap-4 w-full">
-        <DropdownWithRef id="1" size="lg" options={options} {...args} />\
+        <DropdownWithRef id="1" size="lg" options={options} {...args} />
       </div>
     );
   },

package/src/components/Dropdown/Dropdown.tsx

@@ -5,6 +5,7 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 
@@ -80,6 +81,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       Options | null | undefined
     >(null);
     const [textValue, setTextValue] = useState("");
+    const keyCode = useRef("");
 
     useEffect(() => {
       if (value && !selectedOption) {
@@ -147,6 +149,62 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       </ul>
     );
 
+    const handleOnFocus = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        setIsFocused(true);
+        props?.onFocus?.(e);
+      },
+      [props?.onFocus]
+    );
+
+    const clearMismatchValue = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        const matchSelectedValue = optionsFiltered.find(
+          (opt) =>
+            opt.value === e.target?.value || opt.label === e.target?.value
+        );
+        const isMatchSelectedValue = !!matchSelectedValue;
+
+        let option = matchSelectedValue || {
+          value: "",
+          label: "",
+        };
+
+        if (!isMatchSelectedValue && textValue) {
+          option = {
+            value: "",
+            label: "",
+          };
+        }
+
+        if (keyCode.current === "Enter") {
+          return;
+        }
+
+        setSelectedOption(option);
+        setTextValue(option.label);
+        onSelect?.(option);
+      },
+      [optionsFiltered, textValue]
+    );
+
+    const handleOnBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        setIsFocused(false);
+        clearMismatchValue(e);
+        props?.onBlur?.(e);
+      },
+      [props?.onBlur]
+    );
+
+    const handleOnKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
+        keyCode.current = e.code;
+        props?.onKeyDown?.(e);
+      },
+      [props?.onKeyDown]
+    );
+
     return (
       <div className={`relative ${fullwidth ? "w-full" : ""}`}>
         <TextInput
@@ -170,8 +228,9 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           hasClearIcon={false}
           size={size}
           className={customInputVariant({ size })}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
+          onFocus={handleOnFocus}
+          onBlur={handleOnBlur}
+          onKeyDown={handleOnKeyDown}
           endIcon={
             <div className={iconWrapperVariant({ size })}>
               <ChevronDownIcon

package/src/components/Input/Input.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Input } from "./Input";
+import { Input, InputProps } from "./Input";
 
 const meta = {
   title: "Components/Input",
@@ -20,10 +20,10 @@ const meta = {
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 export const Default = {
   args: {
-    // label: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
     // fullwidth: true,
   },
   render: (args) => {
@@ -32,9 +32,11 @@ export const Default = {
       ...args,
     };
     return (
-      <div className="flex flex-row gap-4 w-full">
-        <Input type="email" placeholder="Email" />
+      <div className="flex flex-row gap-4">
+        <Input id="1" size="lg" placeholder="Email" {...args} />
+        <Input id="2" size="md" placeholder="Email" {...args} />
+        <Input id="3" size="sm" placeholder="Email" {...args} />
       </div>
     );
   },
-} satisfies StoryObj;
+} satisfies Story;

package/src/components/Input/Input.styles.tsx

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+
+export const inputVariants = cva(
+  [
+    "border-0 outline-none",
+    "p-1 flex w-auto h-fit box-border",
+    "peer text-black",
+  ],
+  {
+    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-1 focus:ring-inset focus:ring-input-stroke-active",
+        underline:
+          "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
+      },
+      hiddenPlaceholder: {
+        true: "placeholder:text-transparent",
+      },
+      fullwidth: {
+        true: "w-full",
+      },
+      disabled: {
+        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+      },
+      error: {
+        true: "ring-error focus:ring-error",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "outline",
+      rounded: "normal",
+      fullwidth: false,
+      disabled: false,
+      error: false,
+      hiddenPlaceholder: true,
+    },
+  }
+);

package/src/components/Input/Input.tsx

@@ -1,20 +1,44 @@
-import * as React from "react";
+import React, { InputHTMLAttributes, forwardRef } from "react";
 
 import { cn } from "@/utils/cn";
+import { inputVariants } from "./Input.styles";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export type InputProps = {
+  size?: "sm" | "md" | "lg";
+  rounded?: "none" | "normal" | "full";
+  variant?: "flat" | "outline" | "underline";
+  fullwidth?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  hiddenPlaceholder?: boolean;
+  className?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size">;
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      type = "text",
+      size = "md",
+      variant = "outline",
+      fullwidth = false,
+      disabled = false,
+      error = false,
+      required = false,
+      hiddenPlaceholder = false,
+      ...props
+    },
+    ref
+  ) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          inputVariants({ size, variant, fullwidth, error, hiddenPlaceholder }),
           className
         )}
         ref={ref}
+        disabled={disabled}
         {...props}
       />
     );

package/src/components/Label/Label.styles.ts

@@ -0,0 +1,61 @@
+import { cva } from "class-variance-authority";
+
+export const labelVariant = cva(
+  [
+    "block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "typography-small1",
+        md: "typography-subtitile4",
+        lg: "typography-subtitile1",
+      },
+      disabled: {
+        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled peer-disabled:cursor-not-allowed",
+      },
+      error: {
+        true: "ring-error",
+      },
+      isFloatable: {
+        true: "absolute peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        size: "sm",
+        isFloatable: true,
+        className: [
+          "left-3 -top-1.5 typography-label2 bg-input-label-background",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label2",
+        ],
+      },
+      {
+        size: "md",
+        isFloatable: true,
+        className: [
+          "left-3 -top-1.5 typography-label1 bg-input-label-background",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
+        ],
+      },
+      {
+        size: "lg",
+        isFloatable: true,
+        className: [
+          "left-4 -top-1.5 typography-label1 bg-input-label-background",
+          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
+        ],
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      error: false,
+      isFloatable: false,
+    },
+  }
+);

package/src/components/Label/Label.tsx

@@ -2,25 +2,31 @@
 
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/utils/cn";
-
-const labelVariants = cva(
-  "typography-label1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
+import { labelVariant } from "./Label.styles";
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+    VariantProps<typeof labelVariant>
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
-    className={cn(labelVariants(), className)}
+    className={cn(
+      labelVariant({
+        size: props.size,
+        disabled: props.disabled,
+        error: props.error,
+        isFloatable: props.isFloatable,
+      }),
+      className
+    )}
     {...props}
   />
 ));
+
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };

package/src/components/Navbar/Navbar.stories.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Checkbox } from "../Checkbox/Checkbox";
+import Navbar from "./Navbar";
+
+const meta = {
+  title: "Components/Navbar",
+  component: Navbar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 w-full h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Navbar>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Navbar
+          leftNav={
+            <ul className="flex gap-2">
+              <li>link 1</li>
+              <li>link 2</li>
+              <li>link 3</li>
+            </ul>
+          }
+          center={<>Center text</>}
+          rightNav={
+            <ul className="flex gap-2">
+              <li>sss 1</li>
+              <li>ddd 2</li>
+              <li>vvvv 3</li>
+            </ul>
+          }
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
+export const Custom = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Navbar
+          className="px-8"
+          leftNav={
+            <ul className="flex gap-2">
+              <li>link 1</li>
+              <li>link 2</li>
+              <li>link 3</li>
+            </ul>
+          }
+          center={<>Center text</>}
+          rightNav={
+            <ul className="flex gap-2">
+              <li>sss 1</li>
+              <li>ddd 2</li>
+              <li>vvvv 3</li>
+            </ul>
+          }
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,56 @@
+import { cn } from "@/utils/cn";
+import React, { FC, ReactNode } from "react";
+
+type NavbarProps = {
+  position?: "static" | "sticky";
+  children?: ReactNode;
+  leftNav?: ReactNode;
+  rightNav?: ReactNode;
+  center?: ReactNode;
+  container?: boolean;
+  className?: string;
+};
+
+const Navbar: FC<NavbarProps> = ({
+  children,
+  className,
+  center,
+  leftNav,
+  rightNav,
+  position,
+  container = false,
+}) => {
+  return (
+    <header
+      className={cn(
+        "w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitile2 border-solid border-b-2 bg-[rgb(var(--navbar-bg-color))] text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))]",
+        { position },
+        className
+      )}
+    >
+      <div
+        className={cn("mx-auto flex h-full justify-between items-center", {
+          container,
+        })}
+      >
+        {children || (
+          <>
+            <nav className="flex w-1/2 gap-x-[var(--navbar-gap)] text-xl">
+              {leftNav}
+            </nav>
+
+            <div className="flex flex-shrink-0 flex-wrap justify-center">
+              {center}
+            </div>
+
+            <nav className="flex w-1/2 justify-end gap-x-[var(--navbar-gap)] text-xl">
+              {rightNav}
+            </nav>
+          </>
+        )}
+      </div>
+    </header>
+  );
+};
+
+export default Navbar;

package/src/components/Search/Search.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Search } from "./Search";
+import { error } from "console";
+
+const meta = {
+  title: "Components/Search",
+  component: Search,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Search>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    error: false,
+    // fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4">
+        <Search id="1" size="lg" placeholder="Search" {...args} />
+        <Search id="2" size="md" placeholder="Search" {...args} />
+        <Search id="3" size="sm" placeholder="Search" {...args} />
+      </div>
+    );
+  },
+} satisfies Story;

package/src/components/Search/Search.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Input } from "../Input/Input";
+import { Label } from "../Label/Label";
+
+type SearchProps = {};
+
+function Search(props: any) {
+  return (
+    <div className=" relative">
+      <Input {...props} hiddenPlaceholder />
+      <Label
+        htmlFor={props.id}
+        size={props.size}
+        disabled={props.disabled}
+        error={props.error}
+        className={props.labelClassname ?? ""}
+        isFloatable={true}
+      >
+        Search
+      </Label>
+    </div>
+  );
+}
+
+export { Search };

package/src/components/Text/Text.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/utils/cn";
 import React, { FC, forwardRef } from "react";
 
 export type TextProps = {
@@ -49,7 +50,7 @@ const Text = forwardRef<TextProps["tag"], TextProps>(
   }) => {
     return (
       <Tag
-        className={`typography-${variant} text-${color} ${className}`}
+        className={cn(`typography-${variant} text-${color}`, className)}
         style={style}
       >
         {children}