@paperless/core 0.0.3-alpha.4 → 0.1.0-alpha.2

package/dist/collection/components/{button → atoms/button}/button.component.js

@@ -1,14 +1,15 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h, Host, Prop } from '@stencil/core';
 export class Button {
   constructor() {
     /**
-     * The name
+     * The variant of the button
      */
     this.variant = 'primary';
   }
   render() {
-    return (h("button", { class: `variant-${this.variant}` },
-      h("slot", null)));
+    return (h(Host, null,
+      h("button", { class: `variant-${this.variant}` },
+        h("slot", null))));
   }
   static get is() { return "p-button"; }
   static get encapsulation() { return "shadow"; }
@@ -31,7 +32,7 @@ export class Button {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The name"
+        "text": "The variant of the button"
       },
       "attribute": "variant",
       "reflect": false,

package/dist/collection/components/atoms/icon/icon.component.js

@@ -0,0 +1,112 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import icons from '../../../utils/icons';
+export class Icon {
+  constructor() {
+    /**
+     * The icon the be displayed
+     */
+    this.variant = null;
+    /**
+     * The size of the icon, using tailwind sizes
+     */
+    this.size = 'auto';
+    /**
+     * Wether to rotate the icon x degrees
+     */
+    this.rotate = null;
+    /**
+     * Wether to flip the icon horizontally or vertically
+     */
+    this.flip = null;
+  }
+  render() {
+    const icon = icons[this.variant];
+    return h(Host, { class: this._getClass(), innerHTML: icon });
+  }
+  _getClass() {
+    return `p-icon inline-block text-${this.size} ${this.rotate || this.flip ? 'transform' : ''} ${this.rotate ? `${this.rotate < 0 ? '-' : ''}rotate-${this.rotate < 0 ? this.rotate * -1 : this.rotate}` : ''} ${this.flip ? `scale-${this.flip === 'horizontal' ? 'x' : 'y'}-flip` : ''}`;
+  }
+  static get is() { return "p-icon"; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconVariant",
+        "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"car\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"grid\" | \"headset\" | \"list\" | \"location\" | \"megaphone\" | \"minus\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"tachometer\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+        "references": {
+          "IconVariant": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The icon the be displayed"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the icon, using tailwind sizes"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'auto'"
+    },
+    "rotate": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to rotate the icon x degrees"
+      },
+      "attribute": "rotate",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "flip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconFlipOptions",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "IconFlipOptions": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to flip the icon horizontally or vertically"
+      },
+      "attribute": "flip",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+}

package/dist/collection/components/atoms/illustration/illustration.component.js

@@ -0,0 +1,39 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import illustrations from '../../../utils/illustrations';
+export class Illustration {
+  constructor() {
+    /**
+     * The icon the be displayed
+     */
+    this.variant = null;
+  }
+  render() {
+    const illustration = illustrations[this.variant];
+    return h(Host, { class: "p-illustration block", innerHTML: illustration });
+  }
+  static get is() { return "p-illustration"; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IllustrationVariant",
+        "resolved": "\"departments\" | \"empty-state\" | \"expenses\" | \"functions\" | \"questions\" | \"sick-leave\" | \"time-off\" | \"upgrade-to-hr\"",
+        "references": {
+          "IllustrationVariant": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The icon the be displayed"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+}

package/dist/collection/components/atoms/loader/loader.component.css

@@ -0,0 +1,26 @@
+:host .loader {
+  @apply w-[1em] h-[1em] inline-block rounded-round;
+  @apply animate-spin duration-500;
+  @apply border-solid border-2 border-indigo-light border-t-indigo !important;
+}
+:host .loader.color-storm {
+  @apply border-storm-light/40 border-t-storm !important;
+}
+:host .loader.color-white {
+  @apply border-indigo-light/40 border-t-white !important;
+}
+:host .loading-screen {
+  @apply fixed top-0 left-0 w-screen h-screen;
+  @apply flex items-center justify-center;
+  @apply bg-mystic;
+  z-index: 9999;
+}
+:host .loading-screen .content {
+  @apply max-w-xs;
+}
+:host .loading-screen .content .loader-wrapper {
+  @apply w-full flex justify-center;
+}
+:host .loading-screen .content .loader-wrapper .loader {
+  @apply text-4xl;
+}

package/dist/collection/components/atoms/loader/loader.component.js

@@ -0,0 +1,153 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class Loader {
+  constructor() {
+    /**
+     * Wether to show or hide the loader
+     */
+    this.show = true;
+    /**
+     * Variant of loader
+     */
+    this.variant = 'inline';
+    /**
+     * Color of the loader
+     */
+    this.color = 'indigo';
+    this._show = this.show;
+    this._loader = (h("div", { class: `loader color-${this.color}` }));
+  }
+  componentWillRender() {
+    this._checkShow();
+  }
+  componentShouldUpdate() {
+    this._checkShow();
+  }
+  render() {
+    if (!this._show) {
+      return;
+    }
+    if (this.variant === 'full-screen') {
+      return (h(Host, { class: "p-loader" },
+        h("div", { class: "loading-screen" },
+          h("div", { class: "content" },
+            h("slot", null),
+            h("div", { class: "loader-wrapper" }, this._loader)))));
+    }
+    return h(Host, { class: `p-loader ${this.variant === 'full-width' && 'w-100 d-block flex justify-center text-4xl'}` }, this._loader);
+  }
+  _checkShow() {
+    var _a;
+    if (this._showSubscriber) {
+      this._showSubscriber.unsubscribe();
+      this._showSubscriber = null;
+    }
+    if (typeof this.show !== 'boolean') {
+      this._showSubscriber = (_a = this.show) === null || _a === void 0 ? void 0 : _a.subscribe(show => (this._show = show));
+      return;
+    }
+    this._show = this.show;
+  }
+  static get is() { return "p-loader"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["loader.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["loader.component.css"]
+  }; }
+  static get properties() { return {
+    "show": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean | Observable<boolean>",
+        "resolved": "Observable<boolean> | boolean",
+        "references": {
+          "Observable": {
+            "location": "import",
+            "path": "rxjs"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show or hide the loader"
+      },
+      "attribute": "show",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'inline' | 'full-width' | 'full-screen' | 'modal'",
+        "resolved": "\"full-screen\" | \"full-width\" | \"inline\" | \"modal\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variant of loader"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'inline'"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'indigo' | 'white' | 'storm'",
+        "resolved": "\"indigo\" | \"storm\" | \"white\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Color of the loader"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'indigo'"
+    },
+    "modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "!NOT IMPLEMENTED! Modal title for modal variant"
+      },
+      "attribute": "modal-title",
+      "reflect": false
+    },
+    "modalDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "!NOT IMPLEMENTED! Modal description for modal variant"
+      },
+      "attribute": "modal-description",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/atoms/tooltip/tooltip.component.css

@@ -0,0 +1,34 @@
+:host {
+  @apply cursor-pointer;
+}
+:host .tooltip {
+  @apply bg-storm hidden text-xs font-medium text-white py-1 px-3 rounded drop-shadow-1;
+  max-width: 14.5rem;
+}
+:host .tooltip[data-show] {
+  @apply block;
+}
+:host .tooltip .arrow,
+:host .tooltip .arrow::before {
+  background: inherit;
+  @apply absolute w-2 h-2;
+}
+:host .tooltip .arrow {
+  visibility: hidden;
+}
+:host .tooltip .arrow::before {
+  @apply visible transform rotate-45;
+  content: "";
+}
+:host .tooltip[data-popper-placement^=top] > .arrow {
+  @apply -bottom-1;
+}
+:host .tooltip[data-popper-placement^=bottom] > .arrow {
+  @apply -top-1;
+}
+:host .tooltip[data-popper-placement^=left] > .arrow {
+  @apply -right-1;
+}
+:host .tooltip[data-popper-placement^=right] > .arrow {
+  @apply -left-1;
+}

package/dist/collection/components/atoms/tooltip/tooltip.component.js

@@ -0,0 +1,174 @@
+import { createPopper } from '@popperjs/core';
+import { Component, Element, h, Host, Listen, Prop } from '@stencil/core';
+export class Tooltip {
+  constructor() {
+    /**
+     * The content of the tooltip
+     */
+    this.content = null;
+    /**
+     * The content of the tooltip
+     */
+    this.placement = 'top';
+    /**
+     * Wether to force show the tooltip
+     */
+    this.forceShow = false;
+    this._loaded = false;
+  }
+  componentShouldUpdate() {
+    this._setOptions();
+    if (this.forceShow) {
+      this._show();
+    }
+  }
+  render() {
+    return (h(Host, { class: "p-tooltip" },
+      h("slot", null),
+      h("div", { class: "tooltip", role: "tooltip", ref: el => this._load(el) },
+        this.content,
+        h("div", { class: "arrow", "data-popper-arrow": true }))));
+  }
+  _show() {
+    if (!this._loaded) {
+      return;
+    }
+    // Make the tooltip visible
+    this._tooltip.setAttribute('data-show', '');
+    // Enable the event listeners
+    this._popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
+    // Update its position
+    this._popper.update();
+  }
+  _hide() {
+    if (!this._loaded && !this.forceShow) {
+      return;
+    }
+    // Hide the tooltip
+    this._tooltip.removeAttribute('data-show');
+    // Disable the event listeners
+    this._popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+  }
+  _load(tooltip) {
+    this._tooltip = tooltip;
+    if (tooltip) {
+      this._popper = createPopper(this._el, tooltip);
+      this._setOptions();
+      this._loaded = true;
+      if (this.forceShow) {
+        this._show();
+      }
+    }
+  }
+  _setOptions() {
+    if (!this._popper) {
+      return;
+    }
+    this._popper.setOptions({
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    });
+  }
+  static get is() { return "p-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["tooltip.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tooltip.component.css"]
+  }; }
+  static get properties() { return {
+    "content": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The content of the tooltip"
+      },
+      "attribute": "content",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Placement",
+        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "@popperjs/core"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The content of the tooltip"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'top'"
+    },
+    "forceShow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to force show the tooltip"
+      },
+      "attribute": "force-show",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "_el"; }
+  static get listeners() { return [{
+      "name": "mouseenter",
+      "method": "_show",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "focus",
+      "method": "_show",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "mouseleave",
+      "method": "_hide",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "blur",
+      "method": "_hide",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/tailwind/border-radius.js

@@ -1,6 +1,7 @@
 module.exports = {
   large: '0.375rem',
   DEFAULT: '0.25rem',
+  medium: '0.25rem',
   small: '0.125rem',
   none: 0,
   round: '100%',

package/dist/collection/tailwind/grid.js

@@ -0,0 +1,6 @@
+module.exports = {
+  13: 'repeat(13, minmax(0, 1fr))',
+  14: 'repeat(14, minmax(0, 1fr))',
+  15: 'repeat(15, minmax(0, 1fr))',
+  16: 'repeat(16, minmax(0, 1fr))',
+};

package/dist/collection/tailwind/rotate.js

@@ -0,0 +1,8 @@
+const rotateNumbers = {};
+
+for (let i = 1; i < 360; i++) {
+  rotateNumbers[`${i}`] = `${i}deg`;
+  rotateNumbers[`-${i}`] = `-${i}deg`;
+}
+
+module.exports = rotateNumbers;

package/dist/collection/tailwind/scale.js

@@ -0,0 +1,3 @@
+module.exports = {
+  flip: '-1',
+};

package/dist/collection/tailwind.config.js

@@ -1,13 +1,22 @@
 const colors = require('./tailwind/colors');
 const shadows = require('./tailwind/shadows');
 const borderRadius = require('./tailwind/border-radius');
+const grid = require('./tailwind/grid');
+const scale = require('./tailwind/scale');
+const rotate = require('./tailwind/rotate');
 
 module.exports = {
+  important: true,
   theme: {
     colors,
     boxShadow: shadows,
     dropShadow: shadows,
     borderRadius,
+    extend: {
+      grid,
+      scale,
+      rotate,
+    },
   },
   variants: {},
   plugins: [require('@tailwindcss/aspect-ratio')],