@ourtrip/ui 1.0.0

package/src/components/sheet.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from '@phosphor-icons/react';
+
+import cn from 'classnames';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=open]:slide-in-from-right sm:max-w-sm'
+      }
+    },
+    defaultVariants: {
+      side: 'right'
+    }
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className='absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary'>
+        <X className='h-4 w-4' />
+        <span className='sr-only'>Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription
+};

package/src/components/stars.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import React, { FC } from 'react';
+import { Star } from '@phosphor-icons/react';
+
+interface IStars {
+  rate: number;
+}
+
+const Stars: FC<IStars> = ({ rate }: IStars) => {
+  return (
+    <div className='flex items-center gap-0.5'>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <Star
+          key={`${rate}${index}`}
+          weight={rate > index ? 'fill' : 'light'}
+          className={`text-yellow-300 ${
+            rate > index ? 'text-yellow-300' : ''
+          } ${index > 0 ? 'hidden md:block' : ''}`}
+          size={12}
+        />
+      ))}
+      <p className='text-sm text-primary-900 font-medium block md:hidden'>
+        {rate}
+      </p>
+    </div>
+  );
+};
+
+export default Stars;

package/src/components/step-marker.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React, { FC } from 'react';
+import { Check } from '@phosphor-icons/react';
+import classNames from 'classnames';
+
+type StepMarkerProps = {
+  step: number;
+  title: string;
+  subtitle?: string;
+  checked: boolean;
+  active: boolean;
+  onClick?: () => void;
+};
+
+const StepMarker: FC<StepMarkerProps> = ({
+  step,
+  title,
+  subtitle,
+  checked,
+  active,
+  onClick
+}) => {
+  const classes = classNames(
+    'w-full md:w-12 h-12 flex-none rounded-default flex justify-center items-center font-medium',
+    {
+      'bg-green-500 text-white': checked,
+      'bg-white text-gray-500': !checked,
+      'border-2 bg-gray-100 border-primary-500': active
+    }
+  );
+
+  return (
+    <div
+      className='w-full flex flex-col items-center text-center gap-3 md:flex-row md:items-center md:text-left'
+      onClick={onClick}
+    >
+      <div className={classes}>{checked ? <Check size={22} /> : step}</div>
+      <div>
+        <h3 className='text-sm md:text-base whitespace-nowrap'>{title}</h3>
+        {subtitle && (
+          <p className='text-sm text-gray-500 whitespace-nowrap'>{subtitle}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default StepMarker;

package/src/components/switch.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React, { FC } from 'react';
+import { motion } from 'framer-motion';
+
+interface ISwitch {
+  onChange?: (on: boolean) => void;
+  on: boolean;
+  disabled?: boolean;
+  label: string;
+}
+
+const spring = {
+  type: 'spring',
+  stiffness: 700,
+  damping: 30
+};
+const Switch: FC<ISwitch> = ({ on, onChange, disabled, label }: ISwitch) => {
+  return (
+    <button
+      className='flex flex-row items-center cursor-pointer select-none border-none bg-transparent'
+      disabled={disabled}
+      onClick={() => onChange?.(!on)}
+      aria-label={label}
+    >
+      <div
+        className={`w-[35px] h-[20px] flex flex-row items-center p-[5px] rounded-[50px] transition-colors duration-200 ${
+          on ? 'bg-primary-500 justify-end' : 'bg-gray-200 justify-start'
+        }`}
+      >
+        <motion.div
+          className={`w-[10px] h-[10px] rounded-full ${
+            on ? 'bg-white' : 'bg-gray-500'
+          }`}
+          transition={spring}
+        />
+      </div>
+    </button>
+  );
+};
+
+export default Switch;

package/src/components/tag.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React, { FC, ReactNode } from 'react';
+
+export type TagColor = 'primary' | 'secondary' | 'white';
+
+interface ITagProps {
+  color: TagColor;
+  children: ReactNode;
+  onClick?: () => void;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+}
+
+const Tag: FC<ITagProps> = ({
+  color,
+  children,
+  onClick,
+  iconLeft,
+  iconRight
+}) => {
+  const baseClasses =
+    'rounded-button px-4 py-2 flex items-center justify-between border-0 cursor-pointer transition-all duration-300 ease-in-out font-medium';
+
+  const colorClasses = {
+    primary: 'text-primary-900 bg-white hover:bg-gray-200',
+    secondary:
+      'text-secondary-800 bg-secondary-100 hover:text-white hover:bg-secondary-800',
+    white: 'text-primary-900 bg-white hover:bg-gray-200'
+  };
+
+  return (
+    <button
+      onClick={() => onClick?.()}
+      className={`${baseClasses} ${colorClasses[color]}`}
+    >
+      {iconLeft && (
+        <span className='flex items-center justify-center mr-2'>
+          {iconLeft}
+        </span>
+      )}
+      {children}
+      {iconRight && (
+        <span className='flex items-center justify-center ml-2'>
+          {iconRight}
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default Tag;

package/src/components/tooltip.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import React, { FC, ReactNode } from 'react';
+
+interface ITooltip {
+  text: string;
+  active: boolean;
+  children: ReactNode;
+}
+
+const Tooltip: FC<ITooltip> = ({ text, active, children }: ITooltip) => {
+  return (
+    <div className='relative flex flex-col justify-center items-center group'>
+      <div className='w-full'>{children}</div>
+      <div
+        className={`
+          absolute top-[calc(100%+8px)] p-[5px_10px] text-white bg-primary-900
+          text-[14px] rounded-[8px] flex-col items-center gap-[5px] transition-all
+          ${active ? 'group-hover:flex' : 'hidden'}
+          before:content-[''] before:absolute before:w-2 before:h-2 before:bg-primary-900
+          before:rotate-45 before:top-[-4px]
+        `}
+      >
+        {text}
+      </div>
+    </div>
+  );
+};
+
+export default Tooltip;

package/src/index.tsx

@@ -0,0 +1,22 @@
+export { default as Accordion } from './components/accordion';
+export { default as Alert } from './components/alert';
+export { default as Badge } from './components/badge';
+export { default as Breadcrumbs } from './components/breadcrumbs';
+export { default as Button } from './components/button';
+export { default as Card } from './components/card';
+export { default as Checkbox } from './components/checkbox';
+export { default as Collapse } from './components/collapse';
+export { default as Divider } from './components/divider';
+export { default as Input } from './components/input';
+export { default as Modal } from './components/modal';
+export { default as PhoneInput } from './components/phone';
+export { Popover, PopoverContent, PopoverTrigger } from './components/popover';
+export { default as Radio } from './components/radio';
+export { default as Range } from './components/range';
+export { Select, SelectContent, SelectTrigger } from './components/select';
+export { Sheet, SheetContent, SheetTrigger } from './components/sheet';
+export { default as Stars } from './components/stars';
+export { default as StepMarker } from './components/step-marker';
+export { default as Switch } from './components/switch';
+export { default as Tag } from './components/tag';
+export { default as Tooltip } from './components/tooltip';

package/src/utils/classes.ts

@@ -0,0 +1,2 @@
+export const cn = (...args: (string | undefined)[]): string =>
+  args.filter(Boolean).join(' ');

package/src/utils/validation.ts

@@ -0,0 +1,164 @@
+import { isBefore, isValid, parse, subYears } from 'date-fns';
+
+export const isValidCpf = (formatedCpf: string): boolean => {
+  const cpf = formatedCpf.replace(/\D/g, '');
+
+  if (cpf.length !== 11 || /^(\d)\1+$/.test(cpf)) {
+    return false;
+  }
+
+  // Calcular el primer dígito verificador
+  let soma = 0;
+
+  for (let i = 0; i < 9; i++) {
+    soma += parseInt(cpf.charAt(i), 10) * (10 - i);
+  }
+  let digito1 = 11 - (soma % 11);
+  if (digito1 > 9) {
+    digito1 = 0;
+  }
+
+  // Calcular el segundo dígito verificador
+  soma = 0;
+  for (let i = 0; i < 10; i++) {
+    soma += parseInt(cpf.charAt(i), 10) * (11 - i);
+  }
+  let digito2 = 11 - (soma % 11);
+  if (digito2 > 9) {
+    digito2 = 0;
+  }
+
+  // Verificar si los dígitos verificadores son iguales a los últimos dos dígitos del CPF
+  if (
+    parseInt(cpf.charAt(9), 10) === digito1 &&
+    parseInt(cpf.charAt(10), 10) === digito2
+  ) {
+    return true;
+  }
+  return false;
+};
+
+export const isValidCNPJ = (formatedCnpj: string): boolean => {
+  const cnpj = formatedCnpj.replace(/[^\d]+/g, '');
+
+  if (cnpj.length !== 14) {
+    return false;
+  }
+
+  if (/^(\d)\1+$/.test(cnpj)) {
+    return false;
+  }
+
+  let length = cnpj.length - 2;
+  let numbers = cnpj.substring(0, length);
+  const digitosVerificadores = cnpj.substring(length);
+
+  let soma = 0;
+  let pos = length - 7;
+
+  for (let i = length; i >= 1; i--) {
+    soma += parseInt(numbers.charAt(length - i), 10) * pos--;
+    if (pos < 2) {
+      pos = 9;
+    }
+  }
+
+  const resultado = soma % 11 < 2 ? 0 : 11 - (soma % 11);
+
+  if (resultado !== parseInt(digitosVerificadores.charAt(0), 10)) {
+    return false;
+  }
+
+  length += 1;
+  numbers = cnpj.substring(0, length);
+  soma = 0;
+  pos = length - 7;
+
+  for (let i = length; i >= 1; i--) {
+    soma += parseInt(numbers.charAt(length - i), 10) * pos--;
+    if (pos < 2) {
+      pos = 9;
+    }
+  }
+
+  const segundoDigito = soma % 11 < 2 ? 0 : 11 - (soma % 11);
+
+  return segundoDigito === parseInt(digitosVerificadores.charAt(1), 10);
+};
+
+export const isCPF = (document: string) => {
+  const onlyNumbers = document?.replace(/\D/g, '');
+
+  if (onlyNumbers?.length === 11 && isValidCpf(onlyNumbers)) return true;
+
+  return false;
+};
+
+export const isCNPJ = (document: string) => {
+  const onlyNumbers = document?.replace(/\D/g, '');
+
+  if (onlyNumbers?.length === 14 && isValidCNPJ(onlyNumbers)) return true;
+
+  return false;
+};
+
+export const isFullName = (name: string) =>
+  /^(?:[A-Za-zÀ-ÿ]{2,}(?: [A-Za-zÀ-ÿ]{2,})+)$/.test(name.trim());
+
+export const isValidName = (name: string) =>
+  /^[A-Za-zÀ-ÿ\s.'-]+(?: [A-Za-zÀ-ÿ\s.'-]+)*$/.test(name.trim());
+
+export const isValidEmail = (email: string) =>
+  /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(email.trim());
+
+export const isValidPhoneNumber = (number: string) => {
+  const phoneNumber = number.replace('-', '');
+  return /^\d{8}$/.test(phoneNumber) || /^\d{9}$/.test(phoneNumber);
+};
+
+export const isValidNumberCode = (numberCode: string) =>
+  /^\d{2}$/.test(numberCode.replace(/[()]/g, ''));
+
+export const isValidDDD = (areaCode: string) => {
+  const dddList = [
+    11, 12, 13, 14, 15, 16, 17, 18, 19, 21, 22, 24, 27, 28, 31, 32, 33, 34, 35,
+    37, 38, 41, 42, 43, 44, 45, 46, 47, 48, 49, 51, 53, 54, 55, 61, 62, 64, 63,
+    65, 66, 67, 68, 69, 71, 73, 74, 75, 77, 79, 81, 82, 83, 84, 85, 86, 87, 88,
+    89, 91, 92, 93, 94, 95, 96, 97, 98, 99
+  ];
+
+  return dddList.includes(parseFloat(areaCode?.replace(/\D/g, '')));
+};
+
+export const isValidChildDate = (date?: string) => {
+  if (!date) return 'Data inválida';
+
+  const birthDate = parse(date, 'yyyy-MM-dd', new Date());
+
+  if (!isValid(birthDate)) {
+    return 'Data inválida';
+  }
+
+  const currentDate = new Date();
+  const adultAge = subYears(currentDate, 18);
+
+  if (isBefore(adultAge, birthDate) && isBefore(birthDate, currentDate)) {
+    return true;
+  }
+
+  return 'Idade deve ser entre 1 a 17 anos';
+};
+
+export const isValidAdult = (date?: string) => {
+  if (!date) return 'Data inválida';
+
+  const birthDate = parse(date, 'yyyy-MM-dd', new Date());
+
+  if (!isValid(birthDate)) {
+    return 'Data inválida';
+  }
+
+  const adultAge = subYears(new Date(), 18);
+
+  return isBefore(birthDate, adultAge) || 'Adulto deve ter mais de 18 anos';
+};

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "ESNext",
+    "lib": ["dom", "es6", "es2017"],
+    "jsx": "react",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "outDir": "dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}