open-index/open-npm huggingface dataset:
npm package: @pepijn98/kitai
Description: Validate condition, specifically to check if a function argument is what you expected it to be
Author: Pepijn van den Broek
Latest version: 1.1.0

[![Discord](https://discordapp.com/api/guilds/240059867744698368/embed.png)](https://discord.gg/p895czC)
[![Version](https://img.shields.io/npm/v/@pepijn98/kitai.svg?maxAge=3600)](https://www.npmjs.com/package/@pepijn98/kitai)
[![Downloads](https://img.shields.io/npm/dt/@pepijn98/kitai.svg?maxAge=3600)](https://www.npmjs.com/package/@pepijn98/kitai)
[![Dependencies](https://img.shields.io/david/Pepijn98/kitai.svg?maxAge=3600)](https://david-dm.org/Pepijn98/kitai)
[![Dev Dependencies](https://img.shields.io/david/dev/Pepijn98/kitai.svg?maxAge=3600)](https://david-dm.org/Pepijn98/kitai)
[![Maintainability](https://api.codeclimate.com/v1/badges/843becfdf91e15da5b0c/maintainability)](https://codeclimate.com/github/Pepijn98/kitai/maintainability)

# kitai (期待)
This is a copy of kotlin's require function.
<br>
It validates the condition you give it and if it's false will throw an IllegalArgumentException.

# Installation
- npm i -S @pepijn98/kitai
- yarn add @pepijn98/kitai

# Examples
See [examples](./examples) for more
```ts
// You can name this anything you want, I like "expect" since it fits the package name.
// You can even name it require just like kotlin (only if you don't use node's require function)
import expect from "@pepijn98/kitai";

function test(arg: number): void {
    expect(arg >= 0, () => `"arg" cannot be a negative number, was ${arg}`);
    
    // We now know that arg will not be a negative number
    // Do your extremly complex 9000 IQ mathematical equation here
}

test(-5); // Will throw an IllegalArgumentException
test(15); // Won't throw, yaay
```

# Name
Since it's a Japanese name I guess I should explain this, even though I don't speak Japanese and use translators.
<br>
Kitai written as 期待 in kanji, roughly means "Expectations" or "Expectation"
<br>
<br>
*(directly taken from google translate and deepl, please excuse my ignorance if it's completly wrong)*
npm package: @peple/design-tokens
Description: Design tokens and theme for People HR micro-frontends
Latest version: 0.1.3

# @peple/design-tokens

Design tokens and theme for People HR micro-frontends using Tailwind CSS v4.

## Installation

```bash
npm install @peple/design-tokens
```

## Usage

Import the design tokens in your main CSS file:

```css
/* app.css or index.css */
@import 'tailwindcss';
@import '@peple/design-tokens';
```

## Design Tokens

This package provides a comprehensive set of design tokens using Tailwind CSS v4's `@theme` directive:

### Colors

- **Primary**: Blue color palette (50-950)
- **Neutral**: Gray color palette (50-950)
- **Success**: Green color palette
- **Warning**: Yellow color palette
- **Error**: Red color palette

### Typography

- Sans font family: Inter, system-ui, sans-serif
- Mono font family: Fira Code, JetBrains Mono, monospace

### Spacing

Consistent spacing scale from 0 to 64 (0rem to 16rem)

### Border Radius

From none to full, including sm, md, lg, xl, 2xl, 3xl

### Shadows

Five shadow levels: sm, md, lg, xl, 2xl

### Transitions

Pre-configured transitions for common animations

## Using with Tailwind CSS v4

These tokens are automatically available in your Tailwind utilities:

```jsx
<div className="bg-primary-500 text-neutral-50 p-4 rounded-lg shadow-md">
  Content with design tokens
</div>
```

## Customization

You can override any token in your local CSS:

```css
@theme {
  /* Override primary color */
  --color-primary-500: #your-color;
}
```

## License

MIT
npm package: @peple/shared-ui
Description: Shared UI components for People HR micro-frontends
Latest version: 0.4.0

# @peple/shared-ui

Shared React components for People HR micro-frontends.

## Installation

```bash
npm install @peple/shared-ui
```

## Usage

```tsx
import { Button, Card } from '@peple/shared-ui'

export const MyComponent = () => (
  <Card>
    <Button variant="primary">Click me</Button>
  </Card>
)
```

## Components

### Button

A flexible button component with multiple variants and sizes.

```tsx
<Button variant="primary" size="md">Primary Button</Button>
<Button variant="secondary" size="sm">Secondary Button</Button>
<Button variant="outline" size="lg">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>
```

### Card

A container component for grouping related content.

```tsx
<Card className="p-4">
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</Card>
```

## Tailwind Configuration

This package uses Tailwind CSS utility classes. Add the package to your Tailwind configuration to ensure styles are included:

```javascript
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@peple/shared-ui/dist/**/*.js"
  ],
  // ... rest of your config
}
```

## TypeScript Support

This package includes TypeScript definitions. No additional type packages are required.

## License

MIT
npm package: @peple/types
Description: Shared TypeScript types for People HR micro-frontends
Latest version: 0.1.3

# @peple/types

Shared TypeScript types for People HR micro-frontends.

## Installation

```bash
npm install @peple/types
```

## Usage

```typescript
import type { Employee, Payroll, User } from '@peple/types'

const employee: Employee = {
  id: '123',
  name: 'John Doe',
  email: 'john@example.com',
  department: 'Engineering',
  role: 'Developer',
  startDate: '2023-01-15',
  salary: 75000
}
```

## Available Types

### Employee

```typescript
interface Employee {
  id: string
  name: string
  email: string
  department: string
  role: string
  startDate: string
  salary: number
}
```

### Payroll

```typescript
interface Payroll {
  id: string
  employeeId: string
  period: string
  grossPay: number
  netPay: number
  deductions: number
  taxes: number
  payDate: string
}
```

### User

```typescript
interface User {
  id: string
  name: string
  email: string
  role: 'admin' | 'manager' | 'employee'
  permissions: string[]
}
```

## TypeScript Configuration

This package exports TypeScript type definitions only. Ensure your `tsconfig.json` includes:

```json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}
```

## License

MIT
npm package: @peple/utils
Description: Shared utilities for People HR micro-frontends
Latest version: 0.1.3

# @peple/utils

Shared utilities for People HR micro-frontends.

## Installation

```bash
npm install @peple/utils
```

## Usage

```typescript
import { formatDate, formatCurrency, EventBus } from '@peple/utils'

// Format a date
const formattedDate = formatDate(new Date())

// Format currency
const price = formatCurrency(1234.56)

// Use EventBus for cross-MFE communication
const eventBus = EventBus.getInstance()
eventBus.emit('user:updated', { id: 123, name: 'John' })
```

## Available Utilities

### Date Formatting

```typescript
formatDate(date: Date, format?: string): string
```

Formats a date to a readable string.

### Currency Formatting

```typescript
formatCurrency(amount: number, currency?: string): string
```

Formats a number as currency with proper locale formatting.

### EventBus

A singleton event bus for cross-micro-frontend communication.

```typescript
const eventBus = EventBus.getInstance()

// Subscribe to events
eventBus.on('event:name', (data) => {
  console.log('Event received:', data)
})

// Emit events
eventBus.emit('event:name', { foo: 'bar' })

// Unsubscribe
eventBus.off('event:name', handler)
```

## TypeScript Support

This package includes TypeScript definitions. No additional type packages are required.

## License

MIT
npm package: @peppas/topic
Description: topic
Author: shangyuchen
Latest version: 0.0.1
Deprecated: false


# @peppas/react-native-topic

## Getting started

`$ npm install @peppas/react-native-topic --save`

### Mostly automatic installation

`$ react-native link @peppas/react-native-topic`

### Manual installation


#### iOS

1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `@peppas/react-native-topic` and add `RNTopic.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNTopic.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

#### Android

1. Open up `android/app/src/main/java/[...]/MainActivity.java`
  - Add `import com.peppas.imagepicker.RNTopicPackage;` to the imports at the top of the file
  - Add `new RNTopicPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
  	```
  	include ':@peppas/react-native-topic'
  	project(':@peppas/react-native-topic').projectDir = new File(rootProject.projectDir, 	'../node_modules/@peppas/react-native-topic/android')
  	```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
  	```
      compile project(':@peppas/react-native-topic')
  	```


## Usage
```javascript
import RNTopic from '@peppas/react-native-topic';

// TODO: What to do with the module?
RNTopic;
```
npm package: @peppas/ui
Description: UI HUB
Author: liujunrong
Latest version: 0.0.1


# @peppas/ui

## Getting started

`$ npm install @peppas/ui --save`

### Mostly automatic installation

`$ react-native link @peppas/ui`

### Manual installation


#### iOS



#### Android

1. Open up `android/app/src/main/java/[...]/MainApplication.java`
  - Add `import com.peppas.ui.UIReactPackage;` to the imports at the top of the file
  - Add `new UIReactPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
  	```
  	include ':@peppas/ui'
  	project(':@peppas/ui').projectDir = new File(rootProject.projectDir, 	'../node_modules/@peppas/ui/android')
  	```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
  	```
      compile project(':@peppas/ui')
  	```

## API
1. ImagePlus
2. ....
## Usage

### 1. ImagePlus
```
propTypes: {
	source: PropTypes.any,
	resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch', 'center']),
	...Image.propTypes, // 包含默认的View的属性
},
```

```javascript
import {ImagePlus} from '@peppas/ui';
...
<ImagePlus source={{uri:'https://imgqcg01.qfq.me/cd/50/cd50f91376d4d10ad60e2fd900c88b56.png'}} style={{width:200,height:200}}/>
```