@equinor/apollo-utils 0.1.1 → 0.1.2

package/.turbo/turbo-build.log

@@ -5,10 +5,10 @@ $ tsup src/index.ts --format esm,cjs --dts --external react
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 3.48 KB
-ESM ⚡️ Build success in 85ms
-CJS dist/index.js 4.62 KB
-CJS ⚡️ Build success in 86ms
+CJS dist/index.js 4.83 KB
+CJS ⚡️ Build success in 103ms
+ESM dist/index.mjs 3.53 KB
+ESM ⚡️ Build success in 107ms
 DTS Build start
-DTS ⚡️ Build success in 4462ms
-DTS dist/index.d.ts 2.00 KB
+DTS ⚡️ Build success in 6256ms
+DTS dist/index.d.ts 2.03 KB

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @equinor/apollo-utils
 
+## 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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from 'apollo-common';
 import { PrimitiveAtom } from 'jotai';
 import { AtomFamily } from 'jotai/vanilla/utils/atomFamily';
 import { z } from 'zod';

package/dist/index.js

@@ -29,6 +29,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -60,6 +61,7 @@ __export(src_exports, {
   useFormFamilyUtils: () => useFormFamilyUtils
 });
 module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("apollo-common"), module.exports);
 
 // src/jotai-form/formUtils.ts
 var import_jotai = require("jotai");

package/dist/index.mjs

@@ -35,6 +35,9 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
+// src/index.ts
+export * from "apollo-common";
+
 // src/jotai-form/formUtils.ts
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { atomFamily } from "jotai/utils";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@equinor/apollo-utils",
   "main": "src/index.ts",
   "types": "src/index.ts",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
@@ -17,11 +17,17 @@
     "access": "public"
   },
   "dependencies": {
+    "apollo-common": "*",
     "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"
+  },
   "devDependencies": {
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -31,6 +37,7 @@
     "jsdom": "^21.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.8",
     "vitest": "^0.28.5"
   }
 }

package/src/edit-cells/EditableCheckboxCell.tsx

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

@@ -0,0 +1,80 @@
+import { TextField } from '@equinor/eds-core-react'
+import { CellContext } from '@tanstack/react-table'
+import { TypographyCustom } from 'apollo-common'
+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

@@ -0,0 +1,68 @@
+import { Autocomplete } from '@equinor/eds-core-react'
+import { CellContext } from '@tanstack/react-table'
+import { TypographyCustom } from 'apollo-common'
+import { Controller, useFormContext } from 'react-hook-form'
+import styled from 'styled-components'
+import { FormMeta, useEditMode } from '../form-meta'
+
+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

@@ -0,0 +1,57 @@
+import { TextField } from '@equinor/eds-core-react'
+import { CellContext } from '@tanstack/react-table'
+import { TypographyCustom } from 'apollo-common'
+import { ChangeEvent } 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 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

@@ -0,0 +1,126 @@
+import { Button, Dialog as EDS, Icon, TextField } from '@equinor/eds-core-react'
+import { CellContext } from '@tanstack/react-table'
+import { PopoverCell, stopPropagation } from 'apollo-common'
+import { ChangeEvent, useState } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+import styled from 'styled-components'
+import { FormMeta, useEditMode } from '../form-meta'
+import { getHelperTextProps } from './utils'
+
+interface EdtiableTextAreaProps<T extends FormMeta> extends CellContext<T, string> {
+  dialogTitle: string
+}
+
+export function EditableTextAreaCell<T extends FormMeta>(props: EdtiableTextAreaProps<T>) {
+  const { dialogTitle, ...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="Comment" />
+
+  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>{dialogTitle}</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

@@ -0,0 +1,53 @@
+import { TextField } from '@equinor/eds-core-react'
+import { CellContext } from '@tanstack/react-table'
+import { TypographyCustom } from 'apollo-common'
+import { Controller, FieldPath, useFormContext } from 'react-hook-form'
+import styled from 'styled-components'
+import { FormMeta, useEditMode } from '../form-meta'
+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/index.ts

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

package/src/edit-cells/utils.tsx

@@ -0,0 +1,40 @@
+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'
+
+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,
+  }
+}

package/src/form-meta/index.ts

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

package/src/form-meta/types.ts

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

@@ -0,0 +1,66 @@
+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,2 +1,3 @@
+export * from 'apollo-common'
 export * from './jotai-form'
 export * from './zod-validation'