--wip-- [skip ci]

Shopify · Dec 11, 2024 · 0d8293a · 0d8293a
1 parent 7bfa291
commit 0d8293a
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 39 deletions.
diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -1904,12 +1904,12 @@ Creates and adds a new block file to your local theme directory
 
 ```
 USAGE
-  $ shopify theme generate block -n <value> -t text|image|video|product|collection [--no-color] [--path <value>]
+  $ shopify theme generate block [-n <value>] [--no-color] [--path <value>] [-t text|image|video|product|collection]
     [--verbose]
 
 FLAGS
-  -n, --name=<value>   (required) Name of the block
-  -t, --type=<option>  (required) Type of block to generate
+  -n, --name=<value>   Name of the block
+  -t, --type=<option>  Type of block to generate
                        <options: text|image|video|product|collection>
       --no-color       Disable color output.
       --path=<value>   The path to your theme directory.
@@ -1932,12 +1932,12 @@ Creates and adds a new section file to your local theme directory
 
 ```
 USAGE
-  $ shopify theme generate section -n <value> -t featured-collection|image-with-text|rich-text|custom [--no-color] [--path
-    <value>] [--verbose]
+  $ shopify theme generate section [-n <value>] [--no-color] [--path <value>] [-t
+    featured-collection|image-with-text|rich-text|custom] [--verbose]
 
 FLAGS
-  -n, --name=<value>   (required) Name of the section
-  -t, --type=<option>  (required) Type of section to generate
+  -n, --name=<value>   Name of the section
+  -t, --type=<option>  Type of section to generate
                        <options: featured-collection|image-with-text|rich-text|custom>
       --no-color       Disable color output.
       --path=<value>   The path to your theme directory.
@@ -1961,12 +1961,12 @@ Creates and adds a new template file to your local theme directory
 
 ```
 USAGE
-  $ shopify theme generate template -n <value> -t product|collection|page|blog|article|custom [--no-color] [--path <value>]
-    [--verbose]
+  $ shopify theme generate template [-n <value>] [--no-color] [--path <value>] [-t
+    product|collection|page|blog|article|custom] [--verbose]
 
 FLAGS
-  -n, --name=<value>   (required) Name of the template
-  -t, --type=<option>  (required) Type of template to generate
+  -n, --name=<value>   Name of the template
+  -t, --type=<option>  Type of template to generate
                        <options: product|collection|page|blog|article|custom>
       --no-color       Disable color output.
       --path=<value>   The path to your theme directory.

diff --git a/packages/cli/oclif.manifest.json b/packages/cli/oclif.manifest.json
@@ -5333,7 +5333,6 @@
           "hasDynamicHelp": false,
           "multiple": false,
           "name": "name",
-          "required": true,
           "type": "option"
         },
         "no-color": {
@@ -5367,7 +5366,6 @@
             "product",
             "collection"
           ],
-          "required": true,
           "type": "option"
         },
         "verbose": {
@@ -5405,7 +5403,6 @@
           "hasDynamicHelp": false,
           "multiple": false,
           "name": "name",
-          "required": true,
           "type": "option"
         },
         "no-color": {
@@ -5438,7 +5435,6 @@
             "rich-text",
             "custom"
           ],
-          "required": true,
           "type": "option"
         },
         "verbose": {
@@ -5476,7 +5472,6 @@
           "hasDynamicHelp": false,
           "multiple": false,
           "name": "name",
-          "required": true,
           "type": "option"
         },
         "no-color": {
@@ -5511,7 +5506,6 @@
             "article",
             "custom"
           ],
-          "required": true,
           "type": "option"
         },
         "verbose": {

diff --git a/packages/theme/src/cli/commands/theme/generate/block.ts b/packages/theme/src/cli/commands/theme/generate/block.ts
@@ -4,6 +4,8 @@ import {Flags} from '@oclif/core'
 import {globalFlags} from '@shopify/cli-kit/node/cli'
 import {renderSelectPrompt, renderSuccess, renderTextPrompt} from '@shopify/cli-kit/node/ui'
 
+const BLOCK_TYPES = ['text', 'image', 'video', 'product', 'collection']
+
 export default class GenerateBlock extends ThemeCommand {
   static summary = 'Creates and adds a new block file to your local theme directory'
 
@@ -26,7 +28,7 @@ export default class GenerateBlock extends ThemeCommand {
     type: Flags.string({
       char: 't',
       description: 'Type of block to generate',
-      options: ['text', 'image', 'video', 'product', 'collection'],
+      options: [...BLOCK_TYPES],
       env: 'SHOPIFY_FLAG_THEME_GENERATE_BLOCK_TYPE',
     }),
   }
@@ -40,10 +42,7 @@ export default class GenerateBlock extends ThemeCommand {
         message: 'Name of the block',
       }))
 
-    const blockTypes = ['text', 'image', 'video', 'product', 'collection']
-    const choices = blockTypes.map((type) => {
-      return {label: type, value: type}
-    })
+    const choices = BLOCK_TYPES.map((type) => ({label: type, value: type}))
     const type =
       flags.type ??
       (await renderSelectPrompt({

diff --git a/packages/theme/src/cli/commands/theme/generate/section.ts b/packages/theme/src/cli/commands/theme/generate/section.ts
@@ -4,6 +4,8 @@ import {Flags} from '@oclif/core'
 import {globalFlags} from '@shopify/cli-kit/node/cli'
 import {renderSelectPrompt, renderSuccess, renderTextPrompt} from '@shopify/cli-kit/node/ui'
 
+const SECTION_TYPES = ['featured-collection', 'image-with-text', 'rich-text', 'custom']
+
 export default class GenerateSection extends ThemeCommand {
   static summary = 'Creates and adds a new section file to your local theme directory'
 
@@ -26,7 +28,7 @@ export default class GenerateSection extends ThemeCommand {
     type: Flags.string({
       char: 't',
       description: 'Type of section to generate',
-      options: ['featured-collection', 'image-with-text', 'rich-text', 'custom'],
+      options: [...SECTION_TYPES],
       env: 'SHOPIFY_FLAG_THEME_GENERATE_SECTION_TYPE',
     }),
   }
@@ -40,10 +42,7 @@ export default class GenerateSection extends ThemeCommand {
         message: 'Name of the section',
       }))
 
-    const sectionTypes = ['featured-collection', 'image-with-text', 'rich-text', 'custom']
-    const choices = sectionTypes.map((type) => {
-      return {label: type, value: type}
-    })
+    const choices = SECTION_TYPES.map((type) => ({label: type, value: type}))
     const type =
       flags.type ??
       (await renderSelectPrompt({

diff --git a/packages/theme/src/cli/commands/theme/generate/template.ts b/packages/theme/src/cli/commands/theme/generate/template.ts
@@ -1,8 +1,9 @@
+import {TEMPLATE_TYPES, promptForType} from '../../../utilities/generator.js'
 import {themeFlags} from '../../../flags.js'
 import ThemeCommand from '../../../utilities/theme-command.js'
 import {Flags} from '@oclif/core'
 import {globalFlags} from '@shopify/cli-kit/node/cli'
-import {renderSelectPrompt, renderSuccess, renderTextPrompt} from '@shopify/cli-kit/node/ui'
+import {renderSuccess, renderTextPrompt} from '@shopify/cli-kit/node/ui'
 
 export default class GenerateTemplate extends ThemeCommand {
   static summary = 'Creates and adds a new template file to your local theme directory'
@@ -26,7 +27,7 @@ export default class GenerateTemplate extends ThemeCommand {
     type: Flags.string({
       char: 't',
       description: 'Type of template to generate',
-      options: ['product', 'collection', 'page', 'blog', 'article', 'custom'],
+      options: [...TEMPLATE_TYPES],
       env: 'SHOPIFY_FLAG_THEME_GENERATE_TEMPLATE_TYPE',
     }),
   }
@@ -40,16 +41,7 @@ export default class GenerateTemplate extends ThemeCommand {
         message: 'Name of the template',
       }))
 
-    const templateTypes = ['product', 'collection', 'page', 'blog', 'article', 'custom']
-    const choices = templateTypes.map((type) => {
-      return {label: type, value: type}
-    })
-    const type =
-      flags.type ??
-      (await renderSelectPrompt({
-        message: 'Type of template',
-        choices,
-      }))
+    const type = flags.type ?? (await promptForType('Type of template', TEMPLATE_TYPES))
 
     renderSuccess({
       body: [`Placeholder: Generating template with name: ${name}, type: ${type}`],

diff --git a/packages/theme/src/cli/utilities/generator.ts b/packages/theme/src/cli/utilities/generator.ts
@@ -0,0 +1,27 @@
+import {renderSelectPrompt} from '@shopify/cli-kit/node/ui'
+
+export const BLOCK_TYPES = ['text', 'image', 'video', 'product', 'collection'] as const
+export const SECTION_TYPES = ['featured-collection', 'image-with-text', 'rich-text', 'custom'] as const
+export const TEMPLATE_TYPES = ['product', 'collection', 'page', 'blog', 'article', 'custom'] as const
+
+export type BlockType = (typeof BLOCK_TYPES)[number]
+export type SectionType = (typeof SECTION_TYPES)[number]
+export type TemplateType = (typeof TEMPLATE_TYPES)[number]
+
+export interface Choice {
+  label: string
+  value: string
+}
+
+export function generateChoices<T extends string>(types: ReadonlyArray<T>): Choice[] {
+  return types.map((type) => ({label: type, value: type}))
+}
+
+export async function promptForType<T extends string>(message: string, types: ReadonlyArray<T>): Promise<T> {
+  const choices = generateChoices(types)
+  const result = await renderSelectPrompt({
+    message,
+    choices,
+  })
+  return result as T
+}