artboard to artwork

README.md

@@ -20,11 +20,11 @@ To get started with this project, follow these steps:
 Please keep in mind this is a personal project, not yet intended for a wide audience
 
 - login as `adminUser` set from seeds in `prisma/seed.ts` (if you want to change this then run `npm run setup` again)
-- from user dropdown in upper right navigate to sketch and select `My First Artboard` (created from seed)
+- from user dropdown in upper right navigate to sketch and select `My First Artwork` (created from seed)
 - add at least one design attribute for each category
-- add a layer, which will adopt the artboard design attributes
+- add a layer, which will adopt the artwork design attributes
 - click on the layer name to select it and adjust the designs from there
-- move up/down, make visible/invisible, add/remove designs and layers to create different outputs on the artboard
+- move up/down, make visible/invisible, add/remove designs and layers to create different outputs on the artwork
 
 ## TECH STACK
 
@@ -42,7 +42,7 @@ Please keep in mind this is a personal project, not yet intended for a wide audi
 
 ## ROADMAP
 
-- version history to save instances of artboards if I like the designs
+- version history to save instances of artworks if I like the designs
 - connect to shopify products
 - migrate to [vite](https://remix.run/blog/remix-heart-vite)
 - import/export image assets to modify pixels into art

app/components/templates/card/dashboard-entity-cards.tsx

@@ -6,12 +6,12 @@ import {
 	DashboardCardNone,
 	DashboardCardWrapper,
 } from '#app/components/layout'
-import { type IArtboard } from '#app/models/artboard/artboard.server'
-import { type IProjectWithArtboards } from '#app/models/project/project.server'
+import { type IArtwork } from '#app/models/artwork/artwork.server'
+import { type IProjectWithArtworks } from '#app/models/project/project.server'
 
-type DashboardCardEntitiesType = IProjectWithArtboards[] | IArtboard[]
-type DashboardCardEntityType = IProjectWithArtboards | IArtboard
-type DashboardCardType = 'Project' | 'Artboard'
+type DashboardCardEntitiesType = IProjectWithArtworks[] | IArtwork[]
+type DashboardCardEntityType = IProjectWithArtworks | IArtwork
+type DashboardCardType = 'Project' | 'Artwork'
 
 export const DashboardEntityCards = ({
 	entities,
@@ -150,14 +150,14 @@ const ExistingEntityCardContent = ({
 }) => {
 	switch (type) {
 		case 'Project':
-			const project = item as IProjectWithArtboards
-			const artboardNames = project.artboards
-				.map(artboard => artboard.name)
+			const project = item as IProjectWithArtworks
+			const artworkNames = project.artworks
+				.map(artwork => artwork.name)
 				.join(', ')
-			return artboardNames.length === 0 ? 'No artboards' : artboardNames
-		case 'Artboard':
-			const artboard = item as IArtboard
-			return `Visible: ${artboard.isVisible ? 'Yes' : 'No'}`
+			return artworkNames.length === 0 ? 'No artworks' : artworkNames
+		case 'Artwork':
+			const artwork = item as IArtwork
+			return `Visible: ${artwork.isVisible ? 'Yes' : 'No'}`
 		default:
 			return 'No details available'
 	}

app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback } from 'react'
-import { ArtboardVersionDesignDelete } from '#app/routes/resources+/api.v1+/artboard-version.design.delete'
+import { ArtworkVersionDesignDelete } from '#app/routes/resources+/api.v1+/artwork-version.design.delete'
 import { LayerDesignDelete } from '#app/routes/resources+/api.v1+/layer.design.delete'
 import {
 	type entityParentTypeEnum,
@@ -18,26 +18,26 @@ interface DeleteChildEntityFormProps {
 	parent: IEntityParentType
 }
 
-const ArtboardVersionDeleteChildEntityForm = memo(
+const ArtworkVersionDeleteChildEntityForm = memo(
 	({ entityType, entity, parent }: DeleteChildEntityFormProps) => {
 		switch (entityType) {
 			case EntityType.DESIGN:
 				return (
-					<ArtboardVersionDesignDelete
+					<ArtworkVersionDesignDelete
 						designId={entity.id}
 						versionId={parent.id}
 					/>
 				)
 			case EntityType.LAYER:
 				return 'av l'
 			default:
-				console.log('unknown artboard version entity type', entityType)
+				console.log('unknown artwork version entity type', entityType)
 				return null
 		}
 	},
 )
-ArtboardVersionDeleteChildEntityForm.displayName =
-	'ArtboardVersionDeleteChildEntityForm'
+ArtworkVersionDeleteChildEntityForm.displayName =
+	'ArtworkVersionDeleteChildEntityForm'
 
 const LayerDeleteChildEntityForm = memo(
 	({ entityType, entity, parent }: DeleteChildEntityFormProps) => {
@@ -55,9 +55,9 @@ LayerDeleteChildEntityForm.displayName = 'LayerDeleteChildEntityForm'
 const DeleteEntityForm = memo(
 	({ parentType, entityType, entity, parent }: DeleteChildEntityFormProps) => {
 		switch (parentType) {
-			case EntityParentType.ARTBOARD_VERSION:
+			case EntityParentType.ARTWORK_VERSION:
 				return (
-					<ArtboardVersionDeleteChildEntityForm
+					<ArtworkVersionDeleteChildEntityForm
 						entityType={entityType}
 						entity={entity}
 						parent={parent}

app/components/templates/panel/dashboard-entity-panel.actions.toggle-selected.tsx

@@ -1,7 +1,7 @@
 import { memo, useCallback } from 'react'
-import { type IArtboardVersion } from '#app/models/artboard-version/artboard-version.server'
+import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type ILayer } from '#app/models/layer/layer.server'
-import { ArtboardVersionLayerToggleSelected } from '#app/routes/resources+/api.v1+/artboard-version.layer.update.selected'
+import { ArtworkVersionLayerToggleSelected } from '#app/routes/resources+/api.v1+/artwork-version.layer.update.selected'
 import {
 	type entityParentTypeEnum,
 	type entityTypeEnum,
@@ -19,24 +19,24 @@ interface ToggleSelectedChildEntityFormProps {
 	parent: IEntityParentType
 }
 
-const ArtboardVersionToggleSelectedChildEntityForm = memo(
+const ArtworkVersionToggleSelectedChildEntityForm = memo(
 	({ entityType, entity, parent }: ToggleSelectedChildEntityFormProps) => {
 		switch (entityType) {
 			case EntityType.LAYER:
 				return (
-					<ArtboardVersionLayerToggleSelected
+					<ArtworkVersionLayerToggleSelected
 						layer={entity as ILayer}
-						version={parent as IArtboardVersion}
+						version={parent as IArtworkVersion}
 					/>
 				)
 			default:
-				console.log('unknown artboard version entity type', entityType)
+				console.log('unknown artwork version entity type', entityType)
 				return null
 		}
 	},
 )
-ArtboardVersionToggleSelectedChildEntityForm.displayName =
-	'ArtboardVersionToggleSelectedChildEntityForm'
+ArtworkVersionToggleSelectedChildEntityForm.displayName =
+	'ArtworkVersionToggleSelectedChildEntityForm'
 
 const ToggleSelectedEntityForm = memo(
 	({
@@ -46,9 +46,9 @@ const ToggleSelectedEntityForm = memo(
 		parent,
 	}: ToggleSelectedChildEntityFormProps) => {
 		switch (parentType) {
-			case EntityParentType.ARTBOARD_VERSION:
+			case EntityParentType.ARTWORK_VERSION:
 				return (
-					<ArtboardVersionToggleSelectedChildEntityForm
+					<ArtworkVersionToggleSelectedChildEntityForm
 						entityType={entityType}
 						entity={entity}
 						parent={parent}

app/components/templates/panel/dashboard-entity-panel.actions.toggle-visible.tsx

@@ -1,9 +1,9 @@
 import { memo, useCallback } from 'react'
-import { type IArtboardVersion } from '#app/models/artboard-version/artboard-version.server'
+import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type IDesign } from '#app/models/design/design.server'
 import { type ILayer } from '#app/models/layer/layer.server'
-import { ArtboardVersionDesignToggleVisible } from '#app/routes/resources+/api.v1+/artboard-version.design.update.visible'
-import { ArtboardVersionLayerToggleVisible } from '#app/routes/resources+/api.v1+/artboard-version.layer.update.visible'
+import { ArtworkVersionDesignToggleVisible } from '#app/routes/resources+/api.v1+/artwork-version.design.update.visible'
+import { ArtworkVersionLayerToggleVisible } from '#app/routes/resources+/api.v1+/artwork-version.layer.update.visible'
 import { LayerDesignToggleVisible } from '#app/routes/resources+/api.v1+/layer.design.update.visible'
 import {
 	type entityParentTypeEnum,
@@ -22,31 +22,31 @@ interface ToggleVisibleChildEntityFormProps {
 	parent: IEntityParentType
 }
 
-const ArtboardVersionToggleVisibleChildEntityForm = memo(
+const ArtworkVersionToggleVisibleChildEntityForm = memo(
 	({ entityType, entity, parent }: ToggleVisibleChildEntityFormProps) => {
 		switch (entityType) {
 			case EntityType.DESIGN:
 				return (
-					<ArtboardVersionDesignToggleVisible
+					<ArtworkVersionDesignToggleVisible
 						design={entity as IDesign}
-						version={parent as IArtboardVersion}
+						version={parent as IArtworkVersion}
 					/>
 				)
 			case EntityType.LAYER:
 				return (
-					<ArtboardVersionLayerToggleVisible
+					<ArtworkVersionLayerToggleVisible
 						layer={entity as ILayer}
-						version={parent as IArtboardVersion}
+						version={parent as IArtworkVersion}
 					/>
 				)
 			default:
-				console.log('unknown artboard version entity type', entityType)
+				console.log('unknown artwork version entity type', entityType)
 				return null
 		}
 	},
 )
-ArtboardVersionToggleVisibleChildEntityForm.displayName =
-	'ArtboardVersionToggleVisibleChildEntityForm'
+ArtworkVersionToggleVisibleChildEntityForm.displayName =
+	'ArtworkVersionToggleVisibleChildEntityForm'
 
 const LayerToggleVisibleChildEntityForm = memo(
 	({ entityType, entity, parent }: ToggleVisibleChildEntityFormProps) => {
@@ -75,9 +75,9 @@ const ToggleVisibleEntityForm = memo(
 		parent,
 	}: ToggleVisibleChildEntityFormProps) => {
 		switch (parentType) {
-			case EntityParentType.ARTBOARD_VERSION:
+			case EntityParentType.ARTWORK_VERSION:
 				return (
-					<ArtboardVersionToggleVisibleChildEntityForm
+					<ArtworkVersionToggleVisibleChildEntityForm
 						entityType={entityType}
 						entity={entity}
 						parent={parent}

app/components/templates/panel/dashboard-entity-panel.header.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback } from 'react'
-import { ArtboardVersionDesignCreate } from '#app/routes/resources+/api.v1+/artboard-version.design.create'
-import { ArtboardVersionLayerCreate } from '#app/routes/resources+/api.v1+/artboard-version.layer.create'
+import { ArtworkVersionDesignCreate } from '#app/routes/resources+/api.v1+/artwork-version.design.create'
+import { ArtworkVersionLayerCreate } from '#app/routes/resources+/api.v1+/artwork-version.layer.create'
 import { LayerDesignCreate } from '#app/routes/resources+/api.v1+/layer.design.create'
 import { type designTypeEnum } from '#app/schema/design'
 import {
@@ -28,26 +28,26 @@ interface CreateChildEntityFormProps {
 	parent: { id: string }
 }
 
-const ArtboardVersionCreateChildEntityForm = memo(
+const ArtworkVersionCreateChildEntityForm = memo(
 	({ entityType, type, parent }: CreateChildEntityFormProps) => {
 		switch (entityType) {
 			case EntityType.DESIGN:
 				return (
-					<ArtboardVersionDesignCreate
+					<ArtworkVersionDesignCreate
 						type={type as designTypeEnum}
 						versionId={parent.id}
 					/>
 				)
 			case EntityType.LAYER:
-				return <ArtboardVersionLayerCreate versionId={parent.id} />
+				return <ArtworkVersionLayerCreate versionId={parent.id} />
 			default:
-				console.log('unknown artboard version entity type', entityType)
+				console.log('unknown artwork version entity type', entityType)
 				return null
 		}
 	},
 )
-ArtboardVersionCreateChildEntityForm.displayName =
-	'ArtboardVersionCreateChildEntityForm'
+ArtworkVersionCreateChildEntityForm.displayName =
+	'ArtworkVersionCreateChildEntityForm'
 
 const LayerCreateChildEntityForm = memo(
 	({ entityType, type, parent }: CreateChildEntityFormProps) => {
@@ -70,9 +70,9 @@ LayerCreateChildEntityForm.displayName = 'LayerCreateChildEntityForm'
 const CreateEntityForm = memo(
 	({ parentType, entityType, type, parent }: CreateChildEntityFormProps) => {
 		switch (parentType) {
-			case EntityParentType.ARTBOARD_VERSION:
+			case EntityParentType.ARTWORK_VERSION:
 				return (
-					<ArtboardVersionCreateChildEntityForm
+					<ArtworkVersionCreateChildEntityForm
 						entityType={entityType}
 						type={type}
 						parent={parent}

app/components/templates/panel/dashboard-entity-panel.reorder.tsx

@@ -1,9 +1,9 @@
 import { memo, useCallback } from 'react'
-import { type IArtboardVersion } from '#app/models/artboard-version/artboard-version.server'
+import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type IDesign } from '#app/models/design/design.server'
 import { type ILayer } from '#app/models/layer/layer.server'
-import { ArtboardVersionDesignReorder } from '#app/routes/resources+/api.v1+/artboard-version.design.update.order'
-import { ArtboardVersionLayerReorder } from '#app/routes/resources+/api.v1+/artboard-version.layer.update.order'
+import { ArtworkVersionDesignReorder } from '#app/routes/resources+/api.v1+/artwork-version.design.update.order'
+import { ArtworkVersionLayerReorder } from '#app/routes/resources+/api.v1+/artwork-version.layer.update.order'
 import { LayerDesignReorder } from '#app/routes/resources+/api.v1+/layer.design.update.order'
 import {
 	EntityParentType,
@@ -25,7 +25,7 @@ interface ReorderChildEntityFormProps {
 	atBottom: boolean
 }
 
-const ArtboardVersionReorderChildEntityForm = memo(
+const ArtworkVersionReorderChildEntityForm = memo(
 	({
 		entityType,
 		entity,
@@ -37,15 +37,15 @@ const ArtboardVersionReorderChildEntityForm = memo(
 			case EntityType.DESIGN:
 				return (
 					<>
-						<ArtboardVersionDesignReorder
+						<ArtworkVersionDesignReorder
 							design={entity as IDesign}
-							version={parent as IArtboardVersion}
+							version={parent as IArtworkVersion}
 							direction="up"
 							atTopOrBottom={atTop}
 						/>
-						<ArtboardVersionDesignReorder
+						<ArtworkVersionDesignReorder
 							design={entity as IDesign}
-							version={parent as IArtboardVersion}
+							version={parent as IArtworkVersion}
 							direction="down"
 							atTopOrBottom={atBottom}
 						/>
@@ -54,28 +54,28 @@ const ArtboardVersionReorderChildEntityForm = memo(
 			case EntityType.LAYER:
 				return (
 					<>
-						<ArtboardVersionLayerReorder
+						<ArtworkVersionLayerReorder
 							layer={entity as ILayer}
-							version={parent as IArtboardVersion}
+							version={parent as IArtworkVersion}
 							direction="up"
 							atTopOrBottom={atTop}
 						/>
-						<ArtboardVersionLayerReorder
+						<ArtworkVersionLayerReorder
 							layer={entity as ILayer}
-							version={parent as IArtboardVersion}
+							version={parent as IArtworkVersion}
 							direction="down"
 							atTopOrBottom={atBottom}
 						/>
 					</>
 				)
 			default:
-				console.log('unknown artboard version entity type', entityType)
+				console.log('unknown artwork version entity type', entityType)
 				return null
 		}
 	},
 )
-ArtboardVersionReorderChildEntityForm.displayName =
-	'ArtboardVersionReorderChildEntityForm'
+ArtworkVersionReorderChildEntityForm.displayName =
+	'ArtworkVersionReorderChildEntityForm'
 
 const LayerReorderChildEntityForm = memo(
 	({
@@ -121,9 +121,9 @@ const ReorderEntityForm = memo(
 		atBottom,
 	}: ReorderChildEntityFormProps) => {
 		switch (parentType) {
-			case EntityParentType.ARTBOARD_VERSION:
+			case EntityParentType.ARTWORK_VERSION:
 				return (
-					<ArtboardVersionReorderChildEntityForm
+					<ArtworkVersionReorderChildEntityForm
 						entityType={entityType}
 						entity={entity}
 						parent={parent}