open-index/open-npm huggingface dataset:
npm package: @loophq/component-library
Description: `npm i -S @loophq/component-library`
Latest version: 3.0.0-beta.4

# Loop component library

## Installation

`npm i -S @loophq/component-library`

## Usage

### Recommended

Components can be imported by importing the component individually:

`import BaseCard from '@loophq/component-library/BaseCard';`

This is preferred because it allows for better code-splitting

### Other methods

Components can be imported via named imports:

`import { BaseCard } from '@loophq/component-library';`

To import all and register globally (not recommended), run this in your main.js:

``` js
import LoopComponents from '@loophq/component-library';

Vue.use(LoopComponents);
```

## Project setup
```
npm i
```

## Local component testing
```
npm run dev
```

## Unit tests
```
npm run vitest
```

### Compiles and hot-reloads docs for development

```
npm run storybook
```

### Compiles and minifies component library
```
npm run library:build
```

### Publishes a new version of the library
```
npm run library:publish -- <version>
```

## Compiles and minifies docs

```
npm run build-storybook
```

## Releasing

0. If this is your first time releasing, ask in the engineering team channel to be added to the loop npm organization. Make sure you log in to npm in your terminal as well.
1. On your machine, check out the branch you'd like to release. This can either be a feature branch or a release branch if you have multiple features to package together as a release. This branch should be PRed into `main` and be approved by a peer before releasing.
2. Compile the component library
    ```
    npm run library:build
    ```
    **(Optional)** Commit any file changes the build script made. This is not always necessary but when adding new components this will generally be necessary.

3. Figure out the version number this release will be. We follow [SemVer](https://semver.org/), and the general rule of thumb is that if you're adding new components, bump the minor version, everything else should just bump the patch version. Major versions bumps are rare and should be a team decision.
4. Publish the library to npm. **Make sure you are on the branch you intend to release, this will modify your `package.json` and you MUST be on a non-`main` branch for this to be mergeable.**
    ```
    npm run library:publish -- <version>
    ```
5. Push all changes the build and release scripts made to Github.
6. In Github, merge the release branch into main.
npm package: @loophq/sonik
Description: Loop's Vue component library to rule them all. Based on [PrimeVue](https://primevue.org/).
Latest version: 3.1.0

# Sonik

Loop's Vue component library to rule them all. Based on [PrimeVue](https://primevue.org/).

## [Installation](./docs/INSTALLATION.md)

## [Local development](./docs/LOCAL_DEVELOPMENT.md)

## [Adding new component](./docs/ADDING_NEW_COMPONENT.md)

## [Updating theme from Figma](./docs/UPDATING_THEME_FROM_FIGMA.md)

## [Publish package manually as a beta](./docs/PUBLISH_BETA.md)

## [Testing](./docs/TESTING.md)

## [Changelog](./docs/CHANGELOG.md)
npm package: @loopindev/ui-lib
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Latest version: 0.0.2

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```