reactive-bulma 1.18.0 → 1.19.0

package/README.md

@@ -16,6 +16,7 @@ Component library based on React, Bulma, Typescript and Rollup
 ## Table of contents
 
 - [Status](#status)
+- [Purpose](#purpose)
 - [Dependencies](#dependencies)
 - [Quick start](#quick-start)
 - [Folder structure](#folder-structure)
@@ -27,6 +28,9 @@ Component library based on React, Bulma, Typescript and Rollup
 - [Credit](#credit)
 - [License](#license)
 
+## Purpose
+After studying [a Udemy course about Typescript](https://github.com/NicolasOmar/typescript-practice), I wanted to start a new project to practice my new knowledge in a meaningful tool. Therefore, I started this project to understand how to create a component library and investigate the best ways to maintain and nourish it as any professional-level alternatives.
+
 ## Status
 
 ![Npm Version][badge-npm-version]

package/dist/cjs/index.js

@@ -3065,11 +3065,46 @@ const Select = ({ testId = null, showOptions = 1, options = [], isMultiple = fal
         React.createElement("select", { multiple: isMultiple, size: showOptions, "data-testid": selectTestId }, options.map(({ id, name, selected }, i) => (React.createElement("option", { "data-testid": `${selectTestId}-option-${i}`, key: id.toString(), selected: selected !== null && selected !== void 0 ? selected : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, name))))));
 };
 
+const File = ({ testId = null, fileName = null, uploadIcon = { iconLabel: 'upload' }, uploadText = 'Choose a file…', style = null, buttonOnRight = false, isFullWidth = false, isBoxed = false, color = null, size = null, onClick = null }) => {
+    const fileClasses = parseClasses([
+        'file',
+        fileName ? 'has-name' : null,
+        buttonOnRight ? 'is-right' : null,
+        isFullWidth ? 'is-fullwidth' : null,
+        isBoxed ? 'is-boxed' : null,
+        color,
+        size
+    ]);
+    const fileTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'file',
+        parsedClasses: fileClasses,
+        rules: [
+            {
+                usedRegExp: /has/gm,
+                regExpReplacer: '-has'
+            },
+            {
+                usedRegExp: /is|file/gm,
+                regExpReplacer: ''
+            }
+        ]
+    });
+    const fileInputTestId = `${fileTestId}-input`;
+    return (React.createElement("section", { "data-testid": fileTestId, className: fileClasses, style: style !== null && style !== void 0 ? style : undefined },
+        React.createElement("label", { className: 'file-label' },
+            React.createElement("input", { "data-testid": fileInputTestId, className: 'file-input', type: 'file', name: 'resume', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }),
+            React.createElement("span", { className: 'file-cta' },
+                uploadIcon ? React.createElement(Icon, Object.assign({}, uploadIcon)) : null,
+                React.createElement("span", { className: 'file-label' }, uploadText)),
+            fileName ? React.createElement("span", { className: 'file-name' }, fileName) : null)));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.Button = Button;
 exports.Column = Column;
 exports.Delete = Delete;
+exports.File = File;
 exports.Icon = Icon;
 exports.Input = Input;
 exports.ProgressBar = ProgressBar;