feat(components): use example packages for component templates

generators/components/package.json

@@ -11,7 +11,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "yarn library build && cp -R ./src/templates ./dist/templates",
+    "build": "yarn library build && node ./dist/build-templates.js",
     "generate-component": "NODE_OPTIONS=\"$NODE_OPTIONS --import tsx\" plop --plopfile=./src/config.ts",
     "prepack": "yarn run build",
     "postpack": "rm -rf dist"

generators/components/src/build-templates.ts

@@ -0,0 +1,87 @@
+import { access }    from 'node:fs/promises'
+import { cp }        from 'node:fs/promises'
+import { mkdir }     from 'node:fs/promises'
+import { readFile }  from 'node:fs/promises'
+import { readdir }   from 'node:fs/promises'
+import { rm }        from 'node:fs/promises'
+import { writeFile } from 'node:fs/promises'
+import { join }      from 'node:path'
+
+const IMPORT_REPLACEMENTS: Array<readonly [string, string]> = [
+  ['@atls-ui-admin/theme/theme-css', '@ui/theme/theme-css'],
+  ['@atls-ui-admin/theme', '@ui/theme'],
+]
+
+const packageRoot = process.cwd()
+const repositoryRoot = join(packageRoot, '..', '..')
+const examplesPath = join(repositoryRoot, 'ui-admin', 'examples')
+const sourceTemplatesPath = join(packageRoot, 'src', 'templates')
+const distTemplatesPath = join(packageRoot, 'dist', 'templates')
+
+const pathExists = async (path: string): Promise<boolean> => {
+  try {
+    await access(path)
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+const replaceImports = (content: string): string =>
+  IMPORT_REPLACEMENTS.reduce(
+    (result, [source, replacement]) => result.replaceAll(source, replacement),
+    content
+  )
+
+const copyExampleTemplates = async (sourcePath: string, destinationPath: string): Promise<void> => {
+  const entries = await readdir(sourcePath, { withFileTypes: true })
+
+  await mkdir(destinationPath, { recursive: true })
+
+  await Promise.all(
+    entries.map(async (entry) => {
+      const entrySourcePath = join(sourcePath, entry.name)
+      const entryDestinationPath = join(destinationPath, entry.name)
+
+      if (entry.isDirectory()) {
+        await copyExampleTemplates(entrySourcePath, entryDestinationPath)
+
+        return
+      }
+
+      const content = await readFile(entrySourcePath, 'utf8')
+
+      await writeFile(entryDestinationPath, replaceImports(content))
+    })
+  )
+}
+
+const readExampleTemplateTypes = async (): Promise<Array<string>> => {
+  const entries = await readdir(examplesPath, { withFileTypes: true })
+  const directories = entries.filter((entry) => entry.isDirectory())
+  const existingTypes = await Promise.all(
+    directories.map(async (entry) => {
+      const sourcePath = join(examplesPath, entry.name, 'src')
+      const sourceExists = await pathExists(sourcePath)
+
+      return sourceExists ? entry.name : undefined
+    })
+  )
+
+  return existingTypes.filter((type): type is string => Boolean(type))
+}
+
+await rm(distTemplatesPath, { recursive: true, force: true })
+await cp(sourceTemplatesPath, distTemplatesPath, { recursive: true })
+
+const exampleTemplateTypes = await readExampleTemplateTypes()
+
+await Promise.all(
+  exampleTemplateTypes.map(async (type) => {
+    await copyExampleTemplates(
+      join(repositoryRoot, 'ui-admin', 'examples', type, 'src'),
+      join(distTemplatesPath, type)
+    )
+  })
+)

generators/components/src/config.ts

@@ -1,13 +1,103 @@
+/* eslint-disable n/no-sync */
+
 import type { NodePlopAPI } from 'plop'
 
+import { existsSync }       from 'node:fs'
+import { readdirSync }      from 'node:fs'
 import { copyFile }         from 'node:fs/promises'
 import { mkdir }            from 'node:fs/promises'
+import { readFile }         from 'node:fs/promises'
 import { readdir }          from 'node:fs/promises'
+import { writeFile }        from 'node:fs/promises'
+import { dirname }          from 'node:path'
 import { join }             from 'node:path'
+import { resolve }          from 'node:path'
 
 const RAW_TEMPLATE_EXTENSION = '.raw'
 
-const copyRawTemplates = async (
+const IMPORT_REPLACEMENTS: Array<readonly [string, string]> = [
+  ['@atls-ui-admin/theme/theme-css', '@ui/theme/theme-css'],
+  ['@atls-ui-admin/theme', '@ui/theme'],
+]
+
+const findRepositoryRoot = (startPath: string): string | undefined => {
+  const currentPath = resolve(startPath)
+
+  if (existsSync(join(currentPath, 'ui-admin', 'examples'))) {
+    return currentPath
+  }
+
+  const parentPath = dirname(currentPath)
+
+  if (parentPath === currentPath) {
+    return undefined
+  }
+
+  return findRepositoryRoot(parentPath)
+}
+
+const readDirectoryNames = (path: string): Array<string> => {
+  if (!existsSync(path)) {
+    return []
+  }
+
+  const entries = readdirSync(path, { withFileTypes: true })
+
+  return entries.filter((entry) => entry.isDirectory()).map((entry) => entry.name)
+}
+
+const resolveRepositoryExamplePath = (plopfilePath: string, type: string): string | undefined => {
+  const repositoryRoot = findRepositoryRoot(plopfilePath)
+  const exampleSourcePath = repositoryRoot
+    ? join(repositoryRoot, 'ui-admin', 'examples', type, 'src')
+    : ''
+
+  if (exampleSourcePath && existsSync(exampleSourcePath)) {
+    return exampleSourcePath
+  }
+
+  return undefined
+}
+
+const getRepositoryExampleTypes = (plopfilePath: string): Array<string> => {
+  const repositoryRoot = findRepositoryRoot(plopfilePath)
+
+  if (!repositoryRoot) {
+    return []
+  }
+
+  const examplesPath = join(repositoryRoot, 'ui-admin', 'examples')
+  const exampleTypes = readDirectoryNames(examplesPath)
+
+  return exampleTypes.filter((type) => existsSync(join(examplesPath, type, 'src')))
+}
+
+const getTemplateTypes = (plopfilePath: string): Array<string> => {
+  const packagedTypes = readDirectoryNames(join(plopfilePath, 'templates'))
+  const exampleTypes = getRepositoryExampleTypes(plopfilePath)
+
+  return [...new Set([...packagedTypes, ...exampleTypes])].sort()
+}
+
+const getTemplateName = (type: string): string =>
+  type
+    .split('-')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+
+const getTemplateChoices = (plopfilePath: string): Array<{ name: string; value: string }> => {
+  const templateTypes = getTemplateTypes(plopfilePath)
+
+  return templateTypes.map((type) => ({ name: getTemplateName(type), value: type }))
+}
+
+const replaceImports = (content: string): string =>
+  IMPORT_REPLACEMENTS.reduce(
+    (result, [source, replacement]) => result.replaceAll(source, replacement),
+    content
+  )
+
+const copyExampleTemplates = async (
   sourcePath: string,
   destinationPath: string
 ): Promise<number> => {
@@ -16,21 +106,80 @@ const copyRawTemplates = async (
 
   await mkdir(destinationPath, { recursive: true })
 
-  const copiedCounts = await Promise.all(entries.map(async (entry) => {
+  const copiedCounts = await Promise.all(
+    entries.map(async (entry) => {
+      const entrySourcePath = join(sourcePath, entry.name)
+      const entryDestinationPath = join(destinationPath, entry.name)
+
+      if (entry.isDirectory()) {
+        return copyExampleTemplates(entrySourcePath, entryDestinationPath)
+      }
+
+      const content = await readFile(entrySourcePath, 'utf8')
+
+      await writeFile(entryDestinationPath, replaceImports(content))
+
+      return 1
+    })
+  )
+
+  return copiedCounts.reduce((total, count) => total + count, copied)
+}
+
+const hasTemplateExtension = (sourcePath: string): boolean => {
+  const entries = readdirSync(sourcePath, { withFileTypes: true })
+  const checks = entries.map((entry) => {
     const entrySourcePath = join(sourcePath, entry.name)
-    const entryName = entry.name.endsWith(RAW_TEMPLATE_EXTENSION)
-      ? entry.name.slice(0, -RAW_TEMPLATE_EXTENSION.length)
-      : entry.name
-    const entryDestinationPath = join(destinationPath, entryName)
 
     if (entry.isDirectory()) {
-      return copyRawTemplates(entrySourcePath, entryDestinationPath)
+      return hasTemplateExtension(entrySourcePath)
     }
 
-    await copyFile(entrySourcePath, entryDestinationPath)
+    return entry.name.endsWith('.hbs') || entry.name.endsWith('.raw')
+  })
+
+  return checks.some(Boolean)
+}
+
+const resolveCopyTemplatePath = (plopfilePath: string, type: string): string | undefined => {
+  const exampleSourcePath = resolveRepositoryExamplePath(plopfilePath, type)
+
+  if (exampleSourcePath) {
+    return exampleSourcePath
+  }
+
+  const packagedTemplatePath = join(plopfilePath, 'templates', type)
+
+  if (existsSync(packagedTemplatePath) && !hasTemplateExtension(packagedTemplatePath)) {
+    return packagedTemplatePath
+  }
+
+  return undefined
+}
+
+const copyRawTemplates = async (sourcePath: string, destinationPath: string): Promise<number> => {
+  const entries = await readdir(sourcePath, { withFileTypes: true })
+  const copied = 0
+
+  await mkdir(destinationPath, { recursive: true })
+
+  const copiedCounts = await Promise.all(
+    entries.map(async (entry) => {
+      const entrySourcePath = join(sourcePath, entry.name)
+      const entryName = entry.name.endsWith(RAW_TEMPLATE_EXTENSION)
+        ? entry.name.slice(0, -RAW_TEMPLATE_EXTENSION.length)
+        : entry.name
+      const entryDestinationPath = join(destinationPath, entryName)
+
+      if (entry.isDirectory()) {
+        return copyRawTemplates(entrySourcePath, entryDestinationPath)
+      }
+
+      await copyFile(entrySourcePath, entryDestinationPath)
 
-    return 1
-  }))
+      return 1
+    })
+  )
 
   return copiedCounts.reduce((total, count) => total + count, copied)
 }
@@ -43,18 +192,22 @@ const generator = (plop: NodePlopAPI): void => {
         type: 'list',
         name: 'type',
         message: 'Select component type:',
-        choices: [
-          { name: 'Bottom Navigation', value: 'bottom-navigation' },
-          { name: 'Checkbox', value: 'checkbox' },
-          { name: 'Modal', value: 'modal' },
-          { name: 'Popover', value: 'popover' },
-          { name: 'Sidebar', value: 'sidebar' },
-          { name: 'Tooltip', value: 'tooltip' },
-        ],
+        choices: getTemplateChoices(plop.getPlopfilePath()),
       },
     ],
     actions: (data) => {
       const type = typeof data?.type === 'string' ? data.type : ''
+      const copyTemplatePath = resolveCopyTemplatePath(plop.getPlopfilePath(), type)
+
+      if (copyTemplatePath) {
+        return [
+          async (): Promise<string> => {
+            const copied = await copyExampleTemplates(copyTemplatePath, join(process.cwd(), 'src'))
+
+            return `${copied} files copied`
+          },
+        ]
+      }
 
       if (type === 'checkbox') {
         return [