reactive-bulma 1.14.0 → 1.16.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +22 -17
- package/dist/cjs/index.js +65 -7
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/Input/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/TextArea/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +2 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +25 -6
- package/dist/cjs/types/types/domTypes.d.ts +1 -0
- package/dist/cjs/types/types/styleTypes.d.ts +2 -2
- package/dist/esm/index.js +64 -8
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/Input/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/TextArea/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +2 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +25 -6
- package/dist/esm/types/types/domTypes.d.ts +1 -0
- package/dist/esm/types/types/styleTypes.d.ts +2 -2
- package/dist/index.d.ts +32 -8
- package/package.json +27 -26
@@ -1,5 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType,
|
2
|
+
import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
|
3
|
+
import { inputTypes } from '../types/domTypes';
|
3
4
|
interface BasicProps {
|
4
5
|
testId?: string;
|
5
6
|
style?: React.CSSProperties;
|
@@ -20,7 +21,7 @@ export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<
|
|
20
21
|
isLoading?: boolean;
|
21
22
|
isDisabled?: boolean;
|
22
23
|
isStatic?: boolean;
|
23
|
-
size?:
|
24
|
+
size?: basicSizeType;
|
24
25
|
onClick?: () => void;
|
25
26
|
}
|
26
27
|
export interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'progress'> {
|
@@ -28,7 +29,7 @@ export interface ProgressBarProps extends BasicProps, React.ComponentPropsWithou
|
|
28
29
|
max?: number;
|
29
30
|
style?: React.CSSProperties;
|
30
31
|
color?: basicColorType;
|
31
|
-
size?:
|
32
|
+
size?: basicSizeType;
|
32
33
|
isLoading?: boolean;
|
33
34
|
}
|
34
35
|
export interface BlockProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
|
@@ -39,7 +40,7 @@ export interface TagProps extends BasicProps, React.ComponentPropsWithoutRef<'sp
|
|
39
40
|
color?: basicColorType;
|
40
41
|
isLight?: boolean;
|
41
42
|
isRounded?: boolean;
|
42
|
-
size?: Exclude<
|
43
|
+
size?: Exclude<basicSizeType, 'is-normal'>;
|
43
44
|
withDelete?: boolean;
|
44
45
|
withAddon?: boolean;
|
45
46
|
addonText?: string;
|
@@ -55,7 +56,7 @@ export interface BoxProps extends BasicProps, React.ComponentPropsWithoutRef<'se
|
|
55
56
|
}
|
56
57
|
export interface TitleSectionProps extends BasicProps, React.ComponentPropsWithoutRef<'p'> {
|
57
58
|
text: string;
|
58
|
-
size?:
|
59
|
+
size?: titleSizeType;
|
59
60
|
prop: 'title' | 'subtitle';
|
60
61
|
isSpaced?: boolean;
|
61
62
|
}
|
@@ -67,8 +68,26 @@ export interface IconProps extends BasicProps {
|
|
67
68
|
iconLabel: string;
|
68
69
|
text?: string;
|
69
70
|
color?: textColorType;
|
70
|
-
size?: Exclude<
|
71
|
+
size?: Exclude<basicSizeType, 'is-normal'>;
|
71
72
|
colorMode?: iconColorModeType;
|
72
73
|
isSpinning?: boolean;
|
73
74
|
}
|
75
|
+
export interface InputProps extends BasicProps {
|
76
|
+
type: inputTypes;
|
77
|
+
text?: string;
|
78
|
+
isDisabled?: boolean;
|
79
|
+
isReadonly?: boolean;
|
80
|
+
color?: basicColorType;
|
81
|
+
size?: basicSizeType;
|
82
|
+
isRounded?: boolean;
|
83
|
+
isHovered?: boolean;
|
84
|
+
isFocused?: boolean;
|
85
|
+
onClick?: () => void;
|
86
|
+
onChange?: () => void;
|
87
|
+
}
|
88
|
+
export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
|
89
|
+
cols?: number;
|
90
|
+
rows?: number;
|
91
|
+
isFixedSize?: boolean;
|
92
|
+
}
|
74
93
|
export {};
|
@@ -1,8 +1,8 @@
|
|
1
1
|
export type columnSizeType = 'is-three-quarters' | 'is-two-thirds' | 'is-half' | 'is-one-third' | 'is-one-quarter' | 'is-full' | 'is-four-fifths' | 'is-three-fifths' | 'is-two-fifths' | 'is-one-fifth' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8' | 'is-9' | 'is-10' | 'is-11' | 'is-12';
|
2
|
-
export type
|
2
|
+
export type titleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
|
3
3
|
export type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
|
4
4
|
export type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 'is-ghost' | 'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
|
5
5
|
export type textColorType = 'has-text-white' | 'has-text-black' | 'has-text-light' | 'has-text-dark' | 'has-text-primary' | 'has-text-link' | 'has-text-info' | 'has-text-success' | 'has-text-warning' | 'has-text-danger';
|
6
6
|
export type fixedImageSizeType = 'is-16x16' | 'is-24x24' | 'is-32x32' | 'is-48x48' | 'is-64x64' | 'is-96x96' | 'is-128x128' | 'is-square' | 'is-1by1' | 'is-5by4' | 'is-4by3' | 'is-3by2' | 'is-5by3' | 'is-16by9' | 'is-2by1' | 'is-3by1' | 'is-4by5' | 'is-3by4' | 'is-2by3' | 'is-3by5' | 'is-9by16' | 'is-1by2' | 'is-1by3';
|
7
|
-
export type
|
7
|
+
export type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
|
8
8
|
export type iconColorModeType = 'light' | 'dark';
|
package/dist/index.d.ts
CHANGED
@@ -1,13 +1,15 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
|
3
3
|
type columnSizeType = 'is-three-quarters' | 'is-two-thirds' | 'is-half' | 'is-one-third' | 'is-one-quarter' | 'is-full' | 'is-four-fifths' | 'is-three-fifths' | 'is-two-fifths' | 'is-one-fifth' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8' | 'is-9' | 'is-10' | 'is-11' | 'is-12';
|
4
|
-
type
|
4
|
+
type titleSizeType = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
|
5
5
|
type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
|
6
6
|
type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 'is-ghost' | 'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
|
7
7
|
type textColorType = 'has-text-white' | 'has-text-black' | 'has-text-light' | 'has-text-dark' | 'has-text-primary' | 'has-text-link' | 'has-text-info' | 'has-text-success' | 'has-text-warning' | 'has-text-danger';
|
8
|
-
type
|
8
|
+
type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
|
9
9
|
type iconColorModeType = 'light' | 'dark';
|
10
10
|
|
11
|
+
type inputTypes = 'text' | 'password' | 'email' | 'tel';
|
12
|
+
|
11
13
|
interface BasicProps {
|
12
14
|
testId?: string;
|
13
15
|
style?: React.CSSProperties;
|
@@ -28,7 +30,7 @@ interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<'button
|
|
28
30
|
isLoading?: boolean;
|
29
31
|
isDisabled?: boolean;
|
30
32
|
isStatic?: boolean;
|
31
|
-
size?:
|
33
|
+
size?: basicSizeType;
|
32
34
|
onClick?: () => void;
|
33
35
|
}
|
34
36
|
interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'progress'> {
|
@@ -36,7 +38,7 @@ interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'p
|
|
36
38
|
max?: number;
|
37
39
|
style?: React.CSSProperties;
|
38
40
|
color?: basicColorType;
|
39
|
-
size?:
|
41
|
+
size?: basicSizeType;
|
40
42
|
isLoading?: boolean;
|
41
43
|
}
|
42
44
|
interface BlockProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
|
@@ -47,7 +49,7 @@ interface TagProps extends BasicProps, React.ComponentPropsWithoutRef<'span'> {
|
|
47
49
|
color?: basicColorType;
|
48
50
|
isLight?: boolean;
|
49
51
|
isRounded?: boolean;
|
50
|
-
size?: Exclude<
|
52
|
+
size?: Exclude<basicSizeType, 'is-normal'>;
|
51
53
|
withDelete?: boolean;
|
52
54
|
withAddon?: boolean;
|
53
55
|
addonText?: string;
|
@@ -58,7 +60,7 @@ interface BoxProps extends BasicProps, React.ComponentPropsWithoutRef<'section'>
|
|
58
60
|
}
|
59
61
|
interface TitleSectionProps extends BasicProps, React.ComponentPropsWithoutRef<'p'> {
|
60
62
|
text: string;
|
61
|
-
size?:
|
63
|
+
size?: titleSizeType;
|
62
64
|
prop: 'title' | 'subtitle';
|
63
65
|
isSpaced?: boolean;
|
64
66
|
}
|
@@ -70,10 +72,28 @@ interface IconProps extends BasicProps {
|
|
70
72
|
iconLabel: string;
|
71
73
|
text?: string;
|
72
74
|
color?: textColorType;
|
73
|
-
size?: Exclude<
|
75
|
+
size?: Exclude<basicSizeType, 'is-normal'>;
|
74
76
|
colorMode?: iconColorModeType;
|
75
77
|
isSpinning?: boolean;
|
76
78
|
}
|
79
|
+
interface InputProps extends BasicProps {
|
80
|
+
type: inputTypes;
|
81
|
+
text?: string;
|
82
|
+
isDisabled?: boolean;
|
83
|
+
isReadonly?: boolean;
|
84
|
+
color?: basicColorType;
|
85
|
+
size?: basicSizeType;
|
86
|
+
isRounded?: boolean;
|
87
|
+
isHovered?: boolean;
|
88
|
+
isFocused?: boolean;
|
89
|
+
onClick?: () => void;
|
90
|
+
onChange?: () => void;
|
91
|
+
}
|
92
|
+
interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
|
93
|
+
cols?: number;
|
94
|
+
rows?: number;
|
95
|
+
isFixedSize?: boolean;
|
96
|
+
}
|
77
97
|
|
78
98
|
declare const Button: React.FC<ButtonProps>;
|
79
99
|
|
@@ -91,4 +111,8 @@ declare const Title: React.FC<TitleProps>;
|
|
91
111
|
|
92
112
|
declare const Icon: React.FC<IconProps>;
|
93
113
|
|
94
|
-
|
114
|
+
declare const Input: React.FC<InputProps>;
|
115
|
+
|
116
|
+
declare const TextArea: React.FC<TextAreaProps>;
|
117
|
+
|
118
|
+
export { Block, Box, Button, Column, Icon, Input, ProgressBar, Tag, TextArea, Title };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "reactive-bulma",
|
3
|
-
"version": "1.
|
3
|
+
"version": "1.16.0",
|
4
4
|
"description": "A typescript-react-based component library based on bulma",
|
5
5
|
"keywords": [
|
6
6
|
"typescript",
|
@@ -31,7 +31,8 @@
|
|
31
31
|
],
|
32
32
|
"types": "dist/index.d.ts",
|
33
33
|
"scripts": {
|
34
|
-
"start": "storybook dev",
|
34
|
+
"start": "storybook dev -p 6006",
|
35
|
+
"start:off": "npm start -- --no-open",
|
35
36
|
"test": "jest --watchAll=false --verbose",
|
36
37
|
"test:ci": "npm test -- --coverage",
|
37
38
|
"lint": "eslint src/**/*.tsx",
|
@@ -44,40 +45,40 @@
|
|
44
45
|
"semantic-release": "semantic-release"
|
45
46
|
},
|
46
47
|
"devDependencies": {
|
47
|
-
"@babel/core": "^7.
|
48
|
-
"@babel/preset-env": "^7.
|
49
|
-
"@babel/preset-react": "^7.
|
50
|
-
"@babel/preset-typescript": "^7.21.
|
48
|
+
"@babel/core": "^7.22.1",
|
49
|
+
"@babel/preset-env": "^7.22.2",
|
50
|
+
"@babel/preset-react": "^7.22.3",
|
51
|
+
"@babel/preset-typescript": "^7.21.5",
|
51
52
|
"@mdi/font": "^7.2.96",
|
52
|
-
"@rollup/plugin-commonjs": "^
|
53
|
-
"@rollup/plugin-node-resolve": "^15.0.
|
54
|
-
"@rollup/plugin-typescript": "^11.1.
|
55
|
-
"@semantic-release/changelog": "^6.0.
|
53
|
+
"@rollup/plugin-commonjs": "^25.0.0",
|
54
|
+
"@rollup/plugin-node-resolve": "^15.0.2",
|
55
|
+
"@rollup/plugin-typescript": "^11.1.1",
|
56
|
+
"@semantic-release/changelog": "^6.0.3",
|
56
57
|
"@semantic-release/commit-analyzer": "^9.0.2",
|
57
58
|
"@semantic-release/exec": "^6.0.3",
|
58
59
|
"@semantic-release/git": "^10.0.1",
|
59
|
-
"@semantic-release/github": "^8.0.
|
60
|
+
"@semantic-release/github": "^8.0.8",
|
60
61
|
"@semantic-release/npm": "^10.0.3",
|
61
62
|
"@semantic-release/release-notes-generator": "^11.0.1",
|
62
|
-
"@storybook/addon-actions": "^7.0.
|
63
|
-
"@storybook/addon-essentials": "^7.0.
|
64
|
-
"@storybook/addon-interactions": "^7.0.
|
65
|
-
"@storybook/addon-links": "^7.0.
|
66
|
-
"@storybook/addon-mdx-gfm": "^7.0.
|
67
|
-
"@storybook/cli": "^7.0.
|
68
|
-
"@storybook/react": "^7.0.
|
69
|
-
"@storybook/react-webpack5": "^7.0.
|
63
|
+
"@storybook/addon-actions": "^7.0.18",
|
64
|
+
"@storybook/addon-essentials": "^7.0.18",
|
65
|
+
"@storybook/addon-interactions": "^7.0.18",
|
66
|
+
"@storybook/addon-links": "^7.0.18",
|
67
|
+
"@storybook/addon-mdx-gfm": "^7.0.18",
|
68
|
+
"@storybook/cli": "^7.0.18",
|
69
|
+
"@storybook/react": "^7.0.18",
|
70
|
+
"@storybook/react-webpack5": "^7.0.18",
|
70
71
|
"@storybook/testing-library": "^0.1.0",
|
71
72
|
"@testing-library/jest-dom": "^5.16.5",
|
72
73
|
"@testing-library/react": "^14.0.0",
|
73
74
|
"@types/jest": "^29.5.1",
|
74
|
-
"@types/react": "^18.2.
|
75
|
-
"@typescript-eslint/eslint-plugin": "^5.59.
|
76
|
-
"@typescript-eslint/parser": "^5.59.
|
75
|
+
"@types/react": "^18.2.7",
|
76
|
+
"@typescript-eslint/eslint-plugin": "^5.59.7",
|
77
|
+
"@typescript-eslint/parser": "^5.59.7",
|
77
78
|
"babel-jest": "^29.5.0",
|
78
79
|
"babel-loader": "^9.1.2",
|
79
80
|
"bulma": "^0.9.4",
|
80
|
-
"eslint": "^8.
|
81
|
+
"eslint": "^8.41.0",
|
81
82
|
"eslint-config-prettier": "^8.8.0",
|
82
83
|
"eslint-plugin-react": "^7.32.2",
|
83
84
|
"husky": "^8.0.3",
|
@@ -88,12 +89,12 @@
|
|
88
89
|
"prettier": "^2.8.8",
|
89
90
|
"react": "^18.2.0",
|
90
91
|
"react-dom": "^18.2.0",
|
91
|
-
"rollup": "^3.
|
92
|
+
"rollup": "^3.23.0",
|
92
93
|
"rollup-plugin-dts": "^5.3.0",
|
93
94
|
"rollup-plugin-postcss": "^4.0.2",
|
94
95
|
"semantic-release": "^21.0.2",
|
95
|
-
"storybook": "^7.0.
|
96
|
-
"tslib": "^2.5.
|
96
|
+
"storybook": "^7.0.18",
|
97
|
+
"tslib": "^2.5.2",
|
97
98
|
"typescript": "^5.0.4"
|
98
99
|
},
|
99
100
|
"lint-staged": {
|