@cedarjs/cli 0.0.4

package/dist/commands/generate/scaffold/templates/assets/scaffold.css.template

@@ -0,0 +1,398 @@
+/*
+  normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+*/
+
+.rw-scaffold *,
+.rw-scaffold ::after,
+.rw-scaffold ::before {
+  box-sizing: inherit;
+}
+.rw-scaffold main {
+  color: #4a5568;
+  display: block;
+}
+.rw-scaffold h1,
+.rw-scaffold h2 {
+  margin: 0;
+}
+.rw-scaffold a {
+  background-color: transparent;
+}
+.rw-scaffold ul {
+  margin: 0;
+  padding: 0;
+}
+.rw-scaffold input {
+  font-family: inherit;
+  font-size: 100%;
+  overflow: visible;
+}
+.rw-scaffold input:-ms-input-placeholder {
+  color: #a0aec0;
+}
+.rw-scaffold input::-ms-input-placeholder {
+  color: #a0aec0;
+}
+.rw-scaffold input::placeholder {
+  color: #a0aec0;
+}
+.rw-scaffold table {
+  border-collapse: collapse;
+}
+
+/*
+  Style
+*/
+
+.rw-scaffold, .rw-toast {
+  background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+.rw-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 2rem 1rem 2rem;
+}
+.rw-main {
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding-bottom: 1rem;
+}
+.rw-segment {
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-color: #e5e7eb;
+  overflow: hidden;
+  width: 100%;
+  scrollbar-color: #a1a1aa transparent;
+}
+.rw-segment::-webkit-scrollbar {
+  height: initial;
+}
+.rw-segment::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-color: #e2e8f0;
+  border-style: solid;
+  border-radius: 0 0 10px 10px;
+  border-width: 1px 0 0 0;
+  padding: 2px;
+}
+.rw-segment::-webkit-scrollbar-thumb {
+  background-color: #a1a1aa;
+  background-clip: content-box;
+  border: 3px solid transparent;
+  border-radius: 10px;
+}
+.rw-segment-header {
+  background-color: #e2e8f0;
+  color: #4a5568;
+  padding: 0.75rem 1rem;
+}
+.rw-segment-main {
+  background-color: #f7fafc;
+  padding: 1rem;
+}
+.rw-link {
+  color: #4299e1;
+  text-decoration: underline;
+}
+.rw-link:hover {
+  color: #2b6cb0;
+}
+.rw-forgot-link {
+  font-size: 0.75rem;
+  color: #a0aec0;
+  text-align: right;
+  margin-top: 0.1rem;
+}
+.rw-forgot-link:hover {
+  font-size: 0.75rem;
+  color: #4299e1;
+}
+.rw-heading {
+  font-weight: 600;
+}
+.rw-heading.rw-heading-primary {
+  font-size: 1.25rem;
+}
+.rw-heading.rw-heading-secondary {
+  font-size: 0.875rem;
+}
+.rw-heading .rw-link {
+  color: #4a5568;
+  text-decoration: none;
+}
+.rw-heading .rw-link:hover {
+  color: #1a202c;
+  text-decoration: underline;
+}
+.rw-cell-error {
+  font-size: 90%;
+  font-weight: 600;
+}
+.rw-form-wrapper {
+  box-sizing: border-box;
+  font-size: 0.875rem;
+  margin-top: -1rem;
+}
+.rw-cell-error,
+.rw-form-error-wrapper {
+  padding: 1rem;
+  background-color: #fff5f5;
+  color: #c53030;
+  border-width: 1px;
+  border-color: #feb2b2;
+  border-radius: 0.25rem;
+  margin: 1rem 0;
+}
+.rw-form-error-title {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 600;
+}
+.rw-form-error-list {
+  margin-top: 0.5rem;
+  list-style-type: disc;
+  list-style-position: inside;
+}
+.rw-button {
+  border: none;
+  color: #718096;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.25rem 1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  letter-spacing: 0.025em;
+  border-radius: 0.25rem;
+  line-height: 2;
+  border: 0;
+}
+.rw-button:hover {
+  background-color: #718096;
+  color: #fff;
+}
+.rw-button.rw-button-small {
+  font-size: 0.75rem;
+  border-radius: 0.125rem;
+  padding: 0.25rem 0.5rem;
+  line-height: inherit;
+}
+.rw-button.rw-button-green {
+  background-color: #48bb78;
+  color: #fff;
+}
+.rw-button.rw-button-green:hover {
+  background-color: #38a169;
+  color: #fff;
+}
+.rw-button.rw-button-blue {
+  background-color: #3182ce;
+  color: #fff;
+}
+.rw-button.rw-button-blue:hover {
+  background-color: #2b6cb0;
+}
+.rw-button.rw-button-red {
+  background-color: #e53e3e;
+  color: #fff;
+}
+.rw-button.rw-button-red:hover {
+  background-color: #c53030;
+}
+.rw-button-icon {
+  font-size: 1.25rem;
+  line-height: 1;
+  margin-right: 0.25rem;
+}
+.rw-button-group {
+  display: flex;
+  justify-content: center;
+  margin: 0.75rem 0.5rem;
+}
+.rw-button-group .rw-button {
+  margin: 0 0.25rem;
+}
+.rw-form-wrapper .rw-button-group {
+  margin-top: 2rem;
+  margin-bottom: 0;
+}
+.rw-label {
+  display: block;
+  margin-top: 1.5rem;
+  color: #4a5568;
+  font-weight: 600;
+  text-align: left;
+}
+.rw-label.rw-label-error {
+  color: #c53030;
+}
+.rw-input {
+  display: block;
+  margin-top: 0.5rem;
+  width: 100%;
+  padding: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #e2e8f0;
+  color: #4a5568;
+  border-radius: 0.25rem;
+  outline: none;
+}
+.rw-check-radio-item-none {
+  color: #4a5568
+}
+.rw-check-radio-items {
+  display: flex;
+  justify-items: center;
+}
+.rw-input[type="checkbox"] {
+  display: inline;
+  width: 1rem;
+  margin-left: 0;
+  margin-right: 0.5rem;
+  margin-top: 0.25rem;
+}
+.rw-input[type="radio"] {
+  display: inline;
+  width: 1rem;
+  margin-left: 0;
+  margin-right: 0.5rem;
+  margin-top: 0.25rem;
+}
+.rw-input:focus {
+  border-color: #a0aec0;
+}
+.rw-input-error {
+  border-color: #c53030;
+  color: #c53030;
+}
+
+.rw-input-error:focus{
+  outline: none;
+  border-color: #c53030;
+  box-shadow: 0 0 5px #c53030;
+}
+
+.rw-field-error {
+  display: block;
+  margin-top: 0.25rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  color: #c53030;
+}
+.rw-table-wrapper-responsive {
+  overflow-x: auto;
+}
+.rw-table-wrapper-responsive .rw-table {
+  min-width: 48rem;
+}
+.rw-table {
+
+
+  table-layout: auto;
+  width: 100%;
+  font-size: 0.875rem;
+}
+.rw-table th,
+.rw-table td {
+  padding: 0.75rem;
+}
+.rw-table td {
+  background-color: #ffffff;
+  color: #1a202c;
+}
+.rw-table tr:nth-child(odd) td,
+.rw-table tr:nth-child(odd) th {
+  background-color: #f7fafc;
+}
+.rw-table thead tr {
+  color: #4a5568;
+}
+.rw-table th {
+  font-weight: 600;
+  text-align: left;
+}
+.rw-table thead th {
+  background-color: #e2e8f0;
+  text-align: left;
+}
+.rw-table tbody th {
+  text-align: right;
+}
+@media (min-width: 768px) {
+  .rw-table tbody th {
+    width: 20%;
+  }
+}
+.rw-table tbody tr {
+  border-top-width: 1px;
+}
+.rw-table input {
+  margin-left: 0;
+}
+.rw-table-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 17px;
+  padding-right: 0.25rem;
+}
+.rw-table-actions .rw-button {
+  background-color: transparent;
+}
+.rw-table-actions .rw-button:hover {
+  background-color: #718096;
+  color: #fff;
+}
+.rw-table-actions .rw-button-blue {
+  color: #3182ce;
+}
+.rw-table-actions .rw-button-blue:hover {
+  background-color: #3182ce;
+  color: #fff;
+}
+.rw-table-actions .rw-button-red {
+  color: #e53e3e;
+}
+.rw-table-actions .rw-button-red:hover {
+  background-color: #e53e3e;
+  color: #fff;
+}
+.rw-text-center {
+  text-align: center;
+}
+.rw-login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24rem;
+  margin: 4rem auto;
+  flex-wrap: wrap;
+}
+.rw-login-container .rw-form-wrapper {
+  width: 100%;
+  text-align: center;
+}
+.rw-login-link {
+  margin-top: 1rem;
+  color: #4a5568;
+  font-size: 90%;
+  text-align: center;
+  flex-basis: 100%;
+}
+.rw-webauthn-wrapper {
+  margin: 1.5rem 1rem 1rem;
+  line-height: 1.4;
+}
+.rw-webauthn-wrapper h2 {
+  font-size: 150%;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}

package/dist/commands/generate/scaffold/templates/assets/scaffold.tailwind.css.template

@@ -0,0 +1,243 @@
+.rw-scaffold {
+  @apply bg-white text-gray-600;
+}
+.rw-scaffold h1,
+.rw-scaffold h2 {
+  @apply m-0;
+}
+.rw-scaffold a {
+  @apply bg-transparent;
+}
+.rw-scaffold ul {
+  @apply m-0 p-0;
+}
+.rw-scaffold input:-ms-input-placeholder {
+  @apply text-gray-500;
+}
+.rw-scaffold input::-ms-input-placeholder {
+  @apply text-gray-500;
+}
+.rw-scaffold input::placeholder {
+  @apply text-gray-500;
+}
+.rw-header {
+  @apply flex justify-between py-4 px-8;
+}
+.rw-main {
+  @apply mx-4 pb-4;
+}
+.rw-segment {
+  @apply rounded-lg overflow-hidden w-full border border-gray-200;
+  scrollbar-color: theme('colors.zinc.400') transparent;
+}
+.rw-segment::-webkit-scrollbar {
+  height: initial;
+}
+.rw-segment::-webkit-scrollbar-track {
+  @apply border-gray-200 bg-transparent border-solid rounded-t-none rounded-b-[10px] border-0 border-t p-[2px];
+}
+.rw-segment::-webkit-scrollbar-thumb {
+  @apply bg-zinc-400 bg-clip-content border-[3px] border-solid border-transparent rounded-full;
+}
+.rw-segment-header {
+  @apply bg-gray-200 text-gray-700 py-3 px-4;
+}
+.rw-segment-main {
+  @apply bg-gray-100 p-4;
+}
+.rw-link {
+  @apply text-blue-400 underline;
+}
+.rw-link:hover {
+  @apply text-blue-500;
+}
+.rw-forgot-link {
+  @apply text-xs text-gray-400 text-right mt-1 underline;
+}
+.rw-forgot-link:hover {
+  @apply text-blue-500;
+}
+.rw-heading {
+  @apply font-semibold;
+}
+.rw-heading.rw-heading-primary {
+  @apply text-xl;
+}
+.rw-heading.rw-heading-secondary {
+  @apply text-sm;
+}
+.rw-heading .rw-link {
+  @apply text-gray-600 no-underline;
+}
+.rw-heading .rw-link:hover {
+  @apply text-gray-900 underline;
+}
+.rw-cell-error {
+  @apply text-sm font-semibold;
+}
+.rw-form-wrapper {
+  @apply text-sm -mt-4;
+}
+.rw-cell-error,
+.rw-form-error-wrapper {
+  @apply p-4 bg-red-50 text-red-600 border border-red-100 rounded my-4;
+}
+.rw-form-error-title {
+  @apply m-0 font-semibold;
+}
+.rw-form-error-list {
+  @apply mt-2 list-disc list-inside;
+}
+.rw-button {
+  @apply flex justify-center py-1 px-4 border-0 rounded bg-gray-200 text-gray-500 text-xs font-semibold uppercase tracking-wide leading-loose no-underline cursor-pointer transition duration-100;
+}
+.rw-button:hover {
+  @apply bg-gray-500 text-white;
+}
+.rw-button.rw-button-small {
+  @apply text-xs rounded-sm py-1 px-2;
+}
+.rw-button.rw-button-green {
+  @apply bg-green-500 text-white;
+}
+.rw-button.rw-button-green:hover {
+  @apply bg-green-700;
+}
+.rw-button.rw-button-blue {
+  @apply bg-blue-500 text-white;
+}
+.rw-button.rw-button-blue:hover {
+  @apply bg-blue-700;
+}
+.rw-button.rw-button-red {
+  @apply bg-red-500 text-white;
+}
+.rw-button.rw-button-red:hover {
+  @apply bg-red-700 text-white;
+}
+.rw-button-icon {
+  @apply text-xl leading-5 mr-1;
+}
+.rw-button-group {
+  @apply flex justify-center my-3 mx-2;
+}
+.rw-button-group .rw-button {
+  @apply mx-1;
+}
+.rw-form-wrapper .rw-button-group {
+  @apply mt-8;
+}
+.rw-label {
+  @apply block mt-6 text-gray-600 font-semibold text-left;
+}
+.rw-label.rw-label-error {
+  @apply text-red-600;
+}
+.rw-input {
+  @apply block mt-2 w-full p-2 bg-white border border-gray-200 rounded outline-none;
+}
+.rw-check-radio-items {
+  @apply flex justify-items-center;
+}
+.rw-check-radio-item-none {
+  @apply text-gray-600;
+}
+.rw-input[type='checkbox'],
+.rw-input[type='radio'] {
+  @apply inline w-4 ml-0 mr-1 mt-1;
+}
+.rw-input:focus {
+  @apply border-gray-400;
+}
+.rw-input-error {
+  @apply border-red-600 text-red-600;
+}
+.rw-input-error:focus {
+  @apply border-red-600 outline-none;
+  box-shadow: 0 0 5px #c53030;
+}
+.rw-field-error {
+  @apply block mt-1 font-semibold text-xs text-red-600 uppercase;
+}
+.rw-table-wrapper-responsive {
+  @apply overflow-x-auto;
+}
+.rw-table-wrapper-responsive .rw-table {
+  min-width: 48rem;
+}
+.rw-table {
+  @apply w-full text-sm;
+}
+.rw-table th,
+.rw-table td {
+  @apply p-3;
+}
+.rw-table td {
+  @apply bg-white text-gray-900;
+}
+.rw-table tr:nth-child(odd) td,
+.rw-table tr:nth-child(odd) th {
+  @apply bg-gray-50;
+}
+.rw-table thead tr {
+  @apply bg-gray-200 text-gray-600;
+}
+.rw-table th {
+  @apply font-semibold text-left;
+}
+.rw-table thead th {
+  @apply text-left;
+}
+.rw-table tbody th {
+  @apply text-right;
+}
+@media (min-width: 768px) {
+  .rw-table tbody th {
+    @apply w-1/5;
+  }
+}
+.rw-table tbody tr {
+  @apply border-t border-gray-200;
+}
+.rw-table input {
+  @apply ml-0;
+}
+.rw-table-actions {
+  @apply flex justify-end items-center h-4 pr-1;
+}
+.rw-table-actions .rw-button {
+  @apply bg-transparent;
+}
+.rw-table-actions .rw-button:hover {
+  @apply bg-gray-500 text-white;
+}
+.rw-table-actions .rw-button-blue {
+  @apply text-blue-500;
+}
+.rw-table-actions .rw-button-blue:hover {
+  @apply bg-blue-500 text-white;
+}
+.rw-table-actions .rw-button-red {
+  @apply text-red-600;
+}
+.rw-table-actions .rw-button-red:hover {
+  @apply bg-red-600 text-white;
+}
+.rw-text-center {
+  @apply text-center;
+}
+.rw-login-container {
+  @apply flex items-center justify-center flex-wrap mx-auto w-96 my-16;
+}
+.rw-login-container .rw-form-wrapper {
+  @apply w-full text-center;
+}
+.rw-login-link {
+  @apply mt-4 text-gray-600 text-sm text-center w-full;
+}
+.rw-webauthn-wrapper {
+  @apply mt-6 mx-4 leading-6;
+}
+.rw-webauthn-wrapper h2 {
+  @apply mb-4 text-xl font-bold;
+}

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

@@ -0,0 +1,74 @@
+${useClientDirective}import type {
+  Edit${singularPascalName}By${pascalIdName},
+  Update${singularPascalName}Input,
+  Update${singularPascalName}MutationVariables
+} from 'types/graphql'
+
+import { navigate, routes } from '@cedarjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@cedarjs/web'
+import { useMutation } from '@cedarjs/web'
+import { toast } from '@cedarjs/web/toast'
+
+import ${singularPascalName}Form from '${importComponentNameForm}'
+
+export const QUERY: TypedDocumentNode<Edit${singularPascalName}By${pascalIdName}> = gql`
+  query Edit${singularPascalName}By${pascalIdName}($${idName}: ${idType}!) {
+    ${singularCamelName}: ${singularCamelName}(${idName}: $${idName}) {<% columns.forEach(column => { %>
+      <%= column.name %><% }) %>
+    }
+  }
+`
+
+const UPDATE_${singularConstantName}_MUTATION: TypedDocumentNode<
+  Edit${singularPascalName}ById,
+  Update${singularPascalName}MutationVariables
+> = gql`
+  mutation Update${singularPascalName}Mutation($${idName}: ${idType}!, $input: Update${singularPascalName}Input!) {
+    update${singularPascalName}(${idName}: $${idName}, input: $input) {<% columns.forEach(column => { %>
+      <%= column.name %><% }) %>
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({ ${singularCamelName} }: CellSuccessProps<Edit${singularPascalName}By${pascalIdName}>) => {
+  const [update${singularPascalName}, { loading, error }] = useMutation(
+    UPDATE_${singularConstantName}_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('${singularPascalName} updated')
+        navigate(routes.${pluralRouteName}())
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    }
+  )
+
+  const onSave = (
+    input: Update${singularPascalName}Input,
+    id: Edit${singularPascalName}By${pascalIdName}['${singularCamelName}']['id']
+  ) => {
+    update${singularPascalName}({ variables: { id, input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">Edit ${singularPascalName} {${singularCamelName}?.id}</h2>
+      </header>
+      <div className="rw-segment-main">
+        <${singularPascalName}Form ${singularCamelName}={${singularCamelName}} onSave={onSave} error={error} loading={loading} />
+      </div>
+    </div>
+  )
+}