open-index/open-npm huggingface dataset:
npm package: @neydareh/ui
Description: A new independent UI library has been created in the ui-library directory. This package contains all your UI components, isolated and ready for documentation and testing.
Latest version: 1.2.1

# UI Library Walkthrough

A new independent UI library has been created in the ui-library directory. This package contains all your UI components, isolated and ready for documentation and testing.

## Directory Structure

```
├── client/          # Your existing frontend app
├── server/          # Your existing backend
└── ui-library/      # [NEW] The UI component library
    ├── src/
    │   ├── components/ui/  # Migrated UI components
    │   ├── hooks/          # Shared hooks (use-mobile, use-toast)
    │   └── lib/            # Utility functions
    └── dist/               # Build output
```

## Running Storybook

To view your components in isolation and see the documentation:

Navigate to the library directory:
```bash
cd ui-library
```
Start the Storybook server:
```bash
npm run storybook
```
Open http://localhost:6006 in your browser.

## Building the Library

To build the library for distribution (generates dist folder):

```bash
cd ui-library
npm run build
```

## Releases (Release Please)

This repo uses Release Please to automate versioning and GitHub Releases.

Commit conventions:
- Patch: `fix: ...` or `chore: ...`
- Minor: `feat: ...`
- Major (breaking): `feat!: ...` or add `BREAKING CHANGE:` in the commit body
npm package: @neyhaz/style
Description: paquete para ayudar en el desarrollo de maquetación web
Author: atdetquizan
Latest version: 0.0.1

# NEYHAZ STYLE #

Paquete que podras encontrar mejoras y herramientas que nos podran ayudar a agilizar la maquetacion de paginas webs

### Requisitos ###

* Instalaciones previas
    ```
    npm install -g sass
    npm i live-server
    ```


### Comandos ###

* Compilar proyecto
    ```
    npm run build
    ```
* Matener la compilacion en tiempo real
    ```
    npm run build:watch
    ```
* Levantar el proyecto local
    ```
    npm run start
    ```

## Diseño Atomico - Estructura atómica

Organización de carpetas src/

```css
- vars
- functions
- mixins
- base
- plugins
- typography
- atoms
- molecules
- organisms
- templates
- pages
- states
- utility
main.scss
```

Dentro de main.scss los parciales de Sass se importan

**Archivo de índice de importación de Sass:: `src/main.scss`**

```scss
// Config
@import "vars/*";
@import "functions/*";
@import "mixins/*";
 
// Bower Components
@import "../noode_module/normalize-scss/_normalize";
 
// General DOM selector styles
@import "base/*";
 
// Fonts & General Type Styling
@import "typography/*";
 
// 3rd Party Addons
@import "plugins/*";
 
// Atomic Design
@import "atoms/**/*";
@import "molecules/**/*";
@import "organisms/**/*";
@import "templates/**/*";
@import "pages/**/*";
 
// Variations thru Events
@import "states/*";
 
// General UI Helpers
@import "utility/*";
```
El orden con esta configuración importa un poco. Si es necesario ajustar un **“átomo”**, una **“molécula”** u **“organismo”**, las declaraciones hechas en plantillas o páginas anularán las partes mencionadas anteriormente, junto con cualquier otro parcial anterior.

La orden además habilita anulaciones al estilo de un complemento, en caso de que sea necesario.

### **Contenidos del directorio**

Gran parte de los contenidos para cada directorio atómico (átomos, moléculas, organismos, plantillas, páginas) contendrán parciales que, en teoría, son fáciles de encontrar y fáciles de administrar cuando sea necesario.

```css
- atoms
  - _buttons.scss
  - _links.scss
  - _inputs.scss
- molecules
  - _navigation.scss
  - _search-form.scss
  - _contact-form.scss
- organisms
  - _header.scss
  - _footer.scss
  - _content.scss
- templates
  - _sticky-footer.scss
  - _grid-2column.scss
  - _grid-3column.scss
- pages
  - _home.scss
  - _about.scss
  - _contact.scss
```