Eleven cli

README.md

@@ -24,7 +24,6 @@ TBD
 1. `npm run test:watch` to start jest in watch mode (recommended)
 
 ### Installing A Dependency
-
 1. Run `npm run build`, build will fire off the `tsc` build script for all typescript repos in order of dependency chain. Example: `particle-types` has 0 internal dependencies but other typescript packages depend on it. We would need to run the compiler first on particle-types in order to be able to compile for other typescript packages.
 1. Cd into `package/<PACKAGE_NAME>` and run `npm link`, this will link the **lib/bin** or `main/index.js` alias as an alias in your terminal. Example the bin is named (or aliased) `@phase2/particle-cli` therefore running `npx @phase2/particle-cli -v` will invoke the binary file `particle-cli`.
 1. Alternatively use `node` to test out a dependency in lib. Example `node packages/particle-cli/lib/bin/particle-cli.js -V`
@@ -46,9 +45,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
 

package.json

@@ -9,8 +9,8 @@
   "private": true,
   "keywords:": [
     "Particle",
+    "Stencil",
     "Storybook",
-    "Pattern Lab",
     "Drupal"
   ],
   "homepage": "https://github.com/phase2/particle#readme",
@@ -28,9 +28,9 @@
     "pretty-check": "prettier --check packages/**/*.js",
     "test": "jest",
     "test:watch": "jest --watch",
-    "build": "lerna run --concurrency 1 --scope='{@phase2/particle-types,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' tsc",
-    "dev:clean:node_modules": "lerna exec --parallel --scope='{@phase2/particle-types,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' 'rm -rf node_modules'",
-    "dev:clean:lib": "lerna exec --parallel --scope='{@phase2/particle-types,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' 'rm -rf lib/'",
+    "build": "lerna run --concurrency 1 --scope='{@phase2/particle-types,@phase2/generator-particle-components,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' tsc",
+    "dev:clean:node_modules": "lerna exec --parallel --scope='{@phase2/particle-types,@phase2/generator-particle-components,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' 'rm -rf node_modules'",
+    "dev:clean:lib": "lerna exec --parallel --scope='{@phase2/particle-types,@phase2/generator-particle-components,@phase2/generator-particle-storybook,@phase2/generator-particle-base,@phase2/particle-cli}' 'rm -rf lib/'",
     "build:watch": "lerna run --parallel --scope='{@phase2/*,generator-*}' tsc:watch",
     "update:check": "ncu && lerna exec --concurrency 1 --no-bail -- ncu",
     "update:start": "npm-upgrade && lerna exec --concurrency 1 -- npm-upgrade; npm run lerna:install"

packages/generator-particle-base/package.json

@@ -16,6 +16,7 @@
     "directory": "packages/particle-cli"
   },
   "dependencies": {
+    "@phase2/generator-particle-components": "^0.0.1",
     "@phase2/generator-particle-storybook": "^0.0.1",
     "@phase2/particle-types": "^0.0.1",
     "chalk": "^4.1.0",

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

@@ -1,217 +1,27 @@
-import inquirer from 'inquirer'
-
-import {
-  CustomAnswers,
-  ConfigOptions,
-  ConfigurationAnswers,
-  CSSLibraryOptions,
-  ComponentLibraryOptions,
-  FrontendFrameworkOptions,
-  TestingLibraryOptions,
-} from '@phase2/particle-types'
-
-const minMaxOptionsValidate = ({ min, max }: { min: number; max?: number }) => (
-  answer: Record<string, string>[]
+const validateString = (length: number, defaultVal?:string ) => (
+  answer: 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)` : ''
-    }`
+  const defaultText = defaultVal ? `\n Recommended: ${defaultVal}` : ''
+  if (!answer || answer.length < length) {
+    return `Please enter a value of at least ${length} characters length.${defaultText}`
+  }
+  if (answer.indexOf(' ') > 0) {
+    return 'Please enter a value name with no spaces'
   }
   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 configurationPrompt = [
-  {
-    type: 'input',
-    message: 'choose a project name using kebab case, example: "p2-project"',
-    name: 'projectName',
-    validate: (name: string) => {
-      if (!name || name.length < 4) {
-        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
-    },
-  },
+export const propOptions = [
   {
     type: 'input',
-    message:
-      'choose a component library name using kebab case. example "project-default"',
-    name: 'componentLibraryName',
-    default: 'project-default',
-    validate: (name: string) => {
-      if (!name || name.length < 4) {
-        return 'Please enter a library name of more than 4 characters length'
-      }
-      return true
-    },
+    message: 'Choose a abbreviation for your/client\'s name. (min 3 chars)',
+    name: 'nameSpace',
+    validate: validateString(2)
   },
   {
     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]
-      }
-      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
-      }
-
-      // Mutates answers object adds twig to selected choice (does not prompt user)
-      answers.frontendFramework = [FrontendFrameworkOptions.TWIG]
-
-      return false
-    },
-  },
-  {
-    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: 'Do you want to use typescript?',
-    name: 'hasTypescript',
-  },
-  {
-    type: 'confirm',
-    message: 'Do you want ESModule support for typescript?',
-    name: 'typescriptEsm',
-    when: (answer: CustomAnswers) => {
-      // Checks to see if we enabled typescript previously then asks the prompt
-      if (answer.hasTypescript) {
-        return true
-      }
-      return false
-    },
-  },
-  {
-    type: 'confirm',
-    name: 'Are you using SVGs?',
-  },
-  {
-    type: 'checkbox',
-    message: 'What testing libraries do you want to use?',
-    name: 'testingLibraries',
-    choices: [
-      { name: 'Jest', value: TestingLibraryOptions.JEST },
-      { name: 'Cypress', value: TestingLibraryOptions.CYPRESS },
-      { name: 'Selenium', value: TestingLibraryOptions.SELENIUM },
-      {
-        name: 'Loki (Storybook only VRT)',
-        value: TestingLibraryOptions.LOKI,
-      },
-      { name: 'Pa11y', value: TestingLibraryOptions.PA11Y },
-    ],
-    validate: minMaxOptionsValidate({ min: 1 }),
+    message: 'Choose a name for the overall project using kebab case. (min 4 chars) Ex: "website", or "saphire-dagger"',
+    name: 'projectName',
+    validate: validateString(4)
   },
 ]