reso-ui 1.1.0

package/src/components/Form/Form-Container/stories/Form-Container.stories.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Form } from "@components/Form";
+// import "./storiesStyle.scss";
+
+import { InputLabel } from "@components/Form/Inputs/Input-Label";
+import { TextInput } from "@components/Form/Inputs/Text-Input";
+import { SubmitButton } from "@components/Form/Inputs/Submit-Button";
+import { FormInputContainer } from "@components/Form/Form-Input-Container";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Form/Containers/Form",
+  component: Form,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A Form container component with customised look and feel.
+
+            It supports both Margin and Padding props.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Form>;
+
+export const Default = () => {
+  const [textInputValue, setTextInputValue] = useState("");
+
+  return (
+    <Form onSubmit={() => alert("Form data submitted!")}>
+      <h2>Sample Form</h2>
+      <FormInputContainer>
+        <InputLabel
+          htmlFor="sampleTextInput1"
+          label="First Name"
+          description={"Your first name"}
+          required
+          mr={7}
+          rootStyles={{ width: "128px" }}
+        />
+        <TextInput
+          id="sampleTextInput1"
+          value={textInputValue}
+          onChange={(e) => setTextInputValue(e.target.value)}
+        />
+      </FormInputContainer>
+      <SubmitButton mb={4} />
+    </Form>
+  );
+};
+
+export const WithContainerStyles = () => {
+  const [textInputValue, setTextInputValue] = useState("");
+  return (
+    <Form
+      onSubmit={() => alert("Form data submitted!")}
+      rootStyles={{ background: "AntiqueWhite" }}
+      pa={5}
+    >
+      <h2>Sample Form</h2>
+      <FormInputContainer>
+        <InputLabel
+          htmlFor="sampleTextInput1"
+          label="First Name"
+          description={"Your first name"}
+          required
+          mr={7}
+          rootStyles={{ width: "128px" }}
+        />
+        <TextInput
+          id="sampleTextInput1"
+          value={textInputValue}
+          onChange={(e) => setTextInputValue(e.target.value)}
+        />
+      </FormInputContainer>
+      <SubmitButton mb={4} />
+    </Form>
+  );
+};
+
+// export const Default = ComponentTemplate.bind({});
+// Default.args = {};
+
+// export const WithClassName = ComponentTemplate.bind({});
+// WithClassName.args = {
+//   rootClassName: "panel_container_root_class",
+// };
+
+// export const WithCustomStyle = ComponentTemplate.bind({});
+// WithCustomStyle.args = {
+//   rootStyles: {
+//     background: "green",
+//     color: "white",
+//   },
+// };

package/src/components/Form/Form-Container/styles/Form-Container.layout.scss

@@ -0,0 +1,2 @@
+.form_container {
+}

package/src/components/Form/Form-Container/styles/Form-Container.theme.scss

@@ -0,0 +1,2 @@
+.form_container_theme_light {
+}

package/src/components/Form/Form-Input-Container/Form-Input-Container.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import { IMarginProps } from "@interfaces/ISpacingsProps";
+
+import { Flex } from "@components/Containers/Flex";
+
+// styles
+import "./styles/Form-Input-Container.layout.scss";
+import "./styles/Form-Input-Container.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+export interface IFormInputContainerProps
+  extends IComponent,
+    IThemeProps,
+    IMarginProps {
+  children: React.ReactNode;
+}
+
+export const FormInputContainer = ({
+  rootClassName,
+  rootStyles = {},
+  children,
+  theme = "light",
+  mb = 4,
+  ...spacingsProps
+}: IFormInputContainerProps) => {
+  const containerClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        formInput_container: true,
+      },
+      rootClassName
+    ),
+    createThemeStyles("formInput_container_theme_", theme)
+  );
+
+  return (
+    <Flex
+      // rootStyles={{ border: "1px solid blue" }}
+      direction="row"
+      align="start"
+      justify="start"
+      rootClassName={containerClasses}
+      rootStyles={rootStyles}
+      mb={mb}
+      {...spacingsProps}
+    >
+      {children}
+    </Flex>
+  );
+};

package/src/components/Form/Form-Input-Container/__test__/Form-Input-Container.test.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import * as FlexModule from "@components/Containers/Flex/Flex";
+import { FormInputContainer } from "@components/Form/Form-Input-Container";
+import { createComponentStyles, withSpacingsProps } from "@utils/styles";
+
+const SampleChildComponent = () => {
+  return (
+    <>
+      <label data-testid="form-input-container-input" />
+      <input data-testid="form-input-container-label" />
+    </>
+  );
+};
+
+describe("Form Input Container Unit Tests", () => {
+  beforeEach(() => {
+    jest.spyOn(FlexModule, "Flex").mockImplementation((props) => {
+      const { rootClassName, rootStyles, children, mb } = props;
+      const flexMockClasses = createComponentStyles(
+        withSpacingsProps(
+          {
+            [rootClassName]: true,
+          },
+          { mb }
+        )
+      );
+
+      return (
+        <div
+          data-testid="form-input-container-root"
+          className={flexMockClasses}
+          style={rootStyles}
+        >
+          {children}
+        </div>
+      );
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      <FormInputContainer>
+        <SampleChildComponent />
+      </FormInputContainer>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("form-input-container-root");
+    expect(component).toBeInTheDocument();
+
+    const inputComponent = screen.queryByTestId("form-input-container-input");
+    expect(inputComponent).toBeInTheDocument();
+
+    const labelComponent = screen.queryByTestId("form-input-container-label");
+    expect(labelComponent).toBeInTheDocument();
+  });
+
+  test("should apply custom className when provided as prop", () => {
+    const { debug } = render(
+      <FormInputContainer rootClassName="sample_class">
+        <SampleChildComponent />
+      </FormInputContainer>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("form-input-container-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom styles when provided as prop", () => {
+    render(
+      <FormInputContainer rootStyles={{ border: "2px solid red" }}>
+        <SampleChildComponent />
+      </FormInputContainer>
+    );
+
+    const component = screen.queryByTestId("form-input-container-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should apply margin bottom spacings prop by default", () => {
+    const { debug } = render(
+      <FormInputContainer>
+        <SampleChildComponent />
+      </FormInputContainer>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("form-input-container-root");
+    expect(component).toHaveClass("spacing-mb-4");
+  });
+});

package/src/components/Form/Form-Input-Container/index.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+import "@styles/global.scss";
+export * from "./Form-Input-Container";

package/src/components/Form/Form-Input-Container/stories/Form-Input-Container.stories.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+// always import from index to include global styles
+import { Form } from "@components/Form";
+import { SubForm } from "@components/Form/Sub-Form-Container";
+// import "./storiesStyle.scss";
+
+import { InputLabel } from "@components/Form/Inputs/Input-Label";
+import { TextInput } from "@components/Form/Inputs/Text-Input";
+import { FormInputContainer } from "@components/Form/Form-Input-Container";
+
+import dedent from "ts-dedent";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Form/Containers/Input Container",
+  component: Form,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+            A container to group an Input control and it's Label, so that we can control the margins more easily.
+
+            It supports both Margin props.
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof Form>;
+
+export const Default = () => {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  return (
+    <Form onSubmit={() => alert(`Greetings, ${firstName} ${lastName}!`)}>
+      <h2>Sample Form with Sub Form Groups</h2>
+      <FormInputContainer mt={6}>
+        <InputLabel
+          htmlFor="firstNameInput"
+          label="First Name"
+          description={"Your first name"}
+          required
+          mr={7}
+        />
+        <TextInput
+          id="firstNameInput"
+          value={firstName}
+          onChange={(e) => setFirstName(e.target.value)}
+        />
+      </FormInputContainer>
+      <FormInputContainer>
+        <InputLabel
+          htmlFor="lastNameInput"
+          label="Last Name"
+          description={"Your last name"}
+          required
+          mr={7}
+        />
+        <TextInput
+          id="lastNameInput"
+          value={lastName}
+          onChange={(e) => setLastName(e.target.value)}
+        />
+      </FormInputContainer>
+    </Form>
+  );
+};

package/src/components/Form/Form-Input-Container/styles/Form-Input-Container.layout.scss

@@ -0,0 +1,2 @@
+.formInput_container {
+}

package/src/components/Form/Form-Input-Container/styles/Form-Input-Container.theme.scss

@@ -0,0 +1,2 @@
+.formInput_container_theme_light {
+}

package/src/components/Form/Form-Types.ts

@@ -0,0 +1,20 @@
+import { ChangeEvent, Dispatch, SetStateAction } from "react";
+
+type FormInputValidation = {
+  validationFn: (value?: string | number) => boolean;
+  errorMessage: string;
+};
+
+export interface IFormInputProps {
+  id: string;
+  onChange?: (event?: ChangeEvent<HTMLInputElement>) => void;
+  value?: string | number;
+  disabled?: boolean;
+  required?: boolean;
+  validations?: FormInputValidation[];
+}
+
+export interface IFormDataContext {
+  formData: object;
+  setFormData: Dispatch<SetStateAction<unknown>>;
+}

package/src/components/Form/Inputs/Input-Label/Input-Label.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import { IMarginProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "../sharedStyles.scss";
+import "./styles/Input-Label.layout.scss";
+import "./styles/Input-Label.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+type LabelDescriptionObject = {
+  [key: string]: string;
+};
+
+export interface IInputLabelProps
+  extends IComponent,
+    IThemeProps,
+    IMarginProps {
+  htmlFor: string;
+  label: string;
+  description?: string | LabelDescriptionObject;
+  descriptionSelectedKey?: string;
+  required?: boolean;
+  labelClassName?: string;
+  labelStyles?: React.CSSProperties;
+}
+
+export const InputLabel = ({
+  htmlFor,
+  label,
+  description,
+  descriptionSelectedKey,
+  required = false,
+  labelClassName,
+  labelStyles = {},
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+  ...spacingsProps
+}: IInputLabelProps) => {
+  const containerClasses = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          inputLabel_container: true,
+        },
+        spacingsProps
+      ),
+      rootClassName,
+      {
+        no_select: true,
+      }
+    ),
+    createThemeStyles(`inputLabel_container_theme_`, theme)
+  );
+
+  const labelTopClasses = createLayoutStyles({
+    inputLabel_top: true,
+    inputlabel_top_marginBottom: description ? true : false,
+  });
+
+  const labelClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        inputLabel_label: true,
+        inputlabel_label_margin_right: required,
+      },
+      rootClassName,
+      {
+        no_select: true,
+      }
+    ),
+    createThemeStyles(`inputLabel_theme_`, theme)
+  );
+
+  return (
+    <div
+      data-testid={`label_${htmlFor}`}
+      className={containerClasses}
+      style={rootStyles}
+    >
+      <div className={labelTopClasses}>
+        <label htmlFor={htmlFor} className={labelClasses} style={labelStyles}>
+          {label}
+        </label>
+        {required && (
+          <span className="inputLabel_required">{`(*required)`}</span>
+        )}
+      </div>
+      {description &&
+        (typeof description === "string" ? (
+          description && <p className="inputLabel_description">{description}</p>
+        ) : description && description[`${descriptionSelectedKey}`] ? (
+          <p className="inputLabel_description">
+            {description[`${descriptionSelectedKey}`]}
+          </p>
+        ) : null)}
+    </div>
+  );
+};

package/src/components/Form/Inputs/Input-Label/index.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+import "@styles/global.scss";
+export * from "./Input-Label";

package/src/components/Form/Inputs/Input-Label/styles/Input-Label.layout.scss

@@ -0,0 +1,35 @@
+.inputLabel_container {
+  // border: 1px solid blue;
+  width: 256px;
+}
+
+.inputLabel_top {
+  // border: 2px solid;
+}
+
+.inputlabel_top_marginBottom {
+  margin-bottom: $margin-xxsmall;
+}
+
+.inputLabel_label {
+  font-weight: 600;
+  font-size: $font-size-default;
+}
+
+.inputLabel_required {
+  font-weight: 500;
+  font-size: $font-size-1;
+  font-family: $font-family;
+  color: $error-red;
+}
+
+.inputLabel_description {
+  font-weight: 400;
+  font-size: $font-size-1;
+  font-family: $font-family;
+  color: $fc-dark;
+}
+
+.inputlabel_label_margin_right {
+  margin-right: $margin-xxxsmall;
+}

package/src/components/Form/Inputs/Input-Label/styles/Input-Label.theme.scss

@@ -0,0 +1,7 @@
+.inputLabel_container_theme_light {
+  @include use_theme(unset, "light");
+}
+
+.inputLabel_theme_light {
+  color: inherit;
+}

package/src/components/Form/Inputs/Submit-Button/Submit-Button.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+// import base interface
+// import IComponent from "@interfaces/IComponent";
+// import IThemeProps from "@interfaces/Theme";
+import { Button, IButtonProps } from "@components/Buttons/Button";
+
+// styles
+import "./styles/Submit-Button.layout.scss";
+import "./styles/Submit-Button.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+} from "@utils/styles";
+
+export interface ISubmitButtonProps extends Omit<IButtonProps, "text"> {
+  text?: string;
+}
+
+export const SubmitButton = ({
+  id = null,
+  disabled = false,
+  inheritWidth = false,
+  inline = false,
+  text = "Submit",
+  rootClassName,
+  rootStyles = {},
+  theme = "dark",
+  ...spacingsProps
+}: ISubmitButtonProps) => {
+  const containerClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        submit_button: true,
+      },
+      rootClassName,
+      {
+        disabled,
+        no_select: true,
+      }
+    ),
+    createThemeStyles(`submit_button_theme_`, theme)
+  );
+
+  return (
+    <Button
+      id={id}
+      role="submit"
+      text={text}
+      inheritWidth={inheritWidth}
+      inline={inline}
+      rootClassName={containerClasses}
+      rootStyles={rootStyles}
+      disabled={disabled}
+      {...spacingsProps}
+    />
+  );
+};

package/src/components/Form/Inputs/Submit-Button/index.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+import "@styles/global.scss";
+export * from "./Submit-Button";

package/src/components/Form/Inputs/Submit-Button/styles/Submit-Button.layout.scss

@@ -0,0 +1,11 @@
+.submit_button {
+  width: 100%;
+  border: none;
+  opacity: 0.9;
+  &:hover {
+    opacity: 1;
+  }
+  &:disabled {
+    background: $bg-button-disabled;
+  }
+}

package/src/components/Form/Inputs/Submit-Button/styles/Submit-Button.theme.scss

@@ -0,0 +1,6 @@
+.submit_button_theme_light {
+  @include use_theme($bg-button-primary, "dark");
+  &:hover {
+    background: $bg-button-primary;
+  }
+}