open-index/open-npm huggingface dataset:
npm package: @plyaz/auth
Description: Authentication package for Plyaz ecosystem
Latest version: 1.0.4

# @plyaz/auth

A shared authentication package for the Plyaz ecosystem. This library centralizes core authentication strategies, provider integrations, and access control logic, ensuring that all applications within our monorepo share a single, consistent source of truth for user sessions and permissions.

## 📦 Installation

```bash
pnpm add @plyaz/auth
```

## 🚀 What's Included

### Core Features

- **Authentication Strategies** - Support for multiple authentication flows, including email/password, social logins, and token-based authentication (JWT, API keys).
- **Provider Abstractions** - Standardized interfaces for integrating with external providers like Clerk, OAuth services, and other third-party authentication platforms.
- **Role-Based Access Control (RBAC)** - A robust system for managing user roles and permissions, enabling granular control over application features.
- **Session Management** - Secure and unified session handling across all Plyaz applications.
- **Ecosystem Integration** - Seamlessly integrates with @plyaz/types, @plyaz/config, and other shared packages.

## Development

### Setup

Install dependencies and run the basic checks:

```bash
pnpm install
pnpm lint
pnpm test
```

### Build

Compile the library to the dist folder:

```bash
pnpm build
```

For a watch mode during development:

```bash
pnpm dev
```

### Linting & Formatting

Run the ESLint rules and apply automatic fixes:

```bash
pnpm lint
pnpm lint:fix
```

Check or apply Prettier formatting:

```bash
pnpm format:check
pnpm format
```

### Tests

Execute the test suite once:

```bash
pnpm test
```

Watch tests as you work:

```bash
pnpm test:watch
```

Generate coverage information:

```bash
pnpm test:coverage
```

## Relationship to Plyaz-Official/types

Type definitions for authentication values, like User, Role, and Permission, live in [Plyaz-Official/types](https://github.com/Plyaz-Official/types). Installing @plyaz/types alongside this package provides strongly typed access to each exported constant and type.

## About this repository

This package was scaffolded from the internal package-template and relies on [@plyaz/devtools](https://www.npmjs.com/package/@plyaz/devtools) for shared TypeScript, ESLint, Prettier, and Vitest configuration.
npm package: @plyaz/ui
Description: A reusable, accessible, and themeable component library powering the Plyaz Web App interface. Built with performance and consistency in mind, @plyaz/ui delivers modular React components aligned with the Plyaz design system — enabling seamless development 
Latest version: 0.10.2

# ui

A reusable, accessible, and themeable component library powering the Plyaz Web App interface. Built with performance and consistency in mind, @plyaz/ui delivers modular React components aligned with the Plyaz design system — enabling seamless development across fan-facing features, quests, NFTs, and loyalty flows in the Web3 ecosystem.

## Project Structure

```text
src/              # source code
src/components     # component source code
tests/            # Unit tests
.storybook/       # Storybook configuration
dist/             # Build output
package.json
tsconfig.json
vite.config.ts
tailwind.config.js
```

## Installation

```bash
npm install @plyaz/ui
```

or

```bash
yarn add @plyaz/ui
```

or

```bash
pnpm add @plyaz/ui
```

## Usage

```bash
import { Box } from "@plyaz/ui";

export default function Page() {
  return <Box>Click Me</Box>;
}

```

## Storybook

```bash
pnpm run storybook

```

## Plop Utility for Auto-Generating Storybook Stories

### Requirement

Manually creating Storybook story files for each component can be repetitive. So we needed a way to automatically generate story files with consistent structure and boilerplate.

### Solution

We integrated the **Plop** library, a micro-generator framework that automates file creation using custom templates (in our case, a story template). With Plop, we can generate story files for components quickly and consistently.

### How It Works

Plop takes three inputs and generates a story file based on a defined template:

- **Path to the component:** The target path where the file should be generated (relative to src/)
- **Component directory name (PascalCase):** The component directory name (e.g., Button)
- **Component name (PascalCase):** The component name in PascalCase format based on these inputs, Plop processes a predefined template plop-templates/Component.stories.tsx.hbs file and generates the corresponding story file in the specified location.

**Plop** then executes a custom template file and generates the new story file at the target path with the provided name.

### Folder Structure

```
plopfile.js
/plop-templates
└── Component.stories.tsx.hbs # template for story file
```

### Usage

To generate a new story file:

```bash
pnpm run generate
```

### Accessibility Guidelines

Our components are designed with accessibility in mind:

- Use semantic HTML (`<header>`, `<label>`, `<input>`)
- Include `aria-*` attributes where necessary
- Ensure keyboard navigability
- Maintain color contrast ratio ≥ 4.5:1

## Tools we use:

- Storybook a11y addon