Eleven cli

README.md

@@ -46,9 +46,9 @@ To remove package-lock.json from all levels of the repo simply run this command.
 ps -ef | (grep -q -s -R ^$1 package-lock.json && rm -rf package-lock.json) | { grep -v grep || true; }; lerna exec -- ps -ef | (grep -q -s -R ^$1 package-lock.json && rm -rf package-lock.json) | { grep -v grep || true; }
 ```
 
-To remove all typescript lib files run `npm dev:clean:lib`
+To remove all typescript lib files run `npm run dev:clean:lib`
 
-To remove all node_modules in packages run `npm dev:clean:node_modules`
+To remove all node_modules in packages run `npm run dev:clean:node_modules`
 
 ### Upgrading dependencies
 

packages/generator-particle-base/src/generators/app/generatePromptOptions.ts

@@ -2,54 +2,44 @@ import inquirer from 'inquirer'
 
 import {
   CustomAnswers,
-  ConfigOptions,
-  ConfigurationAnswers,
-  CSSLibraryOptions,
-  ComponentLibraryOptions,
   FrontendFrameworkOptions,
   TestingLibraryOptions,
+  DesignTheme,
 } from '@phase2/particle-types'
 
 const minMaxOptionsValidate = ({ min, max }: { min: number; max?: number }) => (
   answer: Record<string, string>[]
 ) => {
   if (answer.length < min || (!max ? false : answer.length > max)) {
     return `You must choose a minimum of ${min} option(s)${
-      max ? ` and a maximum of ${max} option(s)` : ''
+      max ? ` and a maximum of ${max} option(s).` : ''
     }`
   }
   return true
 }
 
-export const options: Record<string, CustomAnswers> = {
-  [ConfigOptions.MODERN_REACT]: {
-    cssLibrary: CSSLibraryOptions.TAILWIND,
-    componentLibraryTypes: [ComponentLibraryOptions.STORYBOOK],
-    frontendFramework: [FrontendFrameworkOptions.REACT],
-    hasSVG: true,
-    hasTypescript: true,
-    testingLibraries: [TestingLibraryOptions.JEST],
-    typescriptEsm: false,
-  },
-  [ConfigOptions.DRUPAL]: {
-    cssLibrary: CSSLibraryOptions.TAILWIND,
-    componentLibraryTypes: [ComponentLibraryOptions.PATTERN_LAB],
-    frontendFramework: [FrontendFrameworkOptions.TWIG],
-    hasSVG: true,
-    hasTypescript: false, // TODO find out if there is much benefit especially if most things are TWIG centric
-    testingLibraries: [
-      TestingLibraryOptions.CYPRESS,
-      TestingLibraryOptions.PA11Y,
-    ], // How much JS are we actually using for Twig centric functions
-    typescriptEsm: false,
+export const designThemePrompt = () => [
+  {
+    type: 'list',
+    message: 'What frontend framework are you using with Storybook?',
+    name: 'frontendFramework',
+    choices: [
+      {
+        name: 'Webcomponents',
+        checked: true,
+        value: FrontendFrameworkOptions.WEBCOMPONENTS
+      },
+      {
+        name: 'React',
+        value: FrontendFrameworkOptions.REACT
+      }
+    ],
   },
-}
-
-export const configurationPrompt = [
   {
     type: 'input',
-    message: 'choose a project name using kebab case, example: "p2-project"',
-    name: 'projectName',
+    message: 'Choose a design theme name using kebab case. (min 4 chars) Ex: "alpha".',
+    name: 'themeName',
+    default: 'default',
     validate: (name: string) => {
       if (!name || name.length < 4) {
         return 'Please enter a project name of more than 4 characters length'
@@ -58,129 +48,88 @@ export const configurationPrompt = [
         return 'Please enter a two word project name with no spaces'
       }
       return true
-    },
+    }
   },
   {
     type: 'input',
     message:
-      'choose a component library name using kebab case. example "project-default"',
-    name: 'componentLibraryName',
-    default: 'project-default',
+      'Where does your design theme exist relative to the root of the project',
+    default: (answers: DesignTheme) =>
+      `./source/design/${answers.themeName}/`,
+    name: 'themePath'
+  }
+]
+
+const compileThemes = async (prev: DesignTheme[]) => {
+  return [...prev, await inquirer.prompt(designThemePrompt())]
+}
+
+const rerun = [{
+  type: 'confirm',
+  name: 'generateTheme',
+  message: 'Do you want to add another theme?',
+  default: true
+}]
+
+export const generatorLoop = async() => {
+  let loop = true;
+  let themesArray:DesignTheme[] = []
+  do {
+      themesArray = await compileThemes(themesArray)
+      loop = await inquirer.prompt(rerun).then(answers => answers.generateTheme)
+    } while (loop)
+
+  return themesArray;
+}
+
+export const propOptions = [
+  {
+    type: 'input',
+    message: 'Choose a abbreviation for your/client\'s name. (min 3 chars)',
+    name: 'clientAbbreviation',
     validate: (name: string) => {
-      if (!name || name.length < 4) {
-        return 'Please enter a library name of more than 4 characters length'
+      if (!name || name.length < 3) {
+        return 'Please enter a project name of more than 4 characters length.'
+      }
+      if (name.indexOf(' ') > 0) {
+        return 'Please enter a two word project name with no spaces.'
       }
       return true
-    },
+    }
   },
   {
     type: 'input',
-    message:
-      'Where does your component library exist relative to the root of the project',
-    default: (answers: ConfigurationAnswers) =>
-      `./source/${answers.componentLibraryName}/`,
-    name: 'componentLibraryPath',
-  },
-  {
-    type: 'list',
-    message: 'Choose a configuration',
-    name: 'config',
-    choices: [
-      {
-        name:
-          'modern react (storybook, tailwind, react, typescript, jest | cypress, svgs)',
-        value: ConfigOptions.MODERN_REACT,
-      },
-      {
-        name: 'drupal only (Pattern Lab, Tailwind, Svgs)',
-        value: ConfigOptions.DRUPAL,
-      },
-      { name: 'custom', value: 'custom' },
-    ],
-  },
-]
-
-export const customPromptOptions = [
-  {
-    type: 'checkbox',
-    message: 'choose a Component Library',
-    name: 'componentLibraryTypes',
-    choices: [
-      new inquirer.Separator('-- Component Library choose(1 or both)--'),
-      {
-        name: 'Storybook',
-        value: ComponentLibraryOptions.STORYBOOK,
-        checked: true,
-      },
-      {
-        name: 'Pattern Lab',
-        value: ComponentLibraryOptions.PATTERN_LAB,
-      },
-    ],
-    validate: minMaxOptionsValidate({ min: 1 }),
-  },
-  {
-    type: 'checkbox',
-    message: 'What frontend framework are you using with Storybook?',
-    name: 'frontendFramework',
-    choices: [
-      {
-        name: 'React',
-        checked: true,
-        value: FrontendFrameworkOptions.REACT,
-      },
-      {
-        name: 'Webcomponents',
-        value: FrontendFrameworkOptions.WEBCOMPONENTS,
-      },
-    ],
-    // PR up for docs on inquirer to annotate second param answers https://github.com/SBoudrias/Inquirer.js/pull/936
-    filter: (value: FrontendFrameworkOptions[], answers: CustomAnswers) => {
-      if (
-        answers.componentLibraryTypes.includes(
-          ComponentLibraryOptions.PATTERN_LAB
-        )
-      ) {
-        return [FrontendFrameworkOptions.TWIG, ...value]
+    message: 'Choose a name for the overall project using kebab case. (min 4 chars) Ex: "website", or "saphire-dagger"',
+    name: 'projectName',
+    validate: (name: string) => {
+      if (!name || name.length < 4) {
+        return 'Please enter a project name of more than 4 characters length.'
       }
-      return value
-      // throw new Error(answers.componentLibrary)
-      // input will { answers, values } as we are modifying the return value in the choices section
-    },
-    when: (answers: CustomAnswers) => {
-      // Checks to see if we enabled typescript previously then asks the prompt
-      if (
-        new Set(answers.componentLibraryTypes).has(
-          ComponentLibraryOptions.STORYBOOK
-        )
-      ) {
-        return true
+      if (name.indexOf(' ') > 0) {
+        return 'Please enter a two word project name with no spaces.'
       }
-
-      // Mutates answers object adds twig to selected choice (does not prompt user)
-      answers.frontendFramework = [FrontendFrameworkOptions.TWIG]
-
-      return false
+      return true
     },
   },
   {
-    type: 'list',
-    message: 'Choose a CSS library',
-    name: 'cssLibrary',
-    choices: [
-      { name: 'Tailwind', checked: true, value: CSSLibraryOptions.TAILWIND },
-      { name: 'Sass', value: CSSLibraryOptions.SASS },
-      {
-        name: 'Bootstrap',
-        disabled: true,
-        value: CSSLibraryOptions.BOOTSTRAP,
-      },
-    ],
+    type: 'confirm',
+    message: 'Will you be using Drupal?',
+    name: 'hasDrupal',
+    default: false,
+  },
+  {
+    type: 'input',
+    message: 'Where should your Drupal root exist?',
+    default: `./source/drupal/`,
+    name: 'drupalRootPath',
+    when: (answer: CustomAnswers) => {
+     return answer.hasDrupal
+    }
   },
   {
     type: 'confirm',
     message: 'Do you want to use typescript?',
-    name: 'hasTypescript',
+    name: 'hasTypescript'
   },
   {
     type: 'confirm',
@@ -192,11 +141,11 @@ export const customPromptOptions = [
         return true
       }
       return false
-    },
+    }
   },
   {
     type: 'confirm',
-    name: 'Are you using SVGs?',
+    name: 'Are you using SVGs?'
   },
   {
     type: 'checkbox',
@@ -208,10 +157,10 @@ export const customPromptOptions = [
       { name: 'Selenium', value: TestingLibraryOptions.SELENIUM },
       {
         name: 'Loki (Storybook only VRT)',
-        value: TestingLibraryOptions.LOKI,
+        value: TestingLibraryOptions.LOKI
       },
-      { name: 'Pa11y', value: TestingLibraryOptions.PA11Y },
+      { name: 'Pa11y', value: TestingLibraryOptions.PA11Y }
     ],
-    validate: minMaxOptionsValidate({ min: 1 }),
-  },
+    validate: minMaxOptionsValidate({ min: 1 })
+  }
 ]