@rovula/ui 0.0.17 → 0.0.19

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import DatePicker from "./DatePicker";
+
+// import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+
+const meta = {
+  title: "Components/DatePicker",
+  component: DatePicker,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    const [date, setDate] = React.useState<Date | undefined>(undefined);
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <DatePicker date={date} onSelect={setDate} />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import React, { FC, useState } from "react";
+import { CalendarIcon } from "@heroicons/react/16/solid";
+
+import { Calendar } from "../Calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover";
+import { Modifiers } from "react-day-picker";
+import { TextInput } from "../TextInput/TextInput";
+import { format } from "date-fns/format";
+
+type DatePickerProps = {
+  date: Date | undefined;
+  onSelect: (
+    selected: Date | undefined,
+    triggerDate: Date,
+    modifiers: Modifiers,
+    e: React.MouseEvent | React.KeyboardEvent
+  ) => void | undefined;
+};
+
+const DatePicker: FC<DatePickerProps> = ({ date, onSelect }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <div className="flex">
+            <TextInput
+              fullwidth
+              id="2"
+              readOnly
+              label="Date"
+              size="md"
+              value={date ? format(date, "dd MMM yyyy") : isOpen ? " " : ""}
+              hasClearIcon={false}
+              endIcon={<CalendarIcon fill="inherit" />}
+            />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={(...value) => {
+              onSelect?.(...value);
+              setIsOpen(false);
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
+export default DatePicker;

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+
+const meta = {
+  title: "Components/Popver",
+  component: Popover,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Popover>;
+
+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">
+        <Popover>
+          <PopoverTrigger>Open</PopoverTrigger>
+          <PopoverContent>Place content for the popover here.</PopoverContent>
+        </Popover>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/utils/cn";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-72 rounded-md border bg-popup-background border-none overflow-hidden p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

package/src/components/TextInput/TextInput.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import TextInput from "./TextInput";
+import { CalendarIcon } from "@heroicons/react/16/solid";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
@@ -13,7 +14,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full bg-[rgb(var(--other-bg-2))]">
         <Story />
       </div>
     ),
@@ -87,3 +88,38 @@ export const CustomLabel = {
     );
   },
 } satisfies StoryObj;
+
+export const FuctionInput = {
+  args: {
+    label: "Placeholder Text",
+    disabled: false,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <TextInput
+          id="1"
+          size="lg"
+          {...args}
+          endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+        />
+        <TextInput
+          id="2"
+          size="md"
+          {...args}
+          endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+        />
+        <TextInput
+          id="3"
+          size="sm"
+          {...args}
+          endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

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

@@ -4,7 +4,7 @@ export const inputVariant = cva(
   [
     "border-0 outline-none",
     "p-1 flex w-auto box-border",
-    "peer text-black placeholder:text-transparent",
+    "peer text-black placeholder:text-transparent bg-transparent caret-primary",
   ],
   {
     variants: {
@@ -37,6 +37,9 @@ export const inputVariant = cva(
       hasClearIcon: {
         true: "",
       },
+      rightSectionIcon: {
+        false: "",
+      },
     },
     compoundVariants: [
       {
@@ -58,6 +61,21 @@ export const inputVariant = cva(
         size: "lg",
         class: "focus:pe-10",
       },
+      {
+        rightSectionIcon: true,
+        size: "sm",
+        class: "pe-[38px]",
+      },
+      {
+        rightSectionIcon: true,
+        size: "md",
+        class: "pe-[46px]",
+      },
+      {
+        rightSectionIcon: true,
+        size: "lg",
+        class: "pe-[72px]",
+      },
     ],
     defaultVariants: {
       size: "md",
@@ -67,6 +85,7 @@ export const inputVariant = cva(
       disabled: false,
       error: false,
       hasClearIcon: false,
+      rightSectionIcon: false,
     },
   }
 );
@@ -167,3 +186,29 @@ export const iconVariant = cva(
     },
   }
 );
+
+export const sectionIconWrapperVariant = cva(
+  [
+    "absolute inset-y-0 right-0 items-center justify-center flex",
+    "border-l border-l-input-stroke peer-hover:border-l-input-active peer-focus:border-l-input-stroke-active peer-disabled:border-l-input-stroke-disabled",
+    "fill-input-text peer-hover:fill-input-text-active peer-focus:fill-input-text-active",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-1 size-[30px]",
+        md: "p-2 size-[38px]",
+        lg: "p-3 size-14",
+      },
+      rounded: {
+        none: "rounded-r-none",
+        normal: "rounded-r-xl",
+        full: "rounded-r-full",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      rounded: "normal",
+    },
+  }
+);

package/src/components/TextInput/TextInput.tsx

@@ -11,6 +11,7 @@ import {
   iconWrapperVariant,
   inputVariant,
   labelVariant,
+  sectionIconWrapperVariant,
 } from "./TextInput.styles";
 import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
@@ -58,6 +59,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const _id = id || `${type}-${label}-input`;
+    const hasRightSectionIcon = !!endIcon;
     const inputClassname = inputVariant({
       size,
       rounded,
@@ -65,7 +67,8 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       fullwidth,
       disabled,
       error,
-      hasClearIcon,
+      hasClearIcon: hasRightSectionIcon ? false : hasClearIcon,
+      rightSectionIcon: hasRightSectionIcon,
     });
     const labelClassname = labelVariant({
       size,
@@ -75,6 +78,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     const helperTextClassname = helperTextVariant({ size, error, disabled });
     const iconWrapperClassname = iconWrapperVariant({ size });
     const iconClassname = iconVariant({ size });
+    const sectionIconWrapperClassname = sectionIconWrapperVariant({
+      size,
+      rounded,
+    });
 
     useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
 
@@ -96,7 +103,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             disabled={disabled}
             className={cn(inputClassname, props.className)}
           />
-          {hasClearIcon && (
+          {hasClearIcon && !hasRightSectionIcon && (
             <div className={iconWrapperClassname}>
               <XCircleIcon
                 type="button"
@@ -105,7 +112,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
               />
             </div>
           )}
-          {endIcon}
+          {hasRightSectionIcon && (
+            <div className={sectionIconWrapperClassname}>{endIcon}</div>
+          )}
+
           <label htmlFor={_id} className={cn(labelClassname, labelClassName)}>
             {label} {required && <span className="text-error">*</span>}
           </label>

package/src/index.ts

@@ -13,6 +13,13 @@ export { Navbar } from "./components/Navbar";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Collapsible } from "./components/Collapsible";
+export { Calendar } from "./components/Calendar";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "./components/Popover/Popover";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";

package/src/theme/global.css

@@ -176,6 +176,10 @@
     --text-grey-light: 164 169 178;
     --text-white: 255 255 255;
 
+    /* Other */
+    --other-bg: var(--white);
+    --other-bg-2: var(--white);
+
     /* Other/Popup */
     --popup-background: 249 251 255;
     /* Other/Popup Curtain */
@@ -192,8 +196,8 @@
   
     /* TODO for shadcn, wait for refactor */
     /* --background: 0 0% 100%; */
-    --background: 220 100% 99%;
-    --foreground: 222.2 47.4% 11.2%;
+    --background: var(--brand-background);
+    --foreground: var(--text-white:);
  
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
@@ -204,8 +208,8 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
  
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+    --card: var(--white);
+    --card-foreground: var(--primary);
  
     --primary: var(--primary-default);
  

package/src/theme/presets/colors.js

@@ -7,8 +7,8 @@ module.exports = {
       colors: {
         border: "hsl(var(--border))",
         ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        background: "rgb(var(--background) / <alpha-value>)",
+        foreground: "rgb(var(--foreground) / <alpha-value>)",
         // Palette colors
         themes: {
           50: "rgb(var(--themes-50) / <alpha-value>)",