@ilo-org/react 0.0.1

package/src/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,32 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { ContextMenuProps } from "./ContextMenu.props";
+
+const ContextMenu: FC<ContextMenuProps> = ({ className, links }) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--context-menu`;
+  const contextMenuClasses = classNames(className, {
+    [baseClass]: true,
+  });
+
+  return (
+    <ul className={contextMenuClasses}>
+      {links &&
+        links.map((link, i) => (
+          <li
+            className={`${baseClass}--item ${
+              link.endsection ? "endsection" : ""
+            }`}
+            key={`${baseClass}--item-${i}`}
+          >
+            <a href={link.url} className={`${baseClass}--link`}>
+              <span className={`${baseClass}--label`}>{link.label}</span>
+            </a>
+          </li>
+        ))}
+    </ul>
+  );
+};
+
+export default ContextMenu;

package/src/components/ContextMenu/index.ts

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

package/src/components/Credit/Credit.args.ts

@@ -0,0 +1,14 @@
+import { CreditProps } from "./Credit.props";
+
+const credit: CreditProps = {
+  credit: "Copyright © 2022 Firstname Lastname",
+};
+
+/**
+ * Sample prop definitions for Credit's enumerable properties (imported in stories and test)
+ */
+const CreditArgs = {
+  credit,
+};
+
+export default CreditArgs;

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

@@ -0,0 +1,11 @@
+export interface CreditProps {
+  /**
+   * Specify an optional className to be added to your empty component.
+   */
+  className?: string;
+
+  /**
+   * Specify the credit text
+   */
+  credit?: string;
+}

package/src/components/Credit/Credit.tsx

@@ -0,0 +1,41 @@
+import { FC, useState } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { CreditProps } from "./Credit.props";
+
+const Credit: FC<CreditProps> = ({ className, credit }) => {
+  const [showcredit, showCredit] = useState(false);
+
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--credit`;
+  const creditClasses = classNames(className, {
+    [baseClass]: true,
+    ["show"]: showcredit,
+  });
+
+  /**
+   * Show credit tooltip
+   */
+  const showCreditTip = () => {
+    showCredit(true);
+  };
+
+  /**
+   * Hide credit tooltip
+   */
+  const hideCreditTip = () => {
+    showCredit(false);
+  };
+
+  return (
+    <span
+      className={creditClasses}
+      onMouseEnter={showCreditTip}
+      onMouseLeave={hideCreditTip}
+    >
+      <span className={`${baseClass}--label`}>{credit}</span>
+    </span>
+  );
+};
+
+export default Credit;

package/src/components/Credit/index.ts

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

package/src/components/DatePicker/DatePicker.args.ts

@@ -0,0 +1,82 @@
+import { DatePickerProps } from "./DatePicker.props";
+
+const basic: DatePickerProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: false,
+  label: "Date Picker Field Label",
+  name: "datepicker",
+  placeholder: "MM/DD/YYYY",
+  required: false,
+};
+
+const hashelper: DatePickerProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: "here is helper text",
+  label: "Date Picker Field Label",
+  name: "datepicker",
+  placeholder: "MM/DD/YYYY",
+  required: false,
+};
+
+const haserror: DatePickerProps = {
+  callback: "",
+  disabled: false,
+  error: "this one has an error",
+  helper: false,
+  label: "Date Picker Field Label",
+  name: "datepicker",
+  placeholder: "MM/DD/YYYY",
+  required: false,
+};
+
+const hastooltip: DatePickerProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: false,
+  label: "Date Picker Field Label",
+  name: "datepicker",
+  placeholder: "MM/DD/YYYY",
+  required: false,
+  tooltip: "This is the tooltip",
+};
+
+const hasrange: DatePickerProps = {
+  callback: "",
+  disabled: false,
+  enddata: {
+    callback: "",
+    disabled: false,
+    error: false,
+    helper: "this is an end date range",
+    label: "Date Picker End Field Label",
+    name: "datepickerend",
+    placeholder: "MM/DD/YYYY",
+    range: false,
+    required: false,
+  },
+  error: false,
+  helper: false,
+  label: "Date Picker Field Label",
+  name: "datepicker",
+  placeholder: "MM/DD/YYYY",
+  range: true,
+  required: false,
+};
+
+/**
+ * Sample prop definitions DatePicker's enumerable properties (imported in stories and test)
+ */
+const DatePickerArgs = {
+  basic,
+  hasrange,
+  hashelper,
+  haserror,
+  hastooltip,
+};
+
+export default DatePickerArgs;

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

@@ -0,0 +1,68 @@
+import { datePickerTypes } from "../../types";
+
+export interface DatePickerProps {
+  /**
+   * The input's onChange callback.
+   */
+  callback: function;
+
+  /**
+   * Specify an optional className to be added to your input.
+   */
+  className?: string;
+
+  /**
+   * Is the input disabled?
+   */
+  disabled?: boolean;
+
+  /**
+   * If this is a range, the data for the second field
+   */
+  enddata?: DatePickerProps;
+
+  /**
+   * Does the input have an error?
+   */
+  error?: string | false;
+
+  /**
+   * The input's helper text
+   */
+  helper: string | false;
+
+  /**
+   * The input's id attribute
+   */
+  id?: string;
+
+  /**
+   * Does this input have a label?
+   */
+  label: string;
+
+  /**
+   * The input's name attribute
+   */
+  name?: Required<string>;
+
+  /**
+   * Specify an optional className to be added to your DatePicker component.
+   */
+  placeholder?: string;
+
+  /**
+   * Specify whether this is a date range
+   */
+  range?: boolean;
+
+  /**
+   * Specify whether this input is required
+   */
+  required?: boolean;
+
+  /**
+   * Does this DatePicker have a tooltip?
+   */
+  tooltip?: string;
+}

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,119 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { DatePickerProps } from "./DatePicker.props";
+import { Fieldset } from "../Fieldset";
+import { FormElement } from "../FormElement";
+
+const DatePicker: FC<DatePickerProps> = ({
+  callback,
+  disabled = false,
+  enddata,
+  error,
+  helper,
+  id,
+  label,
+  name,
+  placeholder,
+  range,
+  required,
+  tooltip,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--datepicker`;
+
+  const DatePickerClasses = classNames("", {
+    [baseClass]: true,
+    [`error`]: error,
+  });
+
+  /**
+   * On change, if there is a callback, call it
+   */
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    picker: string | false = false
+  ) => {
+    if (callback) {
+      callback(e, picker);
+    }
+  };
+
+  return (
+    <>
+      {!range && (
+        <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}
+          >
+            <input
+              id={`${id ? id : name}`}
+              name={`${name}`}
+              onChange={handleChange}
+              disabled={disabled}
+              placeholder={placeholder}
+              required={required as any}
+              type={"date"}
+              className={`${DatePickerClasses} ${prefix}--input`}
+            />
+          </FormElement>
+        </Fieldset>
+      )}
+      {range && (
+        <div className={`${baseClass}--range`}>
+          <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={"date"}
+            >
+              <input
+                id={`${id ? id : name}`}
+                name={`${name}`}
+                onChange={handleChange}
+                disabled={disabled}
+                placeholder={placeholder}
+                required={required as any}
+                type={"date"}
+                className={`${DatePickerClasses} ${prefix}--input`}
+              />
+            </FormElement>
+          </Fieldset>
+          <Fieldset legend={false} fieldsetid={false}>
+            <FormElement
+              elemid={enddata?.name as any}
+              label={enddata?.label as any}
+              helper={enddata?.helper as any}
+              error={enddata?.error as any}
+              required={enddata?.required as any}
+              tooltip={enddata?.tooltip as any}
+              type={"date"}
+            >
+              <input
+                id={enddata?.id ? enddata?.id : enddata?.name}
+                name={enddata?.name}
+                onChange={(e) => handleChange(e, "end")}
+                disabled={enddata?.disabled}
+                placeholder={enddata?.placeholder}
+                required={enddata?.required as any}
+                type={"date"}
+                className={`${DatePickerClasses} ${prefix}--input`}
+              />
+            </FormElement>
+          </Fieldset>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default DatePicker;

package/src/components/DatePicker/index.ts

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

package/src/components/Dropdown/Dropdown.args.ts

@@ -0,0 +1,220 @@
+import { DropdownProps } from "./Dropdown.props";
+
+const basic: DropdownProps = {
+  autocomplete: "false",
+  callback: null,
+  className: "storybook",
+  disabled: false,
+  error: false,
+  helper: false,
+  id: "dropdown",
+  label: "Dropdown Label",
+  name: "dropdown",
+  options: [
+    {
+      disabled: false,
+      label: "Option One",
+      value: "option one",
+    },
+    {
+      disabled: false,
+      label: "Option Two",
+      value: "option two",
+    },
+    {
+      disabled: false,
+      label: "Option Three",
+      value: "option three",
+    },
+    {
+      disabled: false,
+      label: "Option Four",
+      value: "four",
+    },
+    {
+      disabled: false,
+      label: "Option Five",
+      value: "the fifth",
+    },
+  ],
+  required: false,
+  value: "option one",
+};
+
+const haserror: DropdownProps = {
+  autocomplete: "false",
+  callback: null,
+  className: "storybook",
+  disabled: false,
+  error: "This is an error message",
+  helper: "Example Helper Text",
+  id: "dropdown",
+  label: "Dropdown Label",
+  name: "dropdown",
+  options: [
+    {
+      disabled: false,
+      label: "Option One",
+      value: "option one",
+    },
+    {
+      disabled: false,
+      label: "Option Two",
+      value: "option two",
+    },
+    {
+      disabled: false,
+      label: "Option Three",
+      value: "option three",
+    },
+    {
+      disabled: false,
+      label: "Option Four",
+      value: "four",
+    },
+    {
+      disabled: false,
+      label: "Option Five",
+      value: "the fifth",
+    },
+  ],
+  required: false,
+  value: "option one",
+};
+
+const hashelper: DropdownProps = {
+  autocomplete: "false",
+  callback: null,
+  className: "storybook",
+  disabled: false,
+  error: false,
+  helper: "Example Helper Text",
+  id: "dropdown",
+  label: "Dropdown Label",
+  name: "dropdown",
+  options: [
+    {
+      disabled: false,
+      label: "Option One",
+      value: "option one",
+    },
+    {
+      disabled: false,
+      label: "Option Two",
+      value: "option two",
+    },
+    {
+      disabled: false,
+      label: "Option Three",
+      value: "option three",
+    },
+    {
+      disabled: false,
+      label: "Option Four",
+      value: "four",
+    },
+    {
+      disabled: false,
+      label: "Option Five",
+      value: "the fifth",
+    },
+  ],
+  required: false,
+  value: "option one",
+};
+
+const hastooltip: DropdownProps = {
+  autocomplete: "false",
+  callback: null,
+  className: "storybook",
+  disabled: false,
+  error: false,
+  helper: false,
+  id: "dropdown",
+  label: "Dropdown Label",
+  name: "dropdown",
+  options: [
+    {
+      disabled: false,
+      label: "Option One",
+      value: "option one",
+    },
+    {
+      disabled: false,
+      label: "Option Two",
+      value: "option two",
+    },
+    {
+      disabled: false,
+      label: "Option Three",
+      value: "option three",
+    },
+    {
+      disabled: false,
+      label: "Option Four",
+      value: "four",
+    },
+    {
+      disabled: false,
+      label: "Option Five",
+      value: "the fifth",
+    },
+  ],
+  required: false,
+  tooltip: "This is my tooltip text.",
+  value: "option one",
+};
+
+const isdisabled: DropdownProps = {
+  autocomplete: "false",
+  callback: null,
+  className: "storybook",
+  disabled: false,
+  error: false,
+  helper: false,
+  id: "dropdown",
+  label: "Dropdown Label",
+  name: "dropdown",
+  options: [
+    {
+      disabled: false,
+      label: "Option One",
+      value: "option one",
+    },
+    {
+      disabled: false,
+      label: "Option Two",
+      value: "option two",
+    },
+    {
+      disabled: false,
+      label: "Option Three",
+      value: "option three",
+    },
+    {
+      disabled: false,
+      label: "Option Four",
+      value: "four",
+    },
+    {
+      disabled: false,
+      label: "Option Five",
+      value: "the fifth",
+    },
+  ],
+  required: false,
+  value: "option one",
+};
+
+/**
+ * Sample prop definitions Dropdown's enumerable properties (imported in stories and test)
+ */
+const DropdownArgs = {
+  basic,
+  haserror,
+  hashelper,
+  hastooltip,
+  isdisabled,
+};
+
+export default DropdownArgs;

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

@@ -0,0 +1,84 @@
+export interface OptionProps {
+  /**
+   * Is this option disabled?
+   */
+  disabled?: boolean;
+
+  /**
+   * The option's label
+   */
+  label: Required<string>;
+
+  /**
+   * The option's value
+   */
+  value?: Required<string>;
+}
+
+export interface DropdownProps {
+  /**
+   * Should the Dropdown allow default browser autocomplete functionality?
+   * Ideally this would be boolean but for some reason React expects a string. So: "true" if true.
+   */
+  autocomplete: string;
+
+  /**
+   * The Dropdown's onChange callback.
+   */
+  callback: function;
+
+  /**
+   * Specify an optional className to be added to your Profile component.
+   */
+  className?: string;
+
+  /**
+   * Is the Dropdown disabled?
+   */
+  disabled?: boolean;
+
+  /**
+   * Does the Dropdown have an error?
+   */
+  error?: string | false;
+
+  /**
+   * The Dropdown's helper text
+   */
+  helper: string | false;
+
+  /**
+   * The Dropdown's id attribute
+   */
+  id?: string;
+
+  /**
+   * The Dropdown's label
+   */
+  label: string;
+
+  /**
+   * The Dropdown's name attribute
+   */
+  name?: Required<string>;
+
+  /**
+   * The Dropdown's options
+   */
+  options?: Required<Array<OptionProps>>;
+
+  /**
+   * Is a selection required?
+   */
+  required?: boolean;
+
+  /**
+   * Does this Dropdown have a tooltip?
+   */
+  tooltip?: string;
+
+  /**
+   * The Dropdown's default selection; should match one of the values in `options`
+   */
+  value: string;
+}