@mriqbox/ui-kit 2.1.0 → 3.0.0

package/bin/cli.js

@@ -13,7 +13,43 @@ import path from 'path';
 import https from 'https';
 
 const program = new Command();
-const BASE_URL = 'https://raw.githubusercontent.com/mri-Qbox-Brasil/mri-ui-kit/main/src/components/ui';
+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
@@ -25,21 +61,17 @@ function ensureDirectory(dir) {
     }
 }
 
-function downloadFile(url, dest) {
+function fetchFileContent(url) {
     return new Promise((resolve, reject) => {
-        const file = fs.createWriteStream(dest);
         https.get(url, (response) => {
             if (response.statusCode === 200) {
-                response.pipe(file);
-                file.on('finish', () => {
-                    file.close(resolve);
-                });
+                let data = '';
+                response.on('data', (chunk) => data += chunk);
+                response.on('end', () => resolve(data));
             } else {
-                fs.unlink(dest, () => { });
                 reject(new Error(`Failed to download: ${response.statusCode} ${response.statusMessage}`));
             }
         }).on('error', (err) => {
-            fs.unlink(dest, () => { });
             reject(err);
         });
     });
@@ -48,8 +80,6 @@ function downloadFile(url, dest) {
 const visited = new Set();
 
 async function processComponent(componentName, installDir) {
-    let targetName = componentName;
-
     let fileName = componentName;
     let isVariant = componentName.includes('variants');
 
@@ -60,46 +90,58 @@ async function processComponent(componentName, installDir) {
         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);
-    const fileUrl = `${BASE_URL}/${fileName}`;
+
+    // Construct URL
+    const remoteDir = category || 'ui';
+    const fileUrl = `${BASE_PREFIX}/${remoteDir}/${fileName}`;
 
     if (fs.existsSync(destPath)) {
         console.log(chalk.gray(`   ${fileName} already exists.`));
-        // Even if exists, we should scan it for dependencies?
-        // Maybe the user has an outdated version.
-        // For detailed recursion, strictly we should read it.
-        // But let's assume if it exists, its deps are likely handled or user manages it.
-        // To be safe for "fresh" installs, let's scan it anyway if we can read it.
-        // But standard 'add' usually skips or prompts overwrite.
-        // Let's just skip download but continues to scan deps if we want to be thorough.
-        // For this "Simple CLI", let's stop at existence to avoid overwriting user changes.
-        // BUT we must check its imports to ensure children exist.
-        checkDependencies(destPath, installDir);
+        await checkDependencies(destPath, installDir);
         return;
     }
 
     console.log(chalk.cyan(`⬇️  Downloading ${fileName}...`));
     try {
-        await downloadFile(fileUrl, destPath);
+        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 checkDependencies(destPath, installDir);
+        await checkDependenciesContent(content, installDir);
 
     } catch (err) {
         console.error(chalk.red(`❌ Error downloading ${fileName}: ${err.message}`));
     }
 }
 
-async function checkDependencies(filePath, installDir) {
+async function checkDependenciesContent(content, installDir) {
     try {
-        const content = fs.readFileSync(filePath, 'utf8');
         const importRegex = /from\s+['"](?:@\/components\/ui\/|\.\/)([^'"]+)['"]/g;
         let match;
 
@@ -110,14 +152,19 @@ async function checkDependencies(filePath, installDir) {
             }
         }
     } catch (e) {
-        console.warn(chalk.yellow(`Could not parse dependencies for ${filePath}`));
+        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('2.0.0');
+    .version('3.0.0');
 
 program
     .command('add <component>')

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';