@equinor/apollo-utils 0.1.3-beta.3 → 0.1.3-beta.5

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+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;
+    validateAsync: <E_1 extends z.TypeOf<S>>(entity: z.infer<typeof schema>) => Promise<ValidationErrorMap<E_1> | undefined>;
+    getSchema(): S;
+};
+
+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,147 @@
+"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);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// 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 prepareErrors(validation);
+    },
+    validateAsync: (entity) => __async(this, null, function* () {
+      const validation = yield schema.safeParseAsync(entity);
+      if (validation.success)
+        return void 0;
+      return prepareErrors(validation);
+    }),
+    getSchema() {
+      return schema;
+    }
+  };
+}
+function prepareErrors(errorValidation) {
+  return new Map(
+    errorValidation.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,120 @@
+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;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// 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 prepareErrors(validation);
+    },
+    validateAsync: (entity) => __async(this, null, function* () {
+      const validation = yield schema.safeParseAsync(entity);
+      if (validation.success)
+        return void 0;
+      return prepareErrors(validation);
+    }),
+    getSchema() {
+      return schema;
+    }
+  };
+}
+function prepareErrors(errorValidation) {
+  return new Map(
+    errorValidation.error.errors.map((error) => [
+      error.path[0],
+      { message: error.message, code: error.code }
+    ])
+  );
+}
+export {
+  createFormFamily,
+  createValidator,
+  useFormFamilyMutation,
+  useFormFamilyUtils
+};

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@equinor/apollo-utils",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
-  "version": "0.1.3-beta.3",
+  "version": "0.1.3-beta.5",
   "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
@@ -13,21 +17,16 @@
     "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"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.8",
     "@equinor/eds-core-react": "^0.27.0",
-    "styled-components": "^5.3.7"
+    "styled-components": "^5.3.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@testing-library/react": "^13.4.0",
@@ -35,10 +34,15 @@
     "@vitest/ui": "^0.28.5",
     "eslint": "^8.34.0",
     "eslint-config-custom": "*",
+    "@types/react": "^18.0.1",
+    "@types/react-dom": "^18.0.1",
+    "@types/styled-components": "^5.1.26",
     "jsdom": "^21.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.8",
-    "vitest": "^0.28.5"
+    "vitest": "^0.28.5",
+    "tsconfig": "*",
+    "typescript": "^4.9.5"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/.eslintrc.cjs

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

package/CHANGELOG.md

@@ -1,31 +0,0 @@
-# @equinor/apollo-utils
-
-## 0.1.3
-
-### Patch Changes
-
-- e1354f0: Move edit cells to apollo-utils
-- Updated dependencies [e1354f0]
-  - @equinor/apollo-components@3.1.2
-
-## 0.1.2
-
-### Patch Changes
-
-- 7fa24ff: Move cells to @equinor/apollo-utils and extract common functionality into separate package
-- Updated dependencies [07e344a]
-- Updated dependencies [7fa24ff]
-  - apollo-common@0.1.2
-
-## 0.1.1
-
-### Patch Changes
-
-- f9e695e: Add validateAsync utility to support async refinements
-
-## 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/src/edit-cells/EditableCheckboxCell.tsx

@@ -1,34 +0,0 @@
-import { Checkbox, EdsProvider } from '@equinor/eds-core-react'
-import { CellContext } from '@tanstack/react-table'
-import { Controller, useFormContext } from 'react-hook-form'
-import { FormMeta, useEditMode } from '../form-meta'
-
-export function EditableCheckboxCell<T extends FormMeta>(context: CellContext<T, boolean>) {
-  const editMode = useEditMode()
-  const { control } = useFormContext()
-
-  if (!editMode)
-    return (
-      <EdsProvider density="compact">
-        <Checkbox
-          enterKeyHint="next"
-          aria-label="readonly"
-          readOnly={true}
-          checked={context.getValue()}
-          disabled={true}
-        />
-      </EdsProvider>
-    )
-
-  return (
-    <Controller
-      control={control}
-      name={context.column.id}
-      render={({ field: { value, ...field } }) => (
-        <EdsProvider density="compact">
-          <Checkbox enterKeyHint="send" aria-label="editable" checked={value} {...field} />
-        </EdsProvider>
-      )}
-    />
-  )
-}

package/src/edit-cells/EditableDateCell.tsx

@@ -1,80 +0,0 @@
-import { TypographyCustom } from '@equinor/apollo-components'
-import { TextField } from '@equinor/eds-core-react'
-import { CellContext } from '@tanstack/react-table'
-import { ChangeEvent, useMemo } from 'react'
-import { Controller, useFormContext } from 'react-hook-form'
-import styled from 'styled-components'
-import { FormMeta, useEditMode } from '../form-meta'
-import { getHelperTextProps } from './utils'
-
-export interface EditableDateCellProps<T extends FormMeta> extends CellContext<T, unknown> {
-  dateStringFormatter?: (date: string) => string
-}
-
-export function EditableDateCell<T extends FormMeta>(props: EditableDateCellProps<T>) {
-  const { dateStringFormatter, ...context } = props
-  const rawValue = context.getValue<string>()
-
-  const editMode = useEditMode()
-  const { control } = useFormContext()
-
-  const formattedValue = useMemo(
-    () => dateStringFormatter?.(rawValue) ?? rawValue,
-    [rawValue, dateStringFormatter]
-  )
-
-  if (!editMode) return <TypographyCustom truncate>{formattedValue}</TypographyCustom>
-
-  return (
-    <Controller
-      control={control}
-      name={context.column.id}
-      render={({ field: { value, onChange, ...field }, fieldState: { error } }) => (
-        <InlineTextField
-          id={context.column.id}
-          type="date"
-          autoComplete="none"
-          value={value ? parseISODate(value) : ''}
-          onChange={(e: ChangeEvent<HTMLInputElement>) =>
-            onChange(e.target.value ? parseISODate(e.target.value) : '')
-          }
-          {...getHelperTextProps({ error })}
-          {...field}
-        />
-      )}
-    />
-  )
-}
-
-/**
- * Formats a date string into `yyyy-mm-dd` format.
- */
-function parseISODate(dateString: string) {
-  const date = new Date(dateString)
-  const offset = date.getTimezoneOffset()
-  const dateWithoutOffset = new Date(date.getTime() - offset * 60 * 1000)
-  return dateWithoutOffset.toISOString().split('T')[0]
-}
-
-const InlineTextField = styled(TextField)`
-  /* 
-  TODO: Improve input based on feedback from UX
-  & > div {
-    background: transparent;
-    margin: 0 -0.5rem;
-    padding: 0 0.5rem;
-    box-shadow: none;
-    width: auto;
-  }
-
-  input {
-    padding: 0;
-    letter-spacing: 0;
-    font-weight: 400;
-    color: inherit;
-
-    ::placeholder {
-      color: red;
-    }
-  } */
-`

package/src/edit-cells/EditableDropdownCell.tsx

@@ -1,68 +0,0 @@
-import { Autocomplete } from '@equinor/eds-core-react'
-import { CellContext } from '@tanstack/react-table'
-import { Controller, useFormContext } from 'react-hook-form'
-import styled from 'styled-components'
-import { FormMeta, useEditMode } from '../form-meta'
-import { TypographyCustom } from './TypographyCustom'
-
-export interface Option {
-  label: string
-  value: string
-}
-
-export interface EditableDropdownCellProps<T extends FormMeta> extends CellContext<T, unknown> {
-  /**
-   * `Option.value` is used internally to get and update selection state. `Option.label` is *only* for visual purposes.
-   */
-  options: Option[]
-}
-
-function buildEmptyOption(): Option {
-  return { label: '', value: '' }
-}
-
-export function EditableDropdownCell<T extends FormMeta>(props: EditableDropdownCellProps<T>) {
-  const { options, ...context } = props
-  const editMode = useEditMode()
-  const { control } = useFormContext()
-  if (!editMode) return <TypographyCustom truncate>{context.getValue() as any}</TypographyCustom>
-
-  return (
-    <Controller
-      control={control}
-      name={context.column.id}
-      render={({ field: { value, onChange, ...field } }) => {
-        const selectedOption = options.find((option) => option.value === value) ?? buildEmptyOption
-        return (
-          <AutocompleteCustom
-            label=""
-            // Casting is due to stying the Autocomplete, plain EDS Autocomplete works
-            // Fixed when workaround is not needed anymore
-            selectedOptions={selectedOption && ([selectedOption] as Option[])}
-            options={options}
-            optionLabel={(option) => (option as Option)?.label ?? ''}
-            aria-required
-            hideClearButton
-            aria-autocomplete="none"
-            onOptionsChange={(changes) => {
-              const [change] = changes.selectedItems
-              onChange((change as Option)?.value)
-            }}
-            {...field}
-          />
-        )
-      }}
-    />
-  )
-}
-
-// Requested in https://github.com/equinor/design-system/issues/2804
-export const AutocompleteCustom = styled(Autocomplete)`
-  input[type='text'] {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    padding-right: ${({ hideClearButton }) =>
-      hideClearButton ? `calc(8px + (24px * 1))` : `calc(8px + (24px * 2))`};
-  }
-`

package/src/edit-cells/EditableNumberCell.tsx

@@ -1,57 +0,0 @@
-import { TextField } from '@equinor/eds-core-react'
-import { CellContext } from '@tanstack/react-table'
-import { ChangeEvent } from 'react'
-import { Controller, useFormContext } from 'react-hook-form'
-import styled from 'styled-components'
-import { FormMeta, useEditMode } from '../form-meta'
-import { TypographyCustom } from './TypographyCustom'
-import { getHelperTextProps } from './utils'
-
-export function EditableNumberCell<T extends FormMeta>(context: CellContext<T, number>) {
-  const editMode = useEditMode()
-  const { control } = useFormContext()
-
-  if (!editMode) return <TypographyCustom truncate>{context.getValue()}</TypographyCustom>
-
-  return (
-    <Controller
-      control={control}
-      name={context.column.id}
-      render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-        <>
-          <InlineTextField
-            id={context.column.id}
-            type="number"
-            autoComplete="none"
-            onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.valueAsNumber)}
-            {...field}
-            {...getHelperTextProps({ error })}
-          />
-        </>
-      )}
-    />
-  )
-}
-
-const InlineTextField = styled(TextField)`
-  /* 
-  TODO: Improve input based on feedback from UX
-  & > div {
-    background: transparent;
-    margin: 0 -0.5rem;
-    padding: 0 0.5rem;
-    box-shadow: none;
-    width: auto;
-  }
-
-  input {
-    padding: 0;
-    letter-spacing: 0;
-    font-weight: 400;
-    color: inherit;
-
-    ::placeholder {
-      color: red;
-    }
-  } */
-`

package/src/edit-cells/EditableTextAreaCell.tsx

@@ -1,126 +0,0 @@
-import { Button, Dialog as EDS, Icon, TextField } from '@equinor/eds-core-react'
-import { CellContext } from '@tanstack/react-table'
-import { ChangeEvent, useState } from 'react'
-import { Controller, useFormContext } from 'react-hook-form'
-import styled from 'styled-components'
-import { FormMeta, useEditMode } from '../form-meta'
-import { PopoverCell } from './PopoverCell'
-import { getHelperTextProps, stopPropagation } from './utils'
-
-interface EdtiableTextAreaProps<T extends FormMeta> extends CellContext<T, string> {
-  title: string
-}
-
-export function EditableTextAreaCell<T extends FormMeta>(props: EdtiableTextAreaProps<T>) {
-  const { title, ...context } = props
-
-  const [textareaValue, setTextareaValue] = useState<string>(context.getValue())
-  const [open, setOpen] = useState(false)
-  const editMode = useEditMode()
-  const { control } = useFormContext()
-
-  const name = context.column.id
-
-  if (!editMode)
-    return <PopoverCell id={name + 'popover'} value={context.getValue()} title={title} />
-
-  const openDialog = () => setOpen(true)
-  const closeDialog = () => setOpen(false)
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field: { onChange, ref, ...field }, fieldState: { error } }) => (
-        <>
-          {/* Inline input */}
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              position: 'relative',
-            }}
-          >
-            <StyledTextField
-              id={field.name}
-              onChange={onChange}
-              ref={ref}
-              {...field}
-              {...getHelperTextProps({ error })}
-            />
-            <IconButton variant="ghost_icon" onClick={stopPropagation(openDialog)}>
-              <Icon name="arrow_up" size={24} style={{ transform: 'rotateZ(45deg)' }} />
-            </IconButton>
-          </div>
-
-          {/* Dialog */}
-          <EDS
-            open={open}
-            onClose={() => {
-              closeDialog()
-              onChange(textareaValue)
-            }}
-            isDismissable
-            style={{ width: 'min(50rem, calc(100vw - 4rem))' }}
-          >
-            <EDS.Header>
-              <EDS.Title>{title}</EDS.Title>
-            </EDS.Header>
-            <EDS.Content>
-              <TextField
-                style={{
-                  maxWidth: '100%',
-                  marginTop: '1rem',
-                }}
-                id={field.name + 'modal'}
-                multiline
-                rows={8}
-                name={field.name + 'modal'}
-                value={textareaValue}
-                onChange={(e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => {
-                  setTextareaValue(e.target.value)
-                }}
-              />
-            </EDS.Content>
-            <EDS.Actions style={{ display: 'flex', gap: '1rem' }}>
-              <Button
-                onClick={() => {
-                  closeDialog()
-                  onChange(textareaValue)
-                }}
-              >
-                Submit
-              </Button>
-              <Button
-                variant="ghost"
-                onClick={() => {
-                  closeDialog()
-                  setTextareaValue(context.getValue())
-                }}
-              >
-                Cancel
-              </Button>
-            </EDS.Actions>
-          </EDS>
-        </>
-      )}
-    />
-  )
-}
-
-const StyledTextField = styled(TextField)`
-  & input {
-    padding-right: 40px;
-    letter-spacing: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-`
-
-const IconButton = styled(Button)`
-  position: absolute;
-  height: 32px;
-  width: 32px;
-  right: 4px;
-`

package/src/edit-cells/EditableTextFieldCell.tsx

@@ -1,53 +0,0 @@
-import { TextField } from '@equinor/eds-core-react'
-import { CellContext } from '@tanstack/react-table'
-import { Controller, FieldPath, useFormContext } from 'react-hook-form'
-import styled from 'styled-components'
-import { FormMeta, useEditMode } from '../form-meta'
-import { TypographyCustom } from './TypographyCustom'
-import { getHelperTextProps } from './utils'
-
-export function EditableTextFieldCell<T extends FormMeta>(context: CellContext<T, unknown>) {
-  const { control } = useFormContext<T>()
-  const editMode = useEditMode()
-
-  if (!editMode) return <TypographyCustom truncate>{context.getValue() as any}</TypographyCustom>
-
-  return (
-    <Controller
-      control={control}
-      name={context.column.id as FieldPath<T>}
-      render={({ field: { value, ...field }, fieldState: { error } }) => (
-        <InlineTextField
-          id={context.column.id}
-          autoComplete="none"
-          value={String(value)}
-          {...field}
-          {...getHelperTextProps({ error })}
-        />
-      )}
-    />
-  )
-}
-
-const InlineTextField = styled(TextField)`
-  /* 
-  TODO: Improve input based on feedback from UX
-  & > div {
-    background: transparent;
-    margin: 0 -0.5rem;
-    padding: 0 0.5rem;
-    box-shadow: none;
-    width: auto;
-  }
-
-  input {
-    padding: 0;
-    letter-spacing: 0;
-    font-weight: 400;
-    color: inherit;
-
-    ::placeholder {
-      color: red;
-    }
-  } */
-`

package/src/edit-cells/PopoverCell.tsx

@@ -1,42 +0,0 @@
-import { Popover, Typography } from '@equinor/eds-core-react'
-import { ReactNode, useRef, useState } from 'react'
-import { TypographyCustom } from './TypographyCustom'
-import { stopPropagation } from './utils'
-
-interface PopoverCellProps {
-  id: string
-  value: string
-  title?: string | JSX.Element | ReactNode
-}
-
-export const PopoverCell = (props: PopoverCellProps) => {
-  const [open, setOpen] = useState(false)
-  const anchorRef = useRef<HTMLDivElement>(null)
-  const handleClick = () => setOpen(!open)
-  const handleClose = () => setOpen(false)
-
-  return (
-    <div style={{ position: 'relative' }} ref={anchorRef}>
-      <TypographyCustom truncate onClick={stopPropagation(handleClick)}>
-        {String(props.value)}
-      </TypographyCustom>
-      <Popover
-        id={props.id}
-        open={open}
-        aria-controls="expand cell"
-        anchorEl={anchorRef.current}
-        onClose={handleClose}
-        placement={'bottom'}
-      >
-        {props.title && (
-          <Popover.Title>
-            <Popover.Header>{props.title}</Popover.Header>
-          </Popover.Title>
-        )}
-        <Popover.Content>
-          <Typography>{String(props.value)}</Typography>
-        </Popover.Content>
-      </Popover>
-    </div>
-  )
-}

package/src/edit-cells/TypographyCustom.tsx

@@ -1,62 +0,0 @@
-import {
-  Typography as EdsTypography,
-  TypographyProps as EdsTypographyProps,
-} from '@equinor/eds-core-react'
-import { tokens } from '@equinor/eds-tokens'
-import { CSSProperties } from 'react'
-import styled from 'styled-components'
-
-export type TypographyProps = {
-  truncate?: boolean
-} & EdsTypographyProps
-
-const truncateStyle: CSSProperties = {
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-}
-
-export const TypographyCustom = (props: TypographyProps) => {
-  const { truncate, style: styleFromProps, ...edsTypographyProps } = props
-
-  if (truncate)
-    return (
-      <HoverCapture>
-        <EdsTypography
-          {...edsTypographyProps}
-          style={{
-            ...styleFromProps,
-            ...truncateStyle,
-          }}
-        />
-      </HoverCapture>
-    )
-
-  return <EdsTypography {...edsTypographyProps} style={styleFromProps} />
-}
-
-const HoverCapture = styled.div`
-  height: ${tokens.typography.table.cell_text.lineHeight};
-  background-color: inherit;
-
-  position: relative;
-  width: 100%;
-
-  &:hover {
-    z-index: 1;
-  }
-
-  & > * {
-    width: inherit;
-    position: absolute;
-  }
-
-  &:hover > * {
-    width: auto;
-    z-index: 1;
-    padding: 0.5em 1em;
-    margin: -0.5em -1em;
-
-    background-color: inherit;
-  }
-`

package/src/edit-cells/index.ts

@@ -1,6 +0,0 @@
-export * from './EditableCheckboxCell'
-export * from './EditableDateCell'
-export * from './EditableDropdownCell'
-export * from './EditableNumberCell'
-export * from './EditableTextAreaCell'
-export * from './EditableTextFieldCell'

package/src/edit-cells/utils.tsx

@@ -1,49 +0,0 @@
-import { Icon } from '@equinor/eds-core-react'
-import { Variants } from '@equinor/eds-core-react/dist/types/components/types'
-import { error_filled, warning_filled } from '@equinor/eds-icons'
-import { SyntheticEvent } from 'react'
-
-interface GetHelperTextPropsProps {
-  error?: { message?: string }
-  warning?: { message: string }
-  helperText?: string
-}
-
-interface GetHelperTextProps {
-  variant?: Variants
-  helperText?: string
-  helperIcon: JSX.Element | null
-}
-
-export function getHelperTextProps({
-  error,
-  warning,
-  helperText,
-}: GetHelperTextPropsProps): GetHelperTextProps {
-  if (error)
-    return {
-      variant: 'error',
-      helperText: error.message,
-      helperIcon: <Icon data={error_filled} size={16} />,
-    }
-
-  if (warning)
-    return {
-      variant: 'warning',
-      helperText: warning.message,
-      helperIcon: <Icon data={warning_filled} size={16} />,
-    }
-
-  return {
-    helperText,
-    helperIcon: null,
-  }
-}
-
-/** Wrap an event handler and stop event propagation */
-export function stopPropagation<T extends HTMLElement>(handler: (e: SyntheticEvent<T>) => void) {
-  return (e: SyntheticEvent<T>) => {
-    e.stopPropagation()
-    handler(e)
-  }
-}

package/src/form-meta/index.ts

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

package/src/form-meta/types.ts

@@ -1,7 +0,0 @@
-export type FormMeta = {
-  _isNew?: boolean;
-  _editMode?: boolean;
-  _hasRemoteChange?: boolean;
-};
-
-export type WithoutFormMeta<T extends FormMeta> = Omit<T, keyof FormMeta>;

package/src/form-meta/utils.tsx

@@ -1,66 +0,0 @@
-import { omit } from 'lodash'
-import { useFormContext } from 'react-hook-form'
-import { FormMeta } from './types'
-
-// This file contains methods related to the FormMeta type
-
-const formMeta: FormMeta = {
-  _editMode: false,
-  _isNew: false,
-  _hasRemoteChange: false,
-}
-
-/**
- * Subscribes to the `_editMode` field in a `react-hook-form` context.
- *
- * @returns edit mode value
- */
-export function useEditMode() {
-  const { watch } = useFormContext<FormMeta>()
-  return watch('_editMode') ?? false
-}
-
-/**
- * Subscribes to the `_hasRemoteChange` field in a `react-hook-form` context.
- *
- * @returns edit mode value
- */
-export function useHasRemoteChange() {
-  const { watch } = useFormContext<FormMeta>()
-  return watch('_hasRemoteChange') ?? false
-}
-
-/**
- * @returns function getting is new meta
- */
-export function useGetIsNew() {
-  const { getValues } = useFormContext<FormMeta>()
-  return () => getValues('_isNew') ?? false
-}
-
-export function useSetFormMeta<T extends FormMeta>() {
-  const { setValue } = useFormContext<T>()
-  return (newValues: Partial<T>) =>
-    objectKeys(newValues).forEach((key) => newValues[key] && setValue(key, newValues[key]))
-}
-
-/**
- * ```
- * Object.keys()
- * ```
- * With better typing. Same uses.
- *
- * @param obj
- * @returns `Object.keys(obj)`
- */
-function objectKeys<Obj>(obj: any): (keyof Obj)[] {
-  return Object.keys(obj) as (keyof Obj)[]
-}
-
-export function removeFormMeta<T extends FormMeta>(withFormMeta: T): Omit<T, keyof FormMeta> {
-  return omit(withFormMeta, Object.keys(formMeta)) as Omit<T, keyof FormMeta>
-}
-
-export function addFormMeta<T>(withoutFormMeta: T): T & FormMeta {
-  return { ...formMeta, ...withoutFormMeta }
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './edit-cells'
-export * from './form-meta'
-export * from './jotai-form'
-export * from './zod-validation'

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

@@ -1,36 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

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

package/src/jotai-form/types.ts

@@ -1,12 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

package/src/zod-validation/types.ts

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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 prepareErrors<E>(validation)
-    },
-    validateAsync: async <E extends z.infer<typeof schema>>(entity: z.infer<typeof schema>) => {
-      const validation = await schema.safeParseAsync(entity)
-      if (validation.success) return undefined
-      return prepareErrors<E>(validation)
-    },
-    getSchema() {
-      return schema
-    },
-  }
-}
-
-function prepareErrors<E extends Record<string, unknown>>(errorValidation: z.SafeParseError<E>) {
-  return new Map(
-    errorValidation.error.errors.map((error) => [
-      error.path[0] as keyof E,
-      { message: error.message, code: error.code },
-    ])
-  ) as ValidationErrorMap<E>
-}

package/tsconfig.json

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

package/vitest.config.ts

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