kynjal-cli 2.0.6

package/dist/registry/image.ts

@@ -0,0 +1,191 @@
+// Registry configuration for image component and demo
+
+export const imageRegistry = {
+  // Main image component
+  image: {
+    name: 'image',
+    description:
+      'A responsive image component with loading states, error handling, and flexible styling options.',
+    type: 'registry:ui',
+    dependencies: ['expo-image'],
+    registryDependencies: ['text', 'view'],
+    hooks: ['useColor'],
+    theme: ['globals'],
+    files: [
+      {
+        type: 'registry:ui',
+        path: 'templates/components/ui/image.tsx',
+        target: 'components/ui/image.tsx',
+      },
+    ],
+    preview: {
+      light: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5575.PNG',
+      dark: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5575.PNG',
+    },
+  },
+
+  // Default demo
+  'image-demo': {
+    name: 'image-demo',
+    description: 'A basic image with loading indicator and error fallback',
+    type: 'registry:example',
+    registryDependencies: ['image'],
+    hooks: [],
+    theme: [],
+    files: [
+      {
+        type: 'registry:example',
+        path: 'templates/demo/image/image-demo.tsx',
+        target: 'components/demo/image/image-demo.tsx',
+      },
+    ],
+    preview: {
+      light: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5575.PNG',
+      dark: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5575.PNG',
+    },
+  },
+
+  // Variants example
+  'image-variants': {
+    name: 'image-variants',
+    description: 'Images with different border radius variants',
+    type: 'registry:example',
+    registryDependencies: ['image'],
+    hooks: [],
+    theme: [],
+    files: [
+      {
+        type: 'registry:example',
+        path: 'templates/demo/image/image-variants.tsx',
+        target: 'components/demo/image/image-variants.tsx',
+      },
+    ],
+    preview: {
+      light: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5576.PNG',
+      dark: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5576.PNG',
+    },
+  },
+
+  // Sizes example
+  'image-sizes': {
+    name: 'image-sizes',
+    description: 'Images in different sizes and aspect ratios',
+    type: 'registry:example',
+    registryDependencies: ['image'],
+    hooks: [],
+    theme: [],
+    files: [
+      {
+        type: 'registry:example',
+        path: 'templates/demo/image/image-sizes.tsx',
+        target: 'components/demo/image/image-sizes.tsx',
+      },
+    ],
+    preview: {
+      light: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5577.PNG',
+      dark: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5577.PNG',
+    },
+  },
+
+  // Loading states example
+  'image-loading': {
+    name: 'image-loading',
+    description: 'Images with different loading indicator configurations',
+    type: 'registry:example',
+    registryDependencies: ['image'],
+    hooks: [],
+    theme: [],
+    files: [
+      {
+        type: 'registry:example',
+        path: 'templates/demo/image/image-loading.tsx',
+        target: 'components/demo/image/image-loading.tsx',
+      },
+    ],
+    preview: {
+      light:
+        'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/ScreenRecording_07-01-2025 05-41-40_1.MP4',
+      dark: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/ScreenRecording_07-01-2025 05-41-40_1.MP4',
+    },
+  },
+
+  'image-error': {
+    name: 'image-error',
+    description: 'Images with custom error fallback messages',
+    type: 'registry:example',
+    registryDependencies: ['image'],
+    hooks: [],
+    theme: [],
+    files: [
+      {
+        type: 'registry:example',
+        path: 'templates/demo/image/image-error.tsx',
+        target: 'components/demo/image/image-error.tsx',
+      },
+    ],
+    preview: {
+      light: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5581.PNG',
+      dark: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5581.PNG',
+    },
+  },
+
+  'image-gallery': {
+    name: 'image-gallery',
+    description: 'Multiple images arranged in a gallery layout',
+    type: 'registry:example',
+    registryDependencies: ['image'],
+    hooks: [],
+    theme: [],
+    files: [
+      {
+        type: 'registry:example',
+        path: 'templates/demo/image/image-gallery.tsx',
+        target: 'components/demo/image/image-gallery.tsx',
+      },
+    ],
+    preview: {
+      light: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5584.PNG',
+      dark: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5584.PNG',
+    },
+  },
+
+  'image-responsive': {
+    name: 'image-responsive',
+    description: 'Responsive images that adapt to container size',
+    type: 'registry:example',
+    registryDependencies: ['image'],
+    hooks: [],
+    theme: [],
+    files: [
+      {
+        type: 'registry:example',
+        path: 'templates/demo/image/image-responsive.tsx',
+        target: 'components/demo/image/image-responsive.tsx',
+      },
+    ],
+    preview: {
+      light: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5583.PNG',
+      dark: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5583.PNG',
+    },
+  },
+
+  'image-content-fit': {
+    name: 'image-content-fit',
+    description: 'Images with different content fit modes',
+    type: 'registry:example',
+    registryDependencies: ['image'],
+    hooks: [],
+    theme: [],
+    files: [
+      {
+        type: 'registry:example',
+        path: 'templates/demo/image/image-content-fit.tsx',
+        target: 'components/demo/image/image-content-fit.tsx',
+      },
+    ],
+    preview: {
+      light: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5582.PNG',
+      dark: 'https://cdn.jsdelivr.net/gh/ahmedbna/bna-ui-demo/IMG_5582.PNG',
+    },
+  },
+};

package/dist/registry/index.d.ts

@@ -0,0 +1,12 @@
+import { ComponentRegistry } from './schema/index.js';
+export declare const REGISTRY: Record<string, ComponentRegistry>;
+export declare function getComponent(name: string): ComponentRegistry | undefined;
+export declare function listComponents(): ComponentRegistry[];
+export declare function searchComponents(query: string): ComponentRegistry[];
+export declare function resolveAllDependencies(name: string): string[];
+export declare function getComponentInfo(name: string): {
+    component: ComponentRegistry | undefined;
+    dependencies: string[];
+    allDependencies: string[];
+    packageDependencies: string[];
+};

package/dist/registry/index.js

@@ -0,0 +1,189 @@
+// src/registry.ts
+// Import all component registries
+import { accordionRegistry } from './accordion.js';
+import { actionSheetRegistry } from './action-sheet.js';
+import { alertRegistry } from './alert.js';
+import { audioPlayerRegistry } from './audio-player.js';
+import { audioRecorderRegistry } from './audio-recorder.js';
+import { audioWaveformRegistry } from './audio-waveform.js';
+import { avatarRegistry } from './avatar.js';
+import { badgeRegistry } from './badge.js';
+import { bottomSheetRegistry } from './bottom-sheet.js';
+import { buttonRegistry } from './button.js';
+import { cameraPreviewRegistry } from './camera-preview.js';
+import { cameraRegistry } from './camera.js';
+import { cardRegistry } from './card.js';
+import { carouselRegistry } from './carousel.js';
+import { checkboxRegistry } from './checkbox.js';
+import { collapsibleRegistry } from './collapsible.js';
+import { colorPickerRegistry } from './color-picker.js';
+import { comboboxRegistry } from './combobox.js';
+import { datePickerRegistry } from './date-picker.js';
+import { filePickerRegistry } from './file-picker.js';
+import { galleryRegistry } from './gallery.js';
+import { helloWaveRegistry } from './hello-wave.js';
+import { iconRegistry } from './icon.js';
+import { imageRegistry } from './image.js';
+import { inputOtpRegistry } from './input-otp.js';
+import { linkRegistry } from './link.js';
+import { mediaPickerRegistry } from './media-picker.js';
+import { modeToggleRegistry } from './mode-toggle.js';
+import { onboardingRegistry } from './onboarding.js';
+import { parallaxScrollViewRegistry } from './parallax-scrollview.js';
+import { pickerRegistry } from './picker.js';
+import { popoverRegistry } from './popover.js';
+import { progressRegistry } from './progress.js';
+import { radioRegistry } from './radio.js';
+import { scrollViewRegistry } from './scroll-view.js';
+import { searchbarRegistry } from './searchbar.js';
+import { shareRegistry } from './share.js';
+import { sheetRegistry } from './sheet.js';
+import { skeletonRegistry } from './skeleton.js';
+import { spinnerRegistry } from './spinner.js';
+import { switchRegistry } from './switch.js';
+import { tableRegistry } from './table.js';
+import { tabsRegistry } from './tabs.js';
+import { textRegistry } from './text.js';
+import { toastRegistry } from './toast.js';
+import { toggleRegistry } from './toggle.js';
+import { videoRegistry } from './video.js';
+import { viewRegistry } from './view.js';
+import { separatorRegistry } from './separator.js';
+import { themeRegistry } from './theme/index.js';
+import { hooksRegistry } from './hooks/index.js';
+import { inputRegistry } from './input.js';
+import { chartsRegistry } from './charts/index.js';
+import { alertDialogRegistry } from './alert-dialog.js';
+import { avoidKeyboardRegistry } from './avoid-keyboard.js';
+export const REGISTRY = {
+    ...accordionRegistry,
+    ...actionSheetRegistry,
+    ...alertRegistry,
+    ...alertDialogRegistry,
+    ...audioPlayerRegistry,
+    ...audioRecorderRegistry,
+    ...audioWaveformRegistry,
+    ...avatarRegistry,
+    ...avoidKeyboardRegistry,
+    ...badgeRegistry,
+    ...bottomSheetRegistry,
+    ...buttonRegistry,
+    ...cameraPreviewRegistry,
+    ...cameraRegistry,
+    ...cardRegistry,
+    ...carouselRegistry,
+    ...checkboxRegistry,
+    ...collapsibleRegistry,
+    ...colorPickerRegistry,
+    ...comboboxRegistry,
+    ...datePickerRegistry,
+    ...filePickerRegistry,
+    ...galleryRegistry,
+    ...helloWaveRegistry,
+    ...iconRegistry,
+    ...imageRegistry,
+    ...inputOtpRegistry,
+    ...inputRegistry,
+    ...linkRegistry,
+    ...mediaPickerRegistry,
+    ...modeToggleRegistry,
+    ...onboardingRegistry,
+    ...parallaxScrollViewRegistry,
+    ...pickerRegistry,
+    ...popoverRegistry,
+    ...progressRegistry,
+    ...radioRegistry,
+    ...scrollViewRegistry,
+    ...searchbarRegistry,
+    ...shareRegistry,
+    ...sheetRegistry,
+    ...skeletonRegistry,
+    ...spinnerRegistry,
+    ...switchRegistry,
+    ...tableRegistry,
+    ...tabsRegistry,
+    ...textRegistry,
+    ...toastRegistry,
+    ...toggleRegistry,
+    ...videoRegistry,
+    ...viewRegistry,
+    ...separatorRegistry,
+    ...hooksRegistry,
+    ...themeRegistry,
+    ...chartsRegistry,
+};
+/// Helper functions for component registry
+export function getComponent(name) {
+    return REGISTRY[name];
+}
+export function listComponents() {
+    return Object.values(REGISTRY)
+        .filter((comp) => comp.type === 'registry:ui')
+        .sort((a, b) => a.name.localeCompare(b.name));
+}
+export function searchComponents(query) {
+    const lowerQuery = query.toLowerCase();
+    return Object.values(REGISTRY)
+        .filter((comp) => comp.type === 'registry:ui' &&
+        (comp.name.toLowerCase().includes(lowerQuery) ||
+            comp.description.toLowerCase().includes(lowerQuery) ||
+            comp.category?.toLowerCase().includes(lowerQuery)))
+        .sort((a, b) => {
+        // Prioritize exact matches
+        const aExact = a.name.toLowerCase() === lowerQuery;
+        const bExact = b.name.toLowerCase() === lowerQuery;
+        if (aExact && !bExact)
+            return -1;
+        if (!aExact && bExact)
+            return 1;
+        // Then prioritize name matches over description matches
+        const aNameMatch = a.name.toLowerCase().includes(lowerQuery);
+        const bNameMatch = b.name.toLowerCase().includes(lowerQuery);
+        if (aNameMatch && !bNameMatch)
+            return -1;
+        if (!aNameMatch && bNameMatch)
+            return 1;
+        // Finally sort alphabetically
+        return a.name.localeCompare(b.name);
+    });
+}
+export function resolveAllDependencies(name) {
+    const visited = new Set();
+    const resolved = [];
+    function resolve(componentName) {
+        if (visited.has(componentName))
+            return;
+        visited.add(componentName);
+        const component = getComponent(componentName);
+        if (!component)
+            return;
+        // Resolve dependencies first
+        const deps = component.registryDependencies || [];
+        for (const dep of deps) {
+            resolve(dep);
+        }
+        resolved.push(componentName);
+    }
+    resolve(name);
+    return resolved;
+}
+export function getComponentInfo(name) {
+    const component = getComponent(name);
+    if (!component) {
+        return {
+            component: undefined,
+            dependencies: [],
+            allDependencies: [],
+            packageDependencies: [],
+        };
+    }
+    const dependencies = component.registryDependencies || [];
+    const allDependencies = resolveAllDependencies(name);
+    const packageDependencies = component.dependencies || [];
+    return {
+        component,
+        dependencies,
+        allDependencies,
+        packageDependencies,
+    };
+}

package/dist/registry/index.ts

@@ -0,0 +1,209 @@
+// src/registry.ts
+
+import { ComponentRegistry } from './schema/index.js';
+
+// Import all component registries
+import { accordionRegistry } from './accordion.js';
+import { actionSheetRegistry } from './action-sheet.js';
+import { alertRegistry } from './alert.js';
+import { audioPlayerRegistry } from './audio-player.js';
+import { audioRecorderRegistry } from './audio-recorder.js';
+import { audioWaveformRegistry } from './audio-waveform.js';
+import { avatarRegistry } from './avatar.js';
+import { badgeRegistry } from './badge.js';
+import { bottomSheetRegistry } from './bottom-sheet.js';
+import { buttonRegistry } from './button.js';
+import { cameraPreviewRegistry } from './camera-preview.js';
+import { cameraRegistry } from './camera.js';
+import { cardRegistry } from './card.js';
+import { carouselRegistry } from './carousel.js';
+import { checkboxRegistry } from './checkbox.js';
+import { collapsibleRegistry } from './collapsible.js';
+import { colorPickerRegistry } from './color-picker.js';
+import { comboboxRegistry } from './combobox.js';
+import { datePickerRegistry } from './date-picker.js';
+import { filePickerRegistry } from './file-picker.js';
+import { galleryRegistry } from './gallery.js';
+import { helloWaveRegistry } from './hello-wave.js';
+import { iconRegistry } from './icon.js';
+import { imageRegistry } from './image.js';
+import { inputOtpRegistry } from './input-otp.js';
+import { linkRegistry } from './link.js';
+import { mediaPickerRegistry } from './media-picker.js';
+import { modeToggleRegistry } from './mode-toggle.js';
+import { onboardingRegistry } from './onboarding.js';
+import { parallaxScrollViewRegistry } from './parallax-scrollview.js';
+import { pickerRegistry } from './picker.js';
+import { popoverRegistry } from './popover.js';
+import { progressRegistry } from './progress.js';
+import { radioRegistry } from './radio.js';
+import { scrollViewRegistry } from './scroll-view.js';
+import { searchbarRegistry } from './searchbar.js';
+import { shareRegistry } from './share.js';
+import { sheetRegistry } from './sheet.js';
+import { skeletonRegistry } from './skeleton.js';
+import { spinnerRegistry } from './spinner.js';
+import { switchRegistry } from './switch.js';
+import { tableRegistry } from './table.js';
+import { tabsRegistry } from './tabs.js';
+import { textRegistry } from './text.js';
+import { toastRegistry } from './toast.js';
+import { toggleRegistry } from './toggle.js';
+import { videoRegistry } from './video.js';
+import { viewRegistry } from './view.js';
+import { separatorRegistry } from './separator.js';
+import { themeRegistry } from './theme/index.js';
+import { hooksRegistry } from './hooks/index.js';
+import { inputRegistry } from './input.js';
+import { chartsRegistry } from './charts/index.js';
+import { alertDialogRegistry } from './alert-dialog.js';
+import { avoidKeyboardRegistry } from './avoid-keyboard.js';
+
+export const REGISTRY: Record<string, ComponentRegistry> = {
+  ...accordionRegistry,
+  ...actionSheetRegistry,
+  ...alertRegistry,
+  ...alertDialogRegistry,
+  ...audioPlayerRegistry,
+  ...audioRecorderRegistry,
+  ...audioWaveformRegistry,
+  ...avatarRegistry,
+  ...avoidKeyboardRegistry,
+  ...badgeRegistry,
+  ...bottomSheetRegistry,
+  ...buttonRegistry,
+  ...cameraPreviewRegistry,
+  ...cameraRegistry,
+  ...cardRegistry,
+  ...carouselRegistry,
+  ...checkboxRegistry,
+  ...collapsibleRegistry,
+  ...colorPickerRegistry,
+  ...comboboxRegistry,
+  ...datePickerRegistry,
+  ...filePickerRegistry,
+  ...galleryRegistry,
+  ...helloWaveRegistry,
+  ...iconRegistry,
+  ...imageRegistry,
+  ...inputOtpRegistry,
+  ...inputRegistry,
+  ...linkRegistry,
+  ...mediaPickerRegistry,
+  ...modeToggleRegistry,
+  ...onboardingRegistry,
+  ...parallaxScrollViewRegistry,
+  ...pickerRegistry,
+  ...popoverRegistry,
+  ...progressRegistry,
+  ...radioRegistry,
+  ...scrollViewRegistry,
+  ...searchbarRegistry,
+  ...shareRegistry,
+  ...sheetRegistry,
+  ...skeletonRegistry,
+  ...spinnerRegistry,
+  ...switchRegistry,
+  ...tableRegistry,
+  ...tabsRegistry,
+  ...textRegistry,
+  ...toastRegistry,
+  ...toggleRegistry,
+  ...videoRegistry,
+  ...viewRegistry,
+  ...separatorRegistry,
+  ...hooksRegistry,
+  ...themeRegistry,
+  ...chartsRegistry,
+};
+
+/// Helper functions for component registry
+export function getComponent(name: string): ComponentRegistry | undefined {
+  return REGISTRY[name];
+}
+
+export function listComponents(): ComponentRegistry[] {
+  return Object.values(REGISTRY)
+    .filter((comp) => comp.type === 'registry:ui')
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export function searchComponents(query: string): ComponentRegistry[] {
+  const lowerQuery = query.toLowerCase();
+  return Object.values(REGISTRY)
+    .filter(
+      (comp) =>
+        comp.type === 'registry:ui' &&
+        (comp.name.toLowerCase().includes(lowerQuery) ||
+          comp.description.toLowerCase().includes(lowerQuery) ||
+          comp.category?.toLowerCase().includes(lowerQuery))
+    )
+    .sort((a, b) => {
+      // Prioritize exact matches
+      const aExact = a.name.toLowerCase() === lowerQuery;
+      const bExact = b.name.toLowerCase() === lowerQuery;
+      if (aExact && !bExact) return -1;
+      if (!aExact && bExact) return 1;
+
+      // Then prioritize name matches over description matches
+      const aNameMatch = a.name.toLowerCase().includes(lowerQuery);
+      const bNameMatch = b.name.toLowerCase().includes(lowerQuery);
+      if (aNameMatch && !bNameMatch) return -1;
+      if (!aNameMatch && bNameMatch) return 1;
+
+      // Finally sort alphabetically
+      return a.name.localeCompare(b.name);
+    });
+}
+
+export function resolveAllDependencies(name: string): string[] {
+  const visited = new Set<string>();
+  const resolved: string[] = [];
+
+  function resolve(componentName: string) {
+    if (visited.has(componentName)) return;
+    visited.add(componentName);
+
+    const component = getComponent(componentName);
+    if (!component) return;
+
+    // Resolve dependencies first
+    const deps = component.registryDependencies || [];
+    for (const dep of deps) {
+      resolve(dep);
+    }
+
+    resolved.push(componentName);
+  }
+
+  resolve(name);
+  return resolved;
+}
+
+export function getComponentInfo(name: string): {
+  component: ComponentRegistry | undefined;
+  dependencies: string[];
+  allDependencies: string[];
+  packageDependencies: string[];
+} {
+  const component = getComponent(name);
+  if (!component) {
+    return {
+      component: undefined,
+      dependencies: [],
+      allDependencies: [],
+      packageDependencies: [],
+    };
+  }
+
+  const dependencies = component.registryDependencies || [];
+  const allDependencies = resolveAllDependencies(name);
+  const packageDependencies = component.dependencies || [];
+
+  return {
+    component,
+    dependencies,
+    allDependencies,
+    packageDependencies,
+  };
+}