@equinor/apollo-utils 0.1.0

package/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['custom'],
+}

package/.turbo/turbo-build.log

@@ -0,0 +1,14 @@
+$ tsup src/index.ts --format esm,cjs --dts --external react
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v6.6.3
+CLI Target: es6
+ESM Build start
+CJS Build start
+CJS dist/index.js 3.75 KB
+CJS ⚡️ Build success in 65ms
+ESM dist/index.mjs 2.62 KB
+ESM ⚡️ Build success in 68ms
+DTS Build start
+DTS ⚡️ Build success in 3380ms
+DTS dist/index.d.ts 1.86 KB

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @equinor/apollo-utils
+
+## 0.1.0
+
+### Minor Changes
+
+- 8abf3eb: Initial version of Apollo Utils with jotai-form
+- 8abf3eb: Create apollo-utils package and jotai form example app

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import { PrimitiveAtom } from 'jotai';
+import { AtomFamily } from 'jotai/vanilla/utils/atomFamily';
+import { z } from 'zod';
+
+type ValidationErrorMap<T> = Map<keyof T, {
+    message: string;
+    code: string;
+}>;
+
+declare function createValidator<S extends z.ZodTypeAny>(schema: S): {
+    validate: <E extends z.TypeOf<S>>(entity: E) => ValidationErrorMap<E> | undefined;
+};
+
+type FormState<T> = {
+    status: 'editing' | 'pending';
+    values: T;
+    errors?: ValidationErrorMap<T>;
+    isValid?: boolean;
+};
+type FormFamilyParam = {
+    id: number | string;
+} & Record<string, unknown>;
+
+declare function createFormFamily<E extends Record<string, unknown>>(): AtomFamily<FormFamilyParam, PrimitiveAtom<FormState<E> | undefined> & {
+    init: FormState<E> | undefined;
+}>;
+type FormFamily<T> = AtomFamily<FormFamilyParam, PrimitiveAtom<FormState<T> | undefined>>;
+type FormValidator = ReturnType<typeof createValidator>;
+type UseFormFamilyUtilsOptions = {
+    validator?: FormValidator;
+};
+declare function useFormFamilyUtils<T>(family: FormFamily<T>, options?: UseFormFamilyUtilsOptions): {
+    useFormStateAtom: (param: FormFamilyParam) => [FormState<T> | undefined, (args_0: FormState<T> | ((prev: FormState<T> | undefined) => FormState<T> | undefined) | undefined) => void];
+    useFormState: (param: FormFamilyParam) => FormState<T> | undefined;
+    useUpdateFormMutation: (param: FormFamilyParam) => (update: Partial<T>) => void;
+    useFormMutations(param: FormFamilyParam): {
+        update: (update: Partial<T>) => void;
+        initializeForm: (entity: T) => void;
+        resetForm: () => void;
+    };
+};
+declare function useFormFamilyMutation<T>(family: FormFamily<T>, param: FormFamilyParam, validator?: FormValidator): (update: Partial<T>) => void;
+
+export { FormFamilyParam, FormState, ValidationErrorMap, createFormFamily, createValidator, useFormFamilyMutation, useFormFamilyUtils };

package/dist/index.js

@@ -0,0 +1,115 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createFormFamily: () => createFormFamily,
+  createValidator: () => createValidator,
+  useFormFamilyMutation: () => useFormFamilyMutation,
+  useFormFamilyUtils: () => useFormFamilyUtils
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/jotai-form/formUtils.ts
+var import_jotai = require("jotai");
+var import_utils = require("jotai/utils");
+function createFormFamily() {
+  return (0, import_utils.atomFamily)(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (_param) => (0, import_jotai.atom)(void 0),
+    (a, b) => a.id === b.id
+  );
+}
+function useFormFamilyUtils(family, options = {}) {
+  return {
+    useFormStateAtom: (param) => (0, import_jotai.useAtom)(family(param)),
+    useFormState: (param) => (0, import_jotai.useAtomValue)(family(param)),
+    useUpdateFormMutation: (param) => {
+      return useFormFamilyMutation(family, param, options.validator);
+    },
+    useFormMutations(param) {
+      const mutateAtom = (0, import_jotai.useSetAtom)(family(param));
+      return {
+        update: useFormFamilyMutation(family, param, options.validator),
+        initializeForm: (entity) => mutateAtom({
+          status: "editing",
+          values: entity,
+          isValid: true
+        }),
+        resetForm: () => mutateAtom(void 0)
+      };
+    }
+  };
+}
+function useFormFamilyMutation(family, param, validator) {
+  const mutate = (0, import_jotai.useSetAtom)(family(param));
+  return (update) => {
+    return mutate((previous) => {
+      if (!previous)
+        return;
+      const updatedValues = __spreadValues(__spreadValues({}, previous.values), update);
+      const errors = validator == null ? void 0 : validator.validate(updatedValues);
+      return {
+        status: "editing",
+        values: updatedValues,
+        errors,
+        isValid: !errors
+      };
+    });
+  };
+}
+
+// src/zod-validation/utils.ts
+function createValidator(schema) {
+  return {
+    validate: (entity) => {
+      const validation = schema.safeParse(entity);
+      if (validation.success)
+        return void 0;
+      return new Map(
+        validation.error.errors.map((error) => [
+          error.path[0],
+          { message: error.message, code: error.code }
+        ])
+      );
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createFormFamily,
+  createValidator,
+  useFormFamilyMutation,
+  useFormFamilyUtils
+});

package/dist/index.mjs

@@ -0,0 +1,88 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
+// src/jotai-form/formUtils.ts
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { atomFamily } from "jotai/utils";
+function createFormFamily() {
+  return atomFamily(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (_param) => atom(void 0),
+    (a, b) => a.id === b.id
+  );
+}
+function useFormFamilyUtils(family, options = {}) {
+  return {
+    useFormStateAtom: (param) => useAtom(family(param)),
+    useFormState: (param) => useAtomValue(family(param)),
+    useUpdateFormMutation: (param) => {
+      return useFormFamilyMutation(family, param, options.validator);
+    },
+    useFormMutations(param) {
+      const mutateAtom = useSetAtom(family(param));
+      return {
+        update: useFormFamilyMutation(family, param, options.validator),
+        initializeForm: (entity) => mutateAtom({
+          status: "editing",
+          values: entity,
+          isValid: true
+        }),
+        resetForm: () => mutateAtom(void 0)
+      };
+    }
+  };
+}
+function useFormFamilyMutation(family, param, validator) {
+  const mutate = useSetAtom(family(param));
+  return (update) => {
+    return mutate((previous) => {
+      if (!previous)
+        return;
+      const updatedValues = __spreadValues(__spreadValues({}, previous.values), update);
+      const errors = validator == null ? void 0 : validator.validate(updatedValues);
+      return {
+        status: "editing",
+        values: updatedValues,
+        errors,
+        isValid: !errors
+      };
+    });
+  };
+}
+
+// src/zod-validation/utils.ts
+function createValidator(schema) {
+  return {
+    validate: (entity) => {
+      const validation = schema.safeParse(entity);
+      if (validation.success)
+        return void 0;
+      return new Map(
+        validation.error.errors.map((error) => [
+          error.path[0],
+          { message: error.message, code: error.code }
+        ])
+      );
+    }
+  };
+}
+export {
+  createFormFamily,
+  createValidator,
+  useFormFamilyMutation,
+  useFormFamilyUtils
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@equinor/apollo-utils",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "version": "0.1.0",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
+    "lint": "TIMING=1 eslint . --fix",
+    "type-check": "tsc --noEmit",
+    "test": "vitest --run",
+    "test:watch": "vitest --watch"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "jotai": "^2.0.1",
+    "tsup": "^6.6.3",
+    "typescript": "^4.9.5",
+    "zod": "^3.20.6"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@vitest/ui": "^0.28.5",
+    "eslint": "^8.34.0",
+    "eslint-config-custom": "*",
+    "jsdom": "^21.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vitest": "^0.28.5"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './jotai-form'
+export * from './zod-validation'

package/src/jotai-form/formUtils.test.ts

@@ -0,0 +1,36 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { useAtomValue } from 'jotai'
+import { describe, expect, it } from 'vitest'
+import { examplePerson, Person } from '../test-data/person'
+import { createFormFamily, useFormFamilyUtils } from './formUtils'
+
+describe('Test createFormFamily', () => {
+  it('should create a family', () => {
+    const family = createFormFamily<Person>()
+    expect(family).toBeTruthy()
+  })
+  it('should initialize atom as undefined', () => {
+    const family = createFormFamily<Person>()
+    const { result } = renderHook(() => useAtomValue(family(examplePerson)))
+    expect(result.current).toBeUndefined()
+  })
+})
+
+function initFormUtils() {
+  const family = createFormFamily<Person>()
+  return useFormFamilyUtils(family)
+}
+
+describe('Test useFormFamilyUtils', () => {
+  it('should initialize form as valid with values', () => {
+    const utils = initFormUtils()
+    renderHook(() => utils.useFormMutations(examplePerson).initializeForm(examplePerson))
+    const { result } = renderHook(() => utils.useFormState(examplePerson))
+    expect(result.current?.isValid).toBeTruthy()
+    expect(result.current).toStrictEqual({
+      status: 'editing',
+      values: examplePerson,
+      isValid: true,
+    })
+  })
+})

package/src/jotai-form/formUtils.ts

@@ -0,0 +1,73 @@
+import { atom, PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { atomFamily } from 'jotai/utils'
+import { type AtomFamily } from 'jotai/vanilla/utils/atomFamily'
+import { createValidator } from '../zod-validation'
+import { FormFamilyParam, FormState } from './types'
+
+export function createFormFamily<E extends Record<string, unknown>>() {
+  return atomFamily(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (_param: FormFamilyParam) => atom<FormState<E> | undefined>(undefined),
+    (a, b) => a.id === b.id
+  )
+}
+
+type FormFamily<T> = AtomFamily<FormFamilyParam, PrimitiveAtom<FormState<T> | undefined>>
+type FormValidator = ReturnType<typeof createValidator>
+
+type UseFormFamilyUtilsOptions = {
+  validator?: FormValidator
+}
+
+export function useFormFamilyUtils<T>(
+  family: FormFamily<T>,
+  options: UseFormFamilyUtilsOptions = {}
+) {
+  return {
+    useFormStateAtom: (param: FormFamilyParam) => useAtom(family(param)),
+    useFormState: (param: FormFamilyParam) => useAtomValue(family(param)),
+    useUpdateFormMutation: (param: FormFamilyParam) => {
+      return useFormFamilyMutation(family, param, options.validator)
+    },
+    useFormMutations(param: FormFamilyParam) {
+      const mutateAtom = useSetAtom(family(param))
+
+      return {
+        update: useFormFamilyMutation(family, param, options.validator),
+        initializeForm: (entity: T) =>
+          mutateAtom({
+            status: 'editing',
+            values: entity,
+            isValid: true,
+          }),
+        resetForm: () => mutateAtom(undefined),
+      }
+    },
+  }
+}
+
+export function useFormFamilyMutation<T>(
+  family: FormFamily<T>,
+  param: FormFamilyParam,
+  validator?: FormValidator
+) {
+  const mutate = useSetAtom(family(param))
+  return (update: Partial<T>) => {
+    return mutate((previous) => {
+      if (!previous) return
+
+      const updatedValues = {
+        ...previous.values,
+        ...update,
+      }
+      const errors = validator?.validate(updatedValues)
+
+      return {
+        status: 'editing',
+        values: updatedValues,
+        errors,
+        isValid: !errors,
+      }
+    })
+  }
+}

package/src/jotai-form/index.ts

@@ -0,0 +1,2 @@
+export * from './formUtils'
+export * from './types'

package/src/jotai-form/types.ts

@@ -0,0 +1,12 @@
+import { ValidationErrorMap } from '../zod-validation'
+
+export type FormState<T> = {
+  status: 'editing' | 'pending'
+  values: T
+  errors?: ValidationErrorMap<T>
+  isValid?: boolean
+}
+
+export type FormFamilyParam = {
+  id: number | string
+} & Record<string, unknown>

package/src/test-data/person.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod'
+
+export const personSchema = z.object({
+  id: z.number(),
+  name: z.string().min(1),
+  age: z.number().min(0).max(150),
+})
+
+export type Person = z.infer<typeof personSchema>
+
+export const examplePerson: Person = {
+  id: 0,
+  name: 'Apollo',
+  age: 25,
+}

package/src/zod-validation/index.ts

@@ -0,0 +1,2 @@
+export * from './types'
+export * from './utils'

package/src/zod-validation/types.ts

@@ -0,0 +1 @@
+export type ValidationErrorMap<T> = Map<keyof T, { message: string; code: string }>

package/src/zod-validation/utils.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { examplePerson, personSchema } from '../test-data/person'
+import { createValidator } from './utils'
+
+const validator = createValidator(personSchema)
+
+describe('Test validator creation', () => {
+  it('should return undefined on valid data', () => {
+    const errors = validator.validate(examplePerson)
+    expect(errors).toBeUndefined()
+  })
+  it('should return errors on invalid name and age', () => {
+    const errors = validator.validate({ ...examplePerson, name: '', age: 200 })
+    expect(errors?.has('name')).toBeTruthy()
+    expect(errors?.has('age')).toBeTruthy()
+  })
+})

package/src/zod-validation/utils.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod'
+import { ValidationErrorMap } from './types'
+
+export function createValidator<S extends z.ZodTypeAny>(schema: S) {
+  return {
+    validate: <E extends z.infer<typeof schema>>(entity: E) => {
+      const validation = schema.safeParse(entity)
+      if (validation.success) return undefined
+      return new Map(
+        validation.error.errors.map((error) => [
+          error.path[0] as keyof E,
+          { message: error.message, code: error.code },
+        ])
+      ) as ValidationErrorMap<E>
+    },
+  }
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/vite.json",
+  "include": ["src", "setupTest.ts"],
+  "compilerOptions": { "types": ["vitest/importMeta"] }
+}

package/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  define: {
+    'import.meta.vitest': 'undefined',
+  },
+  test: {
+    includeSource: ['src/**/*.ts'],
+    environment: 'jsdom',
+  },
+})