Getting Started

Install

npm install @codella-software/utils @codella-software/react

Common peers you may also need:

npm install rxjs yup

Build a form

import { FormBuilder } from '@codella-software/utils'
import { useFormBuilder } from '@codella-software/react'
import * as yup from 'yup'

type UserForm = {
  name: string
  email: string
  role: 'user' | 'admin'
}

const builder = FormBuilder.create<UserForm>()
  .addFields([
    { name: 'name', type: 'text', label: 'Name' },
    { name: 'email', type: 'email', label: 'Email' },
    {
      name: 'role',
      type: 'select',
      label: 'Role',
      options: [
        { label: 'User', value: 'user' },
        { label: 'Admin', value: 'admin' },
      ],
    },
  ])
  .setInitialValues({ name: '', email: '', role: 'user' })
  .setValidationSchema(
    yup.object({
      name: yup.string().required(),
      email: yup.string().email().required(),
      role: yup.mixed<'user' | 'admin'>().oneOf(['user', 'admin']).required(),
    }),
  )

export function UserFormView() {
  const form = useFormBuilder({ builder })

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault()
        void form.submit()
      }}
    >
      <input
        value={form.values.name}
        onChange={(event) => void form.setFieldValue('name', event.target.value)}
      />
      <input
        value={form.values.email}
        onChange={(event) => void form.setFieldValue('email', event.target.value)}
      />
      <button type="submit" disabled={form.isSubmitting}>
        Save
      </button>
    </form>
  )
}

Build table state

TableBuilder creates configuration. It does not ship a React table hook.

import { TableBuilder, createColumn } from '@codella-software/utils'
import { useFiltersAndSort } from '@codella-software/react'

type User = {
  id: number
  name: string
  email: string
}

type UserFilters = {
  search: string
}

export function UsersTableConfig({ users }: { users: User[] }) {
  const filters = useFiltersAndSort<UserFilters>({
    config: {
      storageKey: 'users-table',
      defaultFilters: { search: '' },
    },
  })

  const table = new TableBuilder<User, UserFilters>()
    .data(users)
    .totalRows(users.length)
    .columns([
      createColumn('name', 'name', 'Name', { sortable: true }),
      createColumn('email', 'email', 'Email'),
    ])
    .filtersAndSort(filters.state, filters.getService().getActions())
    .pagination({ enabled: true })
    .build()

  return <pre>{JSON.stringify(table, null, 2)}</pre>
}

Subpath imports

Use subpaths for modules not exported from the root package:

import { createApiClient } from '@codella-software/utils/api-service'
import { LiveUpdateService, SSEService, WebsocketService } from '@codella-software/utils/live-updates'