[ADD] Snippet component

[Megajjks]

✨ Feature: Add Snippet molecule component

Description

This PR introduces the new Snippet molecule component, including its base structure, props, and logic. The component supports slot-based styling, copy-to-clipboard functionality, and is fully documented with Storybook stories.
Additionally, the slot styling scheme was refactored to use class-variance-authority (CVA), enabling scalable and maintainable variants for size, color, and style.

Changes

• Added Snippet.tsx for the main component logic and rendering.
• Defined SnippetProps and slot variants in types.ts using CVA for flexible configuration.
• Implemented useSnippet.ts hook for handling copy logic and slot classes, now using CVA for slot styling.
• Updated slot usage in Snippet.tsx to use CVA-based classes.
• Created Storybook stories (Snippet.stories.tsx) to showcase usage and variants.
• Exported the component and types in index.ts.
• Fixed slot color types: Updated the primary color slot to use CSS variable [var(--color-primary)] for better theme support.

Motivation

The new Snippet component provides a reusable, accessible, and customizable way to display code snippets with copy functionality, aligning with the design system's goals.
Refactoring to CVA makes it easier to extend and maintain styling variants for future needs.
The color fix ensures better integration with custom themes.

Checklist

• Component renders and works as expected.
• Copy button functionality is tested.
• Slot styling is managed via CVA and supports all variants.
• Storybook stories are available and accurate.
• Types are exported for external usage.
• Slot color types use CSS variables for theme compatibility.
• Implement the button component Atom
• Apply the correct theme and style
• Generate the complete storybook
• Generate JSDoc

Additional Notes

Feedback and suggestions for further improvements are

[netlify]

✅ Deploy Preview for egdev6-design-system ready!

Name	Link
🔨 Latest commit	9260eee
🔍 Latest deploy log	https://app.netlify.com/projects/egdev6-design-system/deploys/6889870e61a08c0008d4145c
😎 Deploy Preview	https://deploy-preview-66--egdev6-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Megajjks]

@egdev6 te mando un draft de mi PR ya que me gustaria saber si voy en la direccion correcta
Aclaraciones

• por ahora los colores no son los correctos, me falta ajustarlos
• Me falta agregar el botom que usan como atomo ya que tengo uno custom solo para hacer pruebas rapidas

Estuve documentandome y encontre estos dos patrones que veo que usan heroUI y me parecio interesante asi que lo replique aqui, me gustaria saber si esta bien o necesitarias que lo adapte a como tienen los atomos.

• Hook + Component Pattern: el cual consiste en separar la capa de lógica y vista, proveyendo toda la lógica de negocio, funciones etc. en un custom hook, para luego crear el componente vista el cual solo tiene la responsabilidad de renderizar y no gestionar la lógica de renderizado o algún cambio, permitiendo un desacoplo y escalabilidad. Me parece interesante y quería aplicarlo, ya que puede ayudarnos a escalar, aparte que la legibilidad veo que es muy buena.
• El tema de estilos los desacople con slots y cva que me parecio muy util, pero aun tengo que pulirlo

Espero tus comentarios y feedback.

referencias
hook patterns

[egdev6]

@Megajjks te comento:

Visualmente:

1. Las variantes de color manéjalas con color oscuro en el fondo y claro en el texto o viceversa (según variante). Prueba a poner borde y texto de uno y fondo de otro para la variante bordered.

la forma de usarlos con tailwidn es 'bg-orange-light' para backgrounds 'border-orange-lighti para bordes y 'text-orange-light' para textos (los tienes en src/components/utils/types/safelist.ts)
Esto aplica tanto a la documentación de storybook de primitivos como de colores semánticos.

2. Para el botón de copiar puedes usar el componente IconButton y usar iconos de lucide en vez de texto. Para la transición de click, puedes cambiar de un icono a otro: icon={isCopied ? 'check' : 'copy'}. También puedes modificar para hacer una pequeña transición de cambio con css.

3. Asegúrate que el texto no queda por debajo del botón. puedes añadirle un padding a la derecha para asegurarte que el cotón mantiene su espacio. Para el multiline puedes centrarlo verticalmente

Pull request (código):

1. Me parece genial la propuesta de separar lógica de visualización. Voy a organizarlo para que el equipo lo aplique y organizar refactors de los componentes existentes. Gran trabajo!

2. Resto de comentarios te los añado al código.

[egdev6]

@Megajjks cuando lo tengas listo mencióname por aquí y le pegamos otra vuelta ;)

[AmosVelez]

Buenas, me gustaría comentar algo de los commits de la PR.

El commit de merge main en tu rama (c4f8727) no debería estar. Si haces rebase, evitas que se hagan commits de merge y la rama queda limpia, evitando posibles conflictos en otras ramas que puedan hacer tambien merge en vez de rebase.

El commit de fix del linter (46a02f9) no deberías incluirlo en una rama de feature.

Todos los demás commits de tu rama realmente deberían ser uno solo si no hay una razón específica para hacer más de uno, así facilita la revisión de la PR y la limpieza de la rama main.

Esto es solo mi opinión, ¿vosotros qué pensáis?

@egdev6 @Megajjks

[egdev6]

@Megajjks Me parece correcto lo que comenta @AmosVelez. Bien visto! Revisalo y si tienes dudas comentamos y resuelve los conflictos con los últimos combio de main

[Megajjks]

@AmosVelez gracias por la observacion, se me paso el preformateo del linter. en los siguientes cambios que me baje del main lo hare con rebase para no generar problemas @egdev6

[Megajjks]

@egdev6 cambié el PR de Draft a ready for approve. Considero una buena practicar para cuando el ticket que se está desarrollando lleva mucho tiempo generar PR draft el cual permite que revises el código y cuando ya se tenga listo el PR cambiarlo a Ready for Approve, ayuda mucho para ver los avances de los demás y estos puedan hacer code review con el fin de mejorar el tiempo y no hacer cansado el code review.
Por otra parte, ya está listo, tuve problemas al hacer el rebase, ya que mi entorno de git estaba setiado para hacer merge al hacer el pull de ramas anteriores, pero encontré como cambiar, aunque me hecho para atrás unos cambios y se me hizo todo un rollo pero pude reajustarlo, disculpa el push force y si llegas a ver código que ya revisaste. Quedo atento a tus revisiones y feedback

[egdev6]

@Megajjks. Te paso feedback:

Visualmente:

1-Ojo con el modo light. Habría que cambiar colores para que el contraste sea correcto

2- La variante large em queda muy grande...quizás podrías aumentar tamaño de fuente pero mantener los paddings

3- revisa que pese a cambiar de tamaño siga alineado con el contenido

4-Para el uso de los grises puedes tomar de referencia el componente Input (tanto light como dark) para que vayan alineados con otros componentes

Código nada que objetar. Lo veo guay!

Buen curro!

[Megajjks]

Va que va, gracias por el feedback, voy trabajando en ello, gracias @egdev6

[Megajjks]

@egdev6 ya esta listo los cambios solicitados

• Se mejoró la documentación en storybook alineándome a los otros componentes
• Se agregó la compatibilidad a dark/ligth theme
• Se corrigió los problemas de alineamientos en el componente
  Quedo a la espera de tu feedback y los pasos que siguen.

[egdev6]

Super top @Megajjks! currazo! mergeamos a main y vamos a por el siguiente!