@amiceli/papierjs 0.0.1 → 0.2.0

package/dist/types/components.d.ts

@@ -11,6 +11,10 @@ export namespace Components {
         "dark"?: boolean;
         "type"?: AlertColor;
     }
+    interface PBadge {
+        "dark"?: boolean;
+        "type"?: BadgeColor;
+    }
     interface PButton {
         "block"?: boolean;
         "dark"?: boolean;
@@ -20,6 +24,28 @@ export namespace Components {
         "small"?: boolean;
         "type"?: ButtonColor;
     }
+    interface PDropdown {
+        "dark"?: boolean;
+        "placeholder"?: string;
+    }
+    interface PDropdownItem {
+        "dark"?: boolean;
+        "selected"?: boolean;
+        "value": string;
+    }
+    interface PInputText {
+        "block"?: boolean;
+        "dark"?: boolean;
+        "disabled"?: boolean;
+        "hasError"?: boolean;
+        "label"?: string;
+        "placeholder"?: string;
+        "required"?: boolean;
+        "value"?: string;
+    }
+    interface PLeaf {
+        "dark"?: boolean;
+    }
     interface PProgressBar {
         "dark"?: boolean;
         "striped"?: boolean;
@@ -31,6 +57,18 @@ export interface PAlertCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPAlertElement;
 }
+export interface PDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPDropdownElement;
+}
+export interface PDropdownItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPDropdownItemElement;
+}
+export interface PInputTextCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPInputTextElement;
+}
 declare global {
     interface HTMLPAlertElementEventMap {
         "close": any;
@@ -49,12 +87,75 @@ declare global {
         prototype: HTMLPAlertElement;
         new (): HTMLPAlertElement;
     };
+    interface HTMLPBadgeElement extends Components.PBadge, HTMLStencilElement {
+    }
+    var HTMLPBadgeElement: {
+        prototype: HTMLPBadgeElement;
+        new (): HTMLPBadgeElement;
+    };
     interface HTMLPButtonElement extends Components.PButton, HTMLStencilElement {
     }
     var HTMLPButtonElement: {
         prototype: HTMLPButtonElement;
         new (): HTMLPButtonElement;
     };
+    interface HTMLPDropdownElementEventMap {
+        "select": string;
+    }
+    interface HTMLPDropdownElement extends Components.PDropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPDropdownElementEventMap>(type: K, listener: (this: HTMLPDropdownElement, ev: PDropdownCustomEvent<HTMLPDropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPDropdownElementEventMap>(type: K, listener: (this: HTMLPDropdownElement, ev: PDropdownCustomEvent<HTMLPDropdownElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPDropdownElement: {
+        prototype: HTMLPDropdownElement;
+        new (): HTMLPDropdownElement;
+    };
+    interface HTMLPDropdownItemElementEventMap {
+        "change": string;
+    }
+    interface HTMLPDropdownItemElement extends Components.PDropdownItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPDropdownItemElementEventMap>(type: K, listener: (this: HTMLPDropdownItemElement, ev: PDropdownItemCustomEvent<HTMLPDropdownItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPDropdownItemElementEventMap>(type: K, listener: (this: HTMLPDropdownItemElement, ev: PDropdownItemCustomEvent<HTMLPDropdownItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPDropdownItemElement: {
+        prototype: HTMLPDropdownItemElement;
+        new (): HTMLPDropdownItemElement;
+    };
+    interface HTMLPInputTextElementEventMap {
+        "change": string;
+    }
+    interface HTMLPInputTextElement extends Components.PInputText, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPInputTextElementEventMap>(type: K, listener: (this: HTMLPInputTextElement, ev: PInputTextCustomEvent<HTMLPInputTextElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPInputTextElementEventMap>(type: K, listener: (this: HTMLPInputTextElement, ev: PInputTextCustomEvent<HTMLPInputTextElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPInputTextElement: {
+        prototype: HTMLPInputTextElement;
+        new (): HTMLPInputTextElement;
+    };
+    interface HTMLPLeafElement extends Components.PLeaf, HTMLStencilElement {
+    }
+    var HTMLPLeafElement: {
+        prototype: HTMLPLeafElement;
+        new (): HTMLPLeafElement;
+    };
     interface HTMLPProgressBarElement extends Components.PProgressBar, HTMLStencilElement {
     }
     var HTMLPProgressBarElement: {
@@ -63,7 +164,12 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "p-alert": HTMLPAlertElement;
+        "p-badge": HTMLPBadgeElement;
         "p-button": HTMLPButtonElement;
+        "p-dropdown": HTMLPDropdownElement;
+        "p-dropdown-item": HTMLPDropdownItemElement;
+        "p-input-text": HTMLPInputTextElement;
+        "p-leaf": HTMLPLeafElement;
         "p-progress-bar": HTMLPProgressBarElement;
     }
 }
@@ -74,6 +180,10 @@ declare namespace LocalJSX {
         "onClose"?: (event: PAlertCustomEvent<any>) => void;
         "type"?: AlertColor;
     }
+    interface PBadge {
+        "dark"?: boolean;
+        "type"?: BadgeColor;
+    }
     interface PButton {
         "block"?: boolean;
         "dark"?: boolean;
@@ -83,6 +193,31 @@ declare namespace LocalJSX {
         "small"?: boolean;
         "type"?: ButtonColor;
     }
+    interface PDropdown {
+        "dark"?: boolean;
+        "onSelect"?: (event: PDropdownCustomEvent<string>) => void;
+        "placeholder"?: string;
+    }
+    interface PDropdownItem {
+        "dark"?: boolean;
+        "onChange"?: (event: PDropdownItemCustomEvent<string>) => void;
+        "selected"?: boolean;
+        "value"?: string;
+    }
+    interface PInputText {
+        "block"?: boolean;
+        "dark"?: boolean;
+        "disabled"?: boolean;
+        "hasError"?: boolean;
+        "label"?: string;
+        "onChange"?: (event: PInputTextCustomEvent<string>) => void;
+        "placeholder"?: string;
+        "required"?: boolean;
+        "value"?: string;
+    }
+    interface PLeaf {
+        "dark"?: boolean;
+    }
     interface PProgressBar {
         "dark"?: boolean;
         "striped"?: boolean;
@@ -91,7 +226,12 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "p-alert": PAlert;
+        "p-badge": PBadge;
         "p-button": PButton;
+        "p-dropdown": PDropdown;
+        "p-dropdown-item": PDropdownItem;
+        "p-input-text": PInputText;
+        "p-leaf": PLeaf;
         "p-progress-bar": PProgressBar;
     }
 }
@@ -100,7 +240,12 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "p-alert": LocalJSX.PAlert & JSXBase.HTMLAttributes<HTMLPAlertElement>;
+            "p-badge": LocalJSX.PBadge & JSXBase.HTMLAttributes<HTMLPBadgeElement>;
             "p-button": LocalJSX.PButton & JSXBase.HTMLAttributes<HTMLPButtonElement>;
+            "p-dropdown": LocalJSX.PDropdown & JSXBase.HTMLAttributes<HTMLPDropdownElement>;
+            "p-dropdown-item": LocalJSX.PDropdownItem & JSXBase.HTMLAttributes<HTMLPDropdownItemElement>;
+            "p-input-text": LocalJSX.PInputText & JSXBase.HTMLAttributes<HTMLPInputTextElement>;
+            "p-leaf": LocalJSX.PLeaf & JSXBase.HTMLAttributes<HTMLPLeafElement>;
             "p-progress-bar": LocalJSX.PProgressBar & JSXBase.HTMLAttributes<HTMLPProgressBarElement>;
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amiceli/papierjs",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "Papercss web components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -57,8 +57,8 @@
     "@commitlint/config-conventional": "^19.7.1",
     "@stencil/core": "^4.7.0",
     "@stencil/sass": "^3.0.12",
-    "@storybook/addon-essentials": "^8.5.3",
-    "@storybook/addon-interactions": "^8.5.3",
+    "@storybook/addon-essentials": "^8.5.5",
+    "@storybook/addon-interactions": "^8.5.5",
     "@storybook/blocks": "^8.5.3",
     "@storybook/html": "^8.5.3",
     "@storybook/html-vite": "^8.5.3",
@@ -66,6 +66,7 @@
     "@types/jest": "^29.5.6",
     "@types/node": "^16.18.11",
     "@types/react": "^19.0.8",
+    "dotenv": "^16.4.7",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "lefthook": "^1.10.10",
@@ -75,6 +76,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "feather-icons": "^4.29.2",
     "papercss": "^1.9.2"
   }
 }

package/{README.md → readme.md}

@@ -6,22 +6,37 @@
 
 # papierjs - papercss with web components
 
-papierjs *(papier is paper in french)* provides web component built with stencil with 
+**papierjs** *(papier is paper in french)* provides web component built with stencil with 
 papercss style.
 
 papierjs will implements new components not in papercss like dropdown.
 
 Available components:
-- Button
-- Alert
-- Progress bar
-
-Component ideas :
-- [ ] dropdown
+- [X] Button
+- [X] Alert
+- [X] Progress bar
+- [X] Text input
+- [X] Badge
+- [ ] Card
+- [ ] Breadcrumb
+- [ ] Modals
+- [ ] NavBar
+- [ ] Tabs
+
+Component features :
+- [X] dropdown since `v0.1.0`
+- [X] `p-leaf` allow to use papercss style anywhere
 - [ ] notification
 - [ ] spinner
 - [ ] password
 
+## Using papercss
+
+**papierjs** uses papercss style only in shadow root.
+So you don't need to import papercss.
+
+Papercss style isn't applied on your website.
+
 ## Install
 
     npm install @amiceli/papierjs -S