@pocketprep/ui-kit 3.1.6 → 3.2.1

package/.eslintrc.cjs

@@ -12,6 +12,7 @@ module.exports = {
         'eslint:recommended',
         '@vue/eslint-config-typescript',
     ],
+    ignorePatterns: [ 'docs' ],
     rules: {
         'quotes': [ 'error', 'single' ],
         'comma-dangle': [ 'error', {

package/README.md

@@ -10,21 +10,26 @@ To install the UI Kit on an app, first run the NPM install command in your proje
 npm i @pocketprep/ui-kit
 ```
 
-Then import the appropriate `scss` file from the installed package into your project wherever it is needed.
-For example, to use the UI Kit colors in a Vue component, add the following to the Vue component's `<styles>` block:
+To import the UI Kit's exported stylesheets in a vite context:
 
-```css
-@import '~@pocketprep/ui-kit/colors';
+```ts
+import '@pocketprep/ui-kit/normalize'
+import '@pocketprep/ui-kit/fonts'
+import '@pocketprep/ui-kit/styles'
 ```
 
-To import the styles into your Vue app globally, add the following code to your `vue.config.js` file:
+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: {
-        loaderOptions: {
+        preprocessorOptions: {
             scss: {
-                prependData: '@import "~@pocketprep/ui-kit/pocketprep.scss";',
+                additionalData: `
+                @import '@pocketprep/ui-kit/breakpoints';
+                @import '@pocketprep/ui-kit/colors';
+                `,
             },
         },
     },
@@ -47,4 +52,20 @@ In order to increment the `ui-kit` version when a change is made, you have to ma
 npm run patch
 ```
 
-This command will queue up the version increment.
+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
+```