@rovula/ui 0.1.6 → 0.1.8

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import * as yup from "yup";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogBody,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -12,6 +14,8 @@ import {
 import Button from "../Button/Button";
 import { Label } from "../Label/Label";
 import { Input } from "../Input/Input";
+import { Field, Form, ValidationHintList, ValidationHintRule } from "../Form";
+import PasswordInput from "../PasswordInput";
 
 const meta = {
   title: "Components/Dialog",
@@ -116,3 +120,172 @@ export const Demo = {
     );
   },
 } satisfies StoryObj;
+
+const passwordHints = [
+  {
+    id: "min-length",
+    label: "Minimum 12 characters",
+    validate: (values: ChangePasswordFormValues) =>
+      values.newPassword.length >= 12,
+    when: (values: ChangePasswordFormValues) => Boolean(values.newPassword),
+  },
+  {
+    id: "lower-and-upper",
+    label: "At least a lower and upper case",
+    validate: (values: ChangePasswordFormValues) =>
+      /[a-z]/.test(values.newPassword) && /[A-Z]/.test(values.newPassword),
+    when: (values: ChangePasswordFormValues) => Boolean(values.newPassword),
+  },
+  {
+    id: "special",
+    label: "At least 1 special character",
+    validate: (values: ChangePasswordFormValues) =>
+      /[^A-Za-z0-9]/.test(values.newPassword),
+    when: (values: ChangePasswordFormValues) => Boolean(values.newPassword),
+  },
+  {
+    id: "numeral",
+    label: "At least 1 numeral",
+    validate: (values: ChangePasswordFormValues) =>
+      /\d/.test(values.newPassword),
+    when: (values: ChangePasswordFormValues) => Boolean(values.newPassword),
+  },
+  {
+    id: "capital",
+    label: "At least 1 capital letter",
+    validate: (values: ChangePasswordFormValues) =>
+      /[A-Z]/.test(values.newPassword),
+    when: (values: ChangePasswordFormValues) => Boolean(values.newPassword),
+  },
+  {
+    id: "match",
+    label: "Password and confirmation are matching",
+    validate: (values: ChangePasswordFormValues) =>
+      Boolean(values.newPassword) &&
+      values.newPassword === values.confirmPassword,
+    when: (values: ChangePasswordFormValues) =>
+      Boolean(values.newPassword) && Boolean(values.confirmPassword),
+  },
+] satisfies ValidationHintRule<ChangePasswordFormValues>[];
+
+type ChangePasswordFormValues = {
+  newPassword: string;
+  confirmPassword: string;
+};
+
+const changePasswordSchema = yup.object({
+  newPassword: yup
+    .string()
+    .required("New password is required")
+    .min(12, "Password must be at least 12 characters")
+    .matches(/[a-z]/, "Password must include a lowercase letter")
+    .matches(/[A-Z]/, "Password must include an uppercase letter")
+    .matches(/\d/, "Password must include a numeral")
+    .matches(/[^A-Za-z0-9]/, "Password must include a special character"),
+  confirmPassword: yup
+    .string()
+    .required("Please confirm your password")
+    .oneOf([yup.ref("newPassword")], "Passwords must match"),
+});
+
+export const FigmaChangePassword = {
+  render: () => {
+    return (
+      <div className="flex w-full">
+        <Dialog defaultOpen>
+          <DialogContent className="min-h-[686px] max-w-[650px]">
+            <Form<ChangePasswordFormValues>
+              className="contents"
+              defaultValues={{
+                newPassword: "",
+                confirmPassword: "",
+              }}
+              mode="onTouched"
+              validationSchema={changePasswordSchema}
+              onSubmit={(values) => {
+                // eslint-disable-next-line no-console
+                console.log("Change password submit:", values);
+              }}
+            >
+              {({ formState, watch }) => {
+                const newPassword = watch("newPassword");
+                const confirmPassword = watch("confirmPassword");
+
+                return (
+                  <>
+                    <DialogHeader>
+                      <DialogTitle>Welcome!</DialogTitle>
+                      <DialogDescription>
+                        Please create a new password to replace the temporary
+                        password.
+                      </DialogDescription>
+                    </DialogHeader>
+
+                    <DialogBody>
+                      <div className="flex flex-col gap-4">
+                        <Field<ChangePasswordFormValues, "newPassword">
+                          name="newPassword"
+                          component={PasswordInput}
+                          componentProps={{
+                            id: "new-password",
+                            label: "New password",
+                            type: "password",
+                            required: true,
+                            fullwidth: true,
+                            size: "lg",
+                          }}
+                        />
+                        <Field<ChangePasswordFormValues, "confirmPassword">
+                          name="confirmPassword"
+                          component={PasswordInput}
+                          componentProps={{
+                            id: "confirm-password",
+                            label: "Confirm password",
+                            type: "password",
+                            required: true,
+                            fullwidth: true,
+                            size: "lg",
+                          }}
+                        />
+
+                        <ValidationHintList<ChangePasswordFormValues>
+                          values={{
+                            newPassword: newPassword || "",
+                            confirmPassword: confirmPassword || "",
+                          }}
+                          rules={passwordHints}
+                        />
+                      </div>
+                    </DialogBody>
+
+                    <DialogFooter>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        color="primary"
+                        size="lg"
+                        fullwidth={false}
+                      >
+                        Back
+                      </Button>
+                      <Button
+                        type="submit"
+                        size="lg"
+                        fullwidth={false}
+                        className="w-[180px]"
+                        disabled={!formState.isValid || formState.isSubmitting}
+                        isLoading={formState.isSubmitting}
+                      >
+                        Save changes
+                      </Button>
+                    </DialogFooter>
+                  </>
+                );
+              }}
+            </Form>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Dialog/Dialog.tsx

@@ -21,8 +21,8 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-base-popup-curtain data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      "fixed inset-0 z-50 bg-modal-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
     )}
     {...props}
   />
@@ -44,15 +44,15 @@ const DialogContent = React.forwardRef<
       closeButtonClassName,
       ...props
     },
-    ref
+    ref,
   ) => (
     <DialogPortal>
       <DialogOverlay />
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-base-popup bg-base-popup p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md",
-          className
+          "fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-32px)] max-w-[650px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-md bg-modal-surface p-8 text-text-g-contrast-medium shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          className,
         )}
         {...props}
       >
@@ -60,8 +60,8 @@ const DialogContent = React.forwardRef<
         {showCloseButton && (
           <DialogPrimitive.Close
             className={cn(
-              "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-primary-foreground",
-              closeButtonClassName
+              "absolute right-8 top-8 rounded-sm opacity-70 ring-offset-bg-bg1 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-input-active-stroke focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-state-primary-text-solid",
+              closeButtonClassName,
             )}
           >
             <XMarkIcon className="h-4 w-4" />
@@ -70,7 +70,7 @@ const DialogContent = React.forwardRef<
         )}
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  ),
 );
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
@@ -78,15 +78,25 @@ const DialogHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col gap-2 text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogBody = ({
+  className,
+  scrollable = false,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { scrollable?: boolean }) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      "flex flex-1 min-h-0 flex-col mt-8",
+      scrollable && "overflow-y-auto",
+      className,
     )}
     {...props}
   />
 );
-DialogHeader.displayName = "DialogHeader";
+DialogBody.displayName = "DialogBody";
 
 const DialogFooter = ({
   className,
@@ -94,8 +104,8 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ",
-      className
+      "flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end sm:gap-6",
+      className,
     )}
     {...props}
   />
@@ -108,7 +118,10 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn("typography-h5 tracking-tight ", className)}
+    className={cn(
+      "typography-h4 tracking-tight text-text-contrast-max",
+      className,
+    )}
     {...props}
   />
 ));
@@ -120,7 +133,10 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm", className)}
+    className={cn(
+      "typography-subtitle1 text-text-g-contrast-medium",
+      className,
+    )}
     {...props}
   />
 ));
@@ -134,6 +150,7 @@ export {
   DialogTrigger,
   DialogContent,
   DialogHeader,
+  DialogBody,
   DialogFooter,
   DialogTitle,
   DialogDescription,

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

@@ -14,7 +14,7 @@ export const iconWrapperVariant = cva(
     defaultVariants: {
       size: "md",
     },
-  }
+  },
 );
 
 export const dropdownIconVariant = cva(["transition-all"], {

package/src/components/Dropdown/Dropdown.tsx

@@ -50,6 +50,7 @@ export type DropdownProps = {
   optionContainerClassName?: string;
   optionItemClassName?: string;
   optionNotFoundItemClassName?: string;
+  segmentedInput?: boolean;
   options: Options[];
   value?: Options;
   onChangeText?: InputProps["onChange"];
@@ -88,9 +89,10 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       optionContainerClassName,
       optionItemClassName,
       optionNotFoundItemClassName,
+      segmentedInput = true,
       ...props
     },
-    ref
+    ref,
   ) => {
     const _id = id || `${label}-select`;
 
@@ -136,7 +138,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           clearMismatchValue(event as any);
         }
       },
-      [onChangeText]
+      [onChangeText],
     );
 
     const handleOptionClick = useCallback(
@@ -146,14 +148,14 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         onSelect?.(option);
         setIsFocused(false);
       },
-      [onSelect]
+      [onSelect],
     );
 
     const optionsFiltered = useMemo(() => {
       return options.filter(
         (option) =>
           !filterMode ||
-          option.label?.toLowerCase().includes(textValue?.toLowerCase())
+          option.label?.toLowerCase().includes(textValue?.toLowerCase()),
       );
     }, [options, filterMode, textValue]);
 
@@ -236,7 +238,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
                       "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitle5":
                         selectedOption?.value === option.value,
                     },
-                    optionItemClassName
+                    optionItemClassName,
                   ),
                 })}
               </Fragment>
@@ -263,7 +265,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
               key="not-found"
               className={cn(
                 "px-4 py-14 text-center text-input-text",
-                optionNotFoundItemClassName
+                optionNotFoundItemClassName,
               )}
             >
               Not found
@@ -286,7 +288,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           className={cn(
             "absolute mt-1 w-full max-h-60 overflow-y-auto",
             !usePortal && (isAbove ? "bottom-full mb-1" : "top-full mt-1"),
-            optionContainerClassName
+            optionContainerClassName,
           )}
           style={dropdownStyles}
         />
@@ -298,14 +300,14 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         setIsFocused(true);
         props?.onFocus?.(e);
       },
-      [props?.onFocus]
+      [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
+            opt.value === e.target?.value || opt.label === e.target?.value,
         );
         const isMatchSelectedValue = !!matchSelectedValue;
 
@@ -329,7 +331,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         setTextValue(option.label);
         onSelect?.(option);
       },
-      [optionsFiltered, textValue]
+      [optionsFiltered, textValue],
     );
 
     const handleOnBlur = useCallback(
@@ -338,7 +340,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         clearMismatchValue(e);
         props?.onBlur?.(e);
       },
-      [props?.onBlur, clearMismatchValue]
+      [props?.onBlur, clearMismatchValue],
     );
 
     const handleOnKeyDown = useCallback(
@@ -346,7 +348,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         keyCode.current = e.code;
         props?.onKeyDown?.(e);
       },
-      [props?.onKeyDown]
+      [props?.onKeyDown],
     );
 
     return (
@@ -377,7 +379,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           id={_id}
           disabled={disabled}
           size={size}
-          className={customInputVariant({ size })}
+          className={segmentedInput ? customInputVariant({ size }) : undefined}
           onFocus={handleOnFocus}
           onBlur={handleOnBlur}
           onKeyDown={handleOnKeyDown}
@@ -392,7 +394,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           ))}
       </div>
     );
-  }
+  },
 );
 
 export default Dropdown;

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -52,7 +52,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground 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",
+      "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low 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}
@@ -74,7 +74,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground 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",
+        "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low 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}
@@ -174,7 +174,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-3 py-2 typography-small4 text-text-grey-medium",
+      "px-3 py-2 typography-small4 text-text-g-contrast-medium",
       inset && "pl-8",
       className
     )}

package/src/components/FocusedScrollView/FocusedScrollView.stories.tsx

@@ -27,19 +27,19 @@ export const VerticalScroll: Story = {
         <div className="flex gap-2">
           <button
             onClick={() => setSelected("item-5")}
-            className="px-3 py-1 bg-primary text-white rounded"
+            className="px-3 py-1 bg-primary text-state-primary-text-solid rounded"
           >
             Scroll to Item 5
           </button>
           <button
             onClick={() => setSelected("item-20")}
-            className="px-3 py-1 bg-primary text-white rounded"
+            className="px-3 py-1 bg-primary text-state-primary-text-solid rounded"
           >
             Scroll to Item 20
           </button>
           <button
             onClick={() => setSelected("item-29")}
-            className="px-3 py-1 bg-primary text-white rounded"
+            className="px-3 py-1 bg-primary text-state-primary-text-solid rounded"
           >
             Scroll to Item 30
           </button>
@@ -51,8 +51,8 @@ export const VerticalScroll: Story = {
               key={`item-${index + 1}`}
               className={`px-4 py-2 ${
                 selected === `item-${index + 1}`
-                  ? "bg-secondary text-secondary-foreground"
-                  : "bg-white"
+                  ? "bg-secondary text-state-secondary-text-solid"
+                  : "bg-bg-bg1"
               }`}
             >
               {item}
@@ -76,19 +76,19 @@ export const HorizontalScroll: Story = {
         <div className="flex gap-2">
           <button
             onClick={() => setSelected("item-5")}
-            className="px-3 py-1 bg-primary text-white rounded"
+            className="px-3 py-1 bg-primary text-state-primary-text-solid rounded"
           >
             Scroll to Item 5
           </button>
           <button
             onClick={() => setSelected("item-15")}
-            className="px-3 py-1 bg-primary text-white rounded"
+            className="px-3 py-1 bg-primary text-state-primary-text-solid rounded"
           >
             Scroll to Item 15
           </button>
           <button
             onClick={() => setSelected("item-25")}
-            className="px-3 py-1 bg-primary text-white rounded"
+            className="px-3 py-1 bg-primary text-state-primary-text-solid rounded"
           >
             Scroll to Item 25
           </button>
@@ -100,8 +100,8 @@ export const HorizontalScroll: Story = {
               key={`item-${index + 1}`}
               className={`inline-block w-28 h-12 mx-2 text-center leading-[3rem] rounded ${
                 selected === `item-${index + 1}`
-                  ? "bg-secondary text-secondary-foreground"
-                  : "bg-gray-200"
+                  ? "bg-secondary text-state-secondary-text-solid"
+                  : "bg-transparent-grey2-16"
               }`}
             >
               {item}