open-index/open-npm huggingface dataset:
npm package: @hazin/vue-pic-video
Description: An easy way to capture and preview files in vue.
Latest version: 0.1.7

# vue-pic-video

An easy way to capture and preview files in vue.

## Getting Started
Import the component and style it as you wish!

```
npm i --save @hazin/vue-pic-video
```

```
yarn add @hazin/vue-pic-video
```

```
import vuePicVideo from '@hazin/vue-pic-video'
```

### Example

```html
<template>
  <div class="hello">
    <vue-pic-video :accept="'image/*'" @preview="previewImage" @value="captureFile">
      <button>Upload image</button>
    </vue-pic-video>
    <img :src="image" width="200px" height="200px" alt="">
    <vue-pic-video :accept="'video/*'" @preview="previewVideo" @value="captureFile">
      <button>Upload video</button>
    </vue-pic-video>
    <video :src="video" width="200px" controls></video>
  </div>
</template>
```

```html
<script>
import vuePicVideo from '@hazin/vue-pic-video'

export default {
  data () {
    return {
      image: '',
      video: ''
    }
  },
  components: {
    vuePicVideo
  },
  methods: {
    previewImage (preview) { this.image = preview }, // Binds the image to show in <image> tag
    previewVideo (preview) { this.video = preview }, // Binds the video to show in <video> tag
    captureFile: value => { console.log(value) } // Log the file Object
  }
}
</script>

```


## Contributing

Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.

## Authors

* **Bernardo hazin** - [Hazin](https://github.com/BernardoHazin)

See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
npm package: @haziqam/mona-chat-widget
Description: Mona Chat Widget Component Library
Author: Haziq Abiyyu Mahdy
Latest version: 2.1.1

# Mona Chat Widget

Chat widget package developed by Netmonk data & solution team to be imported in Netmonk products

## 🚅 Quick start

### Prerequisites

---

1. Install dependencies
   ```
   npm install
   ```
2. Copy .env.example
   ```
   cp .env.example .env
   ```
3. Populate .env

---

### Storybook

---

1. **How to run Storybook locally** (access at http://localhost:6006)

   ```
   npm run storybook
   ```

2. **How to build Storybook**

   ```
   npm run build-storybook
   ```

3. **How to serve Storybook**

   ```
   npm run serve-storybook
   ```

---

### Library (how to update and publish)

---

1. **Commit changes**
   ```
   git add .
   git commit -m "Your commit message"
   ```
2. **Update version**

   ```bash
   npm version patch  # for bug fixes (1.0.0 -> 1.0.1)
   ```

   ```bash
   npm version minor  # for new features (1.0.0 -> 1.1.0)
   ```

   ```bash
   npm version major  # for breaking changes (1.0.0 -> 2.0.0)
   ```

3. **Build as a library** (build file at `/dist` directory)

   ```
   npm run build
   ```

4. **Copy declaration file to `/dist`**

   ```
   cp ./src/declarations/index.d.ts ./dist/index.d.ts
   ```

5. **Publish**

   ```
   npm publish
   ```

---

### Library (how to import on your project)

---

1. Install package
   ```
   npm install @haziqam/mona-chat-widget
   ```
2. Import styles on your `App.jsx` or `index.jsx`

   ```jsx
   import "@haziqam/mona-chat-widget/dist/style.css";
   ```

3. Import & use component

   ```jsx
   import { ChatWidget } from "@haziqam/mona-chat-widget";

   <ChatWidget userId={"1234"} />;
   ```

---

### Standalone app (for demonstration)

1. **How to run locally** (access at `http://localhost:${PORT}/${APP_PREFIX}`)

   ```
   npm run dev
   ```

2. **How to build as a standalone app** (build file at `/dist-app` directory)

   ```
   npm run build-app
   ```

3. **How to serve standalone app** (access at `http://localhost:${PORT}/${APP_PREFIX}`)

   ```
   npm run serve
   ```

4. **How to run on docker** (access at `http://localhost:${PORT}/${APP_PREFIX}`)

   ```
   docker-compose up --build
   ```

---
npm package: @hazix/primitives
Description: Create a reusable Qwik component library
Latest version: 0.0.29

# Qwik Library ⚡️

- [Qwik Docs](https://qwik.builder.io/)
- [Discord](https://qwik.builder.io/chat)
- [Qwik on GitHub](https://github.com/BuilderIO/qwik)
- [@QwikDev](https://twitter.com/QwikDev)
- [Vite](https://vitejs.dev/)
- [Partytown](https://partytown.builder.io/)
- [Mitosis](https://github.com/BuilderIO/mitosis)
- [Builder.io](https://www.builder.io/)

---

## Project Structure

Inside your project, you'll see the following directories and files:

```
├── public/
│   └── ...
└── src/
    ├── components/
    │   └── ...
    └── index.ts
```

- `src/components`: Recommended directory for components.

- `index.ts`: The entry point of your component library, make sure all the public components are exported from this file.

## Development

Development mode uses [Vite's development server](https://vitejs.dev/). For Qwik during development, the `dev` command will also server-side render (SSR) the output. The client-side development modules are loaded by the browser.

```
pnpm dev
```

> Note: during dev mode, Vite will request many JS files, which does not represent a Qwik production build.

## Production

The production build should generate the production build of your component library in (./lib) and the typescript type definitions in (./lib-types).

```
pnpm build
```