From 9771ad8c41249c23026c19180624728901b55622 Mon Sep 17 00:00:00 2001 From: Pat Needham Date: Wed, 22 May 2024 01:23:34 -0400 Subject: [PATCH] removed old code --- .../$slug_+/actions/artboard-design.ts | 149 ------------ .../$slug_+/actions/artboard-layer.ts | 145 ----------- .../artboards+/$slug_+/actions/artboard.ts | 129 ---------- .../artboards+/$slug_+/actions/design-fill.ts | 117 --------- .../$slug_+/actions/design-layout.ts | 142 ----------- .../artboards+/$slug_+/actions/design-line.ts | 117 --------- .../$slug_+/actions/design-palette.ts | 64 ----- .../$slug_+/actions/design-rotate.ts | 92 ------- .../artboards+/$slug_+/actions/design-size.ts | 117 --------- .../$slug_+/actions/design-stroke.ts | 117 --------- .../$slug_+/actions/design-template.ts | 64 ----- .../artboards+/$slug_+/actions/index.ts | 219 ----------------- .../$slug_+/actions/layer-design.ts | 149 ------------ .../artboards+/$slug_+/actions/layer.ts | 90 ------- .../artboards+/$slug_+/actions/utils.ts | 228 ------------------ .../$slug_+/components/canvas-content.tsx | 92 ------- .../actions/panel-form-actions-download.tsx | 26 -- .../panel-form-artboard-layer-delete.tsx | 53 ---- .../layer/panel-form-artboard-layer-new.tsx | 50 ---- .../panel-form-artboard-layer-reorder.tsx | 62 ----- ...nel-form-artboard-layer-toggle-visible.tsx | 52 ---- ...el-form-artboard-edit-background-color.tsx | 80 ------ .../panel-form-artboard-edit-height.tsx | 65 ----- .../panel-form-artboard-edit-width.tsx | 65 ----- .../forms/design/panel-form-design-delete.tsx | 75 ------ .../panel-form-design-fill-edit-basis.tsx | 74 ------ .../panel-form-design-fill-edit-style.tsx | 74 ------ .../panel-form-design-fill-edit-value.tsx | 76 ------ .../panel-form-design-layout-edit-columns.tsx | 68 ------ .../panel-form-design-layout-edit-count.tsx | 64 ----- .../panel-form-design-layout-edit-rows.tsx | 68 ------ .../panel-form-design-layout-edit-style.tsx | 72 ------ .../panel-form-design-line-edit-basis.tsx | 74 ------ .../panel-form-design-line-edit-format.tsx | 77 ------ .../panel-form-design-line=edit-width.tsx | 59 ----- .../forms/design/panel-form-design-new.tsx | 66 ----- .../panel-form-design-palette-edit-value.tsx | 80 ------ .../design/panel-form-design-reorder.tsx | 77 ------ .../panel-form-design-rotate-edit-basis.tsx | 81 ------- .../panel-form-design-rotate-edit-value.tsx | 62 ----- .../panel-form-design-size-edit-basis.tsx | 74 ------ .../panel-form-design-size-edit-format.tsx | 77 ------ .../panel-form-design-size-edit-value.tsx | 58 ----- .../panel-form-design-stroke-edit-basis.tsx | 81 ------- .../panel-form-design-stroke-edit-style.tsx | 81 ------- .../panel-form-design-stroke-edit-value.tsx | 80 ------ .../panel-form-design-template-edit-style.tsx | 71 ------ .../panel-form-design-toggle-visible.tsx | 68 ------ .../panel-form-layer-edit-description.tsx | 62 ----- .../layer/panel-form-layer-edit-name.tsx | 63 ----- .../panel/actions/panel-actions-download.tsx | 20 -- .../panel/actions/panel-actions.tsx | 9 - .../artboard/panel-artboard-background.tsx | 25 -- .../panel/artboard/panel-artboard-designs.tsx | 32 --- .../panel/artboard/panel-artboard-frame.tsx | 24 -- .../panel/artboard/panel-artboard-layers.tsx | 110 --------- .../design/sidebar-panel-actions-design.tsx | 63 ----- .../design/sidebar-panel-header-design.tsx | 44 ---- .../design/sidebar-panel-reorder-design.tsx | 56 ----- .../panel-design-type-row-values-fill.tsx | 23 -- .../panel-design-type-row-values-layout.tsx | 26 -- .../panel-design-type-row-values-line.tsx | 45 ---- .../panel-design-type-row-values-palette.tsx | 17 -- .../panel-design-type-row-values-rotate.tsx | 36 --- .../panel-design-type-row-values-size.tsx | 45 ---- .../panel-design-type-row-values-stroke.tsx | 25 -- .../panel-design-type-row-values-template.tsx | 19 -- .../type/panel-design-type-row-values.tsx | 57 ----- .../design/type/panel-design-type-row.tsx | 105 -------- .../panel/design/type/panel-design-type.tsx | 114 --------- .../panel/layer/panel-layer-designs.tsx | 27 --- .../design/panel-popover-design-fill.tsx | 42 ---- .../design/panel-popover-design-layout.tsx | 41 ---- .../design/panel-popover-design-line.tsx | 35 --- .../design/panel-popover-design-palette.tsx | 27 --- .../design/panel-popover-design-rotate.tsx | 29 --- .../design/panel-popover-design-size.tsx | 35 --- .../design/panel-popover-design-stroke.tsx | 41 ---- .../design/panel-popover-design-template.tsx | 22 -- .../popovers/layer/panel-popover-layer.tsx | 38 --- .../components/popovers/panel-popover.tsx | 34 --- .../$slug_+/components/sidebars.tsx | 64 ----- .../sketch+/artboards+/$slug_+/intent.ts | 97 -------- .../artboards+/$slug_+/queries.server.ts | 91 ------- .../sketch+/artboards+/$slug_+/route.tsx | 115 --------- .../sketch+/artboards+/_index/route.tsx | 12 - .../components/artboard-selector.tsx | 78 ------ app/routes/sketch+/artboards+/route.tsx | 86 ------- 88 files changed, 6155 deletions(-) delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/artboard-design.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/artboard-layer.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/artboard.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/design-fill.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/design-layout.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/design-line.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/design-palette.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/design-rotate.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/design-size.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/design-stroke.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/design-template.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/index.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/layer-design.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/layer.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/actions/utils.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/canvas-content.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/actions/panel-form-actions-download.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-delete.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-new.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-reorder.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-toggle-visible.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-background-color.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-height.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-width.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-delete.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-basis.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-style.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-value.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-columns.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-count.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-rows.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-style.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line-edit-basis.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line-edit-format.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line=edit-width.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-new.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-palette-edit-value.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-reorder.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-rotate-edit-basis.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-rotate-edit-value.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-basis.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-format.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-value.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-basis.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-style.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-value.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-template-edit-style.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-toggle-visible.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/layer/panel-form-layer-edit-description.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/forms/layer/panel-form-layer-edit-name.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/actions/panel-actions-download.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/actions/panel-actions.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/artboard/panel-artboard-background.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/artboard/panel-artboard-designs.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/artboard/panel-artboard-frame.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/artboard/panel-artboard-layers.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/sidebar-panel-actions-design.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/sidebar-panel-header-design.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/sidebar-panel-reorder-design.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/type/panel-design-type-row-values-fill.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/type/panel-design-type-row-values-layout.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/type/panel-design-type-row-values-line.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/type/panel-design-type-row-values-palette.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/type/panel-design-type-row-values-rotate.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/type/panel-design-type-row-values-size.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/type/panel-design-type-row-values-stroke.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/type/panel-design-type-row-values-template.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/type/panel-design-type-row-values.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/type/panel-design-type-row.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/design/type/panel-design-type.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/panel/layer/panel-layer-designs.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/popovers/design/panel-popover-design-fill.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/popovers/design/panel-popover-design-layout.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/popovers/design/panel-popover-design-line.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/popovers/design/panel-popover-design-palette.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/popovers/design/panel-popover-design-rotate.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/popovers/design/panel-popover-design-size.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/popovers/design/panel-popover-design-stroke.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/popovers/design/panel-popover-design-template.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/popovers/layer/panel-popover-layer.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/popovers/panel-popover.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/components/sidebars.tsx delete mode 100644 app/routes/sketch+/artboards+/$slug_+/intent.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/queries.server.ts delete mode 100644 app/routes/sketch+/artboards+/$slug_+/route.tsx delete mode 100644 app/routes/sketch+/artboards+/_index/route.tsx delete mode 100644 app/routes/sketch+/artboards+/components/artboard-selector.tsx delete mode 100644 app/routes/sketch+/artboards+/route.tsx diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/artboard-design.ts b/app/routes/sketch+/artboards+/$slug_+/actions/artboard-design.ts deleted file mode 100644 index 2b45eb18..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/artboard-design.ts +++ /dev/null @@ -1,149 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { - DeleteArtboardDesignSchema, - NewArtboardDesignSchema, - ReorderArtboardDesignSchema, - ToggleVisibleArtboardDesignSchema, -} from '#app/schema/design-artboard' -import { artboardDesignCreateService } from '#app/services/artboard/design/create.service' -import { artboardDesignDeleteService } from '#app/services/artboard/design/delete.service' -import { artboardDesignMoveDownService } from '#app/services/artboard/design/move-down.service' -import { artboardDesignMoveUpService } from '#app/services/artboard/design/move-up.service' -import { artboardDesignToggleVisibleService } from '#app/services/artboard/design/toggle-visible.service' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { - parseArtboardDesignSubmission, - parseArtboardDesignUpdateSubmission, -} from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: - | typeof NewArtboardDesignSchema - | typeof ReorderArtboardDesignSchema - | typeof ToggleVisibleArtboardDesignSchema - | typeof DeleteArtboardDesignSchema -}) { - const newDesign = schema === NewArtboardDesignSchema - const submission = newDesign - ? await parseArtboardDesignSubmission({ userId, formData, schema }) - : await parseArtboardDesignUpdateSubmission({ userId, formData, schema }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function artboardDesignNewAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: NewArtboardDesignSchema, - }) - if (!isValid || !submission) return response - - const { artboardId, type } = submission.value - const { success } = await artboardDesignCreateService({ - userId, - artboardId, - type, - }) - - if (!success) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} - -export async function artboardDesignReorderAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: ReorderArtboardDesignSchema, - }) - if (!isValid || !submission) return response - - const { id, artboardId, direction, updateSelectedDesignId } = submission.value - const args = { - userId, - id, - artboardId, - updateSelectedDesignId, - } - - const { success } = - direction === 'up' - ? await artboardDesignMoveUpService(args) - : await artboardDesignMoveDownService(args) - - if (!success) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} - -export async function artboardDesignToggleVisibilityAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: ToggleVisibleArtboardDesignSchema, - }) - if (!isValid || !submission) return response - - const { id, artboardId, updateSelectedDesignId } = submission.value - const { success } = await artboardDesignToggleVisibleService({ - userId, - id, - artboardId, - updateSelectedDesignId, - }) - - if (!success) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} - -export async function artboardDesignDeleteAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: DeleteArtboardDesignSchema, - }) - if (!isValid || !submission) return response - - const { id, artboardId, updateSelectedDesignId } = submission.value - const { success } = await artboardDesignDeleteService({ - userId, - id, - artboardId, - updateSelectedDesignId, - }) - - if (!success) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/artboard-layer.ts b/app/routes/sketch+/artboards+/$slug_+/actions/artboard-layer.ts deleted file mode 100644 index 022db083..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/artboard-layer.ts +++ /dev/null @@ -1,145 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { - DeleteArtboardLayerSchema, - NewArtboardLayerSchema, - ReorderArtboardLayerSchema, - ToggleVisibleArtboardLayerSchema, -} from '#app/schema/layer-artboard' -import { artboardLayerCreateService } from '#app/services/artboard/layer/create.service' -import { artboardLayerDeleteService } from '#app/services/artboard/layer/delete.service' -import { artboardLayerMoveDownService } from '#app/services/artboard/layer/move-down.service' -import { artboardLayerMoveUpService } from '#app/services/artboard/layer/move-up.service' -import { artboardLayerToggleVisibleService } from '#app/services/artboard/layer/toggle-visible.service' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { - parseArtboardLayerSubmission, - parseArtboardLayerUpdateSubmission, -} from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: - | typeof NewArtboardLayerSchema - | typeof ReorderArtboardLayerSchema - | typeof ToggleVisibleArtboardLayerSchema - | typeof DeleteArtboardLayerSchema -}) { - const newDesign = schema === NewArtboardLayerSchema - const submission = newDesign - ? await parseArtboardLayerSubmission({ userId, formData, schema }) - : await parseArtboardLayerUpdateSubmission({ userId, formData, schema }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function artboardLayerNewAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: NewArtboardLayerSchema, - }) - if (!isValid || !submission) return response - - const { artboardId } = submission.value - const { success } = await artboardLayerCreateService({ - userId, - artboardId, - }) - - if (!success) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} - -export async function artboardLayerReorderAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: ReorderArtboardLayerSchema, - }) - if (!isValid || !submission) return response - - const { id, artboardId, direction } = submission.value - const args = { - userId, - id, - artboardId, - } - - const { success, error } = - direction === 'up' - ? await artboardLayerMoveUpService(args) - : await artboardLayerMoveDownService(args) - - if (error) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} - -export async function artboardLayerToggleVisibleAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: ToggleVisibleArtboardLayerSchema, - }) - if (!isValid || !submission) return response - - const { id, artboardId } = submission.value - const { success, error } = await artboardLayerToggleVisibleService({ - userId, - id, - artboardId, - }) - - if (error) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} - -export async function artboardLayerDeleteAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: DeleteArtboardLayerSchema, - }) - if (!isValid || !submission) return response - - const { id, artboardId } = submission.value - const { success, error } = await artboardLayerDeleteService({ - userId, - id, - artboardId, - }) - - if (error) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/artboard.ts b/app/routes/sketch+/artboards+/$slug_+/actions/artboard.ts deleted file mode 100644 index 2b249007..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/artboard.ts +++ /dev/null @@ -1,129 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { type IArtboard } from '#app/models/artboard/artboard.server' -import { - ArtboardBackgroundColorSchema, - ArtboardHeightSchema, - ArtboardWidthSchema, -} from '#app/schema/artboard' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { findFirstArtboardInstance } from '#app/utils/prisma-extensions-artboard' -import { parseArtboardSubmission } from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: - | typeof ArtboardWidthSchema - | typeof ArtboardHeightSchema - | typeof ArtboardBackgroundColorSchema -}) { - const submission = await parseArtboardSubmission({ - userId, - formData, - schema, - }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function artboardEditWidthAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: ArtboardWidthSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, width } = submission.value - const artboard = await getArtboard({ id }) - if (!artboard) return submissionErrorResponse(submission) - - artboard.width = width - artboard.updatedAt = new Date() - await artboard.save() - - return json({ status: 'success', submission } as const) -} - -export async function artboardEditHeightAction({ - userId, - formData, -}: IntentActionArgs) { - // validation - const submission = await parseArtboardSubmission({ - userId, - formData, - schema: ArtboardHeightSchema, - }) - if (submission.intent !== 'submit') { - return notSubmissionResponse(submission) - } - if (!submission.value) { - return submissionErrorResponse(submission) - } - - // changes - const { id, height } = submission.value - const artboard = await getArtboard({ id }) - if (!artboard) return submissionErrorResponse(submission) - - artboard.height = height - artboard.updatedAt = new Date() - await artboard.save() - - return json({ status: 'success', submission } as const) -} - -export async function artboardEditBackgroundColorAction({ - userId, - formData, -}: IntentActionArgs) { - // validation - const submission = await parseArtboardSubmission({ - userId, - formData, - schema: ArtboardBackgroundColorSchema, - }) - if (submission.intent !== 'submit') { - return notSubmissionResponse(submission) - } - if (!submission.value) { - return submissionErrorResponse(submission) - } - - // changes - const { id, backgroundColor } = submission.value - const artboard = await getArtboard({ id }) - if (!artboard) return submissionErrorResponse(submission) - - artboard.backgroundColor = backgroundColor - artboard.updatedAt = new Date() - await artboard.save() - - return json({ status: 'success', submission } as const) -} - -const getArtboard = async ({ id }: { id: IArtboard['id'] }) => { - return await findFirstArtboardInstance({ - where: { id }, - }) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/design-fill.ts b/app/routes/sketch+/artboards+/$slug_+/actions/design-fill.ts deleted file mode 100644 index 533392da..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/design-fill.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { type IFill } from '#app/models/design-type/fill/fill.server' -import { - EditDesignFillValueSchema, - EditDesignFillBasisSchema, - EditDesignFillStyleSchema, -} from '#app/schema/fill' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { findFirstFillInstance } from '#app/utils/prisma-extensions-fill' -import { parseDesignSubmission } from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: - | typeof EditDesignFillValueSchema - | typeof EditDesignFillStyleSchema - | typeof EditDesignFillBasisSchema -}) { - const submission = await parseDesignSubmission({ - userId, - formData, - schema, - }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function designFillEditValueAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignFillValueSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, value } = submission.value - const fill = await getFill({ id }) - if (!fill) return submissionErrorResponse(submission) - - fill.value = value - fill.updatedAt = new Date() - await fill.save() - - return json({ status: 'success', submission } as const) -} - -export async function designFillEditStyleAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignFillStyleSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, style } = submission.value - const fill = await getFill({ id }) - if (!fill) return submissionErrorResponse(submission) - - fill.style = style - fill.updatedAt = new Date() - await fill.save() - - return json({ status: 'success', submission } as const) -} - -export async function designFillEditBasisAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignFillBasisSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, basis } = submission.value - const fill = await getFill({ id }) - if (!fill) return submissionErrorResponse(submission) - - fill.basis = basis - fill.updatedAt = new Date() - await fill.save() - - return json({ status: 'success', submission } as const) -} - -const getFill = async ({ id }: { id: IFill['id'] }) => { - return await findFirstFillInstance({ - where: { id }, - }) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/design-layout.ts b/app/routes/sketch+/artboards+/$slug_+/actions/design-layout.ts deleted file mode 100644 index f2b53348..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/design-layout.ts +++ /dev/null @@ -1,142 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { type ILayout } from '#app/models/design-type/layout/layout.server' -import { - EditDesignLayoutCountSchema, - EditDesignLayoutColumnsSchema, - EditDesignLayoutRowsSchema, - EditDesignLayoutStyleSchema, -} from '#app/schema/layout' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { findFirstLayoutInstance } from '#app/utils/prisma-extensions-layout' -import { parseDesignSubmission } from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: - | typeof EditDesignLayoutStyleSchema - | typeof EditDesignLayoutCountSchema - | typeof EditDesignLayoutRowsSchema - | typeof EditDesignLayoutColumnsSchema -}) { - const submission = await parseDesignSubmission({ - userId, - formData, - schema, - }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function designLayoutEditStyleAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignLayoutStyleSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, style } = submission.value - const layout = await getLayout({ id }) - if (!layout) return submissionErrorResponse(submission) - - layout.style = style - layout.updatedAt = new Date() - await layout.save() - - return json({ status: 'success', submission } as const) -} - -export async function designLayoutEditCountAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignLayoutCountSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, count } = submission.value - const layout = await getLayout({ id }) - if (!layout) return submissionErrorResponse(submission) - - layout.count = count - layout.updatedAt = new Date() - await layout.save() - - return json({ status: 'success', submission } as const) -} - -export async function designLayoutEditRowsAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignLayoutRowsSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, rows } = submission.value - const layout = await getLayout({ id }) - if (!layout) return submissionErrorResponse(submission) - - layout.rows = rows - layout.updatedAt = new Date() - await layout.save() - - return json({ status: 'success', submission } as const) -} - -export async function designLayoutEditColumnsAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignLayoutColumnsSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, columns } = submission.value - const layout = await getLayout({ id }) - if (!layout) return submissionErrorResponse(submission) - - layout.columns = columns - layout.updatedAt = new Date() - await layout.save() - - return json({ status: 'success', submission } as const) -} - -const getLayout = async ({ id }: { id: ILayout['id'] }) => { - return await findFirstLayoutInstance({ - where: { id }, - }) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/design-line.ts b/app/routes/sketch+/artboards+/$slug_+/actions/design-line.ts deleted file mode 100644 index 16bc3310..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/design-line.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { type ILine } from '#app/models/design-type/line/line.server' -import { - EditDesignLineBasisSchema, - EditDesignLineFormatSchema, - EditDesignLineWidthSchema, -} from '#app/schema/line' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { findFirstLineInstance } from '#app/utils/prisma-extensions-line' -import { parseDesignSubmission } from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: - | typeof EditDesignLineWidthSchema - | typeof EditDesignLineFormatSchema - | typeof EditDesignLineBasisSchema -}) { - const submission = await parseDesignSubmission({ - userId, - formData, - schema, - }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function designLineEditWidthAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignLineWidthSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, width } = submission.value - const line = await getLine({ id }) - if (!line) return submissionErrorResponse(submission) - - line.width = width - line.updatedAt = new Date() - await line.save() - - return json({ status: 'success', submission } as const) -} - -export async function designLineEditFormatAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignLineFormatSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, format } = submission.value - const line = await getLine({ id }) - if (!line) return submissionErrorResponse(submission) - - line.format = format - line.updatedAt = new Date() - await line.save() - - return json({ status: 'success', submission } as const) -} - -export async function designLineEditBasisAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignLineBasisSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, basis } = submission.value - const line = await getLine({ id }) - if (!line) return submissionErrorResponse(submission) - - line.basis = basis - line.updatedAt = new Date() - await line.save() - - return json({ status: 'success', submission } as const) -} - -const getLine = async ({ id }: { id: ILine['id'] }) => { - return await findFirstLineInstance({ - where: { id }, - }) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/design-palette.ts b/app/routes/sketch+/artboards+/$slug_+/actions/design-palette.ts deleted file mode 100644 index 6fbc445d..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/design-palette.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { type IPalette } from '#app/models/design-type/palette/palette.server' -import { EditDesignPaletteValueSchema } from '#app/schema/palette' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { findFirstPaletteInstance } from '#app/utils/prisma-extensions-palette' -import { parseDesignSubmission } from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: typeof EditDesignPaletteValueSchema -}) { - const submission = await parseDesignSubmission({ - userId, - formData, - schema, - }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function designPaletteEditValueAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignPaletteValueSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, value } = submission.value - const palette = await getPalette({ id }) - if (!palette) return submissionErrorResponse(submission) - - palette.value = value - palette.updatedAt = new Date() - await palette.save() - - return json({ status: 'success', submission } as const) -} - -const getPalette = async ({ id }: { id: IPalette['id'] }) => { - return await findFirstPaletteInstance({ - where: { id }, - }) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/design-rotate.ts b/app/routes/sketch+/artboards+/$slug_+/actions/design-rotate.ts deleted file mode 100644 index 830c7ddb..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/design-rotate.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { type IRotate } from '#app/models/design-type/rotate/rotate.server' -import { - EditDesignRotateValueSchema, - EditDesignRotateBasisSchema, -} from '#app/schema/rotate' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { findFirstRotateInstance } from '#app/utils/prisma-extensions-rotate' -import { parseDesignSubmission } from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: - | typeof EditDesignRotateValueSchema - | typeof EditDesignRotateBasisSchema -}) { - const submission = await parseDesignSubmission({ - userId, - formData, - schema, - }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function designRotateEditValueAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignRotateValueSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, value } = submission.value - const rotate = await getRotate({ id }) - if (!rotate) return submissionErrorResponse(submission) - - rotate.value = value - rotate.updatedAt = new Date() - await rotate.save() - - return json({ status: 'success', submission } as const) -} - -export async function designRotateEditBasisAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignRotateBasisSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, basis } = submission.value - const rotate = await getRotate({ id }) - if (!rotate) return submissionErrorResponse(submission) - - rotate.basis = basis - rotate.updatedAt = new Date() - await rotate.save() - - return json({ status: 'success', submission } as const) -} - -const getRotate = async ({ id }: { id: IRotate['id'] }) => { - return await findFirstRotateInstance({ - where: { id }, - }) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/design-size.ts b/app/routes/sketch+/artboards+/$slug_+/actions/design-size.ts deleted file mode 100644 index c0e20340..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/design-size.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { type ISize } from '#app/models/design-type/size/size.server' -import { - EditDesignSizeBasisSchema, - EditDesignSizeFormatSchema, - EditDesignSizeValueSchema, -} from '#app/schema/size' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { findFirstSizeInstance } from '#app/utils/prisma-extensions-size' -import { parseDesignSubmission } from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: - | typeof EditDesignSizeValueSchema - | typeof EditDesignSizeBasisSchema - | typeof EditDesignSizeFormatSchema -}) { - const submission = await parseDesignSubmission({ - userId, - formData, - schema, - }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function designSizeEditValueAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignSizeValueSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, value } = submission.value - const size = await getSize({ id }) - if (!size) return submissionErrorResponse(submission) - - size.value = value - size.updatedAt = new Date() - await size.save() - - return json({ status: 'success', submission } as const) -} - -export async function designSizeEditBasisAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignSizeBasisSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, basis } = submission.value - const size = await getSize({ id }) - if (!size) return submissionErrorResponse(submission) - - size.basis = basis - size.updatedAt = new Date() - await size.save() - - return json({ status: 'success', submission } as const) -} - -export async function designSizeEditFormatAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignSizeFormatSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, format } = submission.value - const size = await getSize({ id }) - if (!size) return submissionErrorResponse(submission) - - size.format = format - size.updatedAt = new Date() - await size.save() - - return json({ status: 'success', submission } as const) -} - -const getSize = async ({ id }: { id: ISize['id'] }) => { - return await findFirstSizeInstance({ - where: { id }, - }) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/design-stroke.ts b/app/routes/sketch+/artboards+/$slug_+/actions/design-stroke.ts deleted file mode 100644 index e8c2ce92..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/design-stroke.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { type IStroke } from '#app/models/design-type/stroke/stroke.server' -import { - EditDesignStrokeValueSchema, - EditDesignStrokeBasisSchema, - EditDesignStrokeStyleSchema, -} from '#app/schema/stroke' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { findFirstStrokeInstance } from '#app/utils/prisma-extensions-stroke' -import { parseDesignSubmission } from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: - | typeof EditDesignStrokeValueSchema - | typeof EditDesignStrokeStyleSchema - | typeof EditDesignStrokeBasisSchema -}) { - const submission = await parseDesignSubmission({ - userId, - formData, - schema, - }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function designStrokeEditValueAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignStrokeValueSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, value } = submission.value - const stroke = await getStroke({ id }) - if (!stroke) return submissionErrorResponse(submission) - - stroke.value = value - stroke.updatedAt = new Date() - await stroke.save() - - return json({ status: 'success', submission } as const) -} - -export async function designStrokeEditStyleAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignStrokeStyleSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, style } = submission.value - const stroke = await getStroke({ id }) - if (!stroke) return submissionErrorResponse(submission) - - stroke.style = style - stroke.updatedAt = new Date() - await stroke.save() - - return json({ status: 'success', submission } as const) -} - -export async function designStrokeEditBasisAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignStrokeBasisSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, basis } = submission.value - const stroke = await getStroke({ id }) - if (!stroke) return submissionErrorResponse(submission) - - stroke.basis = basis - stroke.updatedAt = new Date() - await stroke.save() - - return json({ status: 'success', submission } as const) -} - -const getStroke = async ({ id }: { id: IStroke['id'] }) => { - return await findFirstStrokeInstance({ - where: { id }, - }) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/design-template.ts b/app/routes/sketch+/artboards+/$slug_+/actions/design-template.ts deleted file mode 100644 index 41637382..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/design-template.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { type ITemplate } from '#app/models/design-type/template/template.server' -import { EditDesignTemplateStyleSchema } from '#app/schema/template' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { findFirstTemplateInstance } from '#app/utils/prisma-extensions-template' -import { parseDesignSubmission } from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: typeof EditDesignTemplateStyleSchema -}) { - const submission = await parseDesignSubmission({ - userId, - formData, - schema, - }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function designTemplateEditStyleAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditDesignTemplateStyleSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, style } = submission.value - const template = await getTemplate({ id }) - if (!template) return submissionErrorResponse(submission) - - template.style = style - template.updatedAt = new Date() - await template.save() - - return json({ status: 'success', submission } as const) -} - -const getTemplate = async ({ id }: { id: ITemplate['id'] }) => { - return await findFirstTemplateInstance({ - where: { id }, - }) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/index.ts b/app/routes/sketch+/artboards+/$slug_+/actions/index.ts deleted file mode 100644 index 865465fd..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/index.ts +++ /dev/null @@ -1,219 +0,0 @@ -import { type DataFunctionArgs } from '@remix-run/node' -import { requireUserId } from '#app/utils/auth.server' -import { - ARTBOARD_DESIGN_INTENT, - ARTBOARD_INTENT, - ARTBOARD_LAYER_INTENT, - DESIGN_FILL_INTENT, - DESIGN_LAYOUT_INTENT, - DESIGN_LINE_INTENT, - DESIGN_PALETTE_INTENT, - DESIGN_ROTATE_INTENT, - DESIGN_SIZE_INTENT, - DESIGN_STROKE_INTENT, - DESIGN_TEMPLATE_INTENT, - LAYER_DESIGN_INTENT, - LAYER_INTENT, -} from '../intent' -import { - artboardEditBackgroundColorAction, - artboardEditHeightAction, - artboardEditWidthAction, -} from './artboard' -import { - artboardDesignDeleteAction, - artboardDesignNewAction, - artboardDesignReorderAction, - artboardDesignToggleVisibilityAction, -} from './artboard-design' -import { - artboardLayerDeleteAction, - artboardLayerNewAction, - artboardLayerReorderAction, - artboardLayerToggleVisibleAction, -} from './artboard-layer' -import { - designFillEditBasisAction, - designFillEditStyleAction, - designFillEditValueAction, -} from './design-fill' -import { - designLayoutEditColumnsAction, - designLayoutEditCountAction, - designLayoutEditRowsAction, - designLayoutEditStyleAction, -} from './design-layout' -import { - designLineEditBasisAction, - designLineEditFormatAction, - designLineEditWidthAction, -} from './design-line' -import { designPaletteEditValueAction } from './design-palette' -import { - designRotateEditBasisAction, - designRotateEditValueAction, -} from './design-rotate' -import { - designSizeEditBasisAction, - designSizeEditFormatAction, - designSizeEditValueAction, -} from './design-size' -import { - designStrokeEditBasisAction, - designStrokeEditStyleAction, - designStrokeEditValueAction, -} from './design-stroke' -import { designTemplateEditStyleAction } from './design-template' -import { layerEditDescriptionAction, layerEditNameAction } from './layer' -import { - layerDesignDeleteAction, - layerDesignNewAction, - layerDesignReorderAction, - layerDesignToggleVisibleAction, -} from './layer-design' - -export async function action({ request }: DataFunctionArgs) { - const userId = await requireUserId(request) - const formData = await request.formData() - // TODO: remove these since this is all run inside the app - // await validateCSRF(formData, request.headers) - - const actionArgs = { request, userId, formData } - const intent = formData.get('intent') - switch (intent) { - // ARTBOARD INTENTS - case ARTBOARD_INTENT.updateArtboardWidth: { - return artboardEditWidthAction(actionArgs) - } - case ARTBOARD_INTENT.updateArtboardHeight: { - return artboardEditHeightAction(actionArgs) - } - case ARTBOARD_INTENT.updateArtboardBackgroundColor: { - return artboardEditBackgroundColorAction(actionArgs) - } - - // ARTBOARD DESIGN INTENTS - case ARTBOARD_DESIGN_INTENT.artboardCreateDesign: { - return artboardDesignNewAction(actionArgs) - } - case ARTBOARD_DESIGN_INTENT.artboardReorderDesign: { - return artboardDesignReorderAction(actionArgs) - } - case ARTBOARD_DESIGN_INTENT.artboardToggleVisibleDesign: { - return artboardDesignToggleVisibilityAction(actionArgs) - } - case ARTBOARD_DESIGN_INTENT.artboardDeleteDesign: { - return artboardDesignDeleteAction(actionArgs) - } - - // ARTBOARD LAYER INTENTS - case ARTBOARD_LAYER_INTENT.artboardCreateLayer: { - return artboardLayerNewAction(actionArgs) - } - case ARTBOARD_LAYER_INTENT.artboardToggleVisibleLayer: { - return artboardLayerToggleVisibleAction(actionArgs) - } - case ARTBOARD_LAYER_INTENT.artboardDeleteLayer: { - return artboardLayerDeleteAction(actionArgs) - } - case ARTBOARD_LAYER_INTENT.artboardReorderLayer: { - return artboardLayerReorderAction(actionArgs) - } - - // LAYER INTENTS - case LAYER_INTENT.updateLayerName: { - return layerEditNameAction(actionArgs) - } - case LAYER_INTENT.updateLayerDescription: { - return layerEditDescriptionAction(actionArgs) - } - - // LAYER DESIGN INTENTS - case LAYER_DESIGN_INTENT.layerCreateDesign: { - return layerDesignNewAction(actionArgs) - } - case LAYER_DESIGN_INTENT.layerDeleteDesign: { - return layerDesignDeleteAction(actionArgs) - } - case LAYER_DESIGN_INTENT.layerToggleVisibleDesign: { - return layerDesignToggleVisibleAction(actionArgs) - } - case LAYER_DESIGN_INTENT.layerReorderDesign: { - return layerDesignReorderAction(actionArgs) - } - - // DESIGN INTENTS - // PALETTE DESIGN INTENTS - case DESIGN_PALETTE_INTENT.updateDesignPaletteValue: { - return designPaletteEditValueAction(actionArgs) - } - // SIZE DESIGN INTENTS - case DESIGN_SIZE_INTENT.updateDesignSizeValue: { - return designSizeEditValueAction(actionArgs) - } - case DESIGN_SIZE_INTENT.updateDesignSizeBasis: { - return designSizeEditBasisAction(actionArgs) - } - case DESIGN_SIZE_INTENT.updateDesignSizeFormat: { - return designSizeEditFormatAction(actionArgs) - } - // FILL DESIGN INTENTS - case DESIGN_FILL_INTENT.updateDesignFillValue: { - return designFillEditValueAction(actionArgs) - } - case DESIGN_FILL_INTENT.updateDesignFillStyle: { - return designFillEditStyleAction(actionArgs) - } - case DESIGN_FILL_INTENT.updateDesignFillBasis: { - return designFillEditBasisAction(actionArgs) - } - // STROKE DESIGN INTENTS - case DESIGN_STROKE_INTENT.updateDesignStrokeValue: { - return designStrokeEditValueAction(actionArgs) - } - case DESIGN_STROKE_INTENT.updateDesignStrokeStyle: { - return designStrokeEditStyleAction(actionArgs) - } - case DESIGN_STROKE_INTENT.updateDesignStrokeBasis: { - return designStrokeEditBasisAction(actionArgs) - } - // LINE DESIGN INTENTS - case DESIGN_LINE_INTENT.updateDesignLineWidth: { - return designLineEditWidthAction(actionArgs) - } - case DESIGN_LINE_INTENT.updateDesignLineBasis: { - return designLineEditBasisAction(actionArgs) - } - case DESIGN_LINE_INTENT.updateDesignLineFormat: { - return designLineEditFormatAction(actionArgs) - } - // ROTATE DESIGN INTENTS - case DESIGN_ROTATE_INTENT.updateDesignRotateValue: { - return designRotateEditValueAction(actionArgs) - } - case DESIGN_ROTATE_INTENT.updateDesignRotateBasis: { - return designRotateEditBasisAction(actionArgs) - } - // LAYOUT DESIGN INTENTS - case DESIGN_LAYOUT_INTENT.updateDesignLayoutStyle: { - return designLayoutEditStyleAction(actionArgs) - } - case DESIGN_LAYOUT_INTENT.updateDesignLayoutCount: { - return designLayoutEditCountAction(actionArgs) - } - case DESIGN_LAYOUT_INTENT.updateDesignLayoutRows: { - return designLayoutEditRowsAction(actionArgs) - } - case DESIGN_LAYOUT_INTENT.updateDesignLayoutColumns: { - return designLayoutEditColumnsAction(actionArgs) - } - // TEMPLATE DESIGN INTENTS - case DESIGN_TEMPLATE_INTENT.updateDesignTemplateStyle: { - return designTemplateEditStyleAction(actionArgs) - } - - default: { - throw new Response(`Invalid intent "${intent}"`, { status: 400 }) - } - } -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/layer-design.ts b/app/routes/sketch+/artboards+/$slug_+/actions/layer-design.ts deleted file mode 100644 index 91710fc1..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/layer-design.ts +++ /dev/null @@ -1,149 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { - DeleteLayerDesignSchema, - NewLayerDesignSchema, - ReorderLayerDesignSchema, - ToggleVisibleLayerDesignSchema, -} from '#app/schema/design-layer' -import { layerDesignCreateService } from '#app/services/layer/design/create.service' -import { layerDesignDeleteService } from '#app/services/layer/design/delete.service' -import { layerDesignMoveDownService } from '#app/services/layer/design/move-down.service' -import { layerDesignMoveUpService } from '#app/services/layer/design/move-up.service' -import { layerDesignToggleVisibleService } from '#app/services/layer/design/toggle-visible.service' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { - parseLayerDesignSubmission, - parseLayerDesignUpdateSubmission, -} from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: - | typeof NewLayerDesignSchema - | typeof ReorderLayerDesignSchema - | typeof ToggleVisibleLayerDesignSchema - | typeof DeleteLayerDesignSchema -}) { - const newDesign = schema === NewLayerDesignSchema - const submission = newDesign - ? await parseLayerDesignSubmission({ userId, formData, schema }) - : await parseLayerDesignUpdateSubmission({ userId, formData, schema }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function layerDesignNewAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: NewLayerDesignSchema, - }) - if (!isValid || !submission) return response - - const { layerId, type } = submission.value - const { success } = await layerDesignCreateService({ - userId, - layerId, - type, - }) - - if (!success) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} - -export async function layerDesignReorderAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: ReorderLayerDesignSchema, - }) - if (!isValid || !submission) return response - - const { id, layerId, direction, updateSelectedDesignId } = submission.value - const args = { - userId, - id, - layerId, - updateSelectedDesignId, - } - - const { success } = - direction === 'up' - ? await layerDesignMoveUpService(args) - : await layerDesignMoveDownService(args) - - if (!success) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} - -export async function layerDesignToggleVisibleAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: ToggleVisibleLayerDesignSchema, - }) - if (!isValid || !submission) return response - - const { id, layerId, updateSelectedDesignId } = submission.value - const { success } = await layerDesignToggleVisibleService({ - userId, - id, - layerId, - updateSelectedDesignId, - }) - - if (!success) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} - -export async function layerDesignDeleteAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: DeleteLayerDesignSchema, - }) - if (!isValid || !submission) return response - - const { id, layerId, updateSelectedDesignId } = submission.value - const { success } = await layerDesignDeleteService({ - userId, - id, - layerId, - updateSelectedDesignId, - }) - - if (!success) return submissionErrorResponse(submission) - - return json({ status: 'success', submission, success } as const) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/layer.ts b/app/routes/sketch+/artboards+/$slug_+/actions/layer.ts deleted file mode 100644 index c99722c5..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/layer.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { json } from '@remix-run/node' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { type ILayer } from '#app/models/layer/layer.server' -import { - EditLayerDescriptionSchema, - EditLayerNameSchema, -} from '#app/schema/layer' -import { - notSubmissionResponse, - submissionErrorResponse, -} from '#app/utils/conform-utils' -import { findFirstLayerInstance } from '#app/utils/prisma-extensions-layer' -import { parseLayerSubmission } from './utils' - -async function validateSubmission({ - userId, - formData, - schema, -}: { - userId: string - formData: FormData - schema: typeof EditLayerNameSchema | typeof EditLayerDescriptionSchema -}) { - const submission = await parseLayerSubmission({ - userId, - formData, - schema, - }) - - if (submission.intent !== 'submit') { - return { response: notSubmissionResponse(submission), isValid: false } - } - if (!submission.value) { - return { response: submissionErrorResponse(submission), isValid: false } - } - - return { submission, isValid: true } -} - -export async function layerEditNameAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditLayerNameSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, name } = submission.value - const layer = await getLayer({ id }) - if (!layer) return submissionErrorResponse(submission) - - layer.name = name - layer.updatedAt = new Date() - await layer.save() - - return json({ status: 'success', submission } as const) -} - -export async function layerEditDescriptionAction({ - userId, - formData, -}: IntentActionArgs) { - const { submission, isValid, response } = await validateSubmission({ - userId, - formData, - schema: EditLayerDescriptionSchema, - }) - if (!isValid || !submission) return response - - // changes - const { id, description } = submission.value - const layer = await getLayer({ id }) - if (!layer) return submissionErrorResponse(submission) - - layer.description = description ?? '' - layer.updatedAt = new Date() - await layer.save() - - return json({ status: 'success', submission } as const) -} - -const getLayer = async ({ id }: { id: ILayer['id'] }) => { - return await findFirstLayerInstance({ - where: { id }, - }) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/actions/utils.ts b/app/routes/sketch+/artboards+/$slug_+/actions/utils.ts deleted file mode 100644 index f097fd74..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/actions/utils.ts +++ /dev/null @@ -1,228 +0,0 @@ -import { parse } from '@conform-to/zod' -import { type z } from 'zod' -import { type IntentActionArgs } from '#app/definitions/intent-action-args' -import { getArtboard } from '#app/models/artboard/artboard.get.server' -import { - findDesignByIdAndOwner, - findFirstDesign, -} from '#app/models/design/design.server' -import { findLayerByIdAndOwner } from '#app/models/layer/layer.server' -import { addNotFoundIssue } from '#app/utils/conform-utils' - -export const parseArtboardSubmission = async ({ - userId, - formData, - schema, -}: IntentActionArgs & { schema: z.ZodSchema }) => { - return await parse(formData, { - schema: schema.superRefine(async (data, ctx) => { - const { id } = data - const artboard = await getArtboard({ where: { id, ownerId: userId } }) - if (!artboard) ctx.addIssue(addNotFoundIssue('Artboard')) - }), - async: true, - }) -} - -export const parseArtboardDesignSubmission = async ({ - userId, - formData, - schema, -}: IntentActionArgs & { schema: z.ZodSchema }) => { - return await parse(formData, { - schema: schema.superRefine(async (data, ctx) => { - const { artboardId } = data - const artboard = await getArtboard({ - where: { - id: artboardId, - ownerId: userId, - }, - }) - if (!artboard) ctx.addIssue(addNotFoundIssue('Artboard')) - }), - async: true, - }) -} - -export const parseArtboardDesignUpdateSubmission = async ({ - userId, - formData, - schema, -}: IntentActionArgs & { schema: z.ZodSchema }) => { - return await parse(formData, { - schema: schema.superRefine(async (data, ctx) => { - const { artboardId, id } = data - - const artboard = await getArtboard({ - where: { - id: artboardId, - ownerId: userId, - }, - }) - if (!artboard) ctx.addIssue(addNotFoundIssue('Artboard')) - - const design = await findFirstDesign({ - where: { - id, - ownerId: userId, - artboardId, - }, - }) - if (!design) ctx.addIssue(addNotFoundIssue('Design')) - }), - async: true, - }) -} - -export const parseArtboardDesignTypeSubmission = async ({ - userId, - formData, - schema, -}: IntentActionArgs & { schema: z.ZodSchema }) => { - return await parse(formData, { - schema: schema.superRefine(async (data, ctx) => { - const { artboardId, designId } = data - - const artboard = await getArtboard({ - where: { - id: artboardId, - ownerId: userId, - }, - }) - if (!artboard) ctx.addIssue(addNotFoundIssue('Artboard')) - - const design = await findDesignByIdAndOwner({ - id: designId, - ownerId: userId, - }) - if (!design) ctx.addIssue(addNotFoundIssue('Design')) - }), - async: true, - }) -} - -export const parseArtboardLayerSubmission = async ({ - userId, - formData, - schema, -}: IntentActionArgs & { schema: z.ZodSchema }) => { - return await parse(formData, { - schema: schema.superRefine(async (data, ctx) => { - const { artboardId } = data - const artboard = await getArtboard({ - where: { - id: artboardId, - ownerId: userId, - }, - }) - if (!artboard) ctx.addIssue(addNotFoundIssue('Artboard')) - }), - async: true, - }) -} - -export const parseLayerSubmission = async ({ - userId, - formData, - schema, -}: IntentActionArgs & { schema: z.ZodSchema }) => { - return await parse(formData, { - schema: schema.superRefine(async (data, ctx) => { - const { id } = data - const layer = await findLayerByIdAndOwner({ id, ownerId: userId }) - if (!layer) ctx.addIssue(addNotFoundIssue('Layer')) - }), - async: true, - }) -} - -export const parseArtboardLayerUpdateSubmission = async ({ - userId, - formData, - schema, -}: IntentActionArgs & { schema: z.ZodSchema }) => { - return await parse(formData, { - schema: schema.superRefine(async (data, ctx) => { - const { artboardId, layerId } = data - - const artboard = await getArtboard({ - where: { - id: artboardId, - ownerId: userId, - }, - }) - if (!artboard) ctx.addIssue(addNotFoundIssue('Artboard')) - - const design = await findLayerByIdAndOwner({ - id: layerId, - ownerId: userId, - }) - if (!design) ctx.addIssue(addNotFoundIssue('Layer')) - }), - async: true, - }) -} - -export const parseLayerDesignSubmission = async ({ - userId, - formData, - schema, -}: IntentActionArgs & { schema: z.ZodSchema }) => { - return await parse(formData, { - schema: schema.superRefine(async (data, ctx) => { - const { layerId } = data - const layer = await findLayerByIdAndOwner({ - id: layerId, - ownerId: userId, - }) - if (!layer) ctx.addIssue(addNotFoundIssue('Layer')) - }), - async: true, - }) -} - -export const parseLayerDesignUpdateSubmission = async ({ - userId, - formData, - schema, -}: IntentActionArgs & { schema: z.ZodSchema }) => { - return await parse(formData, { - schema: schema.superRefine(async (data, ctx) => { - const { layerId, id } = data - - const layer = await findLayerByIdAndOwner({ - id: layerId, - ownerId: userId, - }) - if (!layer) ctx.addIssue(addNotFoundIssue('Layer')) - - const design = await findFirstDesign({ - where: { - id, - ownerId: userId, - layerId, - }, - }) - if (!design) ctx.addIssue(addNotFoundIssue('Design')) - }), - async: true, - }) -} - -export const parseDesignSubmission = async ({ - userId, - formData, - schema, -}: IntentActionArgs & { schema: z.ZodSchema }) => { - return await parse(formData, { - schema: schema.superRefine(async (data, ctx) => { - const { designId } = data - const design = await findDesignByIdAndOwner({ - id: designId, - ownerId: userId, - }) - if (!design) ctx.addIssue(addNotFoundIssue('Design')) - }), - async: true, - }) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/canvas-content.tsx b/app/routes/sketch+/artboards+/$slug_+/components/canvas-content.tsx deleted file mode 100644 index 475eef2e..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/canvas-content.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { useEffect, useRef } from 'react' -import { - ReactFlow, - type Node, - Background, - Controls, - MiniMap, - useNodesState, - BackgroundVariant, -} from 'reactflow' -import { ContainerIndex } from '#app/components/shared' -import { - type IArtboardVersionGenerator, - type IArtboardGenerator, -} from '#app/definitions/artboard-generator' -import 'reactflow/dist/style.css' -import { type IArtboard } from '#app/models/artboard/artboard.server' -import { canvasDrawService } from '#app/services/canvas/draw.service' - -const initialNodes = [ - { - id: 'a', - type: 'canvas', - position: { x: 0, y: 0 }, - data: { label: 'artboard-canvas' }, - }, -] satisfies Node[] - -export const CanvasContent = ({ - artboard, - artboardGenerator, -}: { - artboard: IArtboard - artboardGenerator: IArtboardGenerator | null -}) => { - const { width, height, backgroundColor } = artboard - const generator = { - ...artboardGenerator, - settings: { - width, - height, - background: backgroundColor, - }, - } as IArtboardVersionGenerator - - const Canvas = () => { - const canvasRef = useRef(null) - - useEffect(() => { - const canvas = canvasRef.current - const canvasReady = canvas && artboardGenerator - - canvasReady && canvasDrawService({ canvas, generator }) - }, [canvasRef]) - - return ( - - ) - } - - const [nodes, , onNodesChange] = useNodesState(initialNodes) - const nodeTypes = { - canvas: Canvas, - } - return ( -
- {artboardGenerator?.success ? ( - - - - - - ) : ( - - {artboardGenerator?.message || 'Artboard generator unsuccessful'} - - )} -
- ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/actions/panel-form-actions-download.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/actions/panel-form-actions-download.tsx deleted file mode 100644 index 765575aa..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/actions/panel-form-actions-download.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useFetcher } from '@remix-run/react' -import { type FormEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { Button } from '#app/components/ui/button' -import { downloadCanvasToImg } from '#app/utils/download' -import { type action } from '../../../route' - -export const PanelFormActionsDownload = ({}: {}) => { - const fetcher = useFetcher() - - const handleSubmit = (event: FormEvent) => { - event.preventDefault() - const canvas = document.getElementById('canvas-editor') as HTMLCanvasElement - downloadCanvasToImg({ canvas }) - } - - return ( - handleSubmit(e)}> - - -
- -
- - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-delete.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-delete.tsx deleted file mode 100644 index 1249bc76..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-delete.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { type Artboard } from '@prisma/client' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { FormDeleteIcon } from '#app/components/shared' -import { StatusButton } from '#app/components/ui/status-button' -import { DeleteArtboardLayerSchema } from '#app/schema/layer-artboard' -import { useIsPending } from '#app/utils/misc' -import { ARTBOARD_LAYER_INTENT } from '../../../../intent' -import { type action } from '../../../../route' - -export const PanelFormArtboardLayerDelete = ({ - id, - artboardId, -}: { - id: string - artboardId: Artboard['id'] -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form] = useForm({ - id: `panel-form-artboard-layer-delete-${id}`, - constraint: getFieldsetConstraint(DeleteArtboardLayerSchema), - lastSubmission: actionData?.submission, - }) - - return ( - - - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-new.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-new.tsx deleted file mode 100644 index 8ba95e71..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-new.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { type Artboard } from '@prisma/client' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { Button } from '#app/components/ui/button' -import { Icon } from '#app/components/ui/icon' -import { NewArtboardLayerSchema } from '#app/schema/layer-artboard' -import { useIsPending } from '#app/utils/misc' -import { ARTBOARD_LAYER_INTENT } from '../../../../intent' -import { type action } from '../../../../route' - -export const PanelFormArtboardLayerNew = ({ - artboardId, -}: { - artboardId: Artboard['id'] -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form] = useForm({ - id: 'panel-form-artboard-layer-new', - constraint: getFieldsetConstraint(NewArtboardLayerSchema), - lastSubmission: actionData?.submission, - }) - - return ( - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-reorder.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-reorder.tsx deleted file mode 100644 index d1770414..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-reorder.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { type Artboard } from '@prisma/client' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { PanelIconButton } from '#app/components/ui/panel-icon-button' -import { type ILayer } from '#app/models/layer/layer.server' -import { ReorderArtboardLayerSchema } from '#app/schema/layer-artboard' -import { useIsPending } from '#app/utils/misc' -import { ARTBOARD_LAYER_INTENT } from '../../../../intent' -import { type action } from '../../../../route' - -export const PanelFormArtboardLayerReorder = ({ - id, - artboardId, - panelIndex, - panelCount, - direction, -}: { - id: ILayer['id'] - artboardId: Artboard['id'] - panelIndex: number - panelCount: number - direction: 'up' | 'down' -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const atTop = panelIndex === 0 && direction === 'up' - const atBottom = panelIndex === panelCount - 1 && direction === 'down' - - const [form] = useForm({ - id: `panel-form-artboard-layer-reorder-${id}-${direction}`, - constraint: getFieldsetConstraint(ReorderArtboardLayerSchema), - lastSubmission: actionData?.submission, - }) - - return ( - - - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-toggle-visible.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-toggle-visible.tsx deleted file mode 100644 index 05457955..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/layer/panel-form-artboard-layer-toggle-visible.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { type Artboard } from '@prisma/client' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { PanelIconButton } from '#app/components/ui/panel-icon-button' -import { type ILayer } from '#app/models/layer/layer.server' -import { ToggleVisibleArtboardLayerSchema } from '#app/schema/layer-artboard' -import { useIsPending } from '#app/utils/misc' -import { ARTBOARD_LAYER_INTENT } from '../../../../intent' -import { type action } from '../../../../route' - -export const PanelFormArtboardLayerToggleVisible = ({ - id, - artboardId, - visible, -}: { - id: ILayer['id'] - artboardId: Artboard['id'] - visible: boolean -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form] = useForm({ - id: `panel-form-artboard-layer-toggle-visible-${id}`, - constraint: getFieldsetConstraint(ToggleVisibleArtboardLayerSchema), - lastSubmission: actionData?.submission, - }) - - return ( - - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-background-color.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-background-color.tsx deleted file mode 100644 index ddc544d5..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-background-color.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type ChangeEvent, type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { quickToast } from '#app/components/toaster' -import { Input } from '#app/components/ui/input' -import { type IArtboard } from '#app/models/artboard/artboard.server' -import { ArtboardBackgroundColorSchema } from '#app/schema/artboard' -import { stringToHexcode, validateStringIsHexcode } from '#app/utils/colors' -import { useIsPending } from '#app/utils/misc' -import { ARTBOARD_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormArtboardEditBackgroundColor = ({ - artboard, -}: { - artboard: Pick -}) => { - const fetcher = useFetcher() - - const actionData = useActionData() - const isPending = useIsPending() - const [form, fields] = useForm({ - id: 'panel-form-artboard-background', - constraint: getFieldsetConstraint(ArtboardBackgroundColorSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...artboard, - }, - }) - - const handleChange = (event: ChangeEvent) => { - const parsedValue = stringToHexcode.parse(event.target.value) - event.target.value = parsedValue - } - - const handleSubmit = (event: FocusEvent) => { - const isHexcode = validateStringIsHexcode(event.target.value) - if (!isHexcode) { - event.target.value = fields.backgroundColor.defaultValue || '' - quickToast({ - type: 'error', - title: 'Invalid color', - description: 'Please enter a valid color hexcode', - }) - return - } - - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - -
- handleChange(e)} - onBlur={e => handleSubmit(e)} - disabled={isPending} - {...conform.input(fields.backgroundColor, { - ariaAttributes: true, - })} - /> -
- - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-height.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-height.tsx deleted file mode 100644 index 3cc998a5..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-height.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { Icon } from '#app/components/ui/icon' -import { Input } from '#app/components/ui/input' -import { Label } from '#app/components/ui/label' -import { type IArtboard } from '#app/models/artboard/artboard.server' -import { ArtboardHeightSchema } from '#app/schema/artboard' -import { useIsPending } from '#app/utils/misc' -import { ARTBOARD_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormArtboardEditHeight = ({ - artboard, -}: { - artboard: Pick -}) => { - const fetcher = useFetcher() - - const actionData = useActionData() - const isPending = useIsPending() - const [form, fields] = useForm({ - id: 'panel-form-artboard-height', - constraint: getFieldsetConstraint(ArtboardHeightSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...artboard, - }, - }) - - const handleSubmit = (event: FocusEvent) => { - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - -
- - handleSubmit(e)} - disabled={isPending} - {...conform.input(fields.height, { - ariaAttributes: true, - })} - /> -
- - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-width.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-width.tsx deleted file mode 100644 index 7073cfe5..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/artboard/panel-form-artboard-edit-width.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { Icon } from '#app/components/ui/icon' -import { Input } from '#app/components/ui/input' -import { Label } from '#app/components/ui/label' -import { type IArtboard } from '#app/models/artboard/artboard.server' -import { ArtboardWidthSchema } from '#app/schema/artboard' -import { useIsPending } from '#app/utils/misc' -import { ARTBOARD_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormArtboardEditWidth = ({ - artboard, -}: { - artboard: Pick -}) => { - const fetcher = useFetcher() - - const actionData = useActionData() - const isPending = useIsPending() - const [form, fields] = useForm({ - id: 'panel-form-artboard-width', - constraint: getFieldsetConstraint(ArtboardWidthSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...artboard, - }, - }) - - const handleSubmit = (event: FocusEvent) => { - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - -
- - handleSubmit(e)} - disabled={isPending} - {...conform.input(fields.width, { - ariaAttributes: true, - })} - /> -
- - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-delete.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-delete.tsx deleted file mode 100644 index dc6497e2..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-delete.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { PanelIconButton } from '#app/components/ui/panel-icon-button' -import { type IArtboard } from '#app/models/artboard/artboard.server' -import { type IDesignIdOrNull, type IDesign } from '#app/models/design/design.server' -import { type ILayer } from '#app/models/layer/layer.server' -import { type DeleteDesignSchemaType } from '#app/schema/design' -import { useIsPending } from '#app/utils/misc' -import { type IntentDesignDelete } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignDelete = ({ - id, - artboardId, - layerId, - isSelectedDesign, - updateSelectedDesignId, - intent, - schema, -}: { - id: IDesign['id'] - artboardId?: IArtboard['id'] - layerId?: ILayer['id'] - isSelectedDesign: boolean - updateSelectedDesignId: IDesignIdOrNull - intent: IntentDesignDelete - schema: DeleteDesignSchemaType -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const parent = artboardId ? 'artboard' : 'layer' - const [form] = useForm({ - id: `panel-form-${parent}-design-delete-${id}`, - constraint: getFieldsetConstraint(schema), - lastSubmission: actionData?.submission, - }) - - return ( - - - - - {artboardId && ( - - )} - {layerId && } - {isSelectedDesign && ( - - )} - {updateSelectedDesignId && ( - - )} - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-basis.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-basis.tsx deleted file mode 100644 index 2033fab0..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-basis.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '#app/components/ui/select' -import { type IFill } from '#app/models/design-type/fill/fill.server' -import { EditDesignFillBasisSchema, FillBasisTypeEnum } from '#app/schema/fill' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_FILL_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignFillEditBasis = ({ fill }: { fill: IFill }) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-fill-edit-${fill.id}-basis`, - constraint: getFieldsetConstraint(EditDesignFillBasisSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...fill, - }, - }) - - const handleChange = (value: string) => { - fetcher.submit(form.ref.current, { - method: 'POST', - }) - } - - return ( - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-style.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-style.tsx deleted file mode 100644 index 20b26a72..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-style.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '#app/components/ui/select' -import { type IFill } from '#app/models/design-type/fill/fill.server' -import { EditDesignFillStyleSchema, FillStyleTypeEnum } from '#app/schema/fill' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_FILL_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignFillEditStyle = ({ fill }: { fill: IFill }) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-fill-edit-${fill.id}-style`, - constraint: getFieldsetConstraint(EditDesignFillStyleSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...fill, - }, - }) - - const handleChange = (value: string) => { - fetcher.submit(form.ref.current, { - method: 'POST', - }) - } - - return ( - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-value.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-value.tsx deleted file mode 100644 index 31b5155c..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-fill-edit-value.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type ChangeEvent, type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { quickToast } from '#app/components/toaster' -import { Input } from '#app/components/ui/input' -import { type IFill } from '#app/models/design-type/fill/fill.server' -import { EditDesignFillValueSchema } from '#app/schema/fill' -import { stringToHexcode, validateStringIsHexcode } from '#app/utils/colors' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_FILL_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignFillEditValue = ({ fill }: { fill: IFill }) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-fill-edit-${fill.id}-value`, - constraint: getFieldsetConstraint(EditDesignFillValueSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...fill, - }, - }) - - const handleChange = (event: ChangeEvent) => { - const parsedValue = stringToHexcode.parse(event.target.value) - event.target.value = parsedValue - } - - const handleSubmit = (event: FocusEvent) => { - const isHexcode = validateStringIsHexcode(event.target.value) - if (!isHexcode) { - event.target.value = fields.value.defaultValue || '' - quickToast({ - type: 'error', - title: 'Invalid color', - description: 'Please enter a valid color hexcode', - }) - return - } - - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - - - handleChange(e)} - onBlur={e => handleSubmit(e)} - disabled={isPending} - {...conform.input(fields.value, { - ariaAttributes: true, - })} - /> - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-columns.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-columns.tsx deleted file mode 100644 index 2fbd61a6..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-columns.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { Input } from '#app/components/ui/input' -import { type ILayout } from '#app/models/design-type/layout/layout.server' -import { EditDesignLayoutColumnsSchema } from '#app/schema/layout' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_LAYOUT_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignLayoutEditColumns = ({ - layout, -}: { - layout: ILayout -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-layout-edit-${layout.id}-columns`, - constraint: getFieldsetConstraint(EditDesignLayoutColumnsSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...layout, - }, - }) - - const handleSubmit = (event: FocusEvent) => { - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - - - handleSubmit(e)} - autoComplete="off" - disabled={isPending} - {...conform.input(fields.columns, { - ariaAttributes: true, - })} - /> - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-count.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-count.tsx deleted file mode 100644 index 30b03eff..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-count.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { Input } from '#app/components/ui/input' -import { type ILayout } from '#app/models/design-type/layout/layout.server' -import { EditDesignLayoutCountSchema } from '#app/schema/layout' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_LAYOUT_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignLayoutEditCount = ({ - layout, -}: { - layout: ILayout -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-layout-edit-${layout.id}-count`, - constraint: getFieldsetConstraint(EditDesignLayoutCountSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...layout, - }, - }) - - const handleSubmit = (event: FocusEvent) => { - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - - - handleSubmit(e)} - autoComplete="off" - disabled={isPending} - {...conform.input(fields.count, { - ariaAttributes: true, - })} - /> - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-rows.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-rows.tsx deleted file mode 100644 index f42b6fa0..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-rows.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { Input } from '#app/components/ui/input' -import { type ILayout } from '#app/models/design-type/layout/layout.server' -import { EditDesignLayoutRowsSchema } from '#app/schema/layout' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_LAYOUT_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignLayoutEditRows = ({ - layout, -}: { - layout: ILayout -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-layout-edit-${layout.id}-rows`, - constraint: getFieldsetConstraint(EditDesignLayoutRowsSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...layout, - }, - }) - - const handleSubmit = (event: FocusEvent) => { - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - - - handleSubmit(e)} - autoComplete="off" - disabled={isPending} - {...conform.input(fields.rows, { - ariaAttributes: true, - })} - /> - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-style.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-style.tsx deleted file mode 100644 index 0030960b..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-layout-edit-style.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '#app/components/ui/select' -import { type ILayout } from '#app/models/design-type/layout/layout.server' -import { EditDesignLayoutStyleSchema } from '#app/schema/layout' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_LAYOUT_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignLayoutEditStyle = ({ - layout, -}: { - layout: ILayout -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-layout-edit-${layout.id}-style`, - constraint: getFieldsetConstraint(EditDesignLayoutStyleSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...layout, - }, - }) - - const handleChange = (value: string) => { - fetcher.submit(form.ref.current, { - method: 'POST', - }) - } - - return ( - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line-edit-basis.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line-edit-basis.tsx deleted file mode 100644 index b764646d..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line-edit-basis.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '#app/components/ui/select' -import { type ILine } from '#app/models/design-type/line/line.server' -import { EditDesignLineBasisSchema, LineBasisTypeEnum } from '#app/schema/line' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_LINE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignLineEditBasis = ({ line }: { line: ILine }) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-line-edit-${line.id}-basis`, - constraint: getFieldsetConstraint(EditDesignLineBasisSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...line, - }, - }) - - const handleChange = (value: string) => { - fetcher.submit(form.ref.current, { - method: 'POST', - }) - } - - return ( - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line-edit-format.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line-edit-format.tsx deleted file mode 100644 index 64ec2cfb..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line-edit-format.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '#app/components/ui/select' -import { type ILine } from '#app/models/design-type/line/line.server' -import { - EditDesignLineFormatSchema, - LineFormatTypeEnum, -} from '#app/schema/line' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_LINE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignLineEditFormat = ({ line }: { line: ILine }) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-line-edit-${line.id}-format`, - constraint: getFieldsetConstraint(EditDesignLineFormatSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...line, - }, - }) - - const handleChange = (value: string) => { - fetcher.submit(form.ref.current, { - method: 'POST', - }) - } - - return ( - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line=edit-width.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line=edit-width.tsx deleted file mode 100644 index 46bc8626..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-line=edit-width.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { Input } from '#app/components/ui/input' -import { type ILine } from '#app/models/design-type/line/line.server' -import { EditDesignLineWidthSchema } from '#app/schema/line' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_LINE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignLineEditWidth = ({ line }: { line: ILine }) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-artboard-design-line-edit-${line.id}-width`, - constraint: getFieldsetConstraint(EditDesignLineWidthSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...line, - }, - }) - - const handleSubmit = (event: FocusEvent) => { - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - - - handleSubmit(e)} - autoComplete="off" - disabled={isPending} - {...conform.input(fields.width, { - ariaAttributes: true, - })} - /> - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-new.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-new.tsx deleted file mode 100644 index b5b97901..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-new.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { PanelIconButton } from '#app/components/ui/panel-icon-button' -import { type IArtboard } from '#app/models/artboard/artboard.server' -import { type ILayer } from '#app/models/layer/layer.server' -import { - type NewDesignSchemaType, - type designTypeEnum, -} from '#app/schema/design' -import { useIsPending } from '#app/utils/misc' -import { type IntentDesignCreate } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignNew = ({ - type, - artboardId, - layerId, - visibleDesignsCount, - intent, - schema, -}: { - type: designTypeEnum - artboardId?: IArtboard['id'] - layerId?: ILayer['id'] - visibleDesignsCount: number - intent: IntentDesignCreate - schema: NewDesignSchemaType -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const parent = artboardId ? 'artboard' : 'layer' - const [form] = useForm({ - id: `panel-form-${parent}-design-new-${type}`, - constraint: getFieldsetConstraint(schema), - lastSubmission: actionData?.submission, - }) - - return ( - - - - {artboardId && ( - - )} - {layerId && } - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-palette-edit-value.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-palette-edit-value.tsx deleted file mode 100644 index ac1ffda6..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-palette-edit-value.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type ChangeEvent, type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { quickToast } from '#app/components/toaster' -import { Input } from '#app/components/ui/input' -import { type IPalette } from '#app/models/design-type/palette/palette.server' -import { EditDesignPaletteValueSchema } from '#app/schema/palette' -import { stringToHexcode, validateStringIsHexcode } from '#app/utils/colors' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_PALETTE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignPaletteEditValue = ({ - palette, -}: { - palette: IPalette -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-artboard-design-edit-palette-${palette.id}`, - constraint: getFieldsetConstraint(EditDesignPaletteValueSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...palette, - }, - }) - - const handleChange = (event: ChangeEvent) => { - const parsedValue = stringToHexcode.parse(event.target.value) - event.target.value = parsedValue - } - - const handleSubmit = (event: FocusEvent) => { - const isHexcode = validateStringIsHexcode(event.target.value) - if (!isHexcode) { - event.target.value = fields.value.defaultValue || '' - quickToast({ - type: 'error', - title: 'Invalid color', - description: 'Please enter a valid color hexcode', - }) - return - } - - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - - - handleChange(e)} - onBlur={e => handleSubmit(e)} - disabled={isPending} - {...conform.input(fields.value, { - ariaAttributes: true, - })} - /> - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-reorder.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-reorder.tsx deleted file mode 100644 index 11c9f885..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-reorder.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { PanelIconButton } from '#app/components/ui/panel-icon-button' -import { type IDesignIdOrNull, type IDesign } from '#app/models/design/design.server' -import { type ILayer } from '#app/models/layer/layer.server' -import { type ReorderDesignSchemaType } from '#app/schema/design' -import { useIsPending } from '#app/utils/misc' -import { type IntentDesignReorder } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignReorder = ({ - id, - artboardId, - layerId, - panelIndex, - panelCount, - direction, - updateSelectedDesignId, - intent, - schema, -}: { - id: IDesign['id'] - artboardId?: ILayer['id'] - layerId?: ILayer['id'] - panelIndex: number - panelCount: number - direction: 'up' | 'down' - updateSelectedDesignId: IDesignIdOrNull - intent: IntentDesignReorder - schema: ReorderDesignSchemaType -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const atTop = panelIndex === 0 && direction === 'up' - const atBottom = panelIndex === panelCount - 1 && direction === 'down' - - const parent = artboardId ? 'artboard' : 'layer' - const [form] = useForm({ - id: `panel-form-${parent}-design-reorder-${id}-${direction}`, - constraint: getFieldsetConstraint(schema), - lastSubmission: actionData?.submission, - }) - - return ( - - - - - {artboardId && ( - - )} - {layerId && } - - {updateSelectedDesignId && ( - - )} - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-rotate-edit-basis.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-rotate-edit-basis.tsx deleted file mode 100644 index 27b047d2..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-rotate-edit-basis.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '#app/components/ui/select' -import { type IRotate } from '#app/models/design-type/rotate/rotate.server' -import { - EditDesignRotateBasisSchema, - RotateBasisTypeEnum, -} from '#app/schema/rotate' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_ROTATE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignRotateEditBasis = ({ - rotate, -}: { - rotate: IRotate -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-rotate-edit-${rotate.id}-basis`, - constraint: getFieldsetConstraint(EditDesignRotateBasisSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...rotate, - }, - }) - - const handleChange = (value: string) => { - fetcher.submit(form.ref.current, { - method: 'POST', - }) - } - - return ( - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-rotate-edit-value.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-rotate-edit-value.tsx deleted file mode 100644 index 8960d4da..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-rotate-edit-value.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { Input } from '#app/components/ui/input' -import { type IRotate } from '#app/models/design-type/rotate/rotate.server' -import { EditDesignRotateValueSchema } from '#app/schema/rotate' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_ROTATE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignRotateEditValue = ({ - rotate, -}: { - rotate: IRotate -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-rotate-edit-${rotate.id}-value`, - constraint: getFieldsetConstraint(EditDesignRotateValueSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...rotate, - }, - }) - - const handleSubmit = (event: FocusEvent) => { - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - - - handleSubmit(e)} - autoComplete="off" - disabled={isPending} - {...conform.input(fields.value, { - ariaAttributes: true, - })} - /> - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-basis.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-basis.tsx deleted file mode 100644 index 574f44eb..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-basis.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '#app/components/ui/select' -import { type ISize } from '#app/models/design-type/size/size.server' -import { EditDesignSizeBasisSchema, SizeBasisTypeEnum } from '#app/schema/size' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_SIZE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignSizeEditBasis = ({ size }: { size: ISize }) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-size-edit-${size.id}-basis`, - constraint: getFieldsetConstraint(EditDesignSizeBasisSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...size, - }, - }) - - const handleChange = (value: string) => { - fetcher.submit(form.ref.current, { - method: 'POST', - }) - } - - return ( - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-format.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-format.tsx deleted file mode 100644 index acbea81a..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-format.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '#app/components/ui/select' -import { type ISize } from '#app/models/design-type/size/size.server' -import { - EditDesignSizeFormatSchema, - SizeFormatTypeEnum, -} from '#app/schema/size' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_SIZE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignSizeEditFormat = ({ size }: { size: ISize }) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-size-edit-${size.id}-format`, - constraint: getFieldsetConstraint(EditDesignSizeFormatSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...size, - }, - }) - - const handleChange = (value: string) => { - fetcher.submit(form.ref.current, { - method: 'POST', - }) - } - - return ( - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-value.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-value.tsx deleted file mode 100644 index 34566e91..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-size-edit-value.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { Input } from '#app/components/ui/input' -import { type ISize } from '#app/models/design-type/size/size.server' -import { EditDesignSizeValueSchema } from '#app/schema/size' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_SIZE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignSizeEditValue = ({ size }: { size: ISize }) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-size-edit-${size.id}-value`, - constraint: getFieldsetConstraint(EditDesignSizeValueSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...size, - }, - }) - - const handleSubmit = (event: FocusEvent) => { - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - - - handleSubmit(e)} - disabled={isPending} - {...conform.input(fields.value, { - ariaAttributes: true, - })} - /> - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-basis.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-basis.tsx deleted file mode 100644 index b4082b78..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-basis.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '#app/components/ui/select' -import { type IStroke } from '#app/models/design-type/stroke/stroke.server' -import { - EditDesignStrokeBasisSchema, - StrokeBasisTypeEnum, -} from '#app/schema/stroke' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_STROKE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignStrokeEditBasis = ({ - stroke, -}: { - stroke: IStroke -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-stroke-edit-${stroke.id}-basis`, - constraint: getFieldsetConstraint(EditDesignStrokeBasisSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...stroke, - }, - }) - - const handleChange = (value: string) => { - fetcher.submit(form.ref.current, { - method: 'POST', - }) - } - - return ( - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-style.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-style.tsx deleted file mode 100644 index b7052681..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-style.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '#app/components/ui/select' -import { type IStroke } from '#app/models/design-type/stroke/stroke.server' -import { - EditDesignStrokeStyleSchema, - StrokeStyleTypeEnum, -} from '#app/schema/stroke' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_STROKE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignStrokeEditStyle = ({ - stroke, -}: { - stroke: IStroke -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-stroke-edit-${stroke.id}-style`, - constraint: getFieldsetConstraint(EditDesignStrokeStyleSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...stroke, - }, - }) - - const handleChange = (value: string) => { - fetcher.submit(form.ref.current, { - method: 'POST', - }) - } - - return ( - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-value.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-value.tsx deleted file mode 100644 index ea4ce205..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-stroke-edit-value.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { type ChangeEvent, type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { quickToast } from '#app/components/toaster' -import { Input } from '#app/components/ui/input' -import { type IStroke } from '#app/models/design-type/stroke/stroke.server' -import { EditDesignStrokeValueSchema } from '#app/schema/stroke' -import { stringToHexcode, validateStringIsHexcode } from '#app/utils/colors' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_STROKE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignStrokeEditValue = ({ - stroke, -}: { - stroke: IStroke -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-artboard-design-edit-stroke-${stroke.id}`, - constraint: getFieldsetConstraint(EditDesignStrokeValueSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...stroke, - }, - }) - - const handleChange = (event: ChangeEvent) => { - const parsedValue = stringToHexcode.parse(event.target.value) - event.target.value = parsedValue - } - - const handleSubmit = (event: FocusEvent) => { - const isHexcode = validateStringIsHexcode(event.target.value) - if (!isHexcode) { - event.target.value = fields.value.defaultValue || '' - quickToast({ - type: 'error', - title: 'Invalid color', - description: 'Please enter a valid color hexcode', - }) - return - } - - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - - - handleChange(e)} - onBlur={e => handleSubmit(e)} - disabled={isPending} - {...conform.input(fields.value, { - ariaAttributes: true, - })} - /> - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-template-edit-style.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-template-edit-style.tsx deleted file mode 100644 index f588532b..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-template-edit-style.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '#app/components/ui/select' -import { type ITemplate } from '#app/models/design-type/template/template.server' -import { EditDesignTemplateStyleSchema } from '#app/schema/template' -import { useIsPending } from '#app/utils/misc' -import { DESIGN_TEMPLATE_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignTemplateEditStyle = ({ - template, -}: { - template: ITemplate -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-design-template-edit-${template.id}-style`, - constraint: getFieldsetConstraint(EditDesignTemplateStyleSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...template, - }, - }) - - const handleChange = (value: string) => { - fetcher.submit(form.ref.current, { - method: 'POST', - }) - } - - return ( - - - - - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-toggle-visible.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-toggle-visible.tsx deleted file mode 100644 index 32460da0..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/design/panel-form-design-toggle-visible.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { useActionData, useFetcher } from '@remix-run/react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { PanelIconButton } from '#app/components/ui/panel-icon-button' -import { type IArtboard } from '#app/models/artboard/artboard.server' -import { type IDesignIdOrNull, type IDesign } from '#app/models/design/design.server' -import { type ILayer } from '#app/models/layer/layer.server' -import { type ToggleVisibleDesignSchemaType } from '#app/schema/design' -import { useIsPending } from '#app/utils/misc' -import { type IntentDesignToggleVisible } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormDesignToggleVisible = ({ - id, - artboardId, - layerId, - visible, - updateSelectedDesignId, - intent, - schema, -}: { - id: IDesign['id'] - artboardId?: IArtboard['id'] - layerId?: ILayer['id'] - visible: boolean - updateSelectedDesignId: IDesignIdOrNull - intent: IntentDesignToggleVisible - schema: ToggleVisibleDesignSchemaType -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const parent = artboardId ? 'artboard' : 'layer' - const [form] = useForm({ - id: `panel-form-${parent}-design-toggle-visible-${id}`, - constraint: getFieldsetConstraint(schema), - lastSubmission: actionData?.submission, - }) - - return ( - - - - - {artboardId && ( - - )} - {layerId && } - {updateSelectedDesignId && ( - - )} - - - - - ) -} diff --git a/app/routes/sketch+/artboards+/$slug_+/components/forms/layer/panel-form-layer-edit-description.tsx b/app/routes/sketch+/artboards+/$slug_+/components/forms/layer/panel-form-layer-edit-description.tsx deleted file mode 100644 index 8d1cf8d3..00000000 --- a/app/routes/sketch+/artboards+/$slug_+/components/forms/layer/panel-form-layer-edit-description.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { conform, useForm } from '@conform-to/react' -import { getFieldsetConstraint } from '@conform-to/zod' -import { type Artboard } from '@prisma/client' -import { useActionData, useFetcher } from '@remix-run/react' -import { type FocusEvent } from 'react' -import { AuthenticityTokenInput } from 'remix-utils/csrf/react' -import { Textarea } from '#app/components/ui/textarea' -import { type ILayer } from '#app/models/layer/layer.server' -import { EditLayerDescriptionSchema } from '#app/schema/layer' -import { useIsPending } from '#app/utils/misc' -import { LAYER_INTENT } from '../../../intent' -import { type action } from '../../../route' - -export const PanelFormLayerEditDescription = ({ - artboardId, - layer, -}: { - artboardId: Artboard['id'] - layer: ILayer -}) => { - const fetcher = useFetcher() - const actionData = useActionData() - const isPending = useIsPending() - - const [form, fields] = useForm({ - id: `panel-form-layer-edit-${layer.id}-description`, - constraint: getFieldsetConstraint(EditLayerDescriptionSchema), - lastSubmission: actionData?.submission, - defaultValue: { - ...layer, - }, - }) - - const handleSubmit = (event: FocusEvent) => { - fetcher.submit(event.currentTarget.form, { - method: 'POST', - }) - } - - return ( - - - - - - -