@koaris/bloom-ui 1.1.2 → 1.2.1

package/src/components/Input/index.tsx

@@ -1,154 +0,0 @@
-import {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  useEffect,
-  useState,
-  forwardRef,
-} from 'react'
-import { twMerge } from 'tailwind-merge'
-import { FiCheck, FiX } from 'react-icons/fi'
-import masks from '../Shared/masks'
-
-/**
- * Primary UI component for user interaction
- */
-export interface InputProps
-  extends DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > {
-  disabled?: boolean
-  placeholder?: string
-  value?: string
-  validated?: boolean
-  error: boolean
-  required?: boolean
-  type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep'
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      disabled,
-      placeholder,
-      value,
-      validated,
-      error,
-      required,
-      type,
-      onClick,
-      ...rest
-    }: InputProps,
-    ref,
-  ) => {
-    const [selected, setSelected] = useState(false)
-    const [inputValue, setInputValue] = useState(value)
-    const [hasNumber, setHasNumber] = useState(false)
-    const [hasSpecialCharacteres, setHasSpecialCharacteres] = useState(false)
-    const [hasEightCharacteres, setHasEightCharacteres] = useState(false)
-
-    const handleFocus = () => {
-      setSelected(!selected)
-    }
-
-    const handleBlur = () => {
-      setSelected(false)
-    }
-
-    const handleInput = (event: React.FocusEvent<HTMLInputElement>) => {
-      setInputValue(event.currentTarget.value)
-      checkPassword(event.currentTarget.value as string)
-    }
-
-    useEffect(() => {
-      setInputValue(value)
-    }, [value])
-
-    const checkPassword = (value: string) => {
-      setHasSpecialCharacteres(value?.match(masks.password[0]) !== null)
-      setHasNumber(value?.match(masks.password[1]) !== null)
-      setHasEightCharacteres(value?.match(masks.password[2]) !== null)
-    }
-
-    return (
-      <>
-        {type === 'text' || type === 'password' || type === 'date' ? (
-          <>
-            <input
-              type={type}
-              required={required}
-              ref={ref}
-              className={twMerge(
-                'flex items-center justify-center border-2 border-neutral rounded-sm w-full px-3 py-2 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none',
-                className,
-                disabled === true && 'opacity-50 cursor-not-allowed',
-                selected === true && 'border-2 border-orange-500',
-                validated === true && 'border-2 border-green-900',
-                error === true && 'border-2 border-red-900',
-              )}
-              onClick={onClick}
-              onFocus={handleFocus}
-              onChange={handleInput}
-              onBlur={handleBlur}
-              placeholder={placeholder}
-              value={inputValue}
-              {...rest}
-            />
-            {type === 'password' &&
-              (!hasEightCharacteres ||
-                !hasSpecialCharacteres ||
-                !hasNumber) && (
-                <ul className="py-1">
-                  <li className="flex items-center px-2">
-                    {hasEightCharacteres ? <FiCheck /> : <FiX />}
-                    <span className="px-1">Pelo menos 8 caracteres</span>
-                  </li>
-                  <li className="flex items-center px-2">
-                    {hasSpecialCharacteres ? <FiCheck /> : <FiX />}
-                    <span className="px-1">
-                      Pelo menos 1 símbolo (@, !, $, etc)
-                    </span>
-                  </li>
-                  <li className="flex items-center px-2">
-                    {hasNumber ? <FiCheck /> : <FiX />}
-                    <span className="px-1">Deve conter 1 número</span>
-                  </li>
-                </ul>
-              )}
-          </>
-        ) : (
-          <input
-            type={type}
-            required={required}
-            ref={ref}
-            className={twMerge(
-              'flex items-center justify-center border-2 border-neutral rounded-sm w-full px-3 py-2 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none',
-              className,
-              disabled === true && 'opacity-50 cursor-not-allowed',
-              selected === true && 'border-2 border-orange-500',
-              error === true && 'border-2 border-red-900',
-            )}
-            onClick={onClick}
-            onFocus={handleFocus}
-            onChange={handleInput}
-            onBlur={handleBlur}
-            placeholder={placeholder}
-            value={inputValue}
-            {...rest}
-            /* mask={masks[type as keyof typeof masks]} */
-          />
-        )}
-        {error === true && (
-          <label htmlFor={rest.id} className="text-red-900">
-            Campo inválido.
-          </label>
-        )}
-      </>
-    )
-  },
-)
-
-Input.displayName = 'Input'
-
-export { Input }

package/src/components/Link/index.tsx

@@ -1,39 +0,0 @@
-import { DetailedHTMLProps, AnchorHTMLAttributes } from 'react'
-import { twMerge } from 'tailwind-merge'
-
-/**
- * Primary UI component for user interaction
- */
-export interface LinkProps
-  extends DetailedHTMLProps<
-    AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
-  > {
-  url: string
-  newPage: boolean
-  disabled?: boolean
-  children: string | JSX.Element
-}
-
-export const Link = ({
-  className,
-  disabled,
-  url,
-  newPage = true,
-  onClick,
-  ...rest
-}: LinkProps) => {
-  return (
-    <a
-      className={twMerge(
-        'text-blue-800 font-bold',
-        typeof rest.children !== 'string' && 'px-4',
-        disabled === true && 'opacity-50 cursor-not-allowed',
-        className,
-      )}
-      href={url}
-      {...(newPage && { target: '_blank', rel: 'noopener noreferrer' })}
-      {...rest}
-    />
-  )
-}

package/src/components/MultiStep/index.tsx

@@ -1,35 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import { twMerge } from 'tailwind-merge'
-import { Text } from '../Text'
-
-export interface MultiStepProps
-  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  size: number
-  currentStep?: number
-}
-
-export const MultiStep = ({ className, size, currentStep }: MultiStepProps) => {
-  return (
-    <div className="w-full">
-      <Text tag="label" color="neutral-100" size="xs">
-        {`Passo ${currentStep} de ${size}`}
-      </Text>
-      <div className={`grid gap-2 grid-cols-${size} grid-flow-col mt-1`}>
-        {Array.from(Array(size).keys()).map((_, index) => {
-          return (
-            <div
-              key={index}
-              className={twMerge(
-                'h-1 rounded-full',
-                currentStep && index < currentStep
-                  ? 'bg-orange-500'
-                  : 'bg-neutral-500',
-                className,
-              )}
-            />
-          )
-        })}
-      </div>
-    </div>
-  )
-}

package/src/components/RadioGroup/index.tsx

@@ -1,67 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes, useState } from 'react'
-import { twMerge } from 'tailwind-merge'
-import { FiCheck } from 'react-icons/fi'
-
-const options = [
-  { id: 1, value: 'option1', label: 'Opção 1' },
-  { id: 2, value: 'option2', label: 'Opção 2' },
-]
-
-export interface RadioGroupProps
-  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  disabled?: boolean
-  options: typeof options
-  required?: boolean
-}
-
-export const RadioGroup = ({
-  disabled,
-  options = [
-    { id: 1, value: 'option1', label: 'Opção 1' },
-    { id: 2, value: 'option2', label: 'Opção 2' },
-  ],
-  required = false,
-  className,
-}: RadioGroupProps) => {
-  const [selectedOption, setSelectedOption] = useState('')
-
-  const handleOptionChange = (value: string) => {
-    setSelectedOption(value)
-  }
-
-  return (
-    <div className="flex flex-col ">
-      {options.map((option) => (
-        <div key={option.id} className="flex py-2 items-center">
-          <label
-            htmlFor={`radio${option.id}`}
-            className={twMerge(
-              'relative rounded-full border-2 w-5 h-5 flex items-center justify-center hover:border-orange-500 hover:cursor-pointer',
-              selectedOption === option.value
-                ? 'bg-orange-500 border-orange-500'
-                : 'border-neutral-500 hover:shadow-md hover:shadow-orange-500',
-              disabled === true && 'opacity-50 cursor-not-allowed',
-              className,
-            )}
-          >
-            <input
-              type="radio"
-              id={`radio${option.id}`}
-              name="radioGroup"
-              value={option.value}
-              required={required}
-              className="hidden"
-              checked={selectedOption === option.value}
-              onChange={() => handleOptionChange(option.value)}
-              disabled={disabled}
-            />
-            {selectedOption === option.value && (
-              <FiCheck color="#FFFFFF" size={12} style={{ strokeWidth: 4 }} />
-            )}
-          </label>
-          <span className="px-2">{option.label}</span>
-        </div>
-      ))}
-    </div>
-  )
-}

package/src/components/Shared/masks.tsx

@@ -1,60 +0,0 @@
-const masks = {
-  password: [/^(?=.*[!@#$%^&*])/, /(?=.*[0-9])/, /.{8,}$/],
-  date: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
-  cpf: [
-    /\d/,
-    /\d/,
-    /\d/,
-    '.',
-    /\d/,
-    /\d/,
-    /\d/,
-    '.',
-    /\d/,
-    /\d/,
-    /\d/,
-    '-',
-    /\d/,
-    /\d/,
-  ],
-  cnpj: [
-    /\d/,
-    /\d/,
-    '.',
-    /\d/,
-    /\d/,
-    /\d/,
-    '.',
-    /\d/,
-    /\d/,
-    /\d/,
-    '/',
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/,
-    '-',
-    /\d/,
-    /\d/,
-  ],
-  cep: [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/],
-  phone: [
-    '(',
-    /[1-9]/,
-    /[1-9]/,
-    ')',
-    ' ',
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/,
-    '-',
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/,
-  ],
-}
-
-export default masks

package/src/components/Text/index.tsx

@@ -1,62 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
-import { twMerge } from 'tailwind-merge'
-
-export interface TextProps
-  extends DetailedHTMLProps<
-    HTMLAttributes<HTMLLabelElement>,
-    HTMLLabelElement
-  > {
-  children: ReactNode
-  color?: string
-  size?:
-    | 'xxs'
-    | 'xs'
-    | 'sm'
-    | 'md'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | '4xl'
-    | '5xl'
-    | '6xl'
-    | '7xl'
-    | '8xl'
-    | '9xl'
-  tag?: 'p' | 'strong' | 'span' | 'label'
-  htmlFor?: string
-}
-
-export const Text = ({
-  children,
-  color = 'neutral-800',
-  size = 'md',
-  tag = 'p',
-  className,
-  ...rest
-}: TextProps) => {
-  const fontSize = {
-    xxs: 'text-xxs',
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-md',
-    lg: 'text-lg',
-    xl: 'text-xl',
-    '2xl': 'text-2xl',
-    '3xl': 'text-3xl',
-    '4xl': 'text-4xl',
-    '5xl': 'text-5xl',
-    '6xl': 'text-6xl',
-    '7xl': 'text-7xl',
-    '8xl': 'text-8xl',
-    '9xl': 'text-9xl',
-  }[size]
-
-  const Tag = tag as React.ElementType
-
-  return (
-    <Tag {...rest} className={twMerge(`text-${color} ${fontSize}`, className)}>
-      {children}
-    </Tag>
-  )
-}

package/src/components/TextArea/index.tsx

@@ -1,79 +0,0 @@
-import {
-  DetailedHTMLProps,
-  TextareaHTMLAttributes,
-  useEffect,
-  useState,
-} from 'react'
-import { twMerge } from 'tailwind-merge'
-
-export interface TextAreaProps
-  extends DetailedHTMLProps<
-    TextareaHTMLAttributes<HTMLTextAreaElement>,
-    HTMLTextAreaElement
-  > {
-  disabled?: boolean
-  reference?: React.RefObject<HTMLTextAreaElement>
-  placeholder?: string
-  value?: string
-  validated?: boolean
-  error: boolean
-  required?: boolean
-  resize?: boolean
-  type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep'
-}
-
-export const TextArea = ({
-  className,
-  disabled,
-  reference,
-  value,
-  error,
-  required,
-  placeholder,
-  resize,
-  onClick,
-  ...rest
-}: TextAreaProps) => {
-  const [selected, setSelected] = useState(false)
-  const [inputValue, setInputValue] = useState(value)
-
-  const handleFocus = () => {
-    setSelected(!selected)
-  }
-
-  const handleBlur = () => {
-    setSelected(false)
-  }
-
-  const handleInput = (event: React.FocusEvent<HTMLTextAreaElement>) => {
-    setInputValue(event.currentTarget.value)
-  }
-
-  useEffect(() => {
-    setInputValue(value)
-  }, [value])
-
-  return (
-    <textarea
-      required={required}
-      ref={reference}
-      disabled={disabled}
-      className={twMerge(
-        'rounded-sm w-full px-3 py-2 border-2 border-neutral text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none',
-        'resize-y h-32',
-        className,
-        disabled === true && 'opacity-50 cursor-not-allowed',
-        selected === true && 'border-2 border-orange-500',
-        error === true && 'border-2 border-red-900',
-        resize === false && 'resize-none overflow-hidden',
-      )}
-      onClick={onClick}
-      onFocus={handleFocus}
-      onChange={handleInput}
-      onBlur={handleBlur}
-      placeholder={placeholder}
-      value={inputValue}
-      {...rest}
-    />
-  )
-}

package/src/components/TextInput/index.tsx

@@ -1,102 +0,0 @@
-import {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  useEffect,
-  useState,
-  forwardRef,
-} from 'react'
-import { twMerge } from 'tailwind-merge'
-
-export interface TextInputProps
-  extends DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > {
-  disabled?: boolean
-  placeholder?: string
-  prefix?: string
-  value?: string
-  variant?: 'primary' | 'secondary'
-  validated?: boolean
-  error: boolean
-  required?: boolean
-  type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep'
-}
-
-const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
-  (
-    {
-      className,
-      disabled,
-      value,
-      prefix,
-      placeholder,
-      error,
-      type = 'text',
-      variant = 'primary',
-      onClick,
-      ...rest
-    }: TextInputProps,
-    ref,
-  ) => {
-    const [selected, setSelected] = useState(false)
-    const [inputValue, setInputValue] = useState(value)
-
-    const handleFocus = () => {
-      setSelected(!selected)
-    }
-
-    const handleBlur = () => {
-      setSelected(false)
-    }
-
-    const handleInput = (event: React.FocusEvent<HTMLInputElement>) => {
-      setInputValue(event.currentTarget.value)
-    }
-
-    useEffect(() => {
-      setInputValue(value)
-    }, [value])
-
-    return (
-      <div
-        className={twMerge(
-          ' py-2 px-4 border-2 rounded-sm box-border flex items-baseline bg-neutral-200',
-          'hover:shadow-md hover:shadow-neutral-500 focus:outline-none',
-          variant === 'secondary' && 'bg-neutral-800 border-neutral-800 ',
-          selected === true && 'border-2 border-orange-500',
-          disabled === true && 'opacity-50 cursor-not-allowed',
-          error === true && 'border-2 border-red-900',
-        )}
-      >
-        {!!prefix && (
-          <span className="text-neutral-500 sm:text-sm">{prefix}</span>
-        )}
-        <input
-          type={type}
-          required={rest.required}
-          onClick={onClick}
-          onFocus={handleFocus}
-          onChange={handleInput}
-          onBlur={handleBlur}
-          value={inputValue}
-          placeholder={placeholder}
-          disabled={disabled}
-          ref={ref}
-          className={twMerge(
-            'flex items-center justify-center bg-neutral-200 rounded-sm w-full px-1 py-2 text-md',
-            'focus:outline-none text-neutral-800',
-            disabled === true && 'cursor-not-allowed',
-            variant === 'secondary' && 'bg-neutral-800 text-neutral',
-            className,
-          )}
-          {...rest}
-        />
-      </div>
-    )
-  },
-)
-
-TextInput.displayName = 'TextInput'
-
-export { TextInput }

package/src/index.tsx

@@ -1,14 +0,0 @@
-export * from './components/Card'
-export * from './components/Button'
-export * from './components/Link'
-export * from './components/RadioGroup'
-export * from './components/Checkbox'
-export * from './components/Input'
-export * from './components/TextInput'
-export * from './components/TextArea'
-export * from './components/Text'
-export * from './components/Heading'
-export * from './components/Box'
-export * from './components/Form'
-export * from './components/Avatar'
-export * from './components/MultiStep'

package/src/styles/tailwind.css

@@ -1,7 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-html {
-    @apply font-default;
-}

package/tailwind.config.ts

@@ -1,19 +0,0 @@
-import { Config } from 'tailwindcss'
-import { colors, fontSizes, fontWeights, fonts, lineHeights, raddi, space } from '@koaris/tokens';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      colors: colors,
-      fontSize: fontSizes,
-      fontWeight: fontWeights,
-      fontFamily: fonts,
-      lineHeight: lineHeights,
-      raddi,
-      space
-    },
-  },
-  plugins: [],
-} satisfies Config

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "@koaris/ts-config/react.json",
-  "include": ["src"],
-  "splitting": true,
-  "external": ["react"],
-  "entryPoints": ["src/index.tsx"],
-}

package/tsup.config.ts

@@ -1,14 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
-  entry: ["src/index.tsx", "src/tailwind-preset.ts"],
-  format: ["esm"],
-  tsconfig: "./tsconfig.json",
-  outExtension({ format }) {
-    return { js: ".mjs" };
-  },
-  dts: true,
-  external: ["react"],
-
-  clean: true,
-});