npm package: @loophq/ui
Description: `npm i -S @loophq/ui`
Latest version: 1.8.5

# Loop UI

## Installation

`npm i -S @loophq/ui`

## Usage

### Recommended

Components can be imported via named imports:

`import { BaseCard } from '@loophq/ui;`

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

```js
import LoopComponents from '@loophq/ui';

app.use(LoopComponents);
```

## Project setup

```
npm i
```

### Compiles and hot-reloads docs for development

```
npm run dev
```

### Creates `index.js` to export all components

```
npm run build-library
```

### Compiles and minifies library index file for production

```
npm run build
```

### Publishes a new version of the library

The package.json version must be updated before publishing a new version. The version number should be updated according to the [SemVer](https://semver.org/) versioning scheme.

```
npm publish
```

#### With a specific tag

```
npm publish --tag <tag>
```

### Running Storybook

```
npm run storybook
```

### Lints and fixes files (JS and CSS)

```
npm run lint:fix
npm run stylelint:fix
```

### Run your unit tests

Run the entire suite of tests:

```
npm run test
```

Run a specific test file:

```
npm run test <MyTestName>
```

### Using your local loophq/ui as a node module
If you'd like to test the implementation of a component while developing, you can do so with [npm link](https://docs.npmjs.com/cli/v10/commands/npm-link). 

In your `design-system-2` directory, run: 
```
npm run build-library && npm run build && npm link
```

In the directory of the project you wish to use the component library, run: 
```
npm link @loophq/ui
```

Keep in mind, you'll have to rebuild (`npm run build`) for every change you make to the component library. 

## Releasing

Reach out to a frontend codeowner to help you through your first few deployments. Once you are completely comfortable with the process, you may create an IT Support request to be added to the loop npm organization, or continue to coordinate publishing with support from a codeowner.

1. 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. 
2. Update the version number in `package.json` and commit this change on your feature branch. Every new component or component update should bump the version since we usually pin the `@loophq/ui` library version in repos where it is referenced.
3. Your feature branch should be PRed into `main` and be approved by a peer before releasing. Once you are ready to release, merge the PR into `main`.
4. On your machine, check out `main` (or if preferred, the branch you'd like to release). Compile and build the component library

   ```
   npm run build-library
   npm run build
   ```

   **(Optional)** Commit any file changes the build script made. This is not always necessary.

5. Make sure you log in to npm in your terminal. Publish the library to npm.
   ```
   npm login
   npm publish
   ```

## Documentation

https://loop-ui.netlify.app/?path=/docs/introduction--docs

The documentation is built using Storybook. Components should be documented in the `src/stories` directory. The documentation is automatically built and deployed to Netlify on every push to the main branch.