@koaris/bloom-ui 1.1.1 → 1.1.2

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+    "extends": "@koaris/eslint-config"
+}

package/CHANGELOG.md

@@ -0,0 +1,55 @@
+# @koaris/bloom-ui
+
+## 1.1.2
+
+### Patch Changes
+
+- Optimized Tailwind configuration and build process to reduce bundle size.
+
+## 1.1.1
+
+### Patch Changes
+
+- fix card css
+
+## 1.1.0
+
+### Minor Changes
+
+- button and checkbox improvements
+
+## 1.0.5
+
+### Patch Changes
+
+- Create link component
+
+## 1.0.4
+
+### Patch Changes
+
+- creating form component
+
+## 1.0.3
+
+### Patch Changes
+
+- Update components and add new colors
+
+## 1.0.2
+
+### Patch Changes
+
+- fix tailwind post css
+
+## 1.0.1
+
+### Patch Changes
+
+- recreating package
+
+## 1.0.0
+
+### Major Changes
+
+- Creating bloom-ui

package/README.md

@@ -10,12 +10,16 @@ Install the following package:
 npm i @koaris/bloom-ui
 ```
 ## Usage
-View docs [here](https://guilhermesalviano.github.io/bloom-ui).
-
-Import design system css in your css file:
+This design system is built with Tailwind, and you can import it into your project as follows:
+In your CSS file:
 ```css
-@import "@koaris/bloom-ui/dist/tailwind.css";
+@import "@koaris/bloom-ui/tailwind.css";
+```
+Or in your JavaScript file:
+```js
+import '@koaris/bloom-ui/tailwind.css'
 ```
+
 Components usage:
 ```tsx
 import { Text } from '@koaris/bloom-ui'

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@koaris/bloom-ui",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Bloom-ui is a public design system from the Koaris Project developed with React, Typescript, and Tailwind.",
   "source": "./src/index.ts",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "type": "module",
+  "main": "dist/index.mjs",
   "scripts": {
-    "build": "tailwindcss -i ./src/styles/tailwind.css -o ./dist/tailwind.css -c ./tailwind.config.ts --minify && tsup src/index.tsx --format esm,cjs --dts --external react",
-    "dev": "concurrently --kill-others \"tailwindcss -i ./src/styles/tailwind.css -o ./dist/tailwind.css -c ./tailwind.config.ts --minify --watch \" \"tsup src/index.tsx --format esm, cjs --dts --external react --watch\"",
+    "build": "NODE_ENV=production tailwindcss -i ./src/styles/tailwind.css -o ./tailwind.css -c ./tailwind.config.ts  --minify && tsup",
+    "dev": "concurrently --kill-others \"tailwindcss -i ./src/styles/tailwind.css -o ./tailwind.css -c ./tailwind.config.ts  --minify --watch \" \"tsup --watch\"",
     "lint": "eslint src/**/*.ts* --fix"
   },
-  "files": [
-    "dist",
-    "README.md"
-  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.d.ts"
+    },
+    "./tailwind.css": "./tailwind.css"
+  },
   "keywords": [
     "design-system",
     "react"

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: { config: './tailwind.config.ts' },
+    autoprefixer: {},
+  },
+}

package/src/components/Avatar/index.tsx

@@ -0,0 +1,27 @@
+import { twMerge } from 'tailwind-merge'
+import { FaUser } from 'react-icons/fa'
+
+export interface AvatarProps {
+  src?: string
+  alt?: string
+  className?: string
+}
+
+export const Avatar = ({ className, ...rest }: AvatarProps) => {
+  return (
+    <div
+      className={twMerge(
+        `
+            rounded-full w-16 h-16 overflow-hidden flex items-center
+            bg-neutral-600 justify-center`,
+        className,
+      )}
+    >
+      {rest.src ? (
+        <img className="w-full h-full object-cover rounded-full" {...rest} />
+      ) : (
+        <FaUser color="#FFFFFF" size={24} />
+      )}
+    </div>
+  )
+}

package/src/components/Box/index.tsx

@@ -0,0 +1,33 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export interface BoxProps
+  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  children: React.ReactNode
+  tag?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer'
+  variant?: 'primary' | 'secondary'
+}
+
+export const Box = ({
+  className,
+  children,
+  tag = 'div',
+  variant = 'secondary',
+}: BoxProps) => {
+  const Tag = tag as React.ElementType
+
+  return (
+    <Tag
+      className={twMerge(
+        'p-6 rounded-md bottom-1 border-2',
+        variant === 'primary' &&
+          'text-neutral-800 bg-neutral-200 border-neutral-300',
+        variant === 'secondary' &&
+          'text-neutral-200 bg-neutral-600 border-neutral-800',
+        className,
+      )}
+    >
+      {children}
+    </Tag>
+  )
+}

package/src/components/Button/index.tsx

@@ -0,0 +1,43 @@
+import { DetailedHTMLProps, ButtonHTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Primary UI component for user interaction
+ */
+export interface ButtonProps
+  extends DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  size?: 'sm' | 'md'
+  variant?: 'primary' | 'secondary'
+  disabled?: boolean
+  children: string | JSX.Element
+}
+
+export const Button = ({
+  className,
+  variant = 'primary',
+  size = 'md',
+  disabled,
+  onClick,
+  ...rest
+}: ButtonProps) => {
+  return (
+    <button
+      className={twMerge(
+        'flex gap-4 items-center justify-center rounded-sm px-8 py-2 text-md font-medium hover:shadow-md hover:shadow-neutral-500 w-full max-w-[180px]',
+        variant === 'primary' &&
+          'bg-orange-500 text-neutral hover:bg-orange-700',
+        variant === 'secondary' &&
+          'bg-neutral text-orange-500 border border-orange-500 hover:text-orange-100 hover:bg-orange-500',
+        size === 'sm' && 'px-6 py-1',
+        typeof rest.children !== 'string' && 'px-4',
+        disabled === true && 'opacity-50 cursor-not-allowed',
+        className,
+      )}
+      onClick={onClick}
+      {...rest}
+    />
+  )
+}

package/src/components/Card/index.tsx

@@ -0,0 +1,59 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Primary UI component for user interaction
+ */
+export interface CardProps
+  extends DetailedHTMLProps<
+    HTMLAttributes<HTMLDivElement>, // Change the type to HTMLDivElement
+    HTMLDivElement
+  > {
+  selected?: boolean
+  disabled?: boolean
+  direction?: string
+  size?: string
+  imageSize: string
+  image?: string // Add the image property
+  onClick?: () => void
+}
+
+export const Card = ({
+  className,
+  selected = false,
+  direction,
+  size,
+  disabled,
+  imageSize,
+  onClick,
+  ...rest
+}: CardProps) => {
+  return (
+    <div
+      className={twMerge(
+        'flex items-center justify-center rounded-lg cursor-pointer bg-neutral',
+        'hover:shadow-md hover:shadow-neutral-500 border border-neutral-500 text-neutral-1000',
+        size === 'medium' && 'w-64 px-8 py-4',
+        size === 'large' && 'w-96 pr-5',
+        direction === 'col' && 'flex-col',
+        selected === true && 'border-2 border-orange-500',
+        disabled === true && 'opacity-50 cursor-not-allowed',
+        className,
+      )}
+      onClick={onClick}
+    >
+      <img src={rest.image} alt={rest.title} width={imageSize} height="auto" />
+      <aside
+        className={twMerge(
+          direction === 'col' && 'text-center',
+          'flex flex-col gap-2',
+        )}
+      >
+        <h1 className="text-xl font-bold font-default leading-tight">
+          {rest.title}
+        </h1>
+        <p className="text-justify">{rest.content}</p>
+      </aside>
+    </div>
+  )
+}

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,49 @@
+import { DetailedHTMLProps, HTMLAttributes, useState } from 'react'
+import { FiCheck } from 'react-icons/fi'
+import { twMerge } from 'tailwind-merge'
+
+export interface CheckboxProps
+  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  disabled?: boolean
+  required?: boolean
+}
+
+export const Checkbox = ({ className, required, disabled }: CheckboxProps) => {
+  const [selected, setSelected] = useState(false)
+
+  const handleCheckboxChange = (value: boolean) => {
+    setSelected(!value)
+  }
+
+  return (
+    <div className="flex items-center justify-center">
+      <label
+        className={twMerge(
+          className,
+          'relative  border-2 w-5 h-5 flex items-center justify-center rounded-sm hover:border-orange-500 hover:cursor-pointer',
+          selected
+            ? 'bg-orange-500 border-orange-500'
+            : 'border-neutral-500 hover:shadow-md hover:shadow-orange-500',
+          disabled === true && 'opacity-50 cursor-not-allowed',
+        )}
+      >
+        <input
+          type="checkbox"
+          required={required}
+          checked={selected}
+          onChange={() => handleCheckboxChange(selected)}
+          disabled={disabled}
+          className={twMerge(
+            'relative z-10 hidden',
+            selected
+              ? 'bg-orange-500 border-orange-500'
+              : 'border-neutral-500 hover:shadow-md hover:shadow-orange-500',
+          )}
+        />
+        {selected && (
+          <FiCheck color="#FFFFFF" size={14} style={{ strokeWidth: 4 }} />
+        )}
+      </label>
+    </div>
+  )
+}

package/src/components/Form/index.tsx

@@ -0,0 +1,38 @@
+import { DetailedHTMLProps, FormHTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export interface FormProps
+  extends DetailedHTMLProps<
+    FormHTMLAttributes<HTMLFormElement>,
+    HTMLFormElement
+  > {
+  children: React.ReactNode
+  variant?: 'primary' | 'secondary'
+  orientation?: 'row' | 'col'
+  handleSubmit?: (event: React.FormEvent<HTMLFormElement>) => void
+}
+
+export const Form = ({
+  className,
+  children,
+  variant = 'secondary',
+  orientation = 'row',
+  ...rest
+}: FormProps) => {
+  return (
+    <form
+      className={twMerge(
+        'flex flex-row gap-2 p-6 rounded-md border-2',
+        variant === 'primary' &&
+          'text-neutral-800 bg-neutral-200 border-neutral-300',
+        variant === 'secondary' &&
+          'text-neutral-200 bg-neutral-600 border-neutral-800',
+        orientation === 'col' && 'flex-col',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </form>
+  )
+}

package/src/components/Heading/index.tsx

@@ -0,0 +1,53 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export interface HeadingProps
+  extends DetailedHTMLProps<HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> {
+  children: React.ReactNode
+  color?: string
+  size?:
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | '7xl'
+    | '8xl'
+    | '9xl'
+  tag?: 'h1' | 'h2' | 'h3' | 'h4'
+}
+
+export const Heading = ({
+  children,
+  color = 'neutral-800',
+  size = 'lg',
+  tag = 'h2',
+  className,
+}: HeadingProps) => {
+  const fontSize = {
+    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 className={twMerge(`text-${color} ${fontSize}`, className)}>
+      {children}
+    </Tag>
+  )
+}

package/src/components/Input/index.tsx

@@ -0,0 +1,154 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,35 @@
+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>
+  )
+}