open-index/open-npm huggingface dataset:
npm package: @pbugeon/nuxt-components-kit
Description: Kit de composants réutilisables pour Nuxt 3
Author: Paul Bugeon
Latest version: 1.0.9

# Nuxt Components Kit

Kit de composants réutilisables pour Nuxt 3, basé sur les composants natifs de Nuxt.

## 🚀 Installation

```bash
# Copier le dossier dans votre projet
cp -r nuxt-components-kit components/

# Ou l'ajouter comme dépendance locale
npm install ./nuxt-components-kit
```

## 📦 Composants Disponibles

### Layout Components

#### AppHeader
Header réutilisable avec navigation et CTA configurables.

```vue
<AppHeader
  title="Mon Site"
  subtitle="Description du site"
  :navigation="[
    { path: '/', label: 'Accueil' },
    { path: '/services', label: 'Services' },
    { path: '/contact', label: 'Contact' }
  ]"
  :cta="{
    primary: { path: '/booking', label: 'Prendre RDV' },
    secondary: { path: '/contact', label: 'Nous contacter' }
  }"
/>
```

#### AppFooter
Footer réutilisable avec informations de contact et navigation.

```vue
<AppFooter
  title="Mon Site"
  subtitle="Description du site"
  description="Description détaillée du site et de ses services."
  :footer-navigation="{
    title: 'Navigation',
    links: [
      { path: '/', label: 'Accueil' },
      { path: '/services', label: 'Services' }
    ]
  }"
  :contact="{
    title: 'Contact',
    email: 'contact@example.com',
    phone: '06 XX XX XX XX',
    address: 'Adresse du cabinet'
  }"
  copyright-text="Tous droits réservés"
  additional-info="Numéro ADELI : XXXXXXX"
/>
```

#### AppNavigation
Composant de navigation utilisant `UNavigation` de Nuxt 3.

```vue
<AppNavigation
  :links="[
    { path: '/', label: 'Accueil' },
    { path: '/services', label: 'Services' }
  ]"
  navigation-classes="hidden md:flex items-center space-x-8"
/>
```

### UI Components

#### AppButton
Bouton réutilisable avec variantes et tailles.

#### AppCard
Carte réutilisable pour afficher du contenu.

#### AppIcon
Composant d'icône réutilisable.

### Section Components

#### HeroSection
Section héro réutilisable.

#### ServicesGrid
Grille de services réutilisable.

#### BookingSection
Section de réservation réutilisable.

## 🎨 Personnalisation

Tous les composants utilisent Tailwind CSS et sont entièrement personnalisables via les props.

## 🔧 Utilisation avec UNavigation

Le kit utilise les composants natifs de Nuxt 3 comme `UNavigation` pour une meilleure intégration et performance.

## 📚 Exemples

Voir le dossier `examples/` pour des exemples d'utilisation complets.
npm package: @pbuilder/astro
Description: A set schematics for astro
Latest version: 1.1.7

# Schematics for astro

Astro Schematics is here to make your life easier by taking care of repetitive tasks. With it, you can quickly create components, layouts, and pages for your Astro projects. This magic is brought to you by Project Builder.

## Get Started in a Snap

Just run this command in your project folder:

```sh
npx @pbuilder/cli add @pbuilder/astro
```

## Things to Know

* **Installing the CLI**: When you run the above command, it might ask if you want to install something called a CLI (Command Line Interface). Here’s why you should say yes:

  * **`@pbuilder/astro-cli` (or pastro):** This special tool is made just for Astro. It makes making new parts of your website (like pages and components) super easy with simple commands.
  * **Learning More:** If you're curious about what commands you can do, just add --help to see all your options.

## Let's Create Something

### Components

Want to make a new component? Easy peasy:

```sh
pastro g c <component-name>
```

Or:

```sh
npx @pbuilder/astro-cli g c <component-name>
```

### Layouts

Need a new layout? Just as easy:

```sh
pastro g l <layout-name>
```

Alternatively:

```sh
npx @pbuilder/astro-cli g l <layout-name>
```

### Pages

For page creation, specify the type **(astro is the default one)** and layout:

```sh
pastro g pg <page-name> --type [md, mdx, astro] --layout <layout file name>
```

Or use the direct method:

```sh
npx @pbuilder/astro-cli g pg <page-name> --type [md, mdx, astro] --layout <layout file name>
```

## What If I Need Something More?

### Beyond Astro CLI

Sometimes, you might need a tool that isn't just for Astro. That’s where `@pbuilder/cli` comes in. It’s a more general tool that works for a bunch of different projects.

Here’s how you use it:

```sh
npx @pbuilder/cli exec @pbuilder/astro <schematic-name> --name=<name> [options]
```

Like making a component without the Astro-specific tool:

```sh
npx @pbuilder/cli exec @pbuilder/astro c --name=MyComponent2
```
npm package: @pbuilder/nestjs
Description: A blank schematics
Latest version: 0.0.13

# Schematics for NestJS

## Overview

This project provides a powerful schematic set designed to all the most powerful tool for schematics.

## Problem to solve

The problem this schematic solves is automating resource creation while reducing repetitive boilerplate and ensuring consistency. By simply defining the desired resource structure in a file, the schematic handles the generation process for you.

## Getting started

```sh
npm i -g @pbuilder/cli
```

```sh
builder add @pbuilder/nestjs
```

### New Resource

The purpose of this schematics is to generate a whole resource based on an existing file. That means you need to create to create a file and configure it.

Then the schematic will read all the files with the same type and generate the resource.

For this version we are using the next stack:

- Mongo with mongoose.
- Graphql with apollo federation.

Let's start!

#### Install dependencies

If your project doesn't have all the dependencies needed to run this stack please run:

```sh
builder g @pbuilder/nestjs install-dependencies
```

or

```sh
builder g @pbuilder/nestjs i
```

#### Create the schema file

```sh
builder g @pbuilder/nestjs schema
```

examples of a mongoose schema:

```ts
import * as mongoose from 'mongoose';

export const CustomerSchema = new mongoose.Schema({}, { versionKey: false });

CustomerSchema.add({
  customerId: { type: Number, required: true, unique: true },
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  phone: { type: String, required: false },
  address: { type: String, required: false },
  isActive: { type: Boolean, required: true, default: true },
});

CustomerSchema.index({ email: 1 }, { unique: true });
```

```ts
/* eslint-disable prettier/prettier */
import * as mongoose from 'mongoose';
import { CalibratedSchema } from './calibrared.schema';

export const ProductSchema = new mongoose.Schema({}, { versionKey: false });

ProductSchema.add({
  calibrated: { type: CalibratedSchema, required: false },
  UPC: [
    {
      type: String,
      required: false,
    },
  ],

  status: {
    type: String,
    required: true,
  },
  imageUrl: { type: String, required: false },
  size: { type: String, required: true },
  closureType: { type: String, required: true },
  containerType: { type: String, required: true },
  brand: { type: String, required: true },
  liquidName: { type: String, required: true },
  unitsPerCase: { type: Number, required: true },
  itemNumber: { type: Number, required: true },
  category: {
    type: String,
    required: true,
  },
});

ProductSchema.index({ itemNumber: 1 }, { unique: true });

```

#### Generate the resource

With your file totally configure go to generate the resource

```sh
builder g @pbuilder/nestjs cgm
```

### Architecture under the hood

When we want to extends the ability to generate a resource based on a file it's important to understand how to do it.
npm package: @pbuilder/sm
Description: A set schematics to create schematics
Latest version: 1.4.4

# Schematics for schematics

This package help developers to create schematics easier.

## Create a schematic project

```sh
npx @pbuilder/cli new <project-name> [author]
```

## Create a new schematic

```sh
npx @pbuilder/cli exec @pbuilder/sm <schematic-name>
```
npm package: @pbuk/game-loop
Description: Game loop for browser
Author: pbuk
Latest version: 1.0.0

# game-loop

> A game loop for browser.

## Quick start

Include game-loop from CDN.

```html
<script src="https://cdn.jsdelivr.net/npm/@pbuk/game-loop@1"></script>
```

Create the callbacks that define the game.

```js
const config = {
  // Things that stay the same.
};

const getInitialState = (config) => {
  return {
    // Things that change.
  };
};

const update = ({ config, state, frameLength, runTime, gameState }) => {
  // Update state (don't change anything else).
};

const render = ({ config, state, frameLength, runTime, gameState }) => {
  // Update all displays (don't change anything).
};
```

Create and manage the game loop.

```js
// Set up the game and call `update` and `render` once with gameState = 'notStarted'.
const { start, stop, reset } = GameLoop.createGame({ config, getInitialState, update, render });

// Starts the game running, or resumes after `stop()`.
start();
// Stops the game (can be resumed with `start()`).
stop();
// Stops the game and resets the state to the initial state.
reset();
```