@rovula/ui 0.0.7 → 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 {
@@ -854,6 +850,10 @@ video {
   margin-top: 6px;
 }
 
+.box-border {
+  box-sizing: border-box;
+}
+
 .block {
   display: block;
 }
@@ -893,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;
 }
@@ -901,6 +915,10 @@ video {
   width: 400px;
 }
 
+.w-auto {
+  width: auto;
+}
+
 .w-full {
   width: 100%;
 }
@@ -909,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;
 }
@@ -974,6 +997,10 @@ video {
   overflow-x: auto;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1002,6 +1029,10 @@ video {
   border-radius: 0.5rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded-none {
   border-radius: 0px;
 }
@@ -1031,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));
@@ -1075,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));
@@ -1119,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);
 }
@@ -1127,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;
 }
@@ -1168,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;
@@ -1178,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;
 }
@@ -1445,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;
@@ -1479,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);
@@ -1663,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));
@@ -1730,9 +1824,9 @@ video {
   padding-inline-end: 2rem;
 }
 
-.focus\:ring-2:focus {
+.focus\:ring-1:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
@@ -1740,73 +1834,111 @@ video {
   --tw-ring-inset: inset;
 }
 
+.focus\:ring-error:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--error-100) / var(--tw-ring-opacity));
+}
+
+.focus\:ring-input-stroke-active:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--input-active-stroke-color) / var(--tw-ring-opacity));
+}
+
 .active\:scale-\[98\%\]:active {
   --tw-scale-x: 98%;
   --tw-scale-y: 98%;
   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));
 }
 
-.peer:focus ~ .peer-focus\:-top-1 {
-  top: -0.25rem;
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2 {
+  top: 0.5rem;
 }
 
-.peer:focus ~ .peer-focus\:-top-1\.5 {
-  top: -0.375rem;
+.peer:placeholder-shown ~ .peer-placeholder-shown\:top-2 {
+  top: 0.5rem;
 }
 
-.peer:focus ~ .peer-focus\:flex {
-  display: flex;
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-4 {
+  top: 1rem;
 }
 
-.peer:focus ~ .peer-focus\:bg-input-label-background {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
+.peer:placeholder-shown ~ .peer-placeholder-shown\:top-4 {
+  top: 1rem;
 }
 
-.peer:focus ~ .peer-focus\:text-input-text-active {
-  --tw-text-opacity: 1;
-  color: rgb(var(--input-active-text-color) / var(--tw-text-opacity));
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:bg-transparent {
+  background-color: transparent;
 }
 
-.peer:focus ~ .peer-focus\:typography-label1 {
-  font-size: 12px;
-  line-height: 12px;
+.peer:placeholder-shown ~ .peer-placeholder-shown\:bg-transparent {
+  background-color: transparent;
+}
+
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1 {
+  font-size: 16px;
+  line-height: 24px;
   font-weight: 400;
 }
 
-.peer:focus ~ .peer-focus\:typography-label2 {
-  font-size: 10px;
-  line-height: 10px;
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1 {
+  font-size: 16px;
+  line-height: 24px;
   font-weight: 400;
 }
 
-.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:-top-1\.5 {
-  top: -0.375rem;
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
 }
 
-.peer:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:-top-1\.5 {
-  top: -0.375rem;
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
 }
 
-.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:typography-label1 {
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-small1 {
   font-size: 12px;
-  line-height: 12px;
+  line-height: 14px;
   font-weight: 400;
 }
 
-.peer:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:typography-label1 {
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-small1 {
   font-size: 12px;
-  line-height: 12px;
+  line-height: 14px;
   font-weight: 400;
 }
 
-.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:typography-label2 {
-  font-size: 10px;
-  line-height: 10px;
+.peer:focus ~ .peer-focus\:-top-1 {
+  top: -0.25rem;
+}
+
+.peer:focus ~ .peer-focus\:-top-1\.5 {
+  top: -0.375rem;
+}
+
+.peer:focus ~ .peer-focus\:flex {
+  display: flex;
+}
+
+.peer:focus ~ .peer-focus\:bg-input-label-background {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
+}
+
+.peer:focus ~ .peer-focus\:text-input-text-active {
+  --tw-text-opacity: 1;
+  color: rgb(var(--input-active-text-color) / var(--tw-text-opacity));
+}
+
+.peer:focus ~ .peer-focus\:typography-label1 {
+  font-size: 12px;
+  line-height: 12px;
   font-weight: 400;
 }
 
-.peer:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:typography-label2 {
+.peer:focus ~ .peer-focus\:typography-label2 {
   font-size: 10px;
   line-height: 10px;
   font-weight: 400;

package/package.json

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

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

@@ -0,0 +1,49 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+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/Dropdown",
+  component: Dropdown,
+  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 Dropdown>;
+
+export default meta;
+
+const options = new Array(100).fill("").map((__, index) => ({
+  value: `option${index + 1}`,
+  label: `Option ${index + 1}`,
+}));
+
+export const Default = {
+  args: {
+    label: "Choose an option:",
+    fullwidth: true,
+    options,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <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>
+    );
+  },
+} satisfies StoryObj;

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.stories.tsx

@@ -35,9 +35,9 @@ export const Default = {
     };
     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} />
+        <TextInput id="1" size="lg" {...args} />
+        <TextInput id="2" size="md" {...args} />
+        <TextInput id="3" size="sm" {...args} />
       </div>
     );
   },