@cedarjs/cli 0.0.4

package/dist/commands/generate/scaffold/templates/components/Name.tsx.template

@@ -0,0 +1,79 @@
+import type { Delete${singularPascalName}Mutation, Delete${singularPascalName}MutationVariables, Find${singularPascalName}By${pascalIdName} } from 'types/graphql'
+
+import { Link, routes, navigate } from '@cedarjs/router'
+import { useMutation } from '@cedarjs/web'
+import type { TypedDocumentNode } from '@cedarjs/web'
+import { toast } from '@cedarjs/web/toast'
+
+import { ${formattersImports} } from 'src/lib/formatters'
+
+const DELETE_${singularConstantName}_MUTATION: TypedDocumentNode<Delete${singularPascalName}Mutation, Delete${singularPascalName}MutationVariables> = gql`
+  mutation Delete${singularPascalName}Mutation($${idName}: ${idType}!) {
+    delete${singularPascalName}(${idName}: $${idName}) {
+      ${idName}
+    }
+  }
+`
+
+interface Props {
+  ${singularCamelName}: NonNullable<Find${singularPascalName}By${pascalIdName}['${singularCamelName}']>
+}
+
+const ${singularPascalName} = ({ ${singularCamelName} }: Props) => {
+  const [delete${singularPascalName}] = useMutation(DELETE_${singularConstantName}_MUTATION, {
+    onCompleted: () => {
+      toast.success('${singularPascalName} deleted')
+      navigate(routes.${pluralRouteName}())
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const onDeleteClick = (${idName}: Delete${singularPascalName}MutationVariables['${idName}']) => {
+    if (confirm('Are you sure you want to delete ${singularCamelName} ' + ${idName} + '?')) {
+      delete${singularPascalName}({ variables: { ${idName} } })
+    }
+  }
+
+  return (
+    <>
+      <div className="rw-segment">
+        <header className="rw-segment-header">
+          <h2 className="rw-heading rw-heading-secondary">
+            ${singularPascalName} {${singularCamelName}.${idName}} Detail
+          </h2>
+        </header>
+        <table className="rw-table">
+          <tbody>
+            <% columns.forEach(column => { %><tr>
+              <th><%= column.label %></th><%
+              if (column.displayFunction) { %>
+              <td>{${column.displayFunction}(${singularCamelName}.${column.name})}</td><%
+              } else { %>
+              <td>{${singularCamelName}.${column.name}}</td><%
+              } %>
+            </tr><% }) %>
+          </tbody>
+        </table>
+      </div>
+      <nav className="rw-button-group">
+        <Link
+          to={routes.${editRouteName}({ ${idName}: ${singularCamelName}.${idName} })}
+          className="rw-button rw-button-blue"
+        >
+          Edit
+        </Link>
+        <button
+          type="button"
+          className="rw-button rw-button-red"
+          onClick={() => onDeleteClick(${singularCamelName}.${idName})}
+        >
+          Delete
+        </button>
+      </nav>
+    </>
+  )
+}
+
+export default ${singularPascalName}

package/dist/commands/generate/scaffold/templates/components/NameCell.tsx.template

@@ -0,0 +1,32 @@
+${useClientDirective}import type { Find${singularPascalName}By${pascalIdName}, Find${singularPascalName}By${pascalIdName}Variables } from 'types/graphql'
+
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@cedarjs/web'
+
+import ${singularPascalName} from '${importComponentName}'
+
+export const QUERY: TypedDocumentNode<
+   Find${singularPascalName}By${pascalIdName},
+   Find${singularPascalName}By${pascalIdName}Variables
+> = gql`
+  query Find${singularPascalName}By${pascalIdName}($${idName}: ${idType}!) {
+    ${singularCamelName}: ${singularCamelName}(${idName}: $${idName}) {<% columns.forEach(column => { %>
+      <%= column.name %><% }) %>
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>${singularPascalName} not found</div>
+
+export const Failure = ({ error }: CellFailureProps<Find${singularPascalName}By${pascalIdName}Variables>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({ ${singularCamelName} }: CellSuccessProps<Find${singularPascalName}By${pascalIdName}, Find${singularPascalName}By${pascalIdName}Variables>) => {
+  return <${singularPascalName} ${singularCamelName}={${singularCamelName}} />
+}

package/dist/commands/generate/scaffold/templates/components/NameForm.tsx.template

@@ -0,0 +1,123 @@
+import type { Edit${singularPascalName}By${pascalIdName}, Update${singularPascalName}Input } from 'types/graphql'
+
+import type { RWGqlError } from '@cedarjs/forms'
+import {
+  Form,
+  FormError,
+  FieldError,
+  Label,
+  ${fieldsToImport.join(',\n  ')},
+  Submit,
+} from '@cedarjs/forms'
+
+<% if (fieldsToImport.includes('DatetimeLocalField')) { %>
+const formatDatetime = (value) => {
+  if (value) {
+    return value.replace(/:\d{2}\.\d{3}\w/, '')
+  }
+}
+<% } %>
+
+type Form${singularPascalName} = NonNullable<Edit${singularPascalName}By${pascalIdName}['${singularCamelName}']>
+
+interface ${singularPascalName}FormProps {
+  ${singularCamelName}?: Edit${singularPascalName}By${pascalIdName}['${singularCamelName}']
+  onSave: (data: Update${singularPascalName}Input, ${idName}?: Form${singularPascalName}['${idName}']) => void
+  error: RWGqlError
+  loading: boolean
+}
+
+const ${singularPascalName}Form = (props: ${singularPascalName}FormProps) => {
+  const onSubmit = (data: Form${singularPascalName}) => {
+  <% editableColumns.forEach(column => { %>
+    <% if (column.isEnum && !column.isList && !column.isRequired) { %>
+      if (data.${column.name} === '') {
+        data.${column.name} = null
+      }
+    <% } %>
+    <% if (column.isEnum && column.isList) { %>
+      if (data.${column.name}) {
+        data.${column.name} = data.${column.name}.filter((value) => !!value)
+      }
+    <% } %>
+  <% }) %>
+    props.onSave(data, props?.${singularCamelName}?.${idName})
+  }
+
+  return (
+    <div className="rw-form-wrapper">
+      <Form<Form${singularPascalName}> onSubmit={onSubmit} error={props.error}>
+        <FormError
+          error={props.error}
+          wrapperClassName="rw-form-error-wrapper"
+          titleClassName="rw-form-error-title"
+          listClassName="rw-form-error-list"
+        />
+      <% editableColumns.forEach(column => { %>
+        <Label
+          name="${column.name}"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          ${column.label}
+        </Label>
+        <% if (column.isEnum) { %>
+          <% if (!column.isRequired) { %>
+          <div className="rw-check-radio-items">
+            <${column.component}
+              ${idName}="${singularCamelName}-${column.name}-none"
+              name="${column.name}"
+              defaultValue=""
+              ${column.defaultProp}={!props.${singularCamelName}?.${column.name}}
+              className="rw-input"
+              errorClassName="rw-input rw-input-error"
+            />
+            <div className="rw-check-radio-item-none">
+              None
+            </div>
+          </div>
+          <% } %>
+          <% column.values?.forEach((value, i) => {
+            const columnComponentName = column.isList ? `${column.name}[${i}]` : column.name
+            %>
+        <div className="rw-check-radio-items">
+          <${column.component}
+            ${idName}="${singularCamelName}-${column.name}-${i}"
+            name="${columnComponentName}"
+            defaultValue="${value.name}"
+            ${column.defaultProp}={props.${singularCamelName}?.${column.name}?.includes('${value.name}')}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+          />
+          <div>
+            ${value.name.replace('_', ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
+          </div>
+        </div>
+          <% }) %>
+        <% } else { %>
+          <${column.component}
+            name="${column.name}"
+            ${column.defaultProp}={${column.deserializeFunction && column.deserializeFunction + '('}props.${singularCamelName}?.<%= column.name %>${column.deserializeFunction && ')'}}
+            className="rw-input"
+            errorClassName="rw-input rw-input-error"
+            <%= !column.validation ? '' : `validation=${column.validation}` %>
+            <%= column.isRelationalField && !column.isRequired ? `emptyAs={'undefined'}` : '' %>
+          />
+        <% } %>
+
+        <FieldError name="${column.name}" className="rw-field-error" />
+<% }) %>
+        <div className="rw-button-group">
+          <Submit
+            disabled={props.loading}
+            className="rw-button rw-button-blue"
+          >
+            Save
+          </Submit>
+        </div>
+      </Form>
+    </div>
+  )
+}
+
+export default ${singularPascalName}Form

package/dist/commands/generate/scaffold/templates/components/Names.tsx.template

@@ -0,0 +1,88 @@
+import type { Delete${singularPascalName}Mutation, Delete${singularPascalName}MutationVariables, Find${pluralPascalName} } from 'types/graphql'
+
+import { Link, routes } from '@cedarjs/router'
+import { useMutation } from '@cedarjs/web'
+import type { TypedDocumentNode } from '@cedarjs/web'
+import { toast } from '@cedarjs/web/toast'
+
+import { QUERY } from '${importComponentNamesCell}'
+import { ${listFormattersImports} } from 'src/lib/formatters'
+
+
+const DELETE_${singularConstantName}_MUTATION: TypedDocumentNode<Delete${singularPascalName}Mutation, Delete${singularPascalName}MutationVariables> = gql`
+  mutation Delete${singularPascalName}Mutation($${idName}: ${idType}!) {
+    delete${singularPascalName}(${idName}: $${idName}) {
+      ${idName}
+    }
+  }
+`
+
+const ${pluralPascalName}List = ({ ${pluralCamelName} }: Find${pluralPascalName}) => {
+  const [delete${singularPascalName}] = useMutation(DELETE_${singularConstantName}_MUTATION, {
+    onCompleted: () => {
+      toast.success('${singularPascalName} deleted')
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+    // This refetches the query on the list page. Read more about other ways to
+    // update the cache over here:
+    // https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates
+    refetchQueries: [{ query: QUERY }],
+    awaitRefetchQueries: true,
+  })
+
+  const onDeleteClick = (${idName}: Delete${singularPascalName}MutationVariables['${idName}']) => {
+    if (confirm('Are you sure you want to delete ${singularCamelName} ' + ${idName} + '?')) {
+      delete${singularPascalName}({ variables: { ${idName} } })
+    }
+  }
+
+  return (
+    <div className="rw-segment rw-table-wrapper-responsive">
+      <table className="rw-table">
+        <thead>
+          <tr><% columns.forEach(column => { %>
+            <th>${column.label}</th><% }) %>
+            <th>&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          {${pluralCamelName}.map((${singularCamelName}) => (
+            <tr key={${singularCamelName}.${idName}}><% columns.forEach(column => { %>
+              <td>{${column.listDisplayFunction}(${singularCamelName}.${column.name})}</td><% }) %>
+              <td>
+                <nav className="rw-table-actions">
+                  <Link
+                    to={routes.${singularRouteName}({ ${idName}: ${singularCamelName}.${idName} })}
+                    title={'Show ${singularCamelName} ' + ${singularCamelName}.${idName} + ' detail'}
+                    className="rw-button rw-button-small"
+                  >
+                    Show
+                  </Link>
+                  <Link
+                    to={routes.${editRouteName}({ ${idName}: ${singularCamelName}.${idName} })}
+                    title={'Edit ${singularCamelName} ' + ${singularCamelName}.${idName}}
+                    className="rw-button rw-button-small rw-button-blue"
+                  >
+                    Edit
+                  </Link>
+                  <button
+                    type="button"
+                    title={'Delete ${singularCamelName} ' + ${singularCamelName}.${idName}}
+                    className="rw-button rw-button-small rw-button-red"
+                    onClick={() => onDeleteClick(${singularCamelName}.${idName})}
+                  >
+                    Delete
+                  </button>
+                </nav>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default ${pluralPascalName}List

package/dist/commands/generate/scaffold/templates/components/NamesCell.tsx.template

@@ -0,0 +1,45 @@
+${useClientDirective}import type { Find${pluralPascalName}, Find${pluralPascalName}Variables } from 'types/graphql'
+
+import { Link, routes } from '@cedarjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@cedarjs/web'
+
+import ${pluralPascalName} from '${importComponentNames}'
+
+export const QUERY: TypedDocumentNode<
+  Find${pluralPascalName},
+  Find${pluralPascalName}Variables
+> = gql`
+  query Find${pluralPascalName} {
+    ${pluralCamelName} {<% columns.forEach(column => { %>
+      <%= column.name %><% }) %>
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => {
+  return (
+    <div className="rw-text-center">
+      No ${pluralCamelName} yet.{' '}
+      <Link
+        to={routes.${newRouteName}()}
+        className="rw-link"
+      >
+        Create one?
+      </Link>
+    </div>
+  )
+}
+
+export const Failure = ({ error }: CellFailureProps<Find${pluralPascalName}>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({ ${pluralCamelName} }: CellSuccessProps<Find${pluralPascalName}, Find${pluralPascalName}Variables>) => {
+  return <${pluralPascalName} ${pluralCamelName}={${pluralCamelName}} />
+}

package/dist/commands/generate/scaffold/templates/components/NewName.tsx.template

@@ -0,0 +1,55 @@
+${useClientDirective}import type {
+  Create${singularPascalName}Mutation,
+  Create${singularPascalName}Input,
+  Create${singularPascalName}MutationVariables
+} from 'types/graphql'
+
+import { navigate, routes } from '@cedarjs/router'
+import { useMutation } from '@cedarjs/web'
+import type { TypedDocumentNode } from '@cedarjs/web'
+import { toast } from '@cedarjs/web/toast'
+
+import ${singularPascalName}Form from '${importComponentNameForm}'
+
+const CREATE_${singularConstantName}_MUTATION: TypedDocumentNode<
+  Create${singularPascalName}Mutation,
+  Create${singularPascalName}MutationVariables
+> = gql`
+  mutation Create${singularPascalName}Mutation($input: Create${singularPascalName}Input!) {
+    create${singularPascalName}(input: $input) {
+      ${idName}
+    }
+  }
+`
+
+const New${singularPascalName} = () => {
+  const [create${singularPascalName}, { loading, error }] = useMutation(
+    CREATE_${singularConstantName}_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('${singularPascalName} created')
+        navigate(routes.${pluralRouteName}())
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    }
+  )
+
+  const onSave = (input: Create${singularPascalName}Input) => {
+    create${singularPascalName}({ variables: { input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">New ${singularPascalName}</h2>
+      </header>
+      <div className="rw-segment-main">
+        <${singularPascalName}Form onSave={onSave} loading={loading} error={error} />
+      </div>
+    </div>
+  )
+}
+
+export default New${singularPascalName}

package/dist/commands/generate/scaffold/templates/layouts/ScaffoldLayout.tsx.template

@@ -0,0 +1,37 @@
+import { Link, routes } from '@cedarjs/router'
+import { Toaster } from '@cedarjs/web/toast'
+
+type LayoutProps = {
+  title: string
+  titleTo: keyof typeof routes
+  buttonLabel: string
+  buttonTo: keyof typeof routes
+  children: React.ReactNode
+}
+
+const ScaffoldLayout = ({
+  title,
+  titleTo,
+  buttonLabel,
+  buttonTo,
+  children,
+}: LayoutProps) => {
+  return (
+    <div className="rw-scaffold">
+      <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
+      <header className="rw-header">
+        <h1 className="rw-heading rw-heading-primary">
+          <Link to={routes[titleTo]()} className="rw-link">
+            {title}
+          </Link>
+        </h1>
+        <Link to={routes[buttonTo]()} className="rw-button rw-button-green">
+          <div className="rw-button-icon">+</div> {buttonLabel}
+        </Link>
+      </header>
+      <main className="rw-main">{children}</main>
+    </div>
+  )
+}
+
+export default ScaffoldLayout

package/dist/commands/generate/scaffold/templates/lib/formatters.test.tsx.template

@@ -0,0 +1,192 @@
+import { render, waitFor, screen } from '@cedarjs/testing/web'
+
+import {
+  formatEnum,
+  jsonTruncate,
+  truncate,
+  timeTag,
+  jsonDisplay,
+  checkboxInputTag,
+} from './formatters'
+
+describe('formatEnum', () => {
+  it('handles nullish values', () => {
+    expect(formatEnum(null)).toEqual('')
+    expect(formatEnum('')).toEqual('')
+    expect(formatEnum(undefined)).toEqual('')
+  })
+
+  it('formats a list of values', () => {
+    expect(
+      formatEnum(['RED', 'ORANGE', 'YELLOW', 'GREEN', 'BLUE', 'VIOLET'])
+    ).toEqual('Red, Orange, Yellow, Green, Blue, Violet')
+  })
+
+  it('formats a single value', () => {
+    expect(formatEnum('DARK_BLUE')).toEqual('Dark blue')
+  })
+
+  it('returns an empty string for values of the wrong type (for JS projects)', () => {
+    // @ts-expect-error - Testing JS scenario
+    expect(formatEnum(5)).toEqual('')
+  })
+})
+
+describe('truncate', () => {
+  it('truncates really long strings', () => {
+    expect(truncate('na '.repeat(1000) + 'batman').length).toBeLessThan(1000)
+    expect(truncate('na '.repeat(1000) + 'batman')).not.toMatch(/batman/)
+  })
+
+  it('does not modify short strings', () => {
+    expect(truncate('Short strinG')).toEqual('Short strinG')
+  })
+
+  it('adds ... to the end of truncated strings', () => {
+    expect(truncate('repeat'.repeat(1000))).toMatch(/\w\.\.\.$/)
+  })
+
+  it('accepts numbers', () => {
+    expect(truncate(123)).toEqual('123')
+    expect(truncate(0)).toEqual('0')
+    expect(truncate(0o000)).toEqual('0')
+  })
+
+  it('handles arguments of invalid type', () => {
+    // @ts-expect-error - Testing JS scenario
+    expect(truncate(false)).toEqual('false')
+
+    expect(truncate(undefined)).toEqual('')
+    expect(truncate(null)).toEqual('')
+  })
+})
+
+describe('jsonTruncate', () => {
+  it('truncates large json structures', () => {
+    expect(
+      jsonTruncate({
+        foo: 'foo',
+        bar: 'bar',
+        baz: 'baz',
+        kittens: 'kittens meow',
+        bazinga: 'Sheldon',
+        nested: {
+          foobar: 'I have no imagination',
+          two: 'Second nested item',
+        },
+        five: 5,
+        bool: false,
+      })
+    ).toMatch(/.+\n.+\w\.\.\.$/s)
+  })
+})
+
+describe('timeTag', () => {
+  it('renders a date', async () => {
+    render(<div>{timeTag(new Date('1970-08-20').toUTCString())}</div>)
+
+    await waitFor(() => screen.getByText(/1970.*00:00:00/))
+  })
+
+  it('can take an empty input string', async () => {
+    expect(timeTag('')).toEqual('')
+  })
+})
+
+describe('jsonDisplay', () => {
+  it('produces the correct output', () => {
+    expect(
+      jsonDisplay({
+        title: 'TOML Example (but in JSON)',
+        database: {
+          data: [['delta', 'phi'], [3.14]],
+          enabled: true,
+          ports: [8000, 8001, 8002],
+          temp_targets: {
+            case: 72.0,
+            cpu: 79.5,
+          },
+        },
+        owner: {
+          dob: '1979-05-27T07:32:00-08:00',
+          name: 'Tom Preston-Werner',
+        },
+        servers: {
+          alpha: {
+            ip: '10.0.0.1',
+            role: 'frontend',
+          },
+          beta: {
+            ip: '10.0.0.2',
+            role: 'backend',
+          },
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      <pre>
+        <code>
+          {
+        "title": "TOML Example (but in JSON)",
+        "database": {
+          "data": [
+            [
+              "delta",
+              "phi"
+            ],
+            [
+              3.14
+            ]
+          ],
+          "enabled": true,
+          "ports": [
+            8000,
+            8001,
+            8002
+          ],
+          "temp_targets": {
+            "case": 72,
+            "cpu": 79.5
+          }
+        },
+        "owner": {
+          "dob": "1979-05-27T07:32:00-08:00",
+          "name": "Tom Preston-Werner"
+        },
+        "servers": {
+          "alpha": {
+            "ip": "10.0.0.1",
+            "role": "frontend"
+          },
+          "beta": {
+            "ip": "10.0.0.2",
+            "role": "backend"
+          }
+        }
+      }
+        </code>
+      </pre>
+    `)
+  })
+})
+
+describe('checkboxInputTag', () => {
+  it('can be checked', () => {
+    render(checkboxInputTag(true))
+    expect(screen.getByRole('checkbox')).toBeChecked()
+  })
+
+  it('can be unchecked', () => {
+    render(checkboxInputTag(false))
+    expect(screen.getByRole('checkbox')).not.toBeChecked()
+  })
+
+  it('is disabled when checked', () => {
+    render(checkboxInputTag(true))
+    expect(screen.getByRole('checkbox')).toBeDisabled()
+  })
+
+  it('is disabled when unchecked', () => {
+    render(checkboxInputTag(false))
+    expect(screen.getByRole('checkbox')).toBeDisabled()
+  })
+})