Pocket Prep UI Kit

A package containing globally used styles, SCSS variables + mixins, fonts, assets, and Vue components.

Installation

To install the UI Kit on an app, first run the NPM install command in your project:

``bash
npm i @pocketprep/ui-kit
`

To import the UI Kit's exported stylesheets in a vite context:

`ts
import '@pocketprep/ui-kit/normalize'
import '@pocketprep/ui-kit/fonts'
import '@pocketprep/ui-kit/styles'
`

To import the color variables and breakpoint mixin into your Vue app components globally,
add the following code to your vite.config.js file:

`pre
module.exports = {
css: {
preprocessorOptions: {
scss: {
additionalData:
@use '@/styles/breakpoints' as *;
@use '@/styles/colors' as *;
,
},
},
},
}
`

Linting

We use ESLint and Stylelint. To run the linter on your files, run the following command:

`bash
npm run lint
`

Versioning

In order to increment the ui-kit version when a change is made, you have to make sure you update both the package.json and the package-lock.json files. In order to do so and stage the commit, run the following command:

`bash
npm run patch
`

This command will queue up the version increment.

Testing the package in apps

We have script commands to help copy and paste the UI Kit package into an app's node_modules:

In the UI Kit:

`bash
npm run uikit-copy
`

In an app (like study or teach):

`bash
npm run uikit-paste
``