@progressiveui/react 2.0.2 → 2.0.4

package/src/components/InlineLoading/inline-loading.js

@@ -1,135 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { settings } from '../../globals/js';
-import mixin from '../../globals/js/misc/mixin';
-import createComponent from '../../globals/js/mixins/create-component';
-import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
-import handles from '../../globals/js/mixins/handles';
-import toggleAttribute from '../../globals/js/misc/toggle-attribute';
-
-const { prefix } = settings;
-
-/** kadskjbkj */
-
-class InlineLoading extends mixin(
-  createComponent,
-  initComponentBySearch,
-  handles
-) {
-  /**
-   * Spinner indicating loading state.
-   * @extends CreateComponent
-   * @extends InitComponentBySearch
-   * @extends Handles
-   * @param {HTMLElement} element The element working as a spinner.
-   * @param {object} [options] The component options.
-   * @param {string} [options.initialState] The initial state, should be `inactive`, `active` or `finished`.
-   */
-  constructor(element, options) {
-    super(element, options);
-    // Sets the initial state
-    const initialState = this.options.initialState;
-    if (initialState) {
-      this.setState(initialState);
-    }
-  }
-
-  /**
-   * Sets active/inactive state.
-   * @param {string} state The new state, should be `inactive`, `active` or `finished`.
-   */
-  setState(state) {
-    const states = this.constructor.states;
-    const values = Object.keys(states).map((key) => states[key]);
-    if (values.indexOf(state) < 0) {
-      throw new Error(
-        `One of the following value should be given as the state: ${values.join(
-          ', '
-        )}`
-      );
-    }
-
-    const elem = this.element;
-    const {
-      selectorSpinner,
-      selectorFinished,
-      selectorTextActive,
-      selectorTextFinished,
-    } = this.options;
-    const spinner = elem.querySelector(selectorSpinner);
-    const finished = elem.querySelector(selectorFinished);
-    const textActive = elem.querySelector(selectorTextActive);
-    const textFinished = elem.querySelector(selectorTextFinished);
-
-    if (spinner) {
-      spinner.classList.toggle(
-        this.options.classLoadingStop,
-        state !== states.ACTIVE
-      );
-      toggleAttribute(spinner, 'hidden', state === states.FINISHED);
-    }
-
-    if (finished) {
-      toggleAttribute(finished, 'hidden', state !== states.FINISHED);
-    }
-
-    if (textActive) {
-      toggleAttribute(textActive, 'hidden', state !== states.ACTIVE);
-    }
-
-    if (textFinished) {
-      toggleAttribute(textFinished, 'hidden', state !== states.FINISHED);
-    }
-
-    return this;
-  }
-
-  /**
-   * The list of states.
-   * @type {object<string, string>}
-   */
-  static states /* #__PURE_CLASS_PROPERTY__ */ = {
-    INACTIVE: 'inactive',
-    ACTIVE: 'active',
-    FINISHED: 'finished',
-  };
-
-  /**
-   * The map associating DOM element and spinner instance.
-   * @member InlineLoading.components
-   * @type {WeakMap}
-   */
-  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
-
-  /**
-   * The component options.
-   * If `options` is specified in the constructor, {@linkcode InlineLoading.create .create()},
-   * or {@linkcode InlineLoading.init .init()},
-   * properties in this object are overriden for the instance being create and how {@linkcode InlineLoading.init .init()} works.
-   * @member InlineLoading.options
-   * @type {object}
-   * @property {string} selectorInit The CSS selector to find inline loading components.
-   * @property {string} selectorSpinner The CSS selector to find the spinner.
-   * @property {string} selectorFinished The CSS selector to find the "finished" icon.
-   * @property {string} selectorTextActive The CSS selector to find the text describing the active state.
-   * @property {string} selectorTextFinished The CSS selector to find the text describing the finished state.
-   * @property {string} classLoadingStop The CSS class for spinner's stopped state.
-   */
-  static get options() {
-    return {
-      selectorInit: '[data-inline-loading]',
-      selectorSpinner: '[data-inline-loading-spinner]',
-      selectorFinished: '[data-inline-loading-finished]',
-      selectorTextActive: '[data-inline-loading-text-active]',
-      selectorTextFinished: '[data-inline-loading-text-finished]',
-      classLoadingStop: `${prefix}--loading--stop`,
-    };
-  }
-}
-
-export default InlineLoading;

package/src/components/Input/Input-test.js

@@ -1,120 +0,0 @@
-import React from 'react';
-import Input from '../Input';
-import { shallow, mount } from 'enzyme';
-
-describe('Input', () => {
-    describe('Renders as expected', () => {
-        const minProps = {
-            labelText: 'labelText',
-            helperText:'helperText',
-            additional: 'additional',
-          };  
-        const wrapper = mount(
-            <Input {...minProps} className="some-class">
-            {() => <input placeholder="This can be any type of custom input" />}
-            </Input>
-        );
-
-        const shallowWrapper = shallow(
-            <Input {...minProps}>
-            {() => <input placeholder="This can be any type of custom input" />}
-            </Input>
-        );
-        it('should use the appropriate link class', () => {
-            expect(wrapper.length).toBe(1);
-        });
-        it('Renders as an <FormItem> element wrapper', () => {
-            expect(shallowWrapper.is('FormItem')).toBe(true);
-        });
-        it('should expect a helperText prop', () => {
-            expect(wrapper.prop('helperText')).toEqual('helperText');
-        });
-
-        it('should expect a labelText prop', () => {
-            expect(wrapper.prop('labelText')).toEqual('labelText');
-        });
-   
-        it('should expect a additional prop', () => {
-            expect(wrapper.prop('additional')).toEqual('additional');
-        });
-
-        it('should expect classes', () => {
-            expect(wrapper.hasClass('some-class')).toBe(true);
-        });
-
-
-        describe('inputClassWrapper', () => {
-            const inputClassWrapper = () => wrapper.find('div.wfp--input-wrapper');
-
-            it('render as expected', () => {
-                expect(inputClassWrapper().length).toBe(1);
-            })
-    
-            it('has inner div classes as expected', () => {
-                expect(inputClassWrapper().hasClass('wfp--input-wrapper')).toBe(true);
-            })
-
-        })
-
-
-        describe('error handling', () => {
-            const errorWrapper = shallow(
-                <Input invalid className="some-class">
-                {() => <input placeholder="This can be any type of custom input" />}
-                </Input>
-            );
-    
-            it('has error div classes as expected', () => {
-                expect(errorWrapper.exists('.wfp--form-requirement')).toBe(true);
-            })
-
-            it('has error message shows required text', () => {
-                expect(errorWrapper.find('span').text()).toEqual('required');
-            })
-
-            describe('invalid object message', () => {
-                const inValidObjectWrapper = shallow(
-                    <Input invalid={{message:'input field required'}} className="some-class">
-                    {() => <input placeholder="This can be any type of custom input" />}
-                    </Input>
-                );
-
-                it('has error message shows passed message', () => {
-                    expect(inValidObjectWrapper.find('span').text()).toEqual('input field required');
-                })
-            })
-
-            describe('invalid message as string', () => {
-                const inValidStringWrapper = shallow(
-                    <Input invalid invalidText='invalid input' className="some-class">
-                    {() => <input placeholder="This can be any type of custom input" />}
-                    </Input>
-                );
-
-                it('has error message shows passed message', () => {
-                    expect(inValidStringWrapper.find('span').text()).toEqual('invalid input');
-                })
-            })
-        })
-
-        // describe('onChange handling', () => {
-        //     const testState = { value: '' }
-        //     const onChangeWrapper = shallow(
-        //         <Input className="some-class" onChange={(e) => {
-        //             testState.value = e.target.value;
-        //           }}>
-        //         {() => <input placeholder="This can be any type of custom input" />}
-        //         </Input>
-        //     );
-
-        //     it('enable onChange if input is not disabled or readOnly', () => {
-        //         onChangeWrapper.find('input').simulate('change', { target: { value: "50" } });
-        //         expect(testState.value).toEqual("50");
-        //     })
-        // })
-
-    });
-
-    
-    
-});

package/src/components/Input/Input.stories.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import markdown from "./README.mdx";
-import Input from ".";
-
-export default {
-  title: "Components/Forms/Input",
-  component: Input,
-  parameters: {
-    componentSubtitle: "Component",
-    status: "experimental",
-    mdx: markdown,
-  },
-};
-
-export const InputDefault: Story = {
-  render: (args) => (
-    <Input {...args}>
-      <input placeholder="This can be any type of custom input" />
-    </Input>
-  ),
-  args: {
-    name: "inputname",
-    helperText: "Optional helperText",
-    labelText: "The labelText",
-  },
-};
-
-const inputsourcecode = `
-import { Input  } from "@progressiveui/react";
-
-<Input
-  helperText="Optional helperText"
-  labelText="The labelText"
-  name="inputname"
->
-{() => <input placeholder="This can be any type of custom input" />}
-</Input>
-`;
-
-InputDefault.story = {
-  parameters: {
-    docs: {
-      source: {
-        code: inputsourcecode,
-      },
-    },
-  },
-};

package/src/components/Input/Input.tsx

@@ -1,346 +0,0 @@
-import * as React from "react";
-import { ComponentType } from "react";
-import type { PropsWithChildren } from "react";
-import classNames from "classnames";
-import useSettings from "../../hooks/useSettings";
-import FormItem from "../FormItem/FormItem";
-import { WarningSolid } from "@progressiveui/icons-react";
-import * as HookForm from "react-hook-form";
-
-/**
-   * Optionally provide the default value of the input @design
- 
-  defaultValue?: string | number;  */
-
-export interface InputProps {
-  /**
-   * Provide text that is used alongside the control label for additional help
-   */
-  helperText?: React.ReactNode;
-  /**
-   * Provide the text that will be read by a screen reader when visiting this
-   * control @design
-   */
-  labelText?: React.ReactNode;
-
-  /**
-   * Provide a custom className that is applied directly to the underlying
-   * <textarea> node
-   */
-  formItemClassName?: string;
-  /**
-   * Provide a custom className that is applied directly to the underlying
-   * <input> or <textarea> node
-   */
-  inputWrapperClassName?: string;
-  /**
-   * Specify whether you want the underlying label to be visually hidden
-   */
-  hideLabel?: boolean;
-  /**
-   * Specify whether the control is currently invalid.
-   * Either a boolean in combination with `invalidText` or an `object`( eg. { message: "Message", …otherErrorProperties }) can be passed.
-   */
-  invalid?: boolean | HookForm.FieldError | any;
-  /**
-   * Provide the text that is displayed when the control is in an invalid state @design
-   */
-  invalidText?: string | React.ReactNode | any;
-  /**
-   * Provide the content that will be shown in addition to the label
-   * (e.g. units, currency, etc.)
-   * This content will be placed after the label @design
-   */
-  additional?: React.ReactNode;
-
-  light?: boolean;
-  /**
-   * Specify the placeholder attribute for the input @design
-   */
-  placeholder?: string;
-  /**
-   * Provide a unique identifier for the control
-   */
-  id?: string;
-  /**
-   * Provide a name for the control
-   */
-  name?: string;
-  /**
-   * Specify if the control is required @design
-   * (sets aria-invalid as well)
-   */
-  required?: boolean;
-  /**
-   * Specify if the control is disabled @design
-   * (sets aria-disabled as well)
-   */
-  disabled?: boolean;
-  /**
-   * If the input is read-only, the user cannot change its value but focus
-   * and tabIndex are still applied @design
-   * (sets aria-readonly as well)
-   */
-  readOnly?: boolean;
-  /**
-   * Renders the input as inline element for horizontal forms
-   */
-  inline?: boolean;
-  /**
-   * Additional helper in front of the input, e.g. a currency symbol @design
-   * (sets aria-describedby as well)
-   */
-  addonBefore?: string | React.ReactNode;
-  /**
-   * Additional helper behind the input, e.g. a currency symbol @design
-   * (sets aria-describedby as well)
-   */
-  addonAfter?: string | React.ReactNode;
-  /**
-   * Supports replacement components
-   */
-  components?: {
-    AddonBefore?: ComponentType<InputPropsForReplacementComponents>;
-    AddonAfter?: ComponentType<InputPropsForReplacementComponents>;
-    Label?: ComponentType<InputPropsForReplacementComponents>;
-    HelperText?: ComponentType<InputPropsForReplacementComponents>;
-    InlineErrorMessage?: ComponentType<InputPropsForReplacementComponents>;
-  };
-}
-
-export interface InputPropsForReplacementComponents
-  extends InputProps,
-    React.ComponentPropsWithRef<"div"> {
-  /**
-   * The classes for the label
-   */
-  labelClasses?: string;
-  /**
-   * The the ID of the element, uses the `name` prop if no `id` is provided. Make sure it is unique on the page.
-   */
-  calculatedId?: string;
-  /**
-   * The classes for the helper element
-   */
-  helperTextClasses?: string;
-  /**
-   * The classes for the error element
-   */
-  errorClasses?: string;
-  /**
-   * The id of the error. calculatedId + '-error-msg'
-   */
-  errorId?: string;
-  /**
-   * An icon for the error element
-   */
-  errorIcon?: React.ReactNode;
-}
-
-export interface AddonBeforeProps {
-  addonBefore?: React.ReactNode;
-  prefix?: string;
-}
-
-export function AddonBefore({
-  addonBefore,
-  prefix,
-}: InputPropsForReplacementComponents) {
-  if (addonBefore) {
-    return <div className={`${prefix}--input-addon-before`}>{addonBefore}</div>;
-  }
-  return null;
-}
-
-export function AddonAfter({
-  addonAfter,
-  prefix,
-}: InputPropsForReplacementComponents) {
-  if (addonAfter) {
-    return <div className={`${prefix}--input-addon-after`}>{addonAfter}</div>;
-  }
-  return null;
-}
-
-/**
- * Shows the error message underneath the element */
-export function InlineErrorMessage({
-  errorId,
-  errorClasses,
-  invalid,
-  invalidText,
-}: InputPropsForReplacementComponents) {
-  if (invalid) {
-    const errorIcon = <WarningSolid fill="#c5192d" />;
-    return (
-      <div className={errorClasses} id={errorId}>
-        {errorIcon}{" "}
-        <span>
-          {typeof invalid === "object" && invalid.message
-            ? invalid.message
-            : typeof invalid === "string"
-            ? invalid
-            : invalidText
-            ? invalidText
-            : "required"}
-        </span>
-      </div>
-    );
-  }
-  return null;
-}
-
-/**
- * Shows a helper text under the label */
-export function Label({
-  labelClasses,
-  calculatedId,
-  labelText,
-  required,
-  hideLabel,
-}: InputPropsForReplacementComponents) {
-  if (hideLabel) return null;
-  return (
-    <label htmlFor={calculatedId} className={labelClasses}>
-      {labelText && labelText}
-      {required && "*"}
-    </label>
-  );
-}
-
-/**
- * Shows a helper text under the label */
-export function Helper({
-  helperTextClasses,
-  helperText,
-}: InputPropsForReplacementComponents) {
-  if (helperText) return <div className={helperTextClasses}>{helperText}</div>;
-  return null;
-}
-
-interface InputPropsI extends InputProps, React.ComponentPropsWithRef<"div"> {
-  /**
-   * Provide a children to the input
-   */
-  children?: React.ReactNode;
-}
-
-/**
- * Input is a wrapper for custom inputs providing the label, helperText and errors. */
-const Input: React.FC<PropsWithChildren<InputPropsI>> = ({
-  additional,
-  addonBefore,
-  addonAfter,
-  labelText,
-  children,
-  components: componentsOverride = {},
-  //className,
-  // iconDescription,
-  id,
-  className,
-
-  inputWrapperClassName,
-  //placeholder,
-  //type,
-  //onChange,
-  //onClick,
-  hideLabel,
-  name,
-  invalid,
-  invalidText,
-  helperText,
-  required,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-
-  const calculatedId = id ? id : name;
-  /* const inputProps = {
-    id: calculatedId,
-    onChange: (evt) => {
-      if (!other.disabled && !other.readOnly) {
-        onChange && onChange(evt);
-      }
-    },
-    onClick: (evt) => {
-      if (!other.disabled && !other.readOnly) {
-        onClick && onClick(evt);
-      }
-    },
-    placeholder,
-    type,
-  };*/
-
-  const errorId = calculatedId + "-error-msg";
-
-  const labelClasses = classNames(`${prefix}--label`, {
-    // [`${prefix}--input--light`]: light,
-    [`${prefix}--visually-hidden`]: hideLabel || !labelText,
-    [`${prefix}--label--disabled`]: other.disabled,
-  });
-
-  const inputWrapperClasses = classNames(
-    `${prefix}--input-wrapper`,
-    { [`${prefix}--form-item--invalid`]: invalid },
-    inputWrapperClassName
-  );
-
-  const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: other.disabled,
-  });
-
-  const errorClasses = `${prefix}--form-requirement`;
-
-  const components = {
-    AddonAfter,
-    AddonBefore,
-    Label,
-    Helper,
-    InlineErrorMessage,
-    ...componentsOverride,
-  };
-  const AddonAfterComponent =
-    components.AddonAfter as React.FC<InputPropsForReplacementComponents>;
-  const AddonBeforeComponent =
-    components.AddonBefore as React.FC<InputPropsForReplacementComponents>;
-  const LabelComponent =
-    components.Label as React.FC<InputPropsForReplacementComponents>;
-  const HelperComponent =
-    components.Helper as React.FC<InputPropsForReplacementComponents>;
-  const InlineErrorMessageComponent =
-    components.InlineErrorMessage as React.FC<InputPropsForReplacementComponents>;
-
-  const componentProps = {
-    labelText,
-    labelClasses,
-    calculatedId,
-    required,
-    helperTextClasses,
-    helperText,
-    errorClasses,
-    errorId,
-    invalid,
-    invalidText,
-    addonAfter,
-    addonBefore,
-    hideLabel,
-    prefix,
-  };
-
-  return (
-    <FormItem className={className} inline={other.inline}>
-      <LabelComponent {...componentProps} />
-      <HelperComponent {...componentProps} />
-      {additional}
-      <div className={inputWrapperClasses}>
-        <AddonBeforeComponent {...componentProps} />
-        {children}
-        <AddonAfterComponent {...componentProps} />
-      </div>
-      <InlineErrorMessageComponent {...componentProps} />
-    </FormItem>
-  );
-};
-Input.displayName = "Input";
-
-export default Input;

package/src/components/Input/README.mdx

@@ -1,46 +0,0 @@
-## Usage
-
-**NumberInput** are used to let the user enter a number. They include built-in validation to reject non-numerical entries. They provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.
-
-- Inputs with custom input elements but standardized labelText and helperText
-
-```jsx
-<Input
-    formItemClassName={classes}
-    invalid={invalid}
-    invalidText={invalid && invalid.message}
-    labelText={labelText}
-    >
-    {() => (
-        <Select
-        className="wfp--react-select-container"
-        classNamePrefix="wfp--react-select"
-        />
-    )}
-</Input>
-);
-```
-
-#### When not to use
-
-- Do not replace existing components
-
-## Related
-
-[TextInput](?path=/docs/components-forms-textinput--regular)
-
-[TextArea](?path=/docs/components-forms-textarea--regular)
-
-[Checkbox](?path=/docs/components-forms-checkbox--regular)
-
-[RadioButton](?path=/docs/components-forms-radiobutton--regular)
-
-[Search](?path=/docs/components-forms-search--regular)
-
-[NumberInput](?path=/docs/components-forms-numberinput--regular)
-
-[InputGroup](?path=/docs/components-forms-inputgroup--regular)
-
-```
-
-```

package/src/components/Input/index.tsx

@@ -1,13 +0,0 @@
-export {
-  default,
-  AddonBefore,
-  AddonAfter,
-  Label,
-  Helper,
-  InlineErrorMessage,
-  // TODO: Check how to make the Types avaliable InputProps,
-} from "./Input";
-
-export type { InputProps } from "./Input";
-
-export { useInput } from "./useInput";