open-index/open-npm huggingface dataset:
npm package: @gits-id/progress-bar
Description: GITS Progress Bar Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Progress Component

> Reusable Progress Component

## Installation

npm

```
npm i @gits-id/progress
```

yarn

```
yarn add @gits-id/progress
```

pnpm

```
pnpm i @gits-id/progress
```

## Usage

```vue
<script setup lang="ts">
import Progress from '@gits-id/progress';
</script>

<template>
  <Progress />
</template>
```

## Documentation

View `Progress` documentation [here](https://gits-ui.web.app/?path=/story/components-progress--default).

## License

MIT
npm package: @gits-id/quill-editor
Description: Quill Editor Vue Component
Author: Warsono
Latest version: 1.0.0-beta.4

# Quill Editor Component

[VueQuill](https://vueup.github.io/vue-quill/) integrated with [vee-validate](https://vee-validate.logaretm.com/v4/).

## Installation

Install with your prefered Package Manager.

npm

```
npm i @gits-id/quill-editor
```

yarn

```
yarn add @gits-id/quill-editor
```

pnpm

```
pnpm i @gits-id/quill-editor
```

## Usage

### Basic Usage

```html
<script setup lang="ts">
  import {VQuillEditor} from '@gits-id/quill-editor';
  import '@gits-id/quill-editor/dist/style.css';

  const content = ref('');
</script>

<template>
  <VQuillEditor
    v-model="content"
    name="content"
    label="Content"
    placeholder="Input your content"
  />
  <pre>{{ {content} }}</pre>
</template>
```

### Validation Example

```html
<script setup lang="ts">
  import {VQuillEditor} from '@gits-id/quill-editor';
  import {useForm} from 'vee-validate';
  import {object, string} from 'yup';
  import VBtn from '@gits-id/button';
  import '@gits-id/quill-editor/dist/style.css';

  const schema = object({
    content: string().required().label('Content'),
  });

  const {handleSubmit, resetForm, values} = useForm({
    validationSchema: schema,
  });

  const onSubmit = handleSubmit((values) => {
    alert(JSON.stringify(values));
  });
</script>

<template>
  <form @submit="onSubmit" class="border-none">
    <VQuillEditor
      name="content"
      label="Content"
      placeholder="Input your content"
    />
    <div class="mt-4">
      <v-btn type="submit">Submit</v-btn>
      <v-btn type="button" text @click="resetForm">Reset</v-btn>
    </div>
    <pre>{{ { values } }}</pre>
  </form>
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/forms-quilleditor--basic).

## License

MIT
npm package: @gits-id/rating
Description: Vue Rating Component
Author: Warsono
Latest version: 1.0.0-beta.4

# Vue Rating Component

Based on [vue-star-rating](https://github.com/craigh411/vue-star-rating) to work with Vite, Vue 3 and Nuxt 3.

## Installation

```bash
npm i @gits-id/rating
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import {Rating} from '@gits-id/rating';

const value = ref(0);
</script>

<template>
  <Rating v-model:rating="value" />

  <!-- half stars -->
  <Rating v-model:rating="value" :increment="0.5" />
</template>
```

## License

MIT
npm package: @gits-id/select
Description: Vue Select Component
Author: Warsono
Latest version: 1.0.0-beta.4

# Vue Select

Vue Select Component.

## Installation

npm

```
npm i @gits-id/select
```

yarn

```
yarn add @gits-id/select
```

pnpm

```
pnpm add @gits-id/select
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import VSelect from '@gits-id/select';
import '@gits-id/select/dist/style.css';

const items = ref([
  {
    text: 'Item 1',
    value: 1,
  },
  {
    text: 'Item 2',
    value: 2,
  },
]);
</script>

<template>
  <VSelect :items="items" />
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-select--default).

## License

MIT
npm package: @gits-id/services
Description: GITS Services
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Services Component

> Reusable Services Component

## Installation

npm

```
npm i @gits-id/services
```

yarn

```
yarn add @gits-id/services
```

pnpm

```
pnpm i @gits-id/services
```

## Usage

```vue
<script setup lang="ts">
import Services from '@gits-id/services';
</script>

<template>
  <Services />
</template>
```

## Documentation

View `Services` documentation [here](https://gits-ui.web.app/?path=/story/components-services--default).

## License

MIT
npm package: @gits-id/shimmer
Description: Shimmer Component / Loading Animation
Author: Warsono
Latest version: 1.0.0-beta.3

# Shimmer

Shimmer component AKA loading animation AKA content placeholder.

## Installation

via npm:

```
npm i @gits-id/shimmer
```

via yarn:

```
yarn add @gits-id/shimmer
```

via pnpm:

```
pnpm i @gits-id/shimmer
```

## Usage

```vue
<script setup lang="ts">
// import component
import Shimmer from '@gits-id/shimmer';
// import style
import '@gits-id/shimmer/dist/style.css';
</script>

<template>
  <Shimmer />
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-shimmer--default).

## License

MIT
npm package: @gits-id/spinner
Description: GITS Spinner Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Spinner Component

> Reusable Spinner Component

## Installation

npm

```
npm i @gits-id/spinner
```

yarn

```
yarn add @gits-id/spinner
```

pnpm

```
pnpm i @gits-id/spinner
```

## Usage

```vue
<script setup lang="ts">
import Spinner from '@gits-id/spinner';
</script>

<template>
  <Spinner />
</template>
```

## Documentation

View `Spinner` documentation [here](https://gitsindonesia.github.io/ui-component/components/spinner.html).

## License

MIT
npm package: @gits-id/stats
Description: GITS Stats Component
Author: Warsono
Latest version: 1.0.0-beta.4

# GITS Stats Component

> Reusable Stats Component

## Installation

npm

```
npm i @gits-id/stats
```

yarn

```
yarn add @gits-id/stats
```

pnpm

```
pnpm i @gits-id/stats
```

## Usage

```vue
<script setup lang="ts">
import Stats from '@gits-id/stats';
</script>

<template>
  <Stats />
</template>
```

## Documentation

View `Stats` documentation [here](https://gits-ui.web.app/?path=/story/components-stats--default).

## License

MIT
npm package: @gits-id/stepper
Description: GITS Stepper Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Steppers Component

## Installation

npm

```
npm i @gits-id/stepper
```

yarn

```
yarn add @gits-id/stepper
```

pnpm

```
pnpm i @gits-id/stepper
```

## Usage

```vue
<script setup lang="ts">
import Stepper from '@gits-id/stepper';

const items = Array.from({length: 5}, (v, k) => ({
  title: 'Title',
  subtitle: 'Subtitle',
  path: '/step/' + k,
}));
</script>

<template>
  <Stepper :items="items" />
</template>
```

## Documentation

View `Spinner` documentation [here](https://gitsindonesia.github.io/ui-component/components/stepper.html).

## License

MIT
npm package: @gits-id/switch
Description: GITS Vue Switch
Author: Warsono
Latest version: 1.0.0-beta.4

# GITS Switch

Vue Switch Component.

## Installation

npm

```
npm i @gits-id/switch
```

yarn

```
yarn add @gits-id/switch
```

pnpm

```
pnpm i @gits-id/switch
```

## Usage

```vue
<script setup lang="ts">
import VSwitch from '@gits-id/switch';
import '@gits-id/switch/dist/style.css';
</script>

<template>
  <VSwitch />
</template>
```

## Documentation

View `Switch` documentation [here](https://gits-ui.web.app/?path=/story/components-switch--default).

## License

MIT
npm package: @gits-id/table
Description: GITS DataTable Table Component
Author: Warsono
Latest version: 1.0.0-beta.4

# DataTable

DataTable component.

## Installation

npm

```
npm i @gits-id/table
```

yarn

```
yarn add @gits-id/table
```

pnpm

```
pnpm add @gits-id/table
```

## Usage

```vue
<script setup lang="ts">
import VDataTable from '@gits-id/table';
import '@gits-id/table/dist/style.css';

const states = ['active', 'inactive'];

const items = [...Array(30)].map((_, index) => ({
  index,
  name: `User-${index}`,
  email: `user-${index}@example.com`,
  age: index + 1 * 10,
  state: states[Math.floor(Math.random() * states.length)],
}));

const headers = [
  {
    value: 'index',
    text: 'No.',
  },
  {
    value: 'name',
    text: 'Name',
  },
  {
    value: 'email',
    text: 'Email',
  },
];
</script>

<template>
  <VDataTable :items="items" :headers="headers" />
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-table--default).

## License

MIT
npm package: @gits-id/tabs
Description: GITS Tabs Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Tabs

Vue Tabs Component.

## Installation

npm

```
npm i @gits-id/tabs
```

yarn

```
yarn add @gits-id/tabs
```

pnpm

```
pnpm add @gits-id/tabs
```

## Usage

```vue
<script setup lang="ts">
// import component
import Tabs from '@gits-id/tabs';
// import styles
import '@gits-id/tabs/dist/style.css';

const items = ref([
  {
    text: 'Tab 1'
  }
  {,
    text: 'Tab 2'
  },
  {
    text: 'Tab 3'
  }
])

const selectedTab = ref(0)
</script>

<template>
  <Tabs v-model="selectedTab" :items="items" />
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-tabs--default).

## License

MIT
npm package: @gits-id/toast
Description: Toast component for Vue 3
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Toast

Vue Toast Component.

## Installation

npm

```
npm i @gits-id/toast
```

yarn

```
yarn add @gits-id/toast
```

pnpm

```
pnpm i @gits-id/toast
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import VToast from '@gits-id/toast';
import '@gits-id/toast/dist/style.css';

const isOpen = ref(true)
</script>

<template>
  <button @click="isOpen = !isOpen">
    {{ isOpen ? 'Close' : 'Open' }} Toast
  </button>
  <VToast v-model="isOpen">
    Toast message
  </VToast>
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-toast--default).

## License

MIT
npm package: @gits-id/toast-store
Description: Store module for @gits-id/toast.
Author: Warsono
Latest version: 1.0.0-beta.3

# Toast Store

Store module for @gits-id/toast.

## Installation

```
# With NPM
npm i @gits-id/toast
# With Yarn
yarn add @gits-id/toast
# With PNPM
pnpm add @gits-id/toast
```

## Usage

### Composition API

```ts
import {useToast} from '@gits-id/toast-store'

const toast = useToast()
toast.show()
toast.confirm()
toast.confirmDelete()
```

### Pinia

```ts
// file: stores/toast.ts

import {useToastStore} from '@gits-id/toast-store'

const toast = useToastStore()

toast.show()
toast.confirm()
toast.confirmDelete()
```

### Vuex (Recommended)

```ts
// file: store/index.ts
import {toastModule} from '@gits-id/toast-store'

export default new Vuex({
  modules: {
    toast: toastModule
  }
})
```

```vue
<script setup>
const store = useStore()

store.toast.show()
store.toast.confirm()
store.toast.confirmDelete()
</script>
```



## License

MIT
npm package: @gits-id/tooltip
Description: GITS Tooltip Component
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Tooltip Component

> Reusable Tooltip Component

## Installation

npm

```
npm i @gits-id/tooltip
```

yarn

```
yarn add @gits-id/tooltip
```

pnpm

```
pnpm i @gits-id/tooltip
```

## Usage

```vue
<script setup lang="ts">
// import styles
import '@gits-id/tooltip/dist/style.css';
// import component
import Tooltip from '@gits-id/tooltip';
</script>

<template>
  <Tooltip />
</template>
```

## Documentation

View `Tooltip` documentation [here](https://gits-ui.web.app/?path=/story/components-tooltip--default).

## License

MIT
npm package: @gits-id/ui
Description: Free and open-source UI Component for Vue 3.
Latest version: 1.0.0-beta.4

# GITS UI

Free and open-source UI Component for Vue 3.

## Installation

npm

```
npm i @gits-id/ui
```

yarn

```
yarn add @gits-id/ui
```

pnpm

```
pnpm i @gits-id/ui
```

## Usage

```ts
// file: main.ts

import GitsUI from '@gits-id/ui';
import '@gits-id/ui/styles';
// or load SCSS styles
// import '@gits-id/ui/styles.scss';

const app = createApp(App);

app.use(GitsUI);
```

## Documentation

View full documentation here https://gitsindonesia.github.io/ui-component/.

## License

MIT
npm package: @gits-id/ui-nuxt
Description: Nuxt module for GITS UI Component
Latest version: 1.0.0-beta.4

# Nuxt GITS UI

GITS UI Component + Nuxt 3.

## Installation

- Install Nuxt GITS UI

```bash
yarn add @gits-id/ui-nuxt
```

- Install `@nuxtjs/tailwindcss`

```bash
yarn add --dev @nuxtjs/tailwindcss
```

- Add it to your `modules` section in your `nuxt.config.ts`:

```ts
import {defineNuxtConfig} from 'nuxt';

export default defineNuxtConfig({
  modules: ['@gits-id/ui-nuxt', '@nuxtjs/tailwindcss'],
  gitsUi: {
    //
  },
});
```

Create your `tailwind.config.js` by running:

```bash
npx tailwindcss init
```

Update your `tailwind.config.js`:

```js
module.exports = {
  content: ['./node_modules/@gits-id/**/src/**/*.{vue,js,ts,jsx,tsx,css}'],
  presets: [require('@gits-id/tailwind-config/preset')],
};
```

Run the development server:

```bash
yarn dev
```

## Development

- Run `npm run dev:prepare` to generate type stubs.
- Use `npm run dev` to start [playground](./playground) in development mode.
npm package: @gits-id/utils
Description: GITS Utilities
Author: Warsono
Latest version: 1.0.0-beta.3

# GITS Utils Component

> Reusable Utils Component

## Installation

npm

```
npm i @gits-id/utils
```

yarn

```
yarn add @gits-id/utils
```

pnpm

```
pnpm i @gits-id/utils
```

## License

MIT
npm package: @gits5213/pw-ts-package
Description: Typescript generic functions for playwright ts framework
Author: Your Name
Latest version: 1.0.1

# pw-ts-package
- Typescript generic functions for playwright ts framework

## List of Functions 
```
    - delay()
    - searchFirstName()
    - getRandomNumber()
    - getRandomFirstName()
    - getRandomLastName()
    - getNickName()
    - getProjectName()
    - getVendorName()
    - getRandomEmail()
    - getNextMonthDate()
    - scrolldown()
    - scrollHorizontallyTo()
    - validateTableAscDescOrder()
    - waitForElement()
    - performAssertion()
```
npm package: @gitsense/gscb-db
Description: Database library for GitSense Chat Bridge (GSCB)
Latest version: 0.3.3

# GSCB-DB Library

A database library for GitSense Chat Bridge (GSCB) that provides a clean and type-safe interface for database operations.

## Installation

```bash
npm install gscb-db
```

## Usage

```typescript
import { DatabaseClient, DatabaseConfig } from '@gitsense/gscb-db';

// Configure the database
const config: DatabaseConfig = {
    path: './data.db',
    poolSize: 5,
    timeout: 5000,
    verbose: false
};

// Create and initialize the client
const client = new DatabaseClient(config);
await client.initialize();

// Use the services
const groupId = await client.groups.createGroup({
    name: 'My Group',
    type: 'git-repo',
    gitMeta: {
        type: 'repo',
        path: '/path/to/repo',
        bare: false,
        importedAt: new Date().toISOString()
    }
});

// Close the client when done
await client.close();
```

## Features

- Connection pooling with configurable size and timeout
- Full TypeScript support with strict typing
- Comprehensive error handling
- Transaction support
- Logging with Winston
- Schema migrations
- CRUD operations for all entities:
  - Groups
  - Chats
  - Messages
  - Prompts

## API Documentation

### DatabaseClient

The main client class that provides access to all services.

```typescript
const client = new DatabaseClient(config);
await client.initialize();

// Access services
client.groups    // GroupService
client.chats     // ChatService
client.messages  // MessageService
client.prompts   // PromptService
```

### Services

Each service provides CRUD operations for its respective entity:

- `createX`: Create a new entity
- `getXById`: Get an entity by ID
- `updateX`: Update an existing entity
- `deleteX`: Delete an entity
- Additional methods specific to each entity type

## Error Handling

The library provides specific error types for different scenarios:

- `GSCBError`: Base error class
- `DatabaseError`: Database-related errors
- `ConnectionError`: Connection issues
- `QueryError`: SQL query errors
- `ValidationError`: Data validation errors
- `NotFoundError`: Resource not found

## Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request

## License

MIT