npm package: @lightit/light-kit
Description: This is the repo for Light-Kit, our UI library and its documentation. We use it on all our internal projects to maintain visual consistency across tools.
Latest version: 1.2.1

# Welcome

This is the repo for Light-Kit, our UI library and its documentation. We use it on all our internal projects to maintain visual consistency across tools.

## Installation

1. Clone this project inside a folder on your machine.
```
git clone https://github.com/Light-it-labs/light-kit.git
```

2. Install dependencies on both the root and `/docs` directory
```
npm i
cd docs
npm i
```

3. Create an index.html file with this content inside project root.
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Light Kit Playground</title>
    <link rel="stylesheet" href="./src/light-kit.css">
    <script type="module">
      import * as LightKit from './src/index.ts';
    </script>
  </head>
  <body>
    <!--Test your work in progress here-->
  </body>
</html>
```

## Commands

1. The root directory handles our [npm package](https://www.npmjs.com/package/@lightit/light-kit) for the component library. From here you can execute these commands:
```
npm run lib:dev
npm run lib:build
npm run lib:analyze
```
`npm run lib:dev`: will serve `index.html` on http://localhost:2420. This index file is git ignored and it's meant to be used as a playground to test your components in development. You'll develop your components inside `/src/components`. Design tokens used by the library are in `src/light-kit.css`.

`npm run lib:build`: will build a new version of the library.

`npm run lib:analyze`: will generate automatic documentation in markdown files for the components inside the `/docs/src/specs` folder.

`npm publish --access public`: will publish the latest build to npm. Remember to build the package first with `npm run lib:build` and bump the version number inside `package.json`. npm won't let you publish a package with a previous version number. npm will probably ask you to login when trying to publish, you can do so with the `npm adduser` command and following the instructions in your terminal.

2. The `/docs` directory houses our documentation site. From here you can run:
```
npm run docs:dev
npm run docs:build
npm run docs:preview
```
`npm run docs:dev` will start a dev server on http://localhost:2421.

`npm run docs:build` will build a deployable static site.

`npm run docs:preview` will serve a preview of the built site.

## Versioning

Versioning for this project loosely follows [semantic versioning](https://semver.org/). The version number is composed of three parts separated by dots: MAJOR.MINOR.PATCH.

- You should increase the MAJOR version **when your new code introduces breaking changes** that will require effort and changes on the library user's code.
- The MINOR version should increase **when a new non-breaking feature is added**, in the case of this project, this mostly translates to a new component being added to the library.
- Finally, the PATCH version should increase **when current code is modified**, this will usually mean fixing a bug or adding a feature to an existing component.