hans-ui-design-lib 0.0.48 → 0.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -3
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +11 -12
- package/dist/index.es.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,7 +24,9 @@ npm install hans-ui-design-lib
|
|
|
24
24
|
|
|
25
25
|
## 🛠️ Usage
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
### React:
|
|
28
|
+
|
|
29
|
+
If you're using React, you have to install the lib with npm (checkout the installation section of this document). In a root file of your application, define:
|
|
28
30
|
|
|
29
31
|
```tsx
|
|
30
32
|
import 'hans-ui-design-lib/style.css';
|
|
@@ -41,9 +43,51 @@ import 'hans-ui-design-lib/style.css';
|
|
|
41
43
|
Import and use the component you wish passing the props you want:
|
|
42
44
|
|
|
43
45
|
```tsx
|
|
44
|
-
import {
|
|
46
|
+
import { HansButton } from 'hans-ui-design-lib';
|
|
45
47
|
|
|
46
|
-
|
|
48
|
+
...
|
|
49
|
+
<HansButton label="Button"></HansButton>;
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Others:
|
|
53
|
+
|
|
54
|
+
If you're using other Technologies like Angular for example, you don't have to install it with npm, you just have to import the CDN links. In the root index.html of your application, define:
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<html data-theme="combination1">
|
|
58
|
+
<!-- Put the data-theme combination of your choice in the html or body tags: -->
|
|
59
|
+
<!-- (if you don't choose it, the Fallback is gona be the combination1) -->
|
|
60
|
+
...
|
|
61
|
+
<head>
|
|
62
|
+
...
|
|
63
|
+
<link
|
|
64
|
+
rel="stylesheet"
|
|
65
|
+
href="https://hans-ui-design-lib-cdn.vercel.app/hans-ui-design-lib.css"
|
|
66
|
+
/>
|
|
67
|
+
<script src="https://hans-ui-design-lib-cdn.vercel.app/hans-ui-web-components.js"></script>
|
|
68
|
+
</head>
|
|
69
|
+
<body>
|
|
70
|
+
...
|
|
71
|
+
</body>
|
|
72
|
+
</html>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
If you're using a technology like Angular, probably you're gonna have to declare CUSTOM_ELEMENTS_SCHEMA like this in your component:
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
79
|
+
|
|
80
|
+
@Component({
|
|
81
|
+
...
|
|
82
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
83
|
+
})
|
|
84
|
+
...
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
And in your component html you can just call it like this, passing the props you want:
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<hans-button label="Button"></hans-button>
|
|
47
91
|
```
|
|
48
92
|
|
|
49
93
|
## 🧑💻 Development
|
|
@@ -174,3 +218,7 @@ npm i -D react-icons
|
|
|
174
218
|
|
|
175
219
|
npm i -D react react-dom react-to-webcomponent @ungap/custom-elements
|
|
176
220
|
```
|
|
221
|
+
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
```
|
package/dist/index.cjs.js
CHANGED
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var p;function R(){if(p)return a;p=1;var i=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function o(u,e,r){var n=null;if(r!==void 0&&(n=""+r),e.key!==void 0&&(n=""+e.key),"key"in e){r={};for(var s in e)s!=="key"&&(r[s]=e[s])}else r=e;return e=r.ref,{$$typeof:i,type:u,key:n,ref:e!==void 0?e:null,props:r}}return a.Fragment=t,a.jsx=o,a.jsxs=o,a}var x;function E(){return x||(x=1,v.exports=R()),v.exports}var m=E();const f=c.memo(i=>{const{label:t="",size:o="medium",color:u="primary",variant:e="default",buttonType:r="button",customClasses:n="",disabled:s=!1,children:d,...l}=i;return m.jsx("button",{type:r,disabled:s,className:`hans-button hans-button-${o} hans-button-${u} hans-button-${e} ${n}`,...l,children:d??(t&&m.jsx("span",{children:t}))})});f.displayName="Button";const q={Fa:()=>Promise.resolve().then(()=>require("./index-B8vGj59Y.cjs")),Md:()=>Promise.resolve().then(()=>require("./index-BniI3q7_.cjs")),Bi:()=>Promise.resolve().then(()=>require("./index-CzJEuaAC.cjs")),Ai:()=>Promise.resolve().then(()=>require("./index-DpGEmQKf.cjs")),Bs:()=>Promise.resolve().then(()=>require("./index-DOM24eP1.cjs")),Io:()=>Promise.resolve().then(()=>require("./index-DqJAPiPg.cjs")),Ri:()=>Promise.resolve().then(()=>require("./index-Cg9EwHiA.cjs")),Hi:()=>Promise.resolve().then(()=>require("./index-Cd4f2LU9.cjs")),Pi:()=>Promise.resolve().then(()=>require("./index-DgzbVFqs.cjs")),Tb:()=>Promise.resolve().then(()=>require("./index-BMJKTS9q.cjs")),Lu:()=>Promise.resolve().then(()=>require("./index-CsmLabva.cjs"))},P=c.memo(i=>{const{name:t,size:o="medium",customClasses:u="",...e}=i,[r,n]=c.useState(null);return c.useEffect(()=>{let s=!0;if(!t)return;const d=t.slice(0,2),l=q[d];if(l)return(async()=>{try{const h=await l();if(!s)return;n(()=>h[t]||null)}catch(h){console.warn(`[HansUI] Error loading icon ${t}:`,h),s&&n(()=>null)}})(),()=>{s=!1}},[t]),r?m.jsx(r,{className:`hans-icon hans-icon-${o} ${u}`,...e}):m.jsx("span",{className:"hans-icon-loading"})});P.displayName="Icon";exports.
|
|
9
|
+
*/var p;function R(){if(p)return a;p=1;var i=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function o(u,e,r){var n=null;if(r!==void 0&&(n=""+r),e.key!==void 0&&(n=""+e.key),"key"in e){r={};for(var s in e)s!=="key"&&(r[s]=e[s])}else r=e;return e=r.ref,{$$typeof:i,type:u,key:n,ref:e!==void 0?e:null,props:r}}return a.Fragment=t,a.jsx=o,a.jsxs=o,a}var x;function E(){return x||(x=1,v.exports=R()),v.exports}var m=E();const f=c.memo(i=>{const{label:t="",size:o="medium",color:u="primary",variant:e="default",buttonType:r="button",customClasses:n="",disabled:s=!1,children:d,...l}=i;return m.jsx("button",{type:r,disabled:s,className:`hans-button hans-button-${o} hans-button-${u} hans-button-${e} ${n}`,...l,children:d??(t&&m.jsx("span",{children:t}))})});f.displayName="Button";const q={Fa:()=>Promise.resolve().then(()=>require("./index-B8vGj59Y.cjs")),Md:()=>Promise.resolve().then(()=>require("./index-BniI3q7_.cjs")),Bi:()=>Promise.resolve().then(()=>require("./index-CzJEuaAC.cjs")),Ai:()=>Promise.resolve().then(()=>require("./index-DpGEmQKf.cjs")),Bs:()=>Promise.resolve().then(()=>require("./index-DOM24eP1.cjs")),Io:()=>Promise.resolve().then(()=>require("./index-DqJAPiPg.cjs")),Ri:()=>Promise.resolve().then(()=>require("./index-Cg9EwHiA.cjs")),Hi:()=>Promise.resolve().then(()=>require("./index-Cd4f2LU9.cjs")),Pi:()=>Promise.resolve().then(()=>require("./index-DgzbVFqs.cjs")),Tb:()=>Promise.resolve().then(()=>require("./index-BMJKTS9q.cjs")),Lu:()=>Promise.resolve().then(()=>require("./index-CsmLabva.cjs"))},P=c.memo(i=>{const{name:t,size:o="medium",customClasses:u="",...e}=i,[r,n]=c.useState(null);return c.useEffect(()=>{let s=!0;if(!t)return;const d=t.slice(0,2),l=q[d];if(l)return(async()=>{try{const h=await l();if(!s)return;n(()=>h[t]||null)}catch(h){console.warn(`[HansUI] Error loading icon ${t}:`,h),s&&n(()=>null)}})(),()=>{s=!1}},[t]),r?m.jsx(r,{className:`hans-icon hans-icon-${o} ${u}`,...e}):m.jsx("span",{className:"hans-icon-loading"})});P.displayName="Icon";exports.DynamicIconImports=q;exports.HansButton=f;exports.Icon=P;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
import { default as default_2 } from '
|
|
2
|
-
import { default as default_3 } from '../../../node_modules/react';
|
|
1
|
+
import { default as default_2 } from 'react';
|
|
3
2
|
import { JSX } from 'react/jsx-runtime';
|
|
4
3
|
|
|
5
|
-
export declare
|
|
4
|
+
export declare type ButtonType = 'button' | 'submit' | 'reset';
|
|
5
|
+
|
|
6
|
+
declare type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
|
|
7
|
+
|
|
8
|
+
export declare const DynamicIconImports: Record<string, () => Promise<IconLibrary>>;
|
|
9
|
+
|
|
10
|
+
export declare const HansButton: default_2.MemoExoticComponent<(props: HansButtonProps) => JSX.Element>;
|
|
6
11
|
|
|
7
|
-
export declare interface
|
|
12
|
+
export declare interface HansButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
8
13
|
label?: string;
|
|
9
14
|
size?: Size;
|
|
10
15
|
color?: Color;
|
|
@@ -13,15 +18,9 @@ export declare interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButt
|
|
|
13
18
|
customClasses?: string;
|
|
14
19
|
}
|
|
15
20
|
|
|
16
|
-
export declare
|
|
17
|
-
|
|
18
|
-
declare type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
|
|
19
|
-
|
|
20
|
-
export declare const DynamicIconImports: Record<string, () => Promise<IconLibrary>>;
|
|
21
|
-
|
|
22
|
-
export declare const Icon: default_3.FC<IconProps>;
|
|
21
|
+
export declare const Icon: default_2.FC<IconProps>;
|
|
23
22
|
|
|
24
|
-
export declare type IconLibrary = Record<string,
|
|
23
|
+
export declare type IconLibrary = Record<string, default_2.ComponentType<default_2.SVGProps<SVGSVGElement>>>;
|
|
25
24
|
|
|
26
25
|
export declare interface IconProps {
|
|
27
26
|
name?: string;
|
package/dist/index.es.js
CHANGED