open-index/open-npm huggingface dataset:
npm package: @narutone/react-sortablejs
Description: > fork 🍴 [https://github.com/SortableJS/react-sortablejs](https://github.com/SortableJS/react-sortablejs) **V2.0.11**
Author: Wayne Van Son
Latest version: 1.0.0

# React-Sortablejs

> fork 🍴 [https://github.com/SortableJS/react-sortablejs](https://github.com/SortableJS/react-sortablejs) **V2.0.11**

- fix bug [#159](https://github.com/SortableJS/react-sortablejs/issues/159)
npm package: @narutumz/vue-design-system
Description: A reusable Vue 3 Design System built with Tailwind CSS
Author: Mark Joshua Bonina
Latest version: 1.0.0

# Vue Design System

A reusable Vue 3 Design System built with Tailwind CSS and Vite.

## Installation

```bash
npm install @your-org/vue-design-system
```

## Usage

### Global Registration (Recommended)

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import VueDesignSystem from '@your-org/vue-design-system'

const app = createApp(App)
app.use(VueDesignSystem)
app.mount('#app')
```

After global registration, you can use components anywhere in your app:

```vue
<template>
  <div>
    <MyButton @click="handleClick">Click me!</MyButton>
    <MyButton variant="secondary" size="lg">Large Secondary</MyButton>
    <MyButton variant="danger" :disabled="true">Disabled</MyButton>
  </div>
</template>
```

### Individual Component Import

```javascript
import { MyButton } from '@your-org/vue-design-system'

export default {
  components: {
    MyButton
  }
}
```

## Components

### MyButton

A versatile button component with multiple variants and sizes.

#### Props

- `variant` (String): Button style variant
  - Options: `'primary'`, `'secondary'`, `'danger'`, `'outline'`
  - Default: `'primary'`
- `size` (String): Button size
  - Options: `'sm'`, `'md'`, `'lg'`
  - Default: `'md'`
- `disabled` (Boolean): Disable the button
  - Default: `false`

#### Events

- `click`: Emitted when the button is clicked

#### Examples

```vue
<template>
  <!-- Basic usage -->
  <MyButton>Default Button</MyButton>
  
  <!-- Different variants -->
  <MyButton variant="secondary">Secondary</MyButton>
  <MyButton variant="danger">Delete</MyButton>
  <MyButton variant="outline">Outline</MyButton>
  
  <!-- Different sizes -->
  <MyButton size="sm">Small</MyButton>
  <MyButton size="lg">Large</MyButton>
  
  <!-- Disabled state -->
  <MyButton :disabled="true">Disabled</MyButton>
  
  <!-- With click handler -->
  <MyButton @click="handleClick">Click Handler</MyButton>
</template>
```

## Development

### Project Setup

```bash
npm install
```

### Development Server

```bash
npm run dev
```

### Build for Production

```bash
npm run build
```

### Storybook

View component documentation and examples:

```bash
npm run storybook
```

Build static Storybook:

```bash
npm run build-storybook
```

## Publishing

1. Update version in `package.json`
2. Build the package:
   ```bash
   npm run build
   ```
3. Publish to npm:
   ```bash
   npm publish
   ```

## License

MIT