reactive-bulma 1.6.0 → 1.8.0

package/dist/cjs/types/components/atoms/ProgressBar/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProgressBarProps } from '../../../interfaces/atomProps';
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/cjs/types/components/atoms/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Button } from './Button';
 export { default as Column } from './Column';
+export { default as ProgressBar } from './ProgressBar';

package/dist/cjs/types/functions/persers.d.ts

@@ -0,0 +1 @@
+export declare const parseClasses: (_classes: Array<string | null>) => string;

package/dist/cjs/types/functions/tests/parsers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/interfaces/atomProps.d.ts

@@ -1,10 +1,29 @@
 /// <reference types="react" />
-import { columnOffsetType, columnSizeType } from '../types/styleTypes';
-export interface ButtonProps {
-    text?: string;
-}
+import { basicColorType, columnOffsetType, columnSizeType, sizeType } from '../types/styleTypes';
 export interface ColumnProps extends React.ComponentPropsWithoutRef<'section'> {
     size?: columnSizeType;
     offset?: columnOffsetType;
     isNarrow?: boolean;
 }
+export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+    text?: string;
+    style?: React.CSSProperties;
+    color?: basicColorType;
+    isLightColor?: boolean;
+    isInvertedColor?: boolean;
+    isOutlined?: boolean;
+    isRounded?: boolean;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isStatic?: boolean;
+    size?: sizeType;
+    onClick?: () => void;
+}
+export interface ProgressBarProps extends React.ComponentPropsWithoutRef<'progress'> {
+    value?: number;
+    max?: number;
+    style?: React.CSSProperties;
+    color?: basicColorType;
+    size?: sizeType;
+    isLoading?: boolean;
+}

package/dist/cjs/types/types/domTypes.d.ts

@@ -0,0 +1 @@
+export type buttonType = 'submit' | 'reset' | 'button';

package/dist/cjs/types/types/styleTypes.d.ts

@@ -1,2 +1,4 @@
 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';
 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';
+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';
+export type sizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';

package/dist/esm/index.js

@@ -2838,14 +2838,38 @@ function requireReact_development () {
 
 var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
 
-const Button = ({ text = '' }) => (React.createElement("button", { "data-testid": 'test-button', className: 'button' }, text));
+const parseClasses = (_classes) => _classes.filter(_class => _class).join(' ');
+
+const Button = ({ text = null, type = 'button', style = null, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isDisabled = false, isStatic = false, size = null, onClick = null }) => {
+    const buttonClasses = parseClasses([
+        'button',
+        color,
+        isLightColor ? 'is-light' : null,
+        isInvertedColor ? 'is-inverted' : null,
+        isOutlined ? 'is-outlined' : null,
+        isRounded ? 'is-rounded' : null,
+        isLoading ? 'is-loading' : null,
+        isStatic ? 'is-static' : null,
+        size
+    ]);
+    return (React.createElement("button", { "data-testid": 'test-button', type: type, className: buttonClasses, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
+};
 
 const Column = ({ size = null, offset = null, isNarrow = false, children = null }) => {
-    const classes = ['column', size, offset, isNarrow ? 'is-narrow' : null]
-        .filter(_class => _class)
-        .join(' ');
+    const classes = parseClasses([
+        'column',
+        size,
+        offset,
+        isNarrow ? 'is-narrow' : null
+    ]);
     return (React.createElement("section", { "data-testid": 'test-column', className: classes }, children));
 };
 
-export { Button, Column };
+const ProgressBar = ({ value = 0, max = 100, style = null, color = 'is-primary', size = null, isLoading = false }) => {
+    const progressClasses = parseClasses(['progress', color, size]);
+    const fixedValue = value > max || value < 0 ? 0 : value;
+    return (React.createElement("progress", { "data-testid": 'test-progress-bar', className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
+};
+
+export { Button, Column, ProgressBar };
 //# sourceMappingURL=index.js.map