@rovula/ui 0.0.8 → 0.0.9

package/dist/src/theme/global.css

@@ -812,12 +812,8 @@ video {
   right: 0px;
 }
 
-.top-2 {
-  top: 0.5rem;
-}
-
-.top-4 {
-  top: 1rem;
+.z-10 {
+  z-index: 10;
 }
 
 .z-50 {
@@ -897,6 +893,20 @@ video {
   height: 1.25rem;
 }
 
+.size-6 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.size-\[14px\] {
+  width: 14px;
+  height: 14px;
+}
+
+.max-h-60 {
+  max-height: 15rem;
+}
+
 .w-\[200px\] {
   width: 200px;
 }
@@ -917,6 +927,11 @@ video {
   max-width: 48rem;
 }
 
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -982,6 +997,10 @@ video {
   overflow-x: auto;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1010,6 +1029,10 @@ video {
   border-radius: 0.5rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded-none {
   border-radius: 0px;
 }
@@ -1039,6 +1062,11 @@ video {
   border-color: rgb(var(--error-100) / var(--tw-border-opacity));
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
 .border-info {
   --tw-border-opacity: 1;
   border-color: rgb(var(--info-default) / var(--tw-border-opacity));
@@ -1083,6 +1111,11 @@ video {
   background-color: rgb(var(--error-100) / var(--tw-bg-opacity));
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-info {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--info-default) / var(--tw-bg-opacity));
@@ -1127,6 +1160,11 @@ video {
   background-color: rgb(var(--warning-default) / var(--tw-bg-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .fill-error {
   fill: rgb(var(--error-100) / 1);
 }
@@ -1135,6 +1173,18 @@ video {
   fill: rgb(var(--input-active-stroke-color) / 1);
 }
 
+.fill-input-text {
+  fill: rgb(var(--input-default-text-color) / 1);
+}
+
+.fill-input-text-active {
+  fill: rgb(var(--input-active-text-color) / 1);
+}
+
+.fill-input-text-disabled {
+  fill: rgb(var(--input-disabled-text-color) / 1);
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1176,6 +1226,11 @@ video {
   padding-bottom: 0.25rem;
 }
 
+.py-14 {
+  padding-top: 3.5rem;
+  padding-bottom: 3.5rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1186,6 +1241,22 @@ video {
   padding-bottom: 1rem;
 }
 
+.pe-\[30px\] {
+  padding-inline-end: 30px;
+}
+
+.pe-\[40px\] {
+  padding-inline-end: 40px;
+}
+
+.pe-\[48px\] {
+  padding-inline-end: 48px;
+}
+
+.text-center {
+  text-align: center;
+}
+
 .align-middle {
   vertical-align: middle;
 }
@@ -1453,6 +1524,12 @@ video {
   text-underline-offset: 4px;
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1487,6 +1564,10 @@ video {
   --tw-ring-color: rgb(var(--input-disabled-stroke-color) / var(--tw-ring-opacity));
 }
 
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1671,6 +1752,11 @@ video {
   background-color: rgb(var(--error-120) / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--info-100)) / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/{Select/Select.stories.tsx → Dropdown/Dropdown.stories.tsx}

@@ -1,11 +1,11 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import Select from "./Select";
+import Dropdown from "./Dropdown";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
-  title: "Components/Select",
-  component: Select,
+  title: "Components/Dropdown",
+  component: Dropdown,
   tags: ["autodocs"],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
@@ -18,21 +18,18 @@ const meta = {
       </div>
     ),
   ],
-} satisfies Meta<typeof Select>;
+} satisfies Meta<typeof Dropdown>;
 
 export default meta;
 
-const options = [
-  { value: "option1", label: "Option 1" },
-  { value: "option2", label: "Option 2" },
-  { value: "option3", label: "Option 3" },
-  { value: "option4", label: "Option 4" },
-];
+const options = new Array(100).fill("").map((__, index) => ({
+  value: `option${index + 1}`,
+  label: `Option ${index + 1}`,
+}));
 
 export const Default = {
   args: {
     label: "Choose an option:",
-    // value: "",
     fullwidth: true,
     options,
   },
@@ -43,9 +40,9 @@ export const Default = {
     };
     return (
       <div className="flex flex-row gap-4 w-full">
-        <Select id="1" size="lg" options={options} {...args} />
-        <Select id="2" size="md" options={options} {...args} />
-        <Select id="3" size="sm" options={options} {...args} />
+        <Dropdown id="1" size="lg" options={options} {...args} />
+        <Dropdown id="2" size="md" options={options} {...args} />
+        <Dropdown id="3" size="sm" options={options} {...args} />
       </div>
     );
   },

package/src/components/Dropdown/Dropdown.styles.ts

@@ -0,0 +1,54 @@
+import React from "react";
+import { cva } from "class-variance-authority";
+
+export const iconWrapperVariant = cva(
+  ["absolute inset-y-0 right-0 flex items-center justify-center"],
+  {
+    variants: {
+      size: {
+        sm: "mr-2",
+        md: "mr-3",
+        lg: "mr-4",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export const dropdownIconVariant = cva(["transition-all"], {
+  variants: {
+    size: {
+      sm: "size-[14px]",
+      md: "size-5",
+      lg: "size-6",
+    },
+    disabled: {
+      true: "fill-input-text-disabled",
+      false: "fill-input-text",
+    },
+    isFocus: {
+      true: "fill-input-text-active rotate-180",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    disabled: false,
+    isFocus: false,
+  },
+});
+
+export const customInputVariant = cva([], {
+  variants: {
+    size: {
+      sm: "pe-[30px]",
+      md: "pe-[40px]",
+      lg: "pe-[48px]",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,151 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+import TextInput, { InputProps } from "../TextInput/TextInput";
+import {
+  customInputVariant,
+  dropdownIconVariant,
+  iconWrapperVariant,
+} from "./Dropdown.styles";
+
+import { ChevronDownIcon } from "@heroicons/react/16/solid";
+
+type Options = {
+  value: string;
+  label: string;
+};
+
+type DropdownProps = {
+  id?: string;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  rounded?: "none" | "normal" | "full";
+  variant?: "flat" | "outline" | "underline";
+  helperText?: string;
+  errorMessage?: string;
+  filterMode?: boolean;
+  fullwidth?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  required?: boolean;
+  className?: string;
+  options: Options[];
+  value?: Options;
+  onChangeText?: InputProps["onChange"];
+  onSelect?: (value: Options) => void;
+} & Omit<InputProps, "value">;
+
+const Dropdown = ({
+  id,
+  options,
+  value,
+  label,
+  size = "md",
+  rounded = "normal",
+  variant = "outline",
+  helperText,
+  errorMessage,
+  fullwidth = true,
+  disabled = false,
+  error = false,
+  filterMode = false,
+  required = true,
+  onChangeText,
+  onSelect,
+  ...props
+}: DropdownProps) => {
+  const _id = id || `${label}-select`;
+
+  const [isFocused, setIsFocused] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<
+    Options | null | undefined
+  >(null);
+  const [textValue, setTextValue] = useState("");
+
+  useEffect(() => {
+    if (value && !selectedOption) {
+      setSelectedOption(value);
+    }
+  }, [value, selectedOption]);
+
+  const handleOnChangeText = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChangeText?.(event);
+      setTextValue(event.target.value);
+    },
+    [onChangeText]
+  );
+
+  const handleOptionClick = useCallback(
+    (option: Options) => {
+      setSelectedOption(option);
+      setTextValue(option.label);
+      onSelect?.(option);
+    },
+    [onSelect]
+  );
+
+  const optionsFiltered = useMemo(() => {
+    return options.filter(
+      (option) =>
+        !filterMode ||
+        option.label?.toLowerCase().includes(textValue?.toLowerCase())
+    );
+  }, [options, filterMode, textValue]);
+
+  const renderOptions = () => (
+    <ul className="absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-md z-10 max-h-60 overflow-y-auto">
+      {optionsFiltered.map((option) => (
+        <li
+          key={option.value}
+          onMouseDown={() => handleOptionClick(option)}
+          className={`px-4 py-2 hover:bg-gray-100 cursor-pointer ${
+            selectedOption?.value === option.value ? " bg-gray-200" : ""
+          }`}
+        >
+          {option.label}
+        </li>
+      ))}
+      {optionsFiltered.length === 0 && (
+        <li className="px-4 py-14 text-center text-input-text">Not found</li>
+      )}
+    </ul>
+  );
+
+  return (
+    <div className={`relative ${fullwidth ? "w-full" : ""}`}>
+      <TextInput
+        {...props}
+        readOnly={!filterMode}
+        value={textValue}
+        onChange={handleOnChangeText}
+        label={label}
+        placeholder=" "
+        type="text"
+        rounded={rounded}
+        variant={variant}
+        helperText={helperText}
+        errorMessage={errorMessage}
+        fullwidth={fullwidth}
+        error={error}
+        required={required}
+        id={_id}
+        disabled={disabled}
+        hasClearIcon={false}
+        size={size}
+        className={customInputVariant({ size })}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        endIcon={
+          <div className={iconWrapperVariant({ size })}>
+            <ChevronDownIcon
+              className={dropdownIconVariant({ size, isFocus: isFocused })}
+            />
+          </div>
+        }
+      />
+      {isFocused && renderOptions()}
+    </div>
+  );
+};
+
+export default Dropdown;

package/src/components/TextInput/TextInput.tsx

@@ -1,4 +1,10 @@
-import React, { FC, forwardRef, useImperativeHandle, useRef } from "react";
+import React, {
+  FC,
+  ReactNode,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from "react";
 import {
   helperTextVariant,
   iconVariant,
@@ -9,7 +15,7 @@ import {
 import { twMerge } from "tailwind-merge";
 import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
 
-type InputProps = {
+export type InputProps = {
   id?: string;
   label?: string;
   size?: "sm" | "md" | "lg";
@@ -23,6 +29,7 @@ type InputProps = {
   error?: boolean;
   required?: boolean;
   hasClearIcon?: boolean;
+  endIcon?: ReactNode;
   className?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 
@@ -42,6 +49,7 @@ const TextInput: FC<InputProps> = forwardRef(
       error = false,
       required = true,
       hasClearIcon = true,
+      endIcon,
       ...props
     },
     ref
@@ -97,6 +105,7 @@ const TextInput: FC<InputProps> = forwardRef(
               />
             </div>
           )}
+          {endIcon}
           <label htmlFor={_id} className={labelClassname}>
             {label} {required && <span className="text-error">*</span>}
           </label>

package/src/index.ts

@@ -6,7 +6,7 @@ export { default as Table } from "./components/Table/Table";
 export { default as TextInput } from "./components/TextInput/TextInput";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
-export { default as Select } from "./components/Select/Select";
+export { default as Dropdown } from "./components/Dropdown/Dropdown";
 
 // UTILS
 export {

package/dist/cjs/types/components/Select/Select copy.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-type Options = {
-    value: string;
-    label: string;
-};
-type SelectProps = {
-    id?: string;
-    label?: string;
-    size?: "sm" | "md" | "lg";
-    rounded?: "none" | "normal" | "full";
-    variant?: "flat" | "outline" | "underline";
-    type?: React.HTMLInputTypeAttribute;
-    helperText?: string;
-    errorMessage?: string;
-    fullwidth?: boolean;
-    disabled?: boolean;
-    error?: boolean;
-    required?: boolean;
-    className?: string;
-    options: Options[];
-} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, "size">;
-declare const Select: ({ id, options, label, size, rounded, variant, type, helperText, errorMessage, fullwidth, disabled, error, required, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
-export default Select;

package/dist/cjs/types/components/Select/Select.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-type Options = {
-    value: string;
-    label: string;
-};
-type SelectProps = {
-    id?: string;
-    label?: string;
-    size?: "sm" | "md" | "lg";
-    rounded?: "none" | "normal" | "full";
-    variant?: "flat" | "outline" | "underline";
-    type?: React.HTMLInputTypeAttribute;
-    helperText?: string;
-    errorMessage?: string;
-    fullwidth?: boolean;
-    disabled?: boolean;
-    error?: boolean;
-    required?: boolean;
-    className?: string;
-    options: Options[];
-} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, "size">;
-declare const Select: ({ id, options, label, size, rounded, variant, type, helperText, errorMessage, fullwidth, disabled, error, required, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
-export default Select;