feat: add form renderer component

Author: abelflopes

docs/ROADMAP.md

@@ -36,7 +36,7 @@ This roadmap is our plan for building a complete front-end framework. Each item
 
 [ ] **Choice / Toggle:** Things for making selections or turning stuff on/off.
 
-[ ] **Form Renderer:** Tool to make forms show up the way we want.
+[x] **Form Renderer:** Tool to make forms show up the way we want.
 
 [x] **Form Field:** Boxes where people type stuff or pick options.
 

package-lock.json

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: "@react-ck/babel-config",
+};

packages/components/form/babel.config.js

@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const content: Record<string, string>;
+  export default content;
+}

packages/components/form/declarations.d.ts

@@ -0,0 +1,54 @@
+import { type FormValues, type FormFieldMap, type FormValidators } from "../src";
+import { REGEX, regexValidation } from "./utils";
+
+export const fields = {
+  email: {
+    type: "input",
+    props: {
+      label: "Email Address",
+      placeholder: "john-doe@aaa.com",
+      description: "Your work email address",
+    },
+  },
+  password: {
+    type: "input",
+    props: {
+      type: "password",
+      label: "Password",
+      placeholder: "Strong password",
+      description: REGEX.password.description,
+    },
+  },
+  passwordRepeat: {
+    type: "input",
+    props: {
+      type: "password",
+      label: "Repeat Password",
+      placeholder: "Repeat password",
+    },
+  },
+} satisfies FormFieldMap;
+
+export type Values = FormValues<typeof fields>;
+
+export const validators = {
+  email: (values) => {
+    if (!values.email?.toString().trim().length) return "Required field";
+    return regexValidation(String(values.email), "email");
+  },
+  password: (values) => {
+    if (!values.password?.toString().trim().length) return "Required field";
+    return regexValidation(String(values.password), "password");
+  },
+  passwordRepeat: (values) => {
+    if (!values.passwordRepeat?.toString().trim().length) return "Required field";
+    if (values.password !== values.passwordRepeat) return "Passwords must be equal";
+    return regexValidation(String(values.passwordRepeat), "password");
+  },
+} satisfies FormValidators<typeof fields>;
+
+export const values = {
+  email: "",
+  password: "",
+  passwordRepeat: "",
+} satisfies FormValues<typeof fields>;

packages/components/form/fixtures/login.ts

@@ -0,0 +1,22 @@
+export const REGEX = {
+  email: {
+    exp: /[\d%+._a-z-]+@[\d.a-z-]+.[a-z]{2,}$/,
+    description: "Insert a valid email",
+  },
+  password: {
+    exp: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/,
+    description:
+      "Must contain at least one  number and one uppercase and lowercase letter, and at least 8 or more characters",
+  },
+} satisfies Record<
+  string,
+  {
+    exp: RegExp;
+    description: string;
+  }
+>;
+
+export const regexValidation = (value: string, key: keyof typeof REGEX): string | undefined => {
+  if (REGEX[key].exp.exec(value) === null) return REGEX[key].description;
+  return undefined;
+};

packages/components/form/fixtures/utils.ts

@@ -0,0 +1,2 @@
+// Hack for module resolution of non built packages
+export * from "./src/index";

packages/components/form/index.ts

@@ -0,0 +1 @@
+export { config as default } from "@react-ck/jest-config";

packages/components/form/jest.config.ts

@@ -0,0 +1,41 @@
+{
+  "name": "@react-ck/form",
+  "private": false,
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "homepage": "https://github.com/abelflopes/react-ck/tree/master/packages/components/form#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abelflopes/react-ck.git"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production webpack",
+    "lint:typescript": "tsc --noEmit",
+    "test": "npx -y npm-run-all -s test:*",
+    "test:unit": "jest --testPathPattern=\".unit.*\"",
+    "test:snapshot": "jest --testPathPattern=\".snapshot.*\"",
+    "test:snapshot:update": "jest --testPathPattern=\".snapshot.*\" -u"
+  },
+  "devDependencies": {
+    "@react-ck/babel-config": "^1.0.0",
+    "@react-ck/jest-config": "^1.0.0",
+    "@react-ck/typescript-config": "^1.0.0",
+    "@react-ck/webpack-config": "^1.0.0",
+    "@types/react": "^18.2.33"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "dependencies": {
+    "@react-ck/input": "^1.0.0",
+    "@react-ck/scss-utils": "^1.1.2",
+    "@react-ck/select": "^1.0.0",
+    "@react-ck/textarea": "^1.0.0",
+    "@react-ck/theme": "^1.5.0",
+    "classnames": "^2.3.2"
+  }
+}

packages/components/form/package.json

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot Form renders correctly 1`] = `
+<div
+  className="root"
+>
+  <div
+    className="root default"
+  >
+    <div
+      className="content"
+    >
+      <input
+        className="root"
+        onChange={[Function]}
+        placeholder="Email Address"
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="root default"
+  >
+    <div
+      className="content"
+    >
+      <input
+        className="root"
+        onChange={[Function]}
+        placeholder="Password"
+        type="password"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;