create-mithaq 0.0.0-stage → 0.1.1

package/template/apps/asas-platform/src/components/mithaq/field-shell.tsx

@@ -0,0 +1,53 @@
+import type { ReactElement, ReactNode } from 'react'
+import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field'
+
+/** The ids a control points `aria-describedby` at: its description, its error, both, or none. The shell derives the same ids from the same `id`. */
+export const describedBy = ({ id, description, error }: { id: string; description?: string; error?: string }): string | undefined =>
+  [description ? `${id}-description` : '', error ? `${id}-error` : ''].filter(Boolean).join(' ') || undefined
+
+export type FieldShellProps = {
+  /** The control's own id, which the label points at and the two ids below are derived from. */
+  id: string
+  label: string
+  description?: string
+  /** A refusal for this field, already resolved through the project's copy. */
+  error?: string
+  /** Whether the label goes beside the control rather than above it, as for a checkbox. */
+  beside?: boolean
+  /** The control, which owns `id` and `aria-describedby`. */
+  children: ReactNode
+  /** What the declaration asked this field's column to be, as a CSS width. */
+  width?: string
+  /** The control this field is drawn with, as the page decided it, written on the shell as `data-control`. */
+  control?: string
+  /** Called when the person leaves this field. React's `onBlur` bubbles, so one handler on the region serves any control. */
+  onBlur?: () => void
+}
+
+export function FieldShell({ beside, children, control, description, error, id, label, onBlur, width }: FieldShellProps): ReactElement {
+  const words = (
+    <>
+      {description ? <FieldDescription id={`${id}-description`}>{description}</FieldDescription> : null}
+      {/* `FieldError` is a `role="alert"`, so a refusal that appears after a save is announced. */}
+      {error ? <FieldError id={`${id}-error`}>{error}</FieldError> : null}
+    </>
+  )
+  return (
+    <Field data-control={control} onBlur={onBlur} orientation={beside ? 'horizontal' : 'vertical'} style={width ? { width } : undefined}>
+      {beside ? (
+        <>
+          {children}
+          {/* 44 pixels tall on a phone: the label is the tap target for a switch or box smaller than that. */}
+          <FieldLabel htmlFor={id} id={`${id}-label`} className="max-sm:min-h-11 max-sm:items-center">{label}</FieldLabel>
+        </>
+      ) : (
+        <>
+          <FieldLabel htmlFor={id} id={`${id}-label`}>{label}</FieldLabel>
+          {children}
+        </>
+      )}
+      {words}
+    </Field>
+  )
+}
+// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 3f7afa168ed2627b97bbad5385f114694b5411293252636db56de5d1443ebb66

package/template/apps/asas-platform/src/components/mithaq/filter-operators.ts

@@ -0,0 +1,108 @@
+import type { ClientField, ClientKayan } from 'mithaq/admin'
+
+/** The operators a `Where` may name, which is the server's own list. */
+export type OperatorName =
+  | 'contains'
+  | 'equals'
+  | 'exists'
+  | 'greater_than'
+  | 'greater_than_equal'
+  | 'in'
+  | 'less_than'
+  | 'less_than_equal'
+  | 'like'
+  | 'not_equals'
+  | 'not_in'
+
+const equality = ['equals', 'not_equals'] as const
+const membership = ['in', 'not_in'] as const
+const comparisons = ['greater_than', 'greater_than_equal', 'less_than', 'less_than_equal'] as const
+
+/**
+ * One row per shipped kind, each the subset the server's `assertWhere` admits for it. A kind with
+ * no row offers no operator, so a project kind gets a row here to reach the panel.
+ */
+export const operatorsByKind: Readonly<Record<string, readonly OperatorName[]>> = {
+  text: [...equality, 'contains', 'like', ...membership, 'exists'],
+  email: [...equality, 'contains', 'like', ...membership, 'exists'],
+  number: [...equality, ...comparisons, ...membership, 'exists'],
+  integer: [...equality, ...comparisons, ...membership, 'exists'],
+  decimal: [...equality, ...comparisons, ...membership, 'exists'],
+  datetime: [...equality, ...comparisons, ...membership, 'exists'],
+  date: [...equality, ...comparisons, ...membership, 'exists'],
+  checkbox: [...equality, 'exists'],
+  uuid: [...equality, ...membership, 'exists'],
+  relationship: [...equality, ...membership, 'exists'],
+  textArray: ['exists'],
+}
+
+/** What an operator's value is: a boolean for `exists`, a list for `in` and `not_in`, one value of the field's kind otherwise. */
+export type ValueShape = 'boolean' | 'list' | 'scalar'
+
+export const valueShapeOf = (operator: string): ValueShape =>
+  operator === 'exists' ? 'boolean' : operator === 'in' || operator === 'not_in' ? 'list' : 'scalar'
+
+/** One path the panel may offer: what to write on the wire, and what kind it is. */
+export type FilterPath = {
+  /** The key a `Where` carries, at most two segments. */
+  path: string
+  /** The kind whose operators and whose input control this path takes. */
+  kind: string
+  /** The kayan the field belongs to, for the label's copy key. */
+  kayan: ClientKayan
+  /** The field itself, for its label. */
+  field: ClientField
+  /** A locale of a localized field, or the target's own name for a hop. */
+  through?: string
+}
+
+/** What `filterPathsOf` needs beyond the kayan: the locales, and what may be read. */
+export type FilterContext = {
+  /** Which locales exist, from the app; the projection carries no list of them. */
+  locales?: readonly string[]
+  /** Every kayan of the build, so a relationship's target can be looked up. */
+  client?: readonly ClientKayan[]
+  /** Whether this actor may read one field. Chrome only: the read refuses a filter on a denied field whatever this says. */
+  reads?: (kayan: string, field: string) => boolean
+  /** The fields a page's list node offers the filter panel; wins over each field's own `filter`. */
+  filters?: readonly string[]
+}
+
+/**
+ * Every path one kayan offers the filter panel for the fields that opt in. A localized field offers its
+ * locale paths only (the bare one is refused); a relationship adds one hop, since a path has two segments at most.
+ */
+export const filterPathsOf = (kayan: ClientKayan, context: FilterContext = {}): readonly FilterPath[] => {
+  const { client, filters, locales, reads } = context
+  const allowed = (owner: ClientKayan, field: ClientField) => !reads || reads(owner.name, field.name)
+  // A hop's field answers for itself, since the page's list names only this kayan's fields.
+  const filterable = (field: ClientField, own = true) => (own && filters ? filters.includes(field.name) : field.filter === true)
+  const paths: FilterPath[] = []
+  for (const field of kayan.fields) {
+    if (!filterable(field) || !allowed(kayan, field)) continue
+    if (field.rules.localized === true) {
+      for (const locale of locales ?? []) paths.push({ path: `${field.name}.${locale}`, kind: field.kind, kayan, field, through: locale })
+      continue
+    }
+    paths.push({ path: field.name, kind: field.kind, kayan, field })
+    if (field.kind !== 'relationship' || !field.relationTo) continue
+    const target = client?.find((one) => one.name === field.relationTo)
+    if (!target) continue
+    for (const hop of target.fields) {
+      if (hop.kind === 'relationship' || hop.rules.localized === true) continue
+      if (!filterable(hop, false) || !allowed(target, hop)) continue
+      paths.push({ path: `${field.name}.${hop.name}`, kind: hop.kind, kayan: target, field: hop, through: field.name })
+    }
+  }
+  return paths
+}
+
+/**
+ * Whether a path and an operator are ones this kayan offers. Everything parsed off the URL is
+ * re-derived through it, so a hostile link naming a field the viewer may not read renders no row.
+ */
+export const offers = ({ paths, path, operator }: { paths: readonly FilterPath[]; path: string; operator: string }): FilterPath | undefined => {
+  const found = paths.find((one) => one.path === path)
+  return found && (operatorsByKind[found.kind] ?? []).includes(operator as OperatorName) ? found : undefined
+}
+// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 bf6e8ee48efdc1f1e25230933b6df1f25760a60576debb251b2374dec06effbd