@geneui/components 2.11.1

package/README.md

@@ -0,0 +1,90 @@
+# Gene UI components
+
+> The design system to democratize a UI unification process of BI tools.
+
+[![NPM registry](https://img.shields.io/npm/v/@geneui/components?style=for-the-badge&color=red)](https://www.npmjs.com/package/@geneui/components)
+[![License](https://img.shields.io/badge/license-mit-green.svg?style=for-the-badge)](https://github.com/softconstruct/gene-ui-components/blob/main/LICENSE)
+
+## Table of Contents
+
+-   [Installation](#-installation)
+-   [Usage](#-usage)
+    -   [Importing Components](#importing-components)
+    -   [Example](#example)
+-   [Documentation](#-documentation)
+    -   [API Reference](#api-reference)
+-   [Contributing](#-contributing)
+-   [Changelog](#-changelog)
+-   [License](#%EF%B8%8F-license)
+
+## ⚙️ Installation
+
+You can install Gene UI components using npm or yarn:
+
+```bash
+# Yarn
+yarn add @geneui/components
+
+# NPM
+npm install --save @geneui/components
+```
+
+## 👀 Usage
+
+### Importing Components
+
+To use a component in your project, first you need to import the provider in your main component e.g. in the App.js file
+
+```js
+import GeneUIProvider from '@geneui/components/GeneUIProvider';
+```
+
+Then you need to wrap your main component with provider
+
+```js
+<GeneUIProvider>
+    <App />
+</GeneUIProvider>
+```
+
+### Example
+
+Now you can start use any components available in the package
+
+```js
+import { Button } from '@geneui/components';
+
+function App() {
+    return (
+        <div>
+            <Button>Do action</Button>
+        </div>
+    );
+}
+```
+
+## 📝 Documentation
+
+Explore in-depth documentation to make the most out of Gene UI components.
+
+### API Reference
+
+Visit our [API Reference](https://geneui.softconstruct.com/) for detailed information on each component, including props
+and usage examples.
+
+## 👍 Contributing
+
+We welcome contributions from the community! Here's how you can get involved:
+
+> 👉 See the [contributing docs](https://github.com/softconstruct/gene-ui-components/blob/main/CONTRIBUTING.md) for more
+> info on code style, testing, coverage, and troubleshooting.
+
+## 📜 Changelog
+
+Stay up-to-date with the latest changes and improvements by checking our
+[Changelog](https://github.com/softconstruct/gene-ui-components/blob/main/CHANGELOG.md).
+
+## ⚖️ License
+
+The Gene UI design system is licensed under the
+[MIT Licensed](https://github.com/softconstruct/gene-ui-components/blob/main/LICENSE)

package/Radio.js

@@ -0,0 +1,152 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef, useMemo } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { c as checkboxRadioSwitcherConfig } from './configs-91c86664.js';
+import { i as interceptValue } from './index-ac59cb10.js';
+import './globalStyling-9c60a159.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import { g as guid } from './guid-8ddf77b3.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './style-inject.es-746bb8ed.js';
+
+const Radio = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size,
+    label,
+    labelPosition,
+    labelAlignment,
+    description,
+    readOnly,
+    disabled,
+    required,
+    isValid,
+    errorText,
+    value,
+    onChange,
+    checked,
+    className,
+    type,
+    ...restProps
+  } = _ref;
+  const randomId = useMemo(guid, []);
+  const handleChange = e => {
+    onChange && onChange(interceptValue(e, value));
+  };
+  const hasError = !isValid;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('crs-holder', className, "lp-".concat(labelPosition), "la-".concat(labelAlignment), "t-".concat(type), {
+      disabled,
+      error: hasError,
+      'read-only': readOnly,
+      'input-active': checked
+    })
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('label-holder', {
+      'has-label': !!label
+    })
+  }, label && /*#__PURE__*/React__default.createElement("div", {
+    className: "crs-item crs-label"
+  }, /*#__PURE__*/React__default.createElement("label", {
+    className: "ellipsis-text",
+    htmlFor: randomId
+  }, required && "* ", label)), /*#__PURE__*/React__default.createElement("div", {
+    className: "crs-item crs-component"
+  }, /*#__PURE__*/React__default.createElement("input", _extends({
+    type: "radio",
+    onChange: handleChange,
+    ref: ref,
+    id: randomId,
+    checked: checked
+  }, restProps)), /*#__PURE__*/React__default.createElement("label", {
+    className: classnames('radio', 'cr-element', "s-".concat(size), {
+      active: checked,
+      'error-color': !checked && !errorText && hasError
+    }),
+    htmlFor: randomId
+  }))), hasError && errorText && /*#__PURE__*/React__default.createElement("div", {
+    className: "information-message color-danger"
+  }, errorText), description && type !== 'tab' && /*#__PURE__*/React__default.createElement("div", {
+    className: "input-description"
+  }, description));
+});
+Radio.propTypes = {
+  /**
+   * Radio size
+   */
+  size: propTypesExports.oneOf(checkboxRadioSwitcherConfig.size),
+  /**
+   * A label will be added to the Radio
+   */
+  label: propTypesExports.string,
+  /**
+   * Specify the label position
+   */
+  labelPosition: propTypesExports.oneOf(checkboxRadioSwitcherConfig.labelPosition),
+  /**
+   * Specify the label alignment
+   */
+  labelAlignment: propTypesExports.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
+  /**
+   * Optional description field
+   */
+  description: propTypesExports.string,
+  /**
+   * Will make Radio readonly when set to "true"
+   */
+  readOnly: propTypesExports.bool,
+  /**
+   * Will make Radio disabled when set to "true"
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * Radio will add an extra asterix to the "label". For more info see "ValidatableRadio"(integrated Radio with "Form" organism).
+   */
+  required: propTypesExports.bool,
+  /**
+   * Control Radio validation. For more info see "ValidatableRadio"(integrated Radio with "Form" organism).
+   */
+  isValid: propTypesExports.bool,
+  /**
+   * Shows error text when "isValid" is set to "false".
+   */
+  errorText: propTypesExports.string,
+  /**
+   * Use this prop to get specified value when "onChange" is fired
+   */
+  value: propTypesExports.any,
+  /**
+   * Fires an event when Radio is clicked((event: Event) => void).
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Specifies does the Radio checked or not.
+   */
+  checked: propTypesExports.bool,
+  /**
+   * Needed for "RadioGroup" molecule
+   */
+  name: propTypesExports.string,
+  /**
+   * Type defines the appearance of the radio
+   */
+  type: propTypesExports.oneOf(['default', 'tab'])
+};
+Radio.defaultProps = {
+  size: checkboxRadioSwitcherConfig.size[0],
+  label: '',
+  labelPosition: checkboxRadioSwitcherConfig.labelPosition[0],
+  labelAlignment: checkboxRadioSwitcherConfig.labelAlignment[0],
+  description: '',
+  readOnly: false,
+  disabled: false,
+  required: false,
+  isValid: true,
+  errorText: '',
+  checked: false,
+  type: 'default'
+};
+
+export { Radio as default };

package/RadioGroup.js

@@ -0,0 +1,105 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useState, useCallback } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { c as childrenOf } from './index-ac59cb10.js';
+import Radio from './Radio.js';
+import './globalStyling-9c60a159.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './configs-91c86664.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './style-inject.es-746bb8ed.js';
+import './guid-8ddf77b3.js';
+
+function RadioGroup(props) {
+  const {
+    defaultValue,
+    name,
+    options,
+    descriptionKey,
+    disabled,
+    onChange,
+    required,
+    type,
+    ...restProps
+  } = props;
+  const [valueState, setValueState] = useState(defaultValue);
+  const isControlled = !!props.value;
+  const value = isControlled ? props.value : valueState;
+  const handleChange = useCallback(e => {
+    !isControlled && setValueState(e.target.value);
+    onChange && onChange(e);
+  }, [isControlled, onChange]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('cha-ra-group', "t-".concat(type))
+  }, options.map(option => {
+    const isOptionsString = typeof option === 'string';
+    const optionValue = isOptionsString ? option : option.value;
+    const label = isOptionsString ? option : option.label;
+    return /*#__PURE__*/React__default.createElement(Radio, _extends({
+      key: optionValue,
+      name: name,
+      label: label,
+      description: option[descriptionKey],
+      disabled: disabled || option.disabled,
+      checked: optionValue === value,
+      onChange: handleChange
+    }, restProps, {
+      value: optionValue,
+      type: type
+    }));
+  }));
+}
+RadioGroup.propTypes = {
+  /**
+   * Disabled state
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * Validation state
+   */
+  required: propTypesExports.bool,
+  /**
+   * Options/items for radio group
+   */
+  options: propTypesExports.arrayOf(propTypesExports.oneOfType([childrenOf([Radio]), propTypesExports.shape({
+    label: Radio.propTypes.label,
+    value: Radio.propTypes.value,
+    disabled: Radio.propTypes.disabled
+  })])),
+  /**
+   * Initial value.
+   */
+  defaultValue: Radio.propTypes.value,
+  /**
+   * Name of appropriate radio group
+   */
+  name: Radio.propTypes.name.isRequired,
+  /**
+   * Selected option's value
+   */
+  value: Radio.propTypes.value,
+  /**
+   * Fires an event on change((event: Event) => void)
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Type defines the appearance of the radio
+   */
+  type: propTypesExports.oneOf(['default', 'tab']),
+  /**
+   * Description definer: one of keys from your object
+   */
+  descriptionKey: propTypesExports.string
+};
+RadioGroup.defaultProps = {
+  disabled: false,
+  required: false,
+  options: [],
+  type: 'default',
+  descriptionKey: 'description'
+};
+
+export { RadioGroup as default };

package/Range.js

@@ -0,0 +1,14 @@
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-e0af0caf.js';
+import './index-6ff23041.js';
+import './rangeAndSlider-20599da4.js';
+import './useWidth-9f4647f8.js';
+import './dateValidation-67caec66.js';
+import 'react-dom';
+export { R as default } from './index-00fe8887.js';
+import './configs-91c86664.js';
+import './globalStyling-9c60a159.js';
+import './_commonjsHelpers-24198af3.js';
+import './style-inject.es-746bb8ed.js';
+import './useWindowSize-80369d76.js';