React Sembra Components

Introduction

React-reusable-componets was created with SembraCare in mind. The benefits of using this library include maintaining streamlined and consistent UI elements/components across all SembraCare applications and applets.

• Reusable Components NPM Link: https://www.npmjs.com/package/react-sembra-library

Getting Started

To install reusable components, run the following command:

npm install react-sembra-library

This command installs the reusable components library.

After installation, developers will have access to the following Sembra Components:

• Header
• Loader
• Footer
• Submit Button
• Login Page

Coming soon:

• Signup
• Reset Password
• Verify Account

To use these components, import them as destructured variables. Here’s an example:

import { Header, Footer } from "react-sembra-library";

We import the components as destructured variables to allow selective importation of only the components needed for a particular file. This approach helps in reducing the bundle size and improves the maintainability of the code.

Component List

1. Header

• Header Visual Representation

  • Pre Auth Header

  • Post Auth Header Including User Menu (Collapsed) and Page Title

  • Post Auth Header Including User Menu (Expanded) and Page Title

• Header Component Example

  https://github.com/sembracare-dev/ReactSembraLibrary/blob/master/src/components/Layouts/header.jsx

• Header Props

  • src: String

    A URL or React component representing the logo

  • alt: String

    Alt text to display if logo image does not render.

  • pageTitle: String

    The title of the page to be displayed within the header. We recommend not using this prop for pre-authorization pages, as those components have titles built into the component itself.

  • navLinks: Array

    An array of objects representing the navigation links. If no navItems are defined, the navMenu will be excluded. This is particularly useful for pre-authorization pages where the navigation menu is unnecessary, as all pre-authorization navigation is included in the page's main content.

    Each object should have the following properties:

    • name: String

      The display text for the link.

    • url: String

      The URL to navigate to when the link is clicked.

    • targetBlank: Boolean

      Indicates whether to open the link in a new window.

    Example:

    const navItems = [
      {
        name: "Home",
        href: "https://www.sembracare.com/",
        targetBlank: false,
      },
      {
        name: "About",
        href: "https://www.nhl.com/hurricanes/",
        targetBlank: false,
      },
      {
        name: "Contact",
        href: "https://homechoicenc.com/",
        targetBlank: true,
      },
    ];

  • accessibilityProps: Object

    Customizations for accessibility. This object can include any accessibility settings required by the consuming project.

  • hamburgerStyle: Object

    Customizations for the hamburger style. This object can include any styles required by the consuming project.

    Example:

    const hamburgerMenuStyle = {
      color: "#0000c2",
      height: "1.5rem",
      width: "1.5rem",
      cursor: "pointer",
    };

• Header Usage Example

  Here's an example of how to use the Header component in your application:

  import React from "react";
  import { Header } from "react-sembra-library";
  const logoUrl = "https://example.com/logo.png";
  
  function App() {
    const [pageTitle, setPageTitle] = useState(null);
  
    const navItems = [
      { name: "Home", href: "https://www.sembracare.com/", targetBlank: false },
      {
        name: "About",
        href: "https://www.nhl.com/hurricanes/",
        targetBlank: false,
      },
      {
        name: "Contact",
        href: "https://homechoicenc.com/",
        targetBlank: true,
      },
    ];
  
    const hamburgerMenuStyle = {
      color: "#0000c2",
      height: "1.5rem",
      width: "1.5rem",
      cursor: "pointer",
    };
  
    useEffect(() => {
      let newPageTitle = "";
      switch (route) {
        case "/":
          break;
        case "/welcome":
          newPageTitle = "Welcome";
          break;
        default:
          newPageTitle = "Page Not Found";
      }
      setPageTitle(newPageTitle);
    }, [route]);
  
    return (
      <>
        <Header
          src={Logo}
          alt="Alt text here"
          navItems={pageTitle ? navItems : null}
          hamburgerMenuStyle={hamburgerMenuStyle}
          pageTitle={pageTitle}
        />
        {/_ Rest of your application _/}
      </>
    );
  }

2. Footer

"Powered by Sembracare" Logo is hardcoded into the footer. No props, No customization options at this time.

• Footer Visual Representation

• Footer Component Example

  https://github.com/sembracare-dev/ReactSembraLibrary/blob/master/src/components/Layouts/footer.jsx

• Footer Props

  None

• Footer Usage Example

  Here's an example of how to use the Footer component in your application:

  import React from "react";
  import { Footer } from "react-sembra-library";
  
  function App() {
    return (
      <>
        {/_ Rest of your application _/}
        <Footer />
      </>
    );
  }

3. Loaders (small, medium, large and full-page)

• Loader Visual Representation

  • Small, Medium and Large Loaders

    

    Small, Medium and Large Loaders Video

  • Full Page Loader

    Full Page Loader Video

  • Loader Component Example

  https://github.com/sembracare-dev/ReactSembraLibrary/blob/master/src/components/Loader/loader.jsx

• Loader Props

  • fullPageLoader: Boolean

    Indicates if the loader is a full-page loader. This is intended to be used while the main request is being fulfilled. This prop is only required if true.

  • loaderSize: String

    Specifies the desired size of the loader. Accepts values "sm" (small), "md" (medium), and "lg" (large). This prop is required if fullPageLoader is not being used.

• Loader Usage Example

  Here's an example of how to use the Loader component in your application:

  // When decaring full page load is true
  import React from "react";
  import { Loader } from "react-sembra-library";
  
  function App() {
    return (
      <>
        <Loader fullPageLoader={true} />
        {/_ Rest of your application _/}
      </>
    );
  }
  
  // When full page load is not being used
  import React from "react";
  import { Loader } from "react-sembra-library";
  
  function App() {
    return (
      <>
        <Loader loaderSize={"sm"} />
        {/_ Rest of your application _/}
      </>
    );
  }

4. Submit Button

Includes optional features such as loading indicators and disabled states. This component enhances the user experience by offering visual feedback during form submission and ensuring that the submission process is seamless and intuitive.

• Submit Button Visual Representation

  • Static Submit Button

    

  • Submitting Submit Button

    

    Submitting Submit Button Video

• Submit Button Component Example

  https://github.com/sembracare-dev/ReactSembraLibrary/blob/master/src/components/Buttons/submitButton.jsx

• Submit Button Props

• onClick: Function

  Function to be invoked on button click

• label: String

  The text to be displayed on the button.

• hasLoader: Boolean

  Indicates whether the consuming project/component wishes to include a loader within the submit button to provide additional visual feedback that the form is currently submitting.

• loaderSize: String

  Specifies the size of the loader when hasLoader is true. Accepts the value "sm". This prop is required only when hasLoader is true.

• isSubmitting: Boolean

  Indicates whether the form is currently being submitted.

• accessibilityProps: Object

  Customizations for accessibility. This object can include any accessibility settings required by the consuming project.

• Submit Button Usage Example

  Here's an example of how to use the SubmitButton component in your application:

  import React from "react";
  import { SubmitButton } from "react-sembra-library";
  
  function App() {
    const [isSubmitting, setIsSubmitting] = useState(false);
  
    const handleSubmit = async (e) => {
      // Simulating submit functionality
      setIsSubmitting(true);
      setTimeout(() => {
        setIsSubmitting(false);
      }, 3000);
    };
  
    return (
      <>
        <SubmitButton
          onClick={handleSubmit}
          label="Login"
          hasLoader={true}
          loaderSize="sm"
          isSubmitting={isSubmitting}
          accessibilityProps={{
            tabIndex: "0",
            "aria-label": "Submit Form",
          }}
        />
        {/_ Rest of your application _/}
      </>
    );
  }

5. Login Page

• Login Component Visual Representation

  Login Video

• Login Component Example

  https://github.com/sembracare-dev/ReactSembraLibrary/blob/master/src/components/Auth/login.jsx

• Login Props

  • isSubmitting: Boolean

    Indicates whether the form is currently in the process of being submitted. This prop is passed to the SubmitButton component and is useful for disabling the submit button and optionally showing a loader on the submit button during the submission process.

  • handleLoginSubmit: Function

    A function containing additional submit actions, passed via props from the consuming project. This function is invoked within the Login component's submit process only if the login credentials are accepted.

  • realm: String

    A string that specifies the realm to which the consuming project belongs.

    More details about how realms work will be added after a clarification meeting.

  • hasShakeFeature: Boolean

    Indicates whether the consuming project wants to include the optional shake feature. This feature was created to provide an additional visual cue to inform users of input/submit errors that need to be corrected before the form can be submitted. You can conditionally use the shake feature to shake the screen when the window width is below a certain size for mobile use. Additionally, you can choose to include or exclude the shake feature as needed.

    Example:

    hasShakeFeature={window.innerWidth < 540 ? true : false}

• Login Component Usage Example

  Here's an example of how to use the Login component in your application:

  import React from "react";
  import { Login } from "react-sembra-library";
  
  function App() {
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [isPageLoading, setIsPageLoading] = useState(false);
  
    const handleLoginSubmit = () => {
      // Simulating submit functionality
      setIsSubmitting(true);
      setTimeout(() => {
        setIsSubmitting(false);
        setIsPageLoading(true);
        setTimeout(() => {
          setIsPageLoading(false);
  
          // Handle routing/redirect
        }, 2000);
      }, 3000);
    };
    return (
      <>
        <Login
          isSubmitting={isSubmitting}
          handleLoginSubmit={handleLoginSubmit}
          realm={"SembraCash"}
          hasShakeFeature={window.innerWidth < 540 ? true : false}
        />
        {/_ Rest of your application _/}
      </>
    );
  }

Additional Componenets Coming Soon

6. Signup Page

7. Forgot/Reset Password

8. Verify Profile

Integration

• Tips for seamless integration with existing project style or design systems

Best Practices

• Tips form maintaining and updating library
• Tips for opimizing performance and ensuring accessibility

Additional Resources

• Test Project/Additional Documentation: https://github.com/sembracare-dev/React_Component_And_SembraStyles_Example_Project