@mriqbox/ui-kit 2.0.0 → 3.0.0

package/README.md

@@ -22,10 +22,10 @@ npm install @mriqbox/ui-kit
 
 **Uso:**
 ```tsx
-import { Button } from '@mriqbox/ui-kit';
+import { MriButton } from '@mriqbox/ui-kit';
 
 export default function MyComponent() {
-  return <Button>Clique aqui</Button>;
+  return <MriButton>Clique aqui</MriButton>;
 }
 ```
 
@@ -34,12 +34,15 @@ Ideal se você quer ter o código dos componentes no seu projeto para customizá
 
 Este projeto contém um arquivo `components.json` na raiz, permitindo o uso da CLI do shadcn.
 
-**Adicionar componente via CLI:**
-No diretório raiz deste projeto:
+**Adicionar componente via CLI (Novo):**
+Você pode adicionar componentes individualmente (estilo Shadcn) direto do nosso repositório:
+
 ```bash
-npx shadcn-ui@latest add button
+npx @mriqbox/ui-kit add mri-button
 ```
-Isso irá baixar o código do componente `Button` para `src/components/ui/button.tsx`.
+Isso irá baixar o código fonte do `MriButton.tsx` para `src/components/ui/MriButton.tsx` (ou diretório configurado, se detectado).
+
+**Nota:** A CLI irá baixar apenas o arquivo do componente. Verifique se ele possui dependências de outros componentes `Mri*` e adicione-os também se necessário.
 
 ## ⚙️ Configuração (Para uso via NPM)
 

package/bin/cli.js

@@ -0,0 +1,198 @@
+#!/usr/bin/env node
+
+/**
+ * Simple CLI to add Mri UI components to a project.
+ * Usage: npx @mriqbox/ui-kit add <component-name>
+ * Example: npx @mriqbox/ui-kit add mri-button
+ */
+
+import { Command } from 'commander';
+import chalk from 'chalk';
+import fs from 'fs';
+import path from 'path';
+import https from 'https';
+
+const program = new Command();
+const BASE_PREFIX = 'https://raw.githubusercontent.com/mri-Qbox-Brasil/mri-ui-kit/main/src/components';
+
+const COMPONENT_MAP = {
+    // Atoms
+    'MriBadge': 'atoms',
+    'MriButton': 'atoms',
+    'MriIcons': 'atoms',
+    'MriInput': 'atoms',
+    'MriScrollArea': 'atoms',
+    'MriStatusBadge': 'atoms',
+    'mri-badge-variants': 'atoms',
+    'mri-button-variants': 'atoms',
+
+    // Molecules
+    'MriButtonGroup': 'molecules',
+    'MriCard': 'molecules',
+    'MriCompactSearch': 'molecules',
+    'MriDialog': 'molecules',
+    'MriModal': 'molecules',
+    'MriPopover': 'molecules',
+    'MriSelectSearch': 'molecules',
+    'MriThemeToggle': 'molecules',
+    'MriTimePicker': 'molecules',
+    'MriCommand': 'molecules',
+    'MriCopyButton': 'molecules',
+    'MriEconomyCard': 'molecules',
+    'MriGridActionButton': 'molecules',
+    'MriSearchInput': 'molecules',
+    'MriSectionHeader': 'molecules',
+    'MriDatePicker': 'molecules',
+
+    // Organisms
+    'MriCalendar': 'organisms',
+    'MriPageHeader': 'organisms',
+    'MriSidebar': 'organisms',
+    'MriTable': 'organisms',
+};
+
+function toPascalCase(str) {
+    return str
+        .replace(/(^\w|-\w)/g, (clear) => clear.replace(/-/, "").toUpperCase());
+}
+function ensureDirectory(dir) {
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
+}
+
+function fetchFileContent(url) {
+    return new Promise((resolve, reject) => {
+        https.get(url, (response) => {
+            if (response.statusCode === 200) {
+                let data = '';
+                response.on('data', (chunk) => data += chunk);
+                response.on('end', () => resolve(data));
+            } else {
+                reject(new Error(`Failed to download: ${response.statusCode} ${response.statusMessage}`));
+            }
+        }).on('error', (err) => {
+            reject(err);
+        });
+    });
+}
+
+const visited = new Set();
+
+async function processComponent(componentName, installDir) {
+    let fileName = componentName;
+    let isVariant = componentName.includes('variants');
+
+    if (!isVariant) {
+        if (!fileName.startsWith('Mri') && !fileName.match(/^[A-Z]/)) {
+            fileName = toPascalCase(fileName);
+        }
+        if (!fileName.startsWith('Mri')) {
+            fileName = `Mri${fileName}`;
+        }
+    }
+
+    // Check map for directory
+    const componentKey = isVariant ? fileName.replace(/\.ts$/, '') : fileName.replace(/\.tsx$/, '');
+    const category = COMPONENT_MAP[componentKey];
+
+    if (!category) {
+        console.warn(chalk.yellow(`⚠️  Component ${fileName} not found in atomic map. Trying legacy path...`));
+    }
+
+    if (!isVariant) {
+        if (!fileName.endsWith('.tsx')) fileName += '.tsx';
+    } else {
+        if (!fileName.endsWith('.ts')) fileName += '.ts';
+    }
+
+    if (visited.has(fileName)) return;
+    visited.add(fileName);
+
+    const destPath = path.join(installDir, fileName);
+
+    // Construct URL
+    const remoteDir = category || 'ui';
+    const fileUrl = `${BASE_PREFIX}/${remoteDir}/${fileName}`;
+
+    if (fs.existsSync(destPath)) {
+        console.log(chalk.gray(`   ${fileName} already exists.`));
+        await checkDependencies(destPath, installDir);
+        return;
+    }
+
+    console.log(chalk.cyan(`⬇️  Downloading ${fileName}...`));
+    try {
+        let content = await fetchFileContent(fileUrl);
+
+        // Rewrite imports to be flat
+        // Replace @/components/(atoms|molecules|organisms)/ with @/components/ui/
+        content = content.replace(/@\/components\/(?:atoms|molecules|organisms)\//g, '@/components/ui/');
+
+        fs.writeFileSync(destPath, content);
+
+        console.log(chalk.green(`✅ ${fileName} added.`));
+
+        await checkDependenciesContent(content, installDir);
+
+    } catch (err) {
+        console.error(chalk.red(`❌ Error downloading ${fileName}: ${err.message}`));
+    }
+}
+
+async function checkDependenciesContent(content, installDir) {
+    try {
+        const importRegex = /from\s+['"](?:@\/components\/ui\/|\.\/)([^'"]+)['"]/g;
+        let match;
+
+        while ((match = importRegex.exec(content)) !== null) {
+            const depName = match[1];
+            if (depName.startsWith('Mri') || depName.includes('variants')) {
+                await processComponent(depName, installDir);
+            }
+        }
+    } catch (e) {
+        console.warn(chalk.yellow(`Could not parse dependencies.`));
+    }
+}
+
+async function checkDependencies(filePath, installDir) {
+    const content = fs.readFileSync(filePath, 'utf8');
+    await checkDependenciesContent(content, installDir);
+}
+
+program
+    .name('mri-ui')
+    .description('Add Mri UI components to your project')
+    .version('3.0.0');
+
+program
+    .command('add <component>')
+    .description('Add a component to your project')
+    .action(async (componentName) => {
+        try {
+            console.log(chalk.blue(`🔹 Resolving ${componentName}...`));
+
+            let installDir = './src/components/ui';
+            if (fs.existsSync('components.json')) {
+                try {
+                    if (fs.existsSync('./components/ui')) installDir = './components/ui';
+                } catch (e) { }
+            } else if (fs.existsSync('./components/ui')) {
+                installDir = './components/ui';
+            }
+
+            console.log(chalk.gray(`   Target directory: ${installDir}`));
+            ensureDirectory(installDir);
+
+            await processComponent(componentName, installDir);
+
+            console.log(chalk.blue(`\n🎉 Done!`));
+            console.log(chalk.gray(`   Don't forget to install external libraries if prompted by your linter (lucide-react, etc).`));
+
+        } catch (error) {
+            console.error(chalk.red('An unexpected error occurred:'), error);
+        }
+    });
+
+program.parse();

package/dist/components/atoms/MriStatusBadge.d.ts

@@ -0,0 +1,7 @@
+export interface MriStatusBadgeProps {
+    label: string | number;
+    variant?: 'default' | 'destructive' | 'warning' | 'success' | 'outline' | 'ghost';
+    className?: string;
+    size?: 'xs' | 'sm' | 'md';
+}
+export declare function MriStatusBadge({ label, variant, className, size }: MriStatusBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/MriStatusBadge.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MriStatusBadge } from './MriStatusBadge';
+
+declare const meta: Meta<typeof MriStatusBadge>;
+export default meta;
+type Story = StoryObj<typeof MriStatusBadge>;
+export declare const Default: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Destructive: Story;

package/dist/components/{ui → atoms}/mri-badge-variants.d.ts

@@ -1,3 +1,3 @@
 export declare const mriBadgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/{ui → atoms}/mri-button-variants.d.ts

@@ -1,4 +1,4 @@
 export declare const mriButtonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/{ui → molecules}/MriCommand.d.ts

@@ -20,7 +20,7 @@ declare const MriCommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pi
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -46,7 +46,7 @@ declare const MriCommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -64,7 +64,7 @@ declare const MriCommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/molecules/MriCopyButton.d.ts

@@ -0,0 +1,7 @@
+export interface MriCopyButtonProps {
+    text: string;
+    className?: string;
+    iconSize?: number;
+    variant?: 'ghost' | 'outline' | 'default' | 'secondary' | 'link';
+}
+export declare function MriCopyButton({ text, className, iconSize, variant }: MriCopyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/MriCopyButton.stories.d.ts

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

package/dist/components/molecules/MriEconomyCard.d.ts

@@ -0,0 +1,8 @@
+export interface MriEconomyCardProps {
+    label: string;
+    amount: number | string;
+    amountColorClass?: string;
+    onAdd?: () => void;
+    onRemove?: () => void;
+}
+export declare function MriEconomyCard({ label, amount, amountColorClass, onAdd, onRemove }: MriEconomyCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/MriEconomyCard.stories.d.ts

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

package/dist/components/molecules/MriGridActionButton.d.ts

@@ -0,0 +1,11 @@
+import { LucideIcon } from 'lucide-react';
+
+export interface MriGridActionButtonProps {
+    icon: LucideIcon;
+    label: string;
+    onClick: () => void;
+    variant?: 'default' | 'destructive' | 'warning';
+    disabled?: boolean;
+    className?: string;
+}
+export declare function MriGridActionButton({ icon: Icon, label, onClick, variant, disabled, className }: MriGridActionButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/MriGridActionButton.stories.d.ts

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

package/dist/components/molecules/MriSearchInput.d.ts

@@ -0,0 +1,8 @@
+export interface MriSearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    width?: string;
+}
+export declare function MriSearchInput({ value, onChange, placeholder, className, width }: MriSearchInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/MriSearchInput.stories.d.ts

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

package/dist/components/molecules/MriSectionHeader.d.ts

@@ -0,0 +1,8 @@
+import { LucideIcon } from 'lucide-react';
+
+export interface MriSectionHeaderProps {
+    icon: LucideIcon;
+    title: string;
+    className?: string;
+}
+export declare function MriSectionHeader({ icon: Icon, title, className }: MriSectionHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/MriSectionHeader.stories.d.ts

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

package/dist/index.d.ts

@@ -1,17 +1,30 @@
 
-export * from './components/ui/MriButton';
-export * from './components/ui/MriInput';
-export * from './components/ui/MriBadge';
-export * from './components/ui/MriCard';
-export * from './components/ui/MriCommand';
-export * from './components/ui/MriDialog';
-export * from './components/ui/MriIcons';
-export * from './components/ui/MriModal';
-export * from './components/ui/MriPageHeader';
-export * from './components/ui/MriPopover';
-export * from './components/ui/MriSelectSearch';
-export * from './components/ui/MriTable';
+export * from './components/atoms/MriBadge';
+export * from './components/atoms/MriButton';
+export * from './components/atoms/MriIcons';
+export * from './components/atoms/MriInput';
+export * from './components/atoms/MriScrollArea';
+export * from './components/atoms/MriStatusBadge';
+export * from './components/atoms/mri-badge-variants';
+export * from './components/atoms/mri-button-variants';
+export * from './components/molecules/MriButtonGroup';
+export * from './components/molecules/MriCard';
+export * from './components/molecules/MriCompactSearch';
+export * from './components/molecules/MriDialog';
+export * from './components/molecules/MriModal';
+export * from './components/molecules/MriPopover';
+export * from './components/molecules/MriSelectSearch';
+export * from './components/molecules/MriThemeToggle';
+export * from './components/molecules/MriTimePicker';
+export * from './components/molecules/MriCommand';
+export * from './components/molecules/MriCopyButton';
+export * from './components/molecules/MriEconomyCard';
+export * from './components/molecules/MriGridActionButton';
+export * from './components/molecules/MriSearchInput';
+export * from './components/molecules/MriSectionHeader';
+export * from './components/molecules/MriDatePicker';
+export * from './components/organisms/MriCalendar';
+export * from './components/organisms/MriPageHeader';
+export * from './components/organisms/MriSidebar';
+export * from './components/organisms/MriTable';
 export * from './lib/utils';
-export * from './components/ui/MriSidebar';
-export * from './components/ui/mri-button-variants';
-export * from './components/ui/mri-badge-variants';