Storybook & some KButton stories

.gitignore

@@ -21,3 +21,6 @@ docs/jsdocs.js
 # IDE
 .idea
 kolibri-design-system.iml
+
+# ignore storybook stories
+stories/

.storybook/main.js

@@ -0,0 +1,27 @@
+const path = require('path');
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "framework": "@storybook/vue",
+  "webpackFinal": async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    // Return the altered config
+    return config;
+  },
+}

.storybook/preview.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import KThemePlugin from '../lib/KThemePlugin';
+
+KThemePlugin(Vue);
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -263,3 +263,12 @@ yarn run devserver
 ```
 
 Now you're all set to see your changes to the Kolibri Design System working live in Kolibri!
+
+
+### Using Storybook locally 
+
+The Kolibri Design System is configured with [Storybook](https://storybook.js.org/) and can be used locally. This is a tool designed to give you a chance to play with and tests components and the various combinations of props they might be configured with.
+
+In order to make use of this tool, you will need to create a `stories/` directory in the root of your KDS repository. Inside of that folder, you can create any number of `*.stories.js` files according to the [Storybook VueJS docs](https://storybook.js.org/docs/vue/writing-stories/introduction). __Note: The `stories/` directory is included in the .gitignore, so these will not be committed along with any of your other work.__
+
+Once you have stories created, you can run `yarn storybook` to start a server, which will open in your browser a window showing all of the stories you've created.

package.json

@@ -17,7 +17,9 @@
     "precompile-custom-svgs": "node utils/precompileSvgs/index.js --custom && yarn run pregenerate",
     "_lint-watch-fix": "yarn lint -w -m",
     "test": "jest --config=jest.conf/index.js",
-    "_api-watch": "chokidar \"**/lib/**\" -c \"node utils/extractApi.js\""
+    "_api-watch": "chokidar \"**/lib/**\" -c \"node utils/extractApi.js\"",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "files": [
     "lib"
@@ -35,28 +37,38 @@
   },
   "peerDependencies": {},
   "devDependencies": {
+    "@babel/core": "^7.17.2",
     "@material-icons/svg": "git+https://github.com/material-icons/material-icons.git",
     "@mdi/svg": "^5.9.55",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/vue": "^6.4.18",
     "@vuedoc/parser": "^1.4.0",
     "babel-jest": "^27.4.6",
+    "babel-loader": "^8.2.3",
     "chokidar-cli": "^2.1.0",
     "consola": "^2.15.3",
     "eslint-import-resolver-nuxt": "^1.0.1",
+    "frame-throttle": "^3.0.0",
     "globby": "^6.1.0",
     "jest": "^27.4.7",
     "jest-serializer-vue": "^2.0.2",
-    "kolibri-tools": "0.15.0-dev.4",
     "lockr": "^0.8.4",
+    "loglevel": "^1.8.0",
     "material-design-icons": "^3.0.1",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "nuxt": "2.11.0",
     "prismjs": "^1.27.0",
     "raw-loader": "0.5.1",
+    "sass": "^1.49.7",
+    "sass-loader": "^10.0.0",
     "svg-icon-inline-loader": "^3.1.0",
     "svgo": "^1.3.2",
     "vue-docgen-api": "^4.41.1",
     "vue-jest": "^3.0.7",
+    "vue-loader": "^15.9.8",
     "vue-meta": "^2.4.0",
     "vue-prism-component": "^1.1.1",
     "vue-router": "^3.5.3",