hubbi-ui 1.0.0

package/README.md

@@ -0,0 +1,122 @@
+# Hubbi UI
+
+**Hubbi UI** é uma biblioteca de componentes React reutilizáveis construída com Tailwind CSS e Storybook, desenvolvida para garantir consistência visual, escalabilidade e produtividade em aplicações baseadas no ecossistema React.
+
+---
+
+## 📦 Instalação
+
+Antes de começar, certifique-se de que seu projeto utiliza React 18.
+
+#### Instalação local
+
+No projeto hubbi-ui
+
+```bash
+npm i
+npm run build
+npm link
+```
+
+No projeto que será utilizado o hubbi-ui
+
+```bash
+npm link hubbi-ui
+```
+
+#### Instale o `hubbi-ui` via npm:
+
+```bash
+npm install hubbi-ui
+```
+
+ou com Yarn:
+
+```bash
+yarn add hubbi-ui
+```
+
+---
+
+## 🧩 Requisitos
+
+Este pacote utiliza **peer dependencies**, então certifique-se de que as seguintes dependências estejam instaladas no seu projeto:
+
+```bash
+npm install react react-dom react-router-dom@5 clsx phosphor-react
+```
+
+> **Observação:** É necessário usar `react-router-dom@^5.2.0` (versão 5).
+
+---
+
+## 🎨 Estilos
+
+A biblioteca depende do arquivo `styles.css` gerado pelo Tailwind CSS. **Você deve importar este CSS no entry point da sua aplicação (por exemplo, `main.tsx` ou `index.tsx`)**:
+
+```ts
+import "hubbi-ui/styles.css"
+```
+
+---
+
+## 🚀 Uso Básico
+
+```tsx
+import { Text } from "hubbi-ui"
+
+export default function App() {
+  return (
+    <Text variant="h1" color="primary">
+      Olá, Hubbi!
+    </Text>
+  )
+}
+```
+
+---
+
+## 🧾 Componentes
+
+A biblioteca expõe diversos componentes prontos para uso. Para mais informações, exemplos e personalizações, utilize o **Storybook** local:
+
+```bash
+npm run storybook
+```
+
+---
+
+## 📦 Scripts Disponíveis
+
+| Comando             | Descrição                                   |
+| ------------------- | ------------------------------------------- |
+| `npm run build`     | Compila TypeScript e Tailwind para produção |
+| `npm run storybook` | Inicia o Storybook com Watch do Tailwind    |
+
+---
+
+## 📁 Estrutura de Exportação
+
+Este pacote usa `exports` modernos:
+
+- ESM: `./dist/hubbi-ui.es.js`
+- UMD: `./dist/hubbi-ui.umd.js`
+- Tipos TypeScript: `./dist/hubbi-ui.es.d.ts`
+- Estilos: `./dist/styles.css`
+
+---
+
+## 🛠 Tecnologias Utilizadas
+
+- React 18
+- TypeScript
+- Tailwind CSS
+- Vite
+- Storybook
+
+---
+
+## 📌 Observações
+
+- O CSS precisa **obrigatoriamente ser importado manualmente**.
+- O build gera os arquivos de estilos e tipos para garantir compatibilidade e reutilização.

package/dist/assets/Hubbi.d.ts

@@ -0,0 +1,8 @@
+declare const Hubbi: ({ fill, width, height, full, className, }: {
+    fill?: string | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    full?: boolean | undefined;
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Hubbi;

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface AlertProps {
+    variant?: "info" | "success" | "warning" | "error";
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Alert: React.FC<AlertProps>;
+export {};

package/dist/components/alert/alert.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Alert } from './alert';
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Playground: Story;

package/dist/components/alert/index.d.ts

@@ -0,0 +1 @@
+export { Alert } from './alert';

package/dist/components/button/button.d.ts

@@ -0,0 +1,17 @@
+import { ButtonHTMLAttributes } from 'react';
+type ButtonVariant = "contained" | "outlined" | "text";
+type ButtonColor = "primary" | "error" | "success" | "default";
+type ButtonSize = "small" | "medium" | "large";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    loading?: boolean;
+    spinnerColor?: string;
+}
+export declare function Button({ children, variant, color, size, disabled, fullWidth, startIcon, endIcon, loading, spinnerColor, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/button/button.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export { StatusButton } from './statusbutton';

package/dist/components/button/statusbutton.d.ts

@@ -0,0 +1,10 @@
+import { ButtonHTMLAttributes } from 'react';
+type StatusType = "all" | "open" | "completed" | "cancelled" | string;
+interface StatusButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    status: StatusType;
+    selected: boolean;
+    icon: React.ReactNode;
+    label: string;
+}
+export declare function StatusButton({ status, selected, icon, label, ...props }: StatusButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/button/statusbutton.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StatusButton } from './statusbutton';
+declare const meta: Meta<typeof StatusButton>;
+export default meta;
+type Story = StoryObj<typeof StatusButton>;
+export declare const Playground: Story;

package/dist/components/card/card.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+interface CardProps {
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+    titleClassName?: string;
+    backgroundColor?: string;
+}
+export declare function Card({ title, children, className, titleClassName, backgroundColor, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/card/card.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Card } from './card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Playground: Story;

package/dist/components/card/index.d.ts

@@ -0,0 +1 @@
+export { Card } from './card';

package/dist/components/filedropzone/filedropzone.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+interface FileDropzoneProps {
+    getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
+    getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
+    isDragActive: boolean;
+    isDragReject: boolean;
+    fileName?: string;
+    supportedFileText?: string;
+    onClearFile?: () => void;
+    variant?: "default" | "simple";
+    details?: string;
+}
+export declare const FileDropzone: ({ getRootProps, getInputProps, isDragActive, isDragReject, fileName, onClearFile, supportedFileText, variant, details, }: FileDropzoneProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filedropzone/index.d.ts

@@ -0,0 +1 @@
+export { FileDropzone } from './filedropzone';

package/dist/components/header/header.d.ts

@@ -0,0 +1,15 @@
+interface User {
+    username?: string;
+    email?: string;
+    image?: {
+        file_low?: string;
+    };
+}
+interface HeaderProps {
+    onMenuClick: () => void;
+    isDarkMode: boolean;
+    user?: User;
+    toggleTheme: () => void;
+}
+export declare function Header({ onMenuClick, isDarkMode, user, toggleTheme, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/header/header.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Header } from './header';
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof Header>;
+export declare const Default: Story;
+export declare const WithoutUserImage: Story;

package/dist/components/header/index.d.ts

@@ -0,0 +1 @@
+export { Header } from './header';

package/dist/components/index.d.ts

@@ -0,0 +1,18 @@
+export * from './alert';
+export * from './button';
+export * from './card';
+export * from './filedropzone';
+export * from './header';
+export * from './input';
+export * from './label';
+export * from './metriccard';
+export * from './modal';
+export * from './navbutton';
+export * from './navigation';
+export * from './selector';
+export * from './sheets';
+export * from './sidebar';
+export * from './spinner';
+export * from './tabs';
+export * from './text';
+export * from './wrapper';

package/dist/components/input/index.d.ts

@@ -0,0 +1 @@
+export { Input } from './input';

package/dist/components/input/input.d.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes } from 'react';
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: boolean;
+    helperText?: string;
+    icon?: React.ReactNode;
+}
+export declare function Input({ label, placeholder, error, helperText, disabled, icon, className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/input/input.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Input } from './input';
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Playground: Story;

package/dist/components/label/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusLabel } from './statuslabel';
+export { UtilizationLabel } from './utilizationlabel';

package/dist/components/label/label.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const UtilizationLabels: StoryObj;
+export declare const StatusLabels: StoryObj;

package/dist/components/label/statuslabel.d.ts

@@ -0,0 +1,7 @@
+import { StatusType } from '../../utils/status-utils';
+interface StatusLabelProps {
+    statusKey: keyof typeof StatusType;
+    noIcon?: boolean;
+}
+export declare function StatusLabel({ statusKey, noIcon }: StatusLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/label/utilizationlabel.d.ts

@@ -0,0 +1,5 @@
+interface UtilizationLabelProps {
+    status: number;
+}
+export declare function UtilizationLabel({ status }: UtilizationLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/metriccard/index.d.ts

@@ -0,0 +1 @@
+export { MetricCard } from './metriccard';

package/dist/components/metriccard/metriccard.d.ts

@@ -0,0 +1,10 @@
+interface MetricCardProps {
+    title: string;
+    value: string;
+    change?: string;
+    trend?: "up" | "down";
+    icon: React.ElementType;
+    loading?: boolean;
+}
+export declare function MetricCard({ title, value, change, trend, icon: Icon, loading, }: MetricCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/metriccard/metriccard.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MetricCard } from './metriccard';
+declare const meta: Meta<typeof MetricCard>;
+export default meta;
+type Story = StoryObj<typeof MetricCard>;
+export declare const Playground: Story;

package/dist/components/modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal } from './modal';

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,10 @@
+interface ModalProps {
+    isOpen: boolean;
+    title?: string;
+    onClose: () => void;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+}
+export declare const Modal: React.FC<ModalProps>;
+export {};

package/dist/components/modal/modal.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Modal } from './modal';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Playground: Story;

package/dist/components/navbutton/index.d.ts

@@ -0,0 +1 @@
+export { NavButton } from './navbutton';

package/dist/components/navbutton/navbutton.d.ts

@@ -0,0 +1,8 @@
+interface NavButtonProps {
+    isActive?: boolean;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare function NavButton({ isActive, onClick, icon, children, }: NavButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/navbutton/navbutton.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NavButton } from './navbutton';
+declare const meta: Meta<typeof NavButton>;
+export default meta;
+type Story = StoryObj<typeof NavButton>;
+export declare const Playground: Story;

package/dist/components/navigation/index.d.ts

@@ -0,0 +1 @@
+export { Navigation } from './navigation';

package/dist/components/navigation/navigation.d.ts

@@ -0,0 +1,9 @@
+interface NavigationProps {
+    count: number;
+    pageLimit: number;
+    setPageLimit?: (limit: number) => void;
+    currentPage: number;
+    goToPage?: (page: number) => void;
+}
+export declare function Navigation({ count, pageLimit, setPageLimit, currentPage, goToPage, }: NavigationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/navigation/navigation.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Navigation } from './navigation';
+declare const meta: Meta<typeof Navigation>;
+export default meta;
+type Story = StoryObj<typeof Navigation>;
+export declare const Default: Story;

package/dist/components/selector/index.d.ts

@@ -0,0 +1 @@
+export { Selector } from './selector';

package/dist/components/selector/select.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Selector } from './selector';
+declare const meta: Meta<typeof Selector>;
+export default meta;
+type Story = StoryObj<typeof Selector>;
+export declare const Default: Story;

package/dist/components/selector/selector.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+interface Option {
+    label: string;
+    value: string;
+}
+interface SelectorProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: Option[];
+    label?: string;
+}
+export declare const Selector: React.FC<SelectorProps>;
+export {};

package/dist/components/sheets/index.d.ts

@@ -0,0 +1 @@
+export { Sheets } from './sheets';

package/dist/components/sheets/sheets.d.ts

@@ -0,0 +1,15 @@
+import { SheetsBody } from './sheetsbody';
+import { SheetsCell } from './sheetscell';
+import { SheetsHeader } from './sheetsheader';
+import { SheetsRow } from './sheetsrow';
+interface SheetsProps {
+    children: React.ReactNode;
+}
+type SheetsComponent = React.FC<SheetsProps> & {
+    Header: typeof SheetsHeader;
+    Body: typeof SheetsBody;
+    Row: typeof SheetsRow;
+    Cell: typeof SheetsCell;
+};
+export declare const Sheets: SheetsComponent;
+export {};

package/dist/components/sheets/sheets.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/sheets/sheetsbody.d.ts

@@ -0,0 +1,6 @@
+interface SheetsBodyProps<T> {
+    data: T[];
+    children: (item: T, index: number) => React.ReactNode;
+}
+export declare const SheetsBody: <T>({ data, children }: SheetsBodyProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/sheets/sheetscell.d.ts

@@ -0,0 +1,7 @@
+interface SheetsCellProps {
+    children: React.ReactNode;
+    align?: "left" | "center" | "right";
+    className?: string;
+}
+export declare const SheetsCell: ({ children, align, className, }: SheetsCellProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/sheets/sheetsheader.d.ts

@@ -0,0 +1,5 @@
+interface SheetsHeaderProps {
+    columns: string[];
+}
+export declare const SheetsHeader: ({ columns }: SheetsHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/sheets/sheetsrow.d.ts

@@ -0,0 +1,5 @@
+interface SheetsRowProps {
+    children: React.ReactNode;
+}
+export declare const SheetsRow: ({ children }: SheetsRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1 @@
+export { Sidebar } from './sidebar';

package/dist/components/sidebar/sidebar.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+interface SubItem {
+    to: string;
+    label: string;
+}
+interface NavItem {
+    to?: string;
+    label: string;
+    icon: React.ElementType;
+    subItems?: SubItem[];
+}
+interface Location {
+    pathname: string;
+}
+interface SidebarProps {
+    isOpen: boolean;
+    isDarkMode: boolean;
+    onClose: () => void;
+    navItems: NavItem[];
+    logout: () => void;
+    location: Location;
+}
+export declare function Sidebar({ isOpen, onClose, navItems, logout, location, isDarkMode, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/sidebar/sidebar.stories.d.ts

@@ -0,0 +1,11 @@
+import { Sidebar } from './sidebar';
+import { Meta } from '@storybook/react';
+declare const _default: Meta<typeof Sidebar>;
+export default _default;
+export declare const Default: {
+    (): import("react/jsx-runtime").JSX.Element;
+    args: {
+        isDarkMode: boolean;
+        isOpen: boolean;
+    };
+};

package/dist/components/spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner } from './spinner';

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,8 @@
+type SpinnerSize = "small" | "medium" | "large";
+interface SpinnerProps {
+    colorClass?: string;
+    size?: SpinnerSize;
+    className?: string;
+}
+export declare function Spinner({ colorClass, size, className, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/spinner/spinner.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from './spinner';
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+export declare const Default: Story;

package/dist/components/tabs/index.d.ts

@@ -0,0 +1 @@
+export { Tabs } from './tabs';

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,13 @@
+interface TabItem {
+    label: string;
+    value: string;
+    count?: number;
+}
+interface TabsProps {
+    tabs: TabItem[];
+    activeTab: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+export declare function Tabs({ tabs, activeTab, onChange, disabled, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tabs/tabs.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Playground: Story;

package/dist/components/text/index.d.ts

@@ -0,0 +1 @@
+export { Text } from './text';

package/dist/components/text/text.d.ts

@@ -0,0 +1,18 @@
+type Variant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "overline";
+type TextColor = "primary" | "secondary" | "inherit" | "error" | "success" | "warning" | "disable";
+type TextAlign = "left" | "center" | "right" | "justify";
+type FontWeight = "normal" | "medium" | "semibold" | "bold" | "extrabold";
+type FontSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
+interface TextProps {
+    children: React.ReactNode;
+    variant?: Variant;
+    color?: TextColor;
+    customColor?: string;
+    align?: TextAlign;
+    weight?: FontWeight;
+    size?: FontSize;
+    className?: string;
+    as?: React.ElementType;
+}
+export declare function Text({ children, variant, color, customColor, align, weight, size, className, as, }: TextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/text/text.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Text } from './text';
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj<typeof Text>;
+export declare const Playground: Story;

package/dist/components/wrapper/index.d.ts

@@ -0,0 +1 @@
+export { Wrapper } from './wrapper';