@ilo-org/react 0.0.1

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,82 @@
+import { FC, useState } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { DropdownProps } from "./Dropdown.props";
+import { Fieldset } from "../Fieldset";
+import { FormElement } from "../FormElement";
+
+const Dropdown: FC<DropdownProps> = ({
+  autocomplete,
+  callback,
+  disabled = false,
+  error,
+  helper,
+  id,
+  label,
+  name,
+  options,
+  required,
+  tooltip,
+  value,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--dropdown`;
+
+  const dropdownClasses = classNames("", {
+    [baseClass]: true,
+    [`error`]: error,
+  });
+
+  const [currentvalue, setValue] = useState(value);
+
+  /**
+   * On change, if there is a callback, call it
+   */
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setValue(e.target.value);
+
+    if (callback) {
+      callback(e);
+    }
+  };
+
+  return (
+    <Fieldset legend={false} fieldsetid={false}>
+      <FormElement
+        elemid={name as any}
+        label={label}
+        helper={helper as any}
+        error={error as any}
+        required={required as any}
+        tooltip={tooltip}
+        type={"dropdown"}
+      >
+        <div className={`${baseClass}--wrapper`}>
+          <select
+            id={id ? id : name}
+            autoComplete={autocomplete}
+            name={name}
+            required={required}
+            onChange={handleChange}
+            disabled={disabled}
+            className={dropdownClasses}
+            value={currentvalue}
+          >
+            {options &&
+              options.map((option, i) => (
+                <option
+                  disabled={option.disabled}
+                  label={option.label}
+                  value={option.value}
+                  key={`${baseClass}--option--${i}`}
+                />
+              ))}
+          </select>
+        </div>
+      </FormElement>
+    </Fieldset>
+  );
+};
+
+export default Dropdown;

package/src/components/Dropdown/index.ts

@@ -0,0 +1 @@
+export { default as Dropdown } from "./Dropdown";

package/src/components/Empty/Empty.args.ts

@@ -0,0 +1,14 @@
+import { EmptyProps } from "./Empty.props";
+
+const empty1: EmptyProps = {
+  className: "storybook",
+};
+
+/**
+ * Sample prop definitions for Empty's enumerable properties (imported in stories and test)
+ */
+const EmptyArgs = {
+  empty1,
+};
+
+export default EmptyArgs;

package/src/components/Empty/Empty.props.d.ts

@@ -0,0 +1,6 @@
+export interface EmptyProps {
+  /**
+   * Specify an optional className to be added to your empty component.
+   */
+  className?: string;
+}

package/src/components/Empty/Empty.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { EmptyProps } from "./Empty.props";
+
+const Empty: FC<EmptyProps> = ({ className }) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--empty`;
+  const emptyClasses = classNames(className, {
+    [baseClass]: true,
+  });
+
+  return <div className={emptyClasses}></div>;
+};
+
+export default Empty;

package/src/components/Empty/index.ts

@@ -0,0 +1 @@
+export { default as Empty } from "./Empty";

package/src/components/Fieldset/Fieldset.props.d.ts

@@ -0,0 +1,36 @@
+export interface FieldsetProps {
+  /**
+   * Specify the content of your Fieldset.
+   */
+  children: ReactElement<Input> | ReactElement<Select> | ReactElement<Textarea>;
+
+  /**
+   * Specify an optional className to be added to your Fieldset component.
+   */
+  className?: string;
+
+  /**
+   * The fieldset's id
+   */
+  fieldsetid: string | boolean;
+
+  /**
+   * Optional error text for the fieldset
+   */
+  grouperror?: string;
+
+  /**
+   * Optional helper text for the fieldset
+   */
+  grouphelper?: string;
+
+  /**
+   * Optional tooltip text for the fieldset
+   */
+  grouptooltip?: string;
+
+  /**
+   * The fieldset's legend
+   */
+  legend: Required<string | boolean>;
+}

package/src/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,90 @@
+import { Children, FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { FieldsetProps } from "./Fieldset.props";
+import { Tooltip } from "../Tooltip";
+
+const Fieldset: FC<FieldsetProps> = ({
+  children,
+  className,
+  fieldsetid,
+  grouperror,
+  grouphelper,
+  grouptooltip,
+  legend,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--fieldset`;
+  const fieldsetClasses = classNames(className, {
+    [baseClass]: true,
+  });
+
+  return (
+    <fieldset
+      className={fieldsetClasses}
+      id={fieldsetid ? (fieldsetid as any) : undefined}
+    >
+      {legend && (
+        <legend className={`${baseClass}--legend`}>
+          {legend}
+          {grouptooltip && (
+            <Tooltip
+              className={`${baseClass}--legend--tooltip`}
+              icon={true}
+              label={grouptooltip}
+              theme={"dark"}
+            ></Tooltip>
+          )}
+        </legend>
+      )}
+      {grouphelper && !grouperror && (
+        <span className={`${baseClass}--helper`}>{grouphelper}</span>
+      )}
+      {grouperror && (
+        <span className={`${baseClass}--error`}>{grouperror}</span>
+      )}
+      {Children.map(children, (child, i) => (
+        <>
+          {child && child.props && (
+            <div
+              key={`${baseClass}--input--${i}`}
+              className={`${baseClass}--input${
+                child.props.type ? "--" + child.props.type : ""
+              } ${child.props.error ? "error" : ""}`}
+            >
+              {child.props.label && (
+                <label
+                  className={`${baseClass}--label`}
+                  htmlFor={child.props.id}
+                >
+                  {child.props.label}
+                  {child.props.tooltip && (
+                    <Tooltip
+                      className={`${baseClass}--label--tooltip`}
+                      icon={true}
+                      label={child.props.tooltip}
+                      theme={"dark"}
+                    ></Tooltip>
+                  )}
+                </label>
+              )}
+              {child}
+              {child.props.helper && !child.props.error && (
+                <span className={`${baseClass}--helper`}>
+                  {child.props.helper}
+                </span>
+              )}
+              {child.props.error && (
+                <span className={`${baseClass}--error`}>
+                  {child.props.error}
+                </span>
+              )}
+            </div>
+          )}
+        </>
+      ))}
+    </fieldset>
+  );
+};
+
+export default Fieldset;

package/src/components/Fieldset/index.ts

@@ -0,0 +1 @@
+export { default as Fieldset } from "./Fieldset";

package/src/components/FileUpload/FileUpload.args.ts

@@ -0,0 +1,62 @@
+import { FileUploadProps } from "./FileUpload.props";
+
+const basic: FileUploadProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: false,
+  label: "File Upload Field Label",
+  multiple: false,
+  name: "fileupload",
+  placeholder: "File Upload Field",
+  required: false,
+};
+
+const hashelper: FileUploadProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: "The file upload's helper text",
+  label: "File Upload Field Label",
+  multiple: false,
+  name: "fileupload",
+  placeholder: "File Upload Field",
+  required: false,
+};
+
+const haserror: FileUploadProps = {
+  callback: "",
+  disabled: false,
+  error: "this one has an error",
+  helper: false,
+  label: "File Upload Field Label",
+  multiple: false,
+  name: "fileupload",
+  placeholder: "File Upload Field",
+  required: false,
+};
+
+const hastooltip: FileUploadProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: false,
+  label: "File Upload Field Label",
+  multiple: false,
+  name: "fileupload",
+  placeholder: "File Upload Field",
+  required: false,
+  tooltip: "here is the Tooltip",
+};
+
+/**
+ * Sample prop definitions FileUpload's enumerable properties (imported in stories and test)
+ */
+const FileUploadArgs = {
+  basic,
+  hashelper,
+  haserror,
+  hastooltip,
+};
+
+export default FileUploadArgs;

package/src/components/FileUpload/FileUpload.props.d.ts

@@ -0,0 +1,63 @@
+import { fileUploadTypes } from "../../types";
+
+export interface FileUploadProps {
+  /**
+   * The FileUpload's onChange callback.
+   */
+  callback: function;
+
+  /**
+   * Specify an optional className to be added to your FileUpload.
+   */
+  className?: string;
+
+  /**
+   * Is the FileUpload disabled?
+   */
+  disabled?: boolean;
+
+  /**
+   * Does the FileUpload have an error?
+   */
+  error?: string | false;
+
+  /**
+   * The FileUpload's helper text
+   */
+  helper: string | false;
+
+  /**
+   * The FileUpload's id attribute
+   */
+  id?: string;
+
+  /**
+   * Does this FileUpload have a label?
+   */
+  label: string;
+
+  /**
+   * Should the FileUpload allow multiple uploads?
+   */
+  multiple?: boolean;
+
+  /**
+   * The FileUpload's name attribute
+   */
+  name?: Required<string>;
+
+  /**
+   * Specify an optional className to be added to your FileUpload component.
+   */
+  placeholder?: string;
+
+  /**
+   * Specify whether this FileUpload is required
+   */
+  required?: boolean;
+
+  /**
+   * Does this FileUpload have a tooltip?
+   */
+  tooltip?: string;
+}

package/src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,82 @@
+import { FC, useState } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { FileUploadProps } from "./FileUpload.props";
+import { Fieldset } from "../Fieldset";
+import { FormElement } from "../FormElement";
+
+const FileUpload: FC<FileUploadProps> = ({
+  callback,
+  disabled = false,
+  error,
+  helper,
+  id,
+  label,
+  multiple,
+  name,
+  placeholder,
+  required,
+  tooltip,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--file-upload`;
+  const FileUploadClasses = classNames("", {
+    [baseClass]: true,
+    [`error`]: error,
+  });
+
+  const [uploadfiles, setUploadFiles] = useState([]);
+
+  /**
+   * On change, add file to listed files, if there is a callback, call it
+   */
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    setUploadFiles(files as any);
+
+    if (callback) {
+      callback(e);
+    }
+  };
+
+  return (
+    <Fieldset className={"file-upload"} legend={false} fieldsetid={false}>
+      <FormElement
+        elemid={name as any}
+        label={label}
+        helper={helper as any}
+        error={error as any}
+        required={required as any}
+        tooltip={tooltip}
+        type={"file"}
+      >
+        <input
+          id={id ? id : name}
+          name={name}
+          onChange={handleChange}
+          disabled={disabled}
+          multiple={multiple}
+          placeholder={placeholder}
+          required={required as any}
+          type={"file"}
+          className={FileUploadClasses}
+          data-label={placeholder}
+        />
+      </FormElement>
+      {uploadfiles.length > 0 && (
+        <ul className={`${baseClass}--list`}>
+          {[...uploadfiles].map((file: any, i: any) => (
+            <li
+              className={`${baseClass}--list-item`}
+              key={`${baseClass}--list-item-${i}`}
+            >
+              {file.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </Fieldset>
+  );
+};
+
+export default FileUpload;

package/src/components/FileUpload/index.ts

@@ -0,0 +1 @@
+export { default as FileUpload } from "./FileUpload";