reactive-bulma 1.14.0 → 1.16.0
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 +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": {
|