@ourtrip/ui 1.0.0

package/src/components/collapse.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React, { FC, ReactNode, useState } from 'react';
+import { CaretDown, CaretUp } from '@phosphor-icons/react';
+
+type TToggleType = 'bottom' | 'right';
+type IToggleTextType = {
+  open: string;
+  close: string;
+};
+
+interface ICollapseProps {
+  title: string;
+  content: ReactNode;
+  showPreview?: boolean;
+  toggleText?: IToggleTextType;
+  togglePosition?: TToggleType;
+}
+
+const Collapse: FC<ICollapseProps> = ({
+  title,
+  content,
+  showPreview = false,
+  togglePosition = 'right',
+  toggleText
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div
+      className={`relative flex items-start ${
+        togglePosition === 'right' ? 'flex-row' : 'flex-col'
+      } gap-3`}
+      onClick={() => setOpen(prev => !prev)}
+    >
+      <div className='mt-1'>
+        <h3 className='text-sm text-primary-900'>{title}</h3>
+        <div
+          className={`overflow-hidden transition-max-height duration-300 ease-in-out ${
+            open ? 'max-h-[1000px]' : showPreview ? 'max-h-12' : 'max-h-0'
+          }`}
+        >
+          <p className='mt-1 text-gray-500'>{content}</p>
+        </div>
+      </div>
+      <div className='flex items-center gap-2'>
+        {toggleText && <span>{open ? toggleText.close : toggleText.open}</span>}
+        <div className='w-7 h-7 rounded-full bg-gray-100 flex items-center justify-center'>
+          {open ? <CaretUp size={18} /> : <CaretDown size={18} />}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Collapse;

package/src/components/divider.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import React, { HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+interface IDivider extends HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  fullHeight?: boolean;
+  className?: string;
+}
+
+const Divider = ({
+  orientation = 'vertical',
+  fullHeight,
+  className,
+  ...props
+}: IDivider) => {
+  const dividerClass = classNames({
+    'w-px h-10 bg-gray-200': orientation === 'vertical' && !fullHeight,
+    'w-full h-px bg-gray-200': orientation === 'horizontal',
+    'w-px h-full bg-gray-200': orientation === 'vertical' && fullHeight,
+    [className as string]: className
+  });
+
+  return <div {...props} className={dividerClass} />;
+};
+
+export default Divider;

package/src/components/input.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+/* eslint-disable no-param-reassign */
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, {
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+  forwardRef,
+  useRef
+} from 'react';
+
+interface IInput
+  extends DetailedHTMLProps<
+    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  label?: string;
+  dense?: boolean;
+  floating?: boolean;
+  border?: boolean;
+  color?: 'white' | 'gray';
+  error?: string;
+  focus?: Function;
+  mask?: Function;
+  hasInitialValue?: boolean;
+}
+
+const Input = forwardRef(
+  (
+    {
+      id,
+      label,
+      placeholder,
+      color = 'white',
+      dense,
+      floating,
+      border,
+      onChange,
+      onFocus,
+      onBlur,
+      focus,
+      error,
+      disabled,
+      ...props
+    }: IInput,
+    ref: any
+  ) => {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    return (
+      <div
+        aria-labelledby={id}
+        onClick={() => inputRef.current?.focus()}
+        className={`flex flex-col w-full ${props.className}`}
+      >
+        <div
+          onClick={() => {
+            if (ref?.current) {
+              ref.current?.focus();
+            } else {
+              focus?.();
+            }
+          }}
+        >
+          {label && (
+            <label htmlFor={id} className='mb-2 text-sm text-gray-500'>
+              {label}
+            </label>
+          )}
+          <input
+            id={id}
+            ref={e => {
+              if (typeof ref === 'function') ref(e);
+              else if (ref && typeof ref === 'object') ref.current = e;
+              inputRef.current = e;
+            }}
+            placeholder={placeholder}
+            autoComplete='off'
+            {...props}
+            disabled={disabled}
+            onChange={event => {
+              onChange?.(event);
+            }}
+            onFocus={event => {
+              onFocus?.(event);
+            }}
+            onBlur={e => {
+              onBlur?.(e);
+            }}
+            className={`${
+              color === 'white'
+                ? 'bg-white disabled:bg-white'
+                : 'bg-gray-100 disabled:bg-gray-100'
+            } w-full rounded-button h-[50px] px-4 disabled:cursor-not-allowed placeholder-gray-500 text-primary-900 ${
+              props.className
+            }`}
+          />
+        </div>
+        {error && <span className='text-sm text-red-600'>{error}</span>}
+      </div>
+    );
+  }
+);
+
+export default Input;

package/src/components/modal.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React, { FC, ReactNode } from 'react';
+
+interface IModalProps {
+  isOpen: boolean;
+  children: ReactNode;
+  showCloseButton?: boolean;
+  onClose?: Function;
+  closeOnClickOutside?: boolean;
+}
+
+const Modal: FC<IModalProps> = ({
+  isOpen,
+  children,
+  onClose,
+  showCloseButton = false
+}) => {
+
+  return isOpen ? (
+    <div className='fixed top-0 left-0 w-full h-full bg-black/50 flex justify-center items-center'>
+      <div
+        className='bg-white rounded-default shadow-lg min-w-[350px] relative'
+      >
+        {showCloseButton ? (
+          <button
+            type='button'
+            className='absolute top-[10px] right-[10px] cursor-pointer'
+            onClick={() => onClose?.()}
+          >
+            Fechar
+          </button>
+        ) : null}
+        <div className='modal-content'>{children}</div>
+      </div>
+    </div>
+  ) : null;
+};
+
+export default Modal;

package/src/components/phone.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import React from 'react';
+import Input from './input';
+import { isValidDDD, isValidPhoneNumber } from '../utils/validation';
+import {
+  FieldErrors,
+  FieldValues,
+  Path,
+  UseFormSetFocus
+} from 'react-hook-form';
+
+interface IPhoneInputProps<T extends FieldValues> {
+  t: any;
+  DDI?: string;
+  phoneDDIKey: Path<T>;
+  phoneAreaCodeKey: Path<T>;
+  phoneNumberKey: Path<T>;
+  registerWithMask: any;
+  setFocus: UseFormSetFocus<T>;
+  errors: FieldErrors<T>;
+  ddiClassName?: string;
+  areaCodeClassName?: string;
+  phoneClassName?: string;
+  requiredMessage?: string;
+}
+
+const PhoneInput = <T extends FieldValues>({
+  t,
+  DDI,
+  phoneDDIKey,
+  phoneAreaCodeKey,
+  phoneNumberKey,
+  registerWithMask,
+  setFocus,
+  errors,
+  ddiClassName,
+  areaCodeClassName,
+  phoneClassName,
+  requiredMessage
+}: IPhoneInputProps<T>) => {
+  const host = typeof window !== 'undefined' ? window.location.host : '';
+
+  return (
+    <div className='w-full flex flex-col gap-1'>
+      <div className='flex flex-col md:flex-row gap-0.5'>
+        <Input
+          className={`flex-2 rounded-b-none md:rounded-r-none md:rounded-l-button ${ddiClassName}`}
+          placeholder={t('fieldsLabels.ddi')}
+          {...registerWithMask(phoneDDIKey, ['+9', '+99', '+999'], {
+            value: DDI,
+            required: requiredMessage
+          })}
+          defaultValue={host?.includes('.br') ? '+55' : ''}
+          color='gray'
+        />
+        <Input
+          className={`flex-2 rounded-none ${areaCodeClassName}`}
+          placeholder={t('fieldsLabels.areaCode')}
+          {...registerWithMask(phoneAreaCodeKey, DDI === '+55' ? '(99)' : '', {
+            required: requiredMessage,
+            validate: (value: any) =>
+              DDI === '+55'
+                ? isValidDDD(value)
+                : true || t('validations.invalidPhoneAreaCode'),
+            oncomplete: () => {
+              if (DDI === '+55') {
+                setFocus(phoneNumberKey);
+              }
+            }
+          })}
+          color='gray'
+        />
+        <Input
+          className={`flex-5 rounded-t-none md:rounded-l-none md:rounded-r-button ${phoneClassName}`}
+          placeholder={t('fieldsLabels.number')}
+          {...registerWithMask(
+            phoneNumberKey,
+            DDI === '+55' ? '99999-9999' : '',
+            {
+              required: requiredMessage,
+              validate: (value: any) =>
+                DDI === '+55'
+                  ? isValidPhoneNumber(value)
+                  : true || t('validations.invalidPhoneNumber')
+            }
+          )}
+          color='gray'
+        />
+      </div>
+      {((errors?.phone as any)?.ddi?.message ||
+        (errors?.phone as any)?.areaCode?.message ||
+        (errors?.phone as any)?.number?.message) && (
+        <span className='text-red-600 text-sm'>
+          {(errors?.phone as any)?.ddi?.message ||
+            (errors?.phone as any)?.areaCode?.message ||
+            (errors?.phone as any)?.number?.message}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default PhoneInput;

package/src/components/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/classes';
+
+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 w-72 rounded-default bg-white p-4 text-popover-foreground shadow-xl outline-hidden data-[state=open]:animate-in data-[state=open]:fade-in-0 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/radio.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import React, { InputHTMLAttributes, forwardRef } from 'react';
+
+type RadioSize = 'small' | 'normal' | 'large';
+
+interface IRadioProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label: string;
+  size?: RadioSize;
+}
+
+const Radio = forwardRef(
+  (
+    { id, label, onChange, size = 'normal', ...props }: IRadioProps,
+    ref: any
+  ) => {
+    const sizeClasses = {
+      small: 'w-3 h-3 text-xs',
+      normal: 'w-4 h-4 text-base',
+      large: 'w-6 h-6 text-lg'
+    };
+
+    const inputSizeClass = sizeClasses[size];
+
+    return (
+      <div className={`flex items-center gap-4 ${sizeClasses[size]}`}>
+        <input
+          {...props}
+          id={id}
+          ref={ref}
+          type='radio'
+          className={`${inputSizeClass} border-green-500`}
+        />
+        <label htmlFor={id} className='cursor-pointer'>
+          {label}
+        </label>
+      </div>
+    );
+  }
+);
+Radio.displayName = 'Radio';
+
+export default Radio;

package/src/components/range.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import React, { memo, useState } from 'react';
+import ReactSlider from 'react-slider';
+
+interface IRange {
+  initialValues?: number[];
+  min?: number;
+  max?: number;
+  onChange?: (value: number[]) => void;
+  disabled?: boolean;
+}
+
+const Range = ({
+  min,
+  max,
+  onChange,
+  disabled = false,
+  initialValues
+}: IRange) => {
+  const [rangeValue, setRangeValue] = useState<number[]>(
+    initialValues ?? [min || 0, max || 1000]
+  );
+
+  return (
+    <div className='w-full flex flex-col gap-[5px]'>
+      <p className='text-primary-900 text-sm select-none'>
+        {`${rangeValue[0]} - ${rangeValue[1]}`}
+      </p>
+      <ReactSlider
+        className='slider'
+        disabled={disabled}
+        min={min || 1}
+        max={max || 1000}
+        value={initialValues}
+        onChange={value => setRangeValue(value)}
+        ariaLabel={['Lower thumb', 'Upper thumb']}
+        onAfterChange={value => {
+          onChange?.(value);
+        }}
+        minDistance={10}
+        pearling
+      />
+    </div>
+  );
+};
+
+const propsAreEqual = (prevProps: IRange, nextProps: IRange) =>
+  prevProps.min === nextProps.min &&
+  prevProps.max === nextProps.max &&
+  prevProps.disabled === nextProps.disabled &&
+  prevProps.initialValues === nextProps.initialValues;
+
+export default memo(Range, propsAreEqual);

package/src/components/select.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, CaretDown, CaretUp } from '@phosphor-icons/react';
+
+import { cn } from '../utils/classes';
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-[50px] w-full items-center justify-between rounded-button bg-gray-100 px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretDown className='h-4 w-4 opacity-50' />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <CaretUp className='h-4 w-4' />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <CaretDown className='h-4 w-4' />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-button bg-white text-popover-foreground shadow-md 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',
+        position === 'popper'
+          ? 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1'
+          : '',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper'
+            ? 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+            : ''
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <SelectPrimitive.ItemIndicator>
+        <Check className='h-4 w-4' />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton
+};