@propelinc/citrus-ui 0.2.6 → 0.2.7

package/.nvmrc

@@ -0,0 +1 @@
+14.16.1

package/README.md

@@ -1,29 +1,96 @@
-# citrus-ui
+# Citrus UI
 
-## Project setup
-```
-npm install
-```
+Propel's UI component library.
+
+See what components are currently available in [Storybook](https://storybook.providersapp.com/).
+
+Also, see the Citrus UI slack channel #proj-citrus-design-system.
+
+## Setup
 
-### Compiles and hot-reloads for development
+```bash
+nvm use # Switches to the correct version of node
+npm install # Install dependencies
 ```
-npm run serve
+
+### VSCode Setup
+
+First, install:
+
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - highlights ESLint errors in your editor
+- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - highligths Stylelint errors in your editor
+
+Once you install the ESLint and Stylelint extensions, VSCode can fix lint errors when you save a file.
+
+To set this up:
+
+1. Head over to your VSCode settings
+2. Search for `editor.codeActionsOnSave` and click "Edit in settings.json"
+3. Add this configuration:
+
+```json
+"editor.codeActionsOnSave": {
+  "source.fixAll.eslint": true,
+  "source.fixAll.stylelint": true,
+},
 ```
 
-### Compiles and minifies for production
+## Development
+
+### Storybook
+
+Unlike a normal Vue project, we don't use a dev server to compile an app. Instead, we rely on [Storybook](https://storybook.js.org/) to render and manually test our components.
+
+
+```bash
+npm run serve:storybook
 ```
-npm run build
+
+### Testing
+
+Since there is no app to test, there are no e2e tests. Instead, all tests are written in jest. You can make sure you components render correctly using Storybook.
+
+```bash
+npm run test:unit
 ```
 
-### Run your unit tests
+### Linting
+
+```bash
+npm run lint:js # Runs ESLint + Prettier
+npm run lint:css # Runs Stylelint
 ```
-npm run test:unit
+
+### Adding a component
+
+To add a new component, first generate the component with plop.
+
+```bash
+npm run generate:component # Interactive CLI
+npm run generate:component -- [name] [directory] [document in storybook] # Shortcuts
 ```
 
-### Lints and fixes files
+❗️ If you want the component to be available to your Vue app, you'll need to add the component to [index.ts](https://github.com/propelinc/citrus-ui/blob/main/src/index.ts) and define the type in [index.d.ts](https://github.com/propelinc/citrus-ui/blob/main/src/index.d.ts).
+
+## Publishing
+
+When publishing a new version, bump the version in the package.json according to [semantic versioning](https://semver.org/)
+. 
+
+Then, run:
+
+```bash
+npm run publish:dist
 ```
-npm run lint
+
+Finally, announce the new version in #proj-citrus-design-system.
+
+### NPM Access
+
+Because this package is published to our internal NPM repository, you'll need an [NPM account](https://www.npmjs.com/) and to be part of the [@propelinc organization](https://www.npmjs.com/org/propelinc) to publish. Once you have that set up, you'll have to login: 
+
+```bash
+npm login --scope=@propelinc
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+Or alternatively, just ask Mohan to publish for you.

package/dist/citrus-ui.common.js

@@ -947,6 +947,13 @@ if (v8) {
 module.exports = version && +version;
 
 
+/***/ }),
+
+/***/ "3166":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
 /***/ }),
 
 /***/ "3410":
@@ -1407,17 +1414,6 @@ $({ target: 'Reflect', stat: true, forced: FORCED, sham: FORCED }, {
 
 // extracted by mini-css-extract-plugin
 
-/***/ }),
-
-/***/ "4c8b":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CAlert_vue_vue_type_style_index_0_id_0c8a34d6_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("6d8e");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CAlert_vue_vue_type_style_index_0_id_0c8a34d6_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CAlert_vue_vue_type_style_index_0_id_0c8a34d6_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "4d64":
@@ -2060,13 +2056,6 @@ module.exports = {
 
 /***/ }),
 
-/***/ "6d8e":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "6ece":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -5595,6 +5584,17 @@ module.exports = !fails(function () {
 });
 
 
+/***/ }),
+
+/***/ "e1e1":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CAlert_vue_vue_type_style_index_0_id_63c332ca_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("3166");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CAlert_vue_vue_type_style_index_0_id_63c332ca_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CAlert_vue_vue_type_style_index_0_id_63c332ca_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "e260":
@@ -8442,15 +8442,15 @@ var Theme = {
   'purple': colors['color-purple']
 };
 /* harmony default export */ var theme = (Theme);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"26ba0986-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/CAlert.vue?vue&type=template&id=0c8a34d6&scoped=true&
-var CAlertvue_type_template_id_0c8a34d6_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-snackbar',{staticClass:"p-alert",class:{
-    'p-alert--error': _vm.error,
-    'p-alert--success': _vm.success,
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"26ba0986-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/CAlert.vue?vue&type=template&id=63c332ca&scoped=true&
+var CAlertvue_type_template_id_63c332ca_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-snackbar',{staticClass:"c-alert",class:{
+    'c-alert--error': _vm.error,
+    'c-alert--success': _vm.success,
   },attrs:{"data-test":"alert","top":"","timeout":_vm.timeout,"value":_vm.value},on:{"input":function (value) { return _vm.$emit('input', value); }}},[_c('div',{attrs:{"data-test":"alert-message"}},[_vm._t("default",[_vm._v(" "+_vm._s(_vm.message)+" ")])],2),(!_vm.shouldAutoDismiss)?_c('c-icon-button',{attrs:{"data-test":"alert-dismiss","light":"","icon":_vm.faTimes},on:{"click":function($event){return _vm.$emit('input', false)}}}):_vm._e()],1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/CAlert.vue?vue&type=template&id=0c8a34d6&scoped=true&
+// CONCATENATED MODULE: ./src/components/CAlert.vue?vue&type=template&id=63c332ca&scoped=true&
 
 // CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(instance, Constructor) {
@@ -23024,8 +23024,8 @@ CAlertvue_type_script_lang_ts_CAlert = __decorate([vue_class_component_esm({
 /* harmony default export */ var CAlertvue_type_script_lang_ts_ = (CAlertvue_type_script_lang_ts_CAlert);
 // CONCATENATED MODULE: ./src/components/CAlert.vue?vue&type=script&lang=ts&
  /* harmony default export */ var components_CAlertvue_type_script_lang_ts_ = (CAlertvue_type_script_lang_ts_); 
-// EXTERNAL MODULE: ./src/components/CAlert.vue?vue&type=style&index=0&id=0c8a34d6&lang=less&scoped=true&
-var CAlertvue_type_style_index_0_id_0c8a34d6_lang_less_scoped_true_ = __webpack_require__("4c8b");
+// EXTERNAL MODULE: ./src/components/CAlert.vue?vue&type=style&index=0&id=63c332ca&lang=less&scoped=true&
+var CAlertvue_type_style_index_0_id_63c332ca_lang_less_scoped_true_ = __webpack_require__("e1e1");
 
 // EXTERNAL MODULE: ./node_modules/vuetify/src/components/VSnackbar/VSnackbar.sass
 var VSnackbar = __webpack_require__("ca71");
@@ -23129,11 +23129,11 @@ var VSnackbar = __webpack_require__("ca71");
 
 var CAlert_component = normalizeComponent(
   components_CAlertvue_type_script_lang_ts_,
-  CAlertvue_type_template_id_0c8a34d6_scoped_true_render,
+  CAlertvue_type_template_id_63c332ca_scoped_true_render,
   staticRenderFns,
   false,
   null,
-  "0c8a34d6",
+  "63c332ca",
   null
   
 )