AWeber Password Validation Assessment

Features

• Supports Typescript and Javascript.
• Bundles commonjs and es module formats.
• pnpm for blazing fast package management.
• Vite for speedy bundling
• Husky for git hooks.
• Eslint and stylelint.
• Rollup for bundling.
• Jest and react-testing-library for testing.
• Storybook for documentation and demo.
• Optional Tailwind CSS support.

Quickstart

Prerequisites

1. Install Node >= 20.x.
2. Install pnpm. E.g. corepack prepare pnpm@latest --activate.

Installation

Manually clone repo or use degit.

# With CSS Modules config
git clone [email protected]:MuhammadHadiofficial/aweber_assessment.git
cd ./my-library
pnpm i

DEV SERVER

pnpm run dev

Storybook

pnpm run start:docs

T

Implementation Thought Process

• I followed how Formik handles forms
• Created a context shared between form components
• Track states, like touched, blur, changed etc.
• Validation rules and error messages are pluggable during initialization
• A validation summary component is added
• There are 4 Examples in this project
  • Example 1: Ready to use single PasswordForm container plug it in your existing form and pass a callback to extract password and password validation state to integrate with existing external form
  • Example 2: Password form with seperate password and confirm password input, it shows how each component alone can be utilized, we offer other components like validation summary, submit button, Requirements, and password strength meter
  • Example 3: Shows Live validation meaning as you type it validates password. Showing how flexible our library is to use
  • Example 4: We show a full form example showing how our password validation form library can be integrated with any form component or library flexibly. WE show a customer signup form with name, email and password component.