@amiceli/papierjs 0.1.0 → 0.3.0

package/dist/types/components.d.ts

@@ -11,6 +11,18 @@ export namespace Components {
         "dark"?: boolean;
         "type"?: AlertColor;
     }
+    interface PBadge {
+        "dark"?: boolean;
+        "type"?: BadgeColor;
+    }
+    interface PBreadcrumb {
+        "dark"?: boolean;
+    }
+    interface PBreadcrumbItem {
+        "dark"?: boolean;
+        "first"?: boolean;
+        "link"?: string;
+    }
     interface PButton {
         "block"?: boolean;
         "dark"?: boolean;
@@ -39,6 +51,13 @@ export namespace Components {
         "required"?: boolean;
         "value"?: string;
     }
+    interface PLeaf {
+        "dark"?: boolean;
+    }
+    interface PModal {
+        "close": () => Promise<void>;
+        "open": () => Promise<void>;
+    }
     interface PProgressBar {
         "dark"?: boolean;
         "striped"?: boolean;
@@ -80,6 +99,24 @@ declare global {
         prototype: HTMLPAlertElement;
         new (): HTMLPAlertElement;
     };
+    interface HTMLPBadgeElement extends Components.PBadge, HTMLStencilElement {
+    }
+    var HTMLPBadgeElement: {
+        prototype: HTMLPBadgeElement;
+        new (): HTMLPBadgeElement;
+    };
+    interface HTMLPBreadcrumbElement extends Components.PBreadcrumb, HTMLStencilElement {
+    }
+    var HTMLPBreadcrumbElement: {
+        prototype: HTMLPBreadcrumbElement;
+        new (): HTMLPBreadcrumbElement;
+    };
+    interface HTMLPBreadcrumbItemElement extends Components.PBreadcrumbItem, HTMLStencilElement {
+    }
+    var HTMLPBreadcrumbItemElement: {
+        prototype: HTMLPBreadcrumbItemElement;
+        new (): HTMLPBreadcrumbItemElement;
+    };
     interface HTMLPButtonElement extends Components.PButton, HTMLStencilElement {
     }
     var HTMLPButtonElement: {
@@ -137,6 +174,18 @@ declare global {
         prototype: HTMLPInputTextElement;
         new (): HTMLPInputTextElement;
     };
+    interface HTMLPLeafElement extends Components.PLeaf, HTMLStencilElement {
+    }
+    var HTMLPLeafElement: {
+        prototype: HTMLPLeafElement;
+        new (): HTMLPLeafElement;
+    };
+    interface HTMLPModalElement extends Components.PModal, HTMLStencilElement {
+    }
+    var HTMLPModalElement: {
+        prototype: HTMLPModalElement;
+        new (): HTMLPModalElement;
+    };
     interface HTMLPProgressBarElement extends Components.PProgressBar, HTMLStencilElement {
     }
     var HTMLPProgressBarElement: {
@@ -145,10 +194,15 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "p-alert": HTMLPAlertElement;
+        "p-badge": HTMLPBadgeElement;
+        "p-breadcrumb": HTMLPBreadcrumbElement;
+        "p-breadcrumb-item": HTMLPBreadcrumbItemElement;
         "p-button": HTMLPButtonElement;
         "p-dropdown": HTMLPDropdownElement;
         "p-dropdown-item": HTMLPDropdownItemElement;
         "p-input-text": HTMLPInputTextElement;
+        "p-leaf": HTMLPLeafElement;
+        "p-modal": HTMLPModalElement;
         "p-progress-bar": HTMLPProgressBarElement;
     }
 }
@@ -159,6 +213,18 @@ declare namespace LocalJSX {
         "onClose"?: (event: PAlertCustomEvent<any>) => void;
         "type"?: AlertColor;
     }
+    interface PBadge {
+        "dark"?: boolean;
+        "type"?: BadgeColor;
+    }
+    interface PBreadcrumb {
+        "dark"?: boolean;
+    }
+    interface PBreadcrumbItem {
+        "dark"?: boolean;
+        "first"?: boolean;
+        "link"?: string;
+    }
     interface PButton {
         "block"?: boolean;
         "dark"?: boolean;
@@ -190,6 +256,11 @@ declare namespace LocalJSX {
         "required"?: boolean;
         "value"?: string;
     }
+    interface PLeaf {
+        "dark"?: boolean;
+    }
+    interface PModal {
+    }
     interface PProgressBar {
         "dark"?: boolean;
         "striped"?: boolean;
@@ -198,10 +269,15 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "p-alert": PAlert;
+        "p-badge": PBadge;
+        "p-breadcrumb": PBreadcrumb;
+        "p-breadcrumb-item": PBreadcrumbItem;
         "p-button": PButton;
         "p-dropdown": PDropdown;
         "p-dropdown-item": PDropdownItem;
         "p-input-text": PInputText;
+        "p-leaf": PLeaf;
+        "p-modal": PModal;
         "p-progress-bar": PProgressBar;
     }
 }
@@ -210,10 +286,15 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "p-alert": LocalJSX.PAlert & JSXBase.HTMLAttributes<HTMLPAlertElement>;
+            "p-badge": LocalJSX.PBadge & JSXBase.HTMLAttributes<HTMLPBadgeElement>;
+            "p-breadcrumb": LocalJSX.PBreadcrumb & JSXBase.HTMLAttributes<HTMLPBreadcrumbElement>;
+            "p-breadcrumb-item": LocalJSX.PBreadcrumbItem & JSXBase.HTMLAttributes<HTMLPBreadcrumbItemElement>;
             "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-modal": LocalJSX.PModal & JSXBase.HTMLAttributes<HTMLPModalElement>;
             "p-progress-bar": LocalJSX.PProgressBar & JSXBase.HTMLAttributes<HTMLPProgressBarElement>;
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amiceli/papierjs",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Papercss web components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -57,11 +57,11 @@
     "@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/blocks": "^8.5.3",
-    "@storybook/html": "^8.5.3",
-    "@storybook/html-vite": "^8.5.3",
+    "@storybook/addon-essentials": "^8.5.5",
+    "@storybook/addon-interactions": "^8.5.5",
+    "@storybook/blocks": "^8.5.5",
+    "@storybook/html": "^8.5.5",
+    "@storybook/html-vite": "^8.5.5",
     "@storybook/test": "^8.5.3",
     "@types/jest": "^29.5.6",
     "@types/node": "^16.18.11",
@@ -72,7 +72,7 @@
     "lefthook": "^1.10.10",
     "puppeteer": "^21.9.0",
     "remark-gfm": "^4.0.0",
-    "storybook": "^8.5.3"
+    "storybook": "^8.5.5"
   },
   "license": "MIT",
   "dependencies": {

package/readme.md

@@ -12,22 +12,30 @@ papercss style.
 papierjs will implements new components not in papercss like dropdown.
 
 Available components:
-- Button
-- Alert
-- Progress bar
-- Text input
+- [X] Button
+- [X] Alert
+- [X] Progress bar
+- [X] Text input
+- [X] Badge
+- [ ] Card
+- [X] Breadcrumb
+- [W] 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** use papercss style by only in shadow root. So you don't need to import papercss.
+**papierjs** uses papercss style only in shadow root.
+So you don't need to import papercss.
 
-And papercss global style isn't applied on your website.
+Papercss style isn't applied on your website.
 
 ## Install