reso-ui 1.1.0

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

@@ -0,0 +1,100 @@
+import React, { ChangeEvent } from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import { IMarginProps } from "@interfaces/ISpacingsProps";
+import { IFormInputProps } from "@components/Form/Form-Types";
+
+// styles
+import "../sharedStyles.scss";
+import "./styles/Text-Input.layout.scss";
+import "./styles/Text-Input.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+import { methodHasValue } from "@utils/validations";
+
+export interface ITextInputProps
+  extends IComponent,
+    IFormInputProps,
+    IThemeProps,
+    IMarginProps {
+  placeholder?: string;
+  pattern?: string;
+  minLength?: number;
+  maxLength?: number;
+  readonly?: boolean;
+}
+
+export const TextInput = ({
+  id = null,
+  value,
+  onChange,
+  disabled = false,
+  required = false,
+  readonly = false,
+  placeholder,
+  pattern,
+  minLength,
+  maxLength,
+  rootClassName,
+  rootStyles = {},
+  theme = "light",
+  ...spacingsProps
+}: ITextInputProps) => {
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    if (methodHasValue(onChange)) {
+      onChange(e);
+    }
+  };
+
+  const handleInputError = (e: ChangeEvent<HTMLInputElement>) => {
+    // console.log("input error");
+    // console.log(e);
+  };
+
+  const inputClasses = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          input_text_container: true,
+          input_text: true,
+        },
+        spacingsProps
+      ),
+      rootClassName,
+      {
+        disabled,
+        no_select: true,
+      }
+    ),
+    createThemeStyles(`input_text_theme_`, theme)
+  );
+
+  return (
+    <input
+      id={id}
+      readOnly={readonly}
+      type="text"
+      value={value ? value : ""}
+      maxLength={maxLength}
+      minLength={minLength}
+      required={required}
+      className={inputClasses}
+      placeholder={placeholder}
+      pattern={pattern}
+      disabled={disabled}
+      onChange={handleInputChange}
+      onError={handleInputError}
+      style={rootStyles}
+    />
+  );
+};

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

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

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

@@ -0,0 +1,12 @@
+.input_text_container {
+  height: $input-text-height;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $border-radius-default;
+  outline: none;
+  padding: $padding-xsmall $padding-small;
+  font-family: $font-family;
+  // sometimes container is flex, otherwise take width 100%
+  flex: 1;
+  width: 100%;
+}

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

@@ -0,0 +1,10 @@
+.input_text_theme_light {
+  @include use_theme(unset, "light");
+  border-color: $primary-grey-medium;
+  &:focus {
+    box-shadow: 0px 2px 15px rgba(34, 60, 102, 0.2);
+  }
+  &:disabled {
+    background-color: $primary-grey-medium-light;
+  }
+}

package/src/components/Form/Inputs/sharedStyles.scss

@@ -0,0 +1,11 @@
+.input_text {
+  font-weight: 400;
+  font-size: $font-size-default;
+  font-family: $font-family;
+  color: $fc-dark;
+}
+
+.input_placeholder {
+  font-weight: 400;
+  font-size: $font-size-4;
+}

package/src/components/Form/Modular/Form-Contexts-Repository.ts

@@ -0,0 +1,26 @@
+import { Context } from "react";
+import { IFormDataContext } from "../Form-Types";
+
+type FormDataContextRepository = {
+  [key: string]: Context<IFormDataContext>;
+};
+
+export default (() => {
+  const _repo: FormDataContextRepository = {};
+
+  return {
+    registerFormContext: (
+      formName: string,
+      formDataContext: Context<IFormDataContext>
+    ): Context<IFormDataContext> => {
+      _repo[formName] = formDataContext;
+
+      return formDataContext;
+    },
+    getFormContext: (
+      formName: string
+    ): Context<IFormDataContext> | undefined => {
+      return _repo[formName];
+    },
+  };
+})();

package/src/components/Form/Modular/Form-Data-Context.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { IFormDataContext } from "../Form-Types";
+
+export const createParentFormDataContext =
+  (): React.Context<IFormDataContext> => {
+    return React.createContext<IFormDataContext>({
+      formData: {},
+      // tslint:disable-next-line: no-empty
+      setFormData: () => {},
+    });
+  };

package/src/components/Form/Modular/Hooks.ts

@@ -0,0 +1,127 @@
+import { useContext, useState } from "react";
+import formContextsRepo from "./Form-Contexts-Repository";
+
+export const useFormData = () => {
+  const [formData, setFormData] = useState({});
+
+  return {
+    formData,
+    setFormData: (key: string, value?: string | null | undefined) => {
+      setFormData({
+        ...formData,
+        [key]: value,
+      });
+    },
+  };
+};
+
+export const useModularFormContext = (formName: string) => {
+  const formDataContext = formContextsRepo.getFormContext(formName);
+  if (!formDataContext || typeof formDataContext === "undefined") {
+    throw Error("Invalid form name.");
+  }
+
+  return useContext(formDataContext);
+};
+
+export const useModularSubForm = (
+  parentFormName: string,
+  subFormDataKey: string
+) => {
+  const { formData: parentDataState, setFormData: setParentDataState } =
+    useModularFormContext(parentFormName);
+
+  return {
+    subFormData: { ...parentDataState[subFormDataKey] },
+    setSubFormData: (key: string, value: string) => {
+      setParentDataState({
+        ...parentDataState,
+        [subFormDataKey]: {
+          ...parentDataState[subFormDataKey],
+          [key]: value,
+        },
+      });
+    },
+  };
+};
+
+/**
+ * Example Form Data Model:
+ *
+ * {
+ *    batch: 2020,
+ *    student: {
+ *      name: 'john',
+ *      age: 21,
+ *      contact: {
+ *        home: '1234',
+ *        mobile: '5678'
+ *      }
+ *    }
+ * }
+ *
+ * A. For top level data (eg. batch):
+ * ---------------------------------
+ *
+ * const {formData, setFormData} = useFormData()
+ * const onInputChange = (e) => {
+ *    const value = e.target.value;
+ *    setFormData('batch', value)
+ * }
+ *
+ *
+ *
+ * B. For modular approach (creating another subform component):
+ *  ----------------------------------------------------------
+ *
+ * 1. Create form name, context and register parent form context
+ *  const formName = "studentForm"
+ *  const ParentFormContext = registerFormContext(formName, createParentFormDataContext())
+ *
+ * 2. In render: (
+ *    <ParentFormContextProvider parentFormContext={ParentFormContext}>
+ *        <SubForm1 parentFormName={formName}/>
+ *        <SubForm2 parentFormName={formName}/>
+ *    </ParentFormContextProvider>
+ *  )
+ *
+ * 3. In your subform:
+ *
+ *  props extends ISubForm - parentFormName
+ *
+ *  const {subFromData: studentData, setSubFormData: setStudentData} = useModularSubForm(parentFormName, 'student')
+ *
+ * onNameInputChange((e) => {
+ *    const value = e.target.value;
+ *    setStudentData('name', value) - this will call parent's setFormData
+ * })
+ *
+ * C. For modular approach with multiple levels (a subform component which has another subform):
+ *  -----------------------------------------------------------------------
+ *
+ * 1. In your SubForm, creat a form name, context and register
+ *
+ *  const subFormName = "studentContactForm"
+ *  const ParentFormContext = registerFormContext(subFormName, createParentFormDataContext())
+ *
+ * 2. Create Provider
+ *  const SubSubFormProvider = createFormDataContextProvider(ParentFormContext)
+ *
+ * 3. In render: (
+ *    <ParentFormContextProvider parentFormContext={ParentFormContext}>
+ *        <SubSubForm1 parentFormName={subFormName}/>
+ *    </ParentFormContextProvider>
+ *  )
+ *
+ *  * 4. In your subsubform:
+ *
+ *  props extends ISubForm - parentFormName
+ *
+ *  const {subFromData: studentContactData, setSubFormData: setStudentContactData} = useModularSubForm(parentFormNamr, 'contact')
+ *
+ *  onMobileInputChange((e) => {
+ *    const value = e.target.value;
+ *    setStudentContactData('mobile', value) - this will call parent's setStudentData, which calls it's parent's setFormData
+ *  })
+ *
+ */

package/src/components/Form/Modular/Parent-Form-Context-Provider.tsx

@@ -0,0 +1,22 @@
+import React, { Context, useState } from "react";
+import { IFormDataContext } from "../Form-Types";
+
+export interface IParentFormContextProviderProps {
+  children: React.ReactNode;
+  parentFormContext: Context<IFormDataContext>;
+}
+
+export const ParentFormContextProvider = <T extends unknown>({
+  children,
+  parentFormContext,
+}: IParentFormContextProviderProps) => {
+  const [formData, setFormData] = useState({});
+
+  return (
+    <parentFormContext.Provider value={{ formData, setFormData }}>
+      {children}
+    </parentFormContext.Provider>
+  );
+};
+
+export default ParentFormContextProvider;

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

@@ -0,0 +1,83 @@
+import React from "react";
+
+// import base interface
+import IComponent from "@interfaces/IComponent";
+import IThemeProps from "@interfaces/Theme";
+import { IMarginProps } from "@interfaces/ISpacingsProps";
+
+// styles
+import "./styles/Sub-Form-Container.layout.scss";
+import "./styles/Sub-Form-Container.theme.scss";
+
+// utils
+import {
+  createComponentStyles,
+  createLayoutStyles,
+  createThemeStyles,
+  withSpacingsProps,
+} from "@utils/styles";
+
+export interface ISubFormContainerProps
+  extends IComponent,
+    IThemeProps,
+    IMarginProps {
+  title: string;
+  headerClassName?: string;
+  headerStyles?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export const SubForm = ({
+  title,
+  rootClassName,
+  rootStyles = {},
+  headerClassName,
+  headerStyles = {},
+  children,
+  theme = "light",
+  ...spacingsProps
+}: ISubFormContainerProps) => {
+  const containerClasses = createComponentStyles(
+    createLayoutStyles(
+      withSpacingsProps(
+        {
+          subForm_container: true,
+        },
+        spacingsProps
+      ),
+      rootClassName
+    ),
+    createThemeStyles("subForm_container_theme_", theme)
+  );
+
+  const headerClasses = createComponentStyles(
+    createLayoutStyles(
+      {
+        subForm_header: true,
+        heading: true,
+      },
+      headerClassName,
+      {
+        no_select: true,
+      }
+    ),
+    createThemeStyles("subForm_header_theme_", theme)
+  );
+
+  return (
+    <div
+      data-testid="subForm-root"
+      className={containerClasses}
+      style={rootStyles}
+    >
+      <div
+        data-testid="subForm-header"
+        className={headerClasses}
+        style={headerStyles}
+      >
+        {title}
+      </div>
+      <div className="subForm_content">{children}</div>
+    </div>
+  );
+};

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

@@ -0,0 +1,82 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { SubForm } from "@components/Form/Sub-Form-Container";
+
+const SampleSubFormChildComponent = () => {
+  return <input data-testid="sub-form-input" />;
+};
+
+describe("Sub Form Container Unit Tests", () => {
+  test("should render itself and children without error", () => {
+    const { debug } = render(
+      <SubForm title="Test Title">
+        <SampleSubFormChildComponent />
+      </SubForm>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("subForm-root");
+    expect(component).toBeInTheDocument();
+
+    const inputComponent = screen.queryByTestId("sub-form-input");
+    expect(inputComponent).toBeInTheDocument();
+  });
+
+  test("should apply custom container className when provided as prop", () => {
+    const { debug } = render(
+      <SubForm title="Test Title" rootClassName="sample_class">
+        <SampleSubFormChildComponent />
+      </SubForm>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("subForm-root");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom container styles when provided as prop", () => {
+    render(
+      <SubForm title="Test Title" rootStyles={{ border: "2px solid red" }}>
+        <SampleSubFormChildComponent />
+      </SubForm>
+    );
+
+    const component = screen.queryByTestId("subForm-root");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+
+  test("should render title correctly when provided as prop", () => {
+    const { debug } = render(
+      <SubForm title="Test Title">
+        <SampleSubFormChildComponent />
+      </SubForm>
+    );
+
+    // debug();
+    const header = screen.queryByTestId("subForm-header");
+    expect(header).toHaveTextContent("Test Title");
+  });
+
+  test("should apply custom header className when provided as prop", () => {
+    const { debug } = render(
+      <SubForm title="Test Title" headerClassName="sample_class">
+        <SampleSubFormChildComponent />
+      </SubForm>
+    );
+
+    // debug();
+    const component = screen.queryByTestId("subForm-header");
+    expect(component).toHaveClass("sample_class");
+  });
+
+  test("should apply custom header styles when provided as prop", () => {
+    render(
+      <SubForm title="Test Title" headerStyles={{ border: "2px solid red" }}>
+        <SampleSubFormChildComponent />
+      </SubForm>
+    );
+
+    const component = screen.queryByTestId("subForm-header");
+    expect(component).toHaveStyle("border: 2px solid red");
+  });
+});

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

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

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

@@ -0,0 +1,121 @@
+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 { 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/Sub Form",
+  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 several related controls / inputs together.
+
+            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>
+      <SubForm title="Details" mb={8}>
+        <FormInputContainer>
+          <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>
+      </SubForm>
+      <SubmitButton mb={4} />
+    </Form>
+  );
+};
+
+export const WithContainerStyles = () => {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  return (
+    <Form
+      onSubmit={() => alert(`Greetings, ${firstName} ${lastName}!`)}
+      rootStyles={{ background: "AntiqueWhite" }}
+      pa={5}
+    >
+      <h2>Sample Form with Sub Form Groups</h2>
+      <SubForm title="Details" mb={8} rootStyles={{ background: "GhostWhite" }}>
+        <FormInputContainer>
+          <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>
+      </SubForm>
+      <SubmitButton mb={4} />
+    </Form>
+  );
+};

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

@@ -0,0 +1,7 @@
+.subForm_container_theme_light {
+  border-color: $primary-grey-medium-light;
+}
+
+.subForm_header_theme_light {
+  @include use_theme($primary-grey-medium-light, "light");
+}

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

@@ -0,0 +1,19 @@
+.subForm_container {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: $border-radius-default;
+  width: 100%;
+}
+
+.subForm_header {
+  border-radius: $border-radius-default $border-radius-default 0 0;
+  padding: 0 $padding-medium;
+  height: 48px;
+  line-height: 48px;
+  text-align: left;
+}
+
+.subForm_content {
+  //   border: solid 2px blue;
+  padding: $padding-large;
+}

package/src/components/Form/index.ts

@@ -0,0 +1,12 @@
+/* istanbul ignore file */
+export * from "./Form-Container";
+export * from "./Sub-Form-Container";
+export * from "./Form-Input-Container";
+export * from "./Form-Types";
+
+// input stuff
+export * from "./Inputs/Input-Label";
+export * from "./Inputs/Submit-Button";
+export * from "./Inputs/Text-Input";
+
+// modular form stuff