libreria-astro-lefebvre 0.0.2 → 0.0.3

package/README.md

@@ -0,0 +1,38 @@
+# libreria-astro-lefebvre
+
+Instrucciones:
+
+- La libreria en npm está en: https://www.npmjs.com/package/libreria-astro-lefebvre
+- Para instalar:
+```
+npm i libreria-astro-lefebvre
+```
+
+
+Hacer un link en librería local: 
+``` npm link ```
+
+Usar librería local: 
+``` npm link nombre-librería ```
+
+Dejar de usar librería local: 
+```npm unlink --no-save nombre-librería```
+
+Login en npm: 
+```npm login --auth-type=legacy```
+
+Publicar en npm: 
+```npm publish --access public```
+
+Cuenta nodejs:
+dretamal
+P...a
+
+Hay que hacer npm install y reiniciar server
+
+Correr aplicación node: 
+``` npm run dev ```
+
+Compilar: 
+```npm run build```
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "libreria-astro-lefebvre",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Librería de componentes Astro, React y Vue para Lefebvre",
   "author": "Equipo web desarrollo Lefebvre",
   "type": "module",
@@ -19,5 +19,8 @@
   ],
   "peerDependencies": {
     "astro": "^5.11.0"
+  },
+  "scripts": {
+    "generate:registry": "node scripts/generateRegistry.js"
   }
 }

package/src/carbins/AstroButton.astro

@@ -0,0 +1,11 @@
+---
+import type { ComponentMetadata } from '../interfaces/types';
+
+export const metadata: ComponentMetadata = {
+  component_name: 'Button',
+  name: 'Botón en Astro',
+  description: 'Botón de prueba en Astro',
+  framework: 'Astro',
+  priority: 1,
+  tags: ['boton', 'interactivo', 'ejemplo'],
+};

package/src/carbins/ReactButton.astro

@@ -0,0 +1,10 @@
+---
+import type { ComponentMetadata } from '../interfaces/types';
+
+export const metadata: ComponentMetadata = {
+  component_name: 'ReactButton',
+  name: 'Botón en React',
+  description: 'Botón de prueba en React',
+  framework: 'React',
+  tags: ['boton', 'interactivo', 'ejemplo'],
+};

package/src/carbins/VueButton.astro

@@ -0,0 +1,11 @@
+---
+import type { ComponentMetadata } from '../interfaces/types';
+
+export const metadata: ComponentMetadata = {
+  component_name: 'VueButton',
+  name: 'Botón en Vue',
+  description: 'Botón de prueba en Vue',
+  framework: 'Vue',
+  priority: 2,
+  tags: ['boton', 'interactivo', 'ejemplo'],
+};

package/src/components/Astro/Button.astro

@@ -0,0 +1,6 @@
+---
+
+const { label } = Astro.props;
+
+---
+<button class="btn bg-cyan-600 text-gray-200 p-2 rounded-lg font-bold m-4 cursor-pointer transition-colors duration-300 hover:bg-red-600">{label}</button>

package/src/components/React/ReactButton.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ReactButton = ({ label, onClick, type = 'button', disabled = false }) => (
+    <button className="bg-yellow-400 text-black p-2 rounded-lg font-bold m-4 cursor-pointer transition-colors duration-300 hover:bg-orange-600" type={type} onClick={onClick} disabled={disabled}>
+        {label}
+    </button>
+);
+
+export default ReactButton;

package/src/components/Vue/VueButton.vue

@@ -0,0 +1,18 @@
+<template>
+    <button class="bg-green-400 text-black p-2 rounded-lg font-bold m-4 cursor-pointer transition-colors duration-300 hover:bg-yellow-300">
+        <slot>{{ label }}</slot>
+    </button>
+</template>
+
+<script>
+export default {
+    name: 'VueButton',
+    props: {
+        label: {
+            type: String,
+            required: false,
+            default: ''
+        }
+    }
+}
+</script>

package/src/generated/componentRegistry.ts

@@ -0,0 +1,10 @@
+// FICHERO GENERADO AUTOMÁTICAMENTE usando esto: "npm run generate:registry"  ==> NO TOCAR ESTO A MANO (o sus crujo) !!
+import * as AstroButton from '../carbins/AstroButton.astro';
+import * as ReactButton from '../carbins/ReactButton.astro';
+import * as VueButton from '../carbins/VueButton.astro';
+
+export const components = [
+  {component: AstroButton},
+  {component: ReactButton},
+  {component: VueButton},
+];

package/src/index.ts

@@ -1,2 +1,4 @@
-export { default as Button } from './components/Button.astro';
-// export { default as Card } from './components/Card.astro';
+export { default as Button } from './components/Astro/Button.astro';
+export { default as Button2 } from './components/React/ReactButton.jsx';
+export { default as Button3 } from './components/Vue/VueButton.vue';
+export { listComponents } from './lib/functions.js';

package/src/interfaces/types.ts

@@ -0,0 +1,10 @@
+export interface ComponentMetadata {
+  name: string;
+  description: string;
+  framework: 'Astro' | 'Vue' | 'React';
+  component_name: string,
+  priority?: number;
+  tags?: string[];
+  /* dependencies?: Record<string, string>; */
+  [key: string]: any; // para extensibilidad
+}

package/src/lib/functions.js

@@ -0,0 +1,15 @@
+import { components } from '../generated/componentRegistry.ts';
+
+export function listComponents() {
+    const metadatas = components
+        .map(c => c.component.metadata)
+        .sort((a, b) => {
+            const priorityA = a.priority ?? 0;
+            const priorityB = b.priority ?? 0;
+            if (priorityA !== priorityB) {
+                return priorityB - priorityA; // Higher priority first
+            }
+            return (a.name || '').localeCompare(b.name || ''); // Alphabetically by name
+        });
+    return metadatas;
+}

package/src/components/Button.astro

@@ -1,14 +0,0 @@
----
-const { label } = Astro.props;
----
-<button class="btn">{label}</button>
-
-<style>
-  .btn {
-    padding: 0.5em 1em;
-    background-color: pink;
-    color: white;
-    border: none;
-    border-radius: 4px;
-  }
-</style>