Revert "feat(create-analog): adding the option to select ui frameworks"

This reverts commit 83359c0.

package.json

@@ -16,7 +16,7 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
-    "hook:commit-msg": "npx --no -- commitlint --edit",
+    "hook:commit-msg": "npx --no -- commitlint --edit $1",
     "hook:pre-commit": "lint-staged",
     "prettify": "prettier --write ."
   },

packages/create-analog/__tests__/cli.spec.ts

@@ -84,7 +84,7 @@ test('asks to overwrite non-empty current directory', () => {
 
 test('successfully scaffolds a project based on angular starter template', () => {
   const { stdout } = run(
-    [projectName, '--template', 'angular-v15', '--ui', 'none'],
+    [projectName, '--template', 'angular-v15', '--skipTailwind'],
     {
       cwd: __dirname,
     }
@@ -97,7 +97,7 @@ test('successfully scaffolds a project based on angular starter template', () =>
 });
 
 test('works with the -t alias', () => {
-  const { stdout } = run([projectName, '-t', 'angular-v15', '--ui', 'none'], {
+  const { stdout } = run([projectName, '-t', 'angular-v15', '--skipTailwind'], {
     cwd: __dirname,
   });
   const generatedFiles = readdirSync(genPath).sort();

packages/create-analog/index.js

@@ -37,61 +37,41 @@ const TEMPLATES = APPS.map(
   (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
 ).reduce((a, b) => a.concat(b), []);
 
-const UI_FRAMEWORKS = [
-  {
-    name: 'none',
-    display: 'None',
-    color: yellow,
-  },
-  {
-    name: 'tailwind',
-    display: 'Tailwind',
-    color: yellow,
-  },
-  {
-    name: 'material',
-    display: 'Angular Material',
-    color: yellow,
-  },
-];
-
 const renameFiles = {
   _gitignore: '.gitignore',
 };
 
 async function init() {
-  let usedTargetDir = formatTargetDir(argv._[0]);
-  let usedTemplate = argv.template || argv.t;
-  let usedUi = argv.ui || false;
+  let targetDir = formatTargetDir(argv._[0]);
+  let template = argv.template || argv.t;
+  let skipTailwind = argv.skipTailwind || false;
 
   const defaultTargetDir = 'analog-project';
   const getProjectName = () =>
-    usedTargetDir === '.' ? path.basename(path.resolve()) : usedTargetDir;
+    targetDir === '.' ? path.basename(path.resolve()) : targetDir;
 
   let result = {};
 
   try {
     result = await prompts(
       [
         {
-          type: usedTargetDir ? null : 'text',
+          type: targetDir ? null : 'text',
           name: 'projectName',
           message: reset('Project name:'),
           initial: defaultTargetDir,
           onState: (state) => {
-            usedTargetDir = formatTargetDir(state.value) || defaultTargetDir;
+            targetDir = formatTargetDir(state.value) || defaultTargetDir;
           },
         },
         {
           type: () =>
-            !fs.existsSync(usedTargetDir) || isEmpty(usedTargetDir)
-              ? null
-              : 'confirm',
+            !fs.existsSync(targetDir) || isEmpty(targetDir) ? null : 'confirm',
           name: 'overwrite',
           message: () =>
-            (usedTargetDir === '.'
+            (targetDir === '.'
               ? 'Current directory'
-              : `Target directory "${usedTargetDir}"`) +
+              : `Target directory "${targetDir}"`) +
             ` is not empty. Remove existing files and continue?`,
         },
         {
@@ -112,14 +92,12 @@ async function init() {
             isValidPackageName(dir) || 'Invalid package.json name',
         },
         {
-          type:
-            usedTemplate && TEMPLATES.includes(usedTemplate) ? null : 'select',
+          type: template && TEMPLATES.includes(template) ? null : 'select',
           name: 'framework',
           message:
-            typeof usedTemplate === 'string' &&
-            !TEMPLATES.includes(usedTemplate)
+            typeof template === 'string' && !TEMPLATES.includes(template)
               ? reset(
-                  `"${usedTemplate}" isn't a valid template. Please choose from below: `
+                  `"${template}" isn't a valid template. Please choose from below: `
                 )
               : reset('Select a template:'),
           initial: 0,
@@ -147,21 +125,9 @@ async function init() {
             }),
         },
         {
-          type:
-            usedUi && UI_FRAMEWORKS?.map((ui) => ui.name).includes(usedUi)
-              ? null
-              : 'select',
-          name: 'ui',
-          message: reset('Select a UI framework:'),
-          // @ts-ignore
-          choices: () =>
-            UI_FRAMEWORKS.map((framework) => {
-              const variantColor = framework.color;
-              return {
-                title: variantColor(framework.name),
-                value: framework.name,
-              };
-            }),
+          type: skipTailwind ? null : 'confirm',
+          name: 'tailwind',
+          message: 'Would you like to add Tailwind to your project?',
         },
       ],
       {
@@ -176,9 +142,9 @@ async function init() {
   }
 
   // user choice associated with prompts
-  const { framework, overwrite, packageName, variant, ui } = result;
+  const { framework, overwrite, packageName, variant, tailwind } = result;
 
-  const root = path.join(cwd, usedTargetDir);
+  const root = path.join(cwd, targetDir);
 
   if (overwrite) {
     emptyDir(root);
@@ -187,15 +153,15 @@ async function init() {
   }
 
   // determine template
-  usedTemplate = variant || framework || usedTemplate;
-  usedUi = ui || usedUi;
+  template = variant || framework || template;
+  skipTailwind = !tailwind || skipTailwind;
 
   console.log(`\nScaffolding project in ${root}...`);
 
   const templateDir = path.resolve(
     fileURLToPath(import.meta.url),
     '..',
-    `template-${usedTemplate}`
+    `template-${template}`
   );
 
   const filesDir = path.resolve(fileURLToPath(import.meta.url), '..', `files`);
@@ -216,20 +182,10 @@ async function init() {
     write(file);
   }
 
-  switch (usedUi) {
-    case 'material':
-      addMaterialStylesSCSS(write, root, filesDir);
-      addMaterialIndex(write, root, filesDir);
-      addStyleExtensions(write, root);
-      break;
-    case 'tailwind':
-      addTailwindConfig(write, filesDir);
-      addPostCssConfig(write, filesDir);
-      addTailwindDirectives(write, filesDir);
-      break;
-    case 'none':
-    default:
-      break;
+  if (!skipTailwind) {
+    addTailwindConfig(write, filesDir);
+    addPostCssConfig(write, filesDir);
+    addTailwindDirectives(write, filesDir);
   }
 
   const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent);
@@ -241,27 +197,17 @@ async function init() {
   pkg.name = packageName || getProjectName();
   pkg.scripts.start = getStartCommand(pkgManager);
 
-  switch (usedUi) {
-    case 'material':
-      addMaterialDependencies(pkg, usedTemplate);
-      break;
-    case 'tailwind':
-      addTailwindDevDependencies(pkg);
-      break;
-    case 'none':
-    default:
-      break;
-  }
+  if (!skipTailwind) addDevDependencies(pkg);
 
   write('package.json', JSON.stringify(pkg, null, 2));
 
   console.log(`\nInitializing git repository:`);
-  execSync(`git init ${usedTargetDir} && cd ${usedTargetDir} && git add .`);
+  execSync(`git init ${targetDir} && cd ${targetDir} && git add .`);
 
   // Fail Silent
   // Can fail when user does not have global git credentials
   try {
-    execSync(`cd ${usedTargetDir} && git commit -m "initial commit"`);
+    execSync(`cd ${targetDir} && git commit -m "initial commit"`);
   } catch {}
 
   console.log(`\nDone. Now run:\n`);
@@ -376,31 +322,25 @@ function getStartCommand(pkgManager) {
 function addTailwindDirectives(write, filesDir) {
   write(
     'src/styles.css',
-    fs.readFileSync(path.join(filesDir, 'tailwind', `styles.css`), 'utf-8')
+    fs.readFileSync(path.join(filesDir, `styles.css`), 'utf-8')
   );
 }
 
 function addPostCssConfig(write, filesDir) {
   write(
     'postcss.config.js',
-    fs.readFileSync(
-      path.join(filesDir, 'tailwind', `postcss.config.js`),
-      'utf-8'
-    )
+    fs.readFileSync(path.join(filesDir, `postcss.config.js`), 'utf-8')
   );
 }
 
 function addTailwindConfig(write, filesDir) {
   write(
     'tailwind.config.js',
-    fs.readFileSync(
-      path.join(filesDir, 'tailwind', `tailwind.config.js`),
-      'utf-8'
-    )
+    fs.readFileSync(path.join(filesDir, `tailwind.config.js`), 'utf-8')
   );
 }
 
-function addTailwindDevDependencies(pkg) {
+function addDevDependencies(pkg) {
   ['tailwindcss@^3.3.1', 'postcss@^8.4.21', 'autoprefixer@^10.4.14'].forEach(
     (packageName) => {
       const [name, version] = packageName.split('@');
@@ -409,67 +349,6 @@ function addTailwindDevDependencies(pkg) {
   );
 }
 
-function addMaterialStylesSCSS(write, root, filesDir) {
-  // remove old styles.css
-  if (fs.existsSync(path.join(root, `src/styles.css`))) {
-    fs.unlinkSync(path.join(root, `src/styles.css`));
-  }
-
-  write(
-    'src/styles.scss',
-    fs.readFileSync(
-      path.join(filesDir, 'angular-material', `styles.scss`),
-      'utf-8'
-    )
-  );
-}
-
-function addStyleExtensions(write, root) {
-  // update vite.config.ts to add `inlineStylesExtension` to the analog vite plugin
-  const viteConfig = fs.readFileSync(
-    path.join(root, 'vite.config.ts'),
-    'utf-8'
-  );
-  const updatedViteConfig = viteConfig.replace(
-    `plugins: [analog()],`,
-    `plugins: [
-    analog({
-      vite: {
-        inlineStylesExtension: 'scss',
-      },
-    })
-  ],`
-  );
-  write('vite.config.ts', updatedViteConfig);
-}
-
-function addMaterialIndex(write, root, filesDir) {
-  // remove old styles.css
-  if (fs.existsSync(path.join(root, `src/index.html`))) {
-    fs.unlinkSync(path.join(root, `src/index.html`));
-  }
-
-  write(
-    'src/index.html',
-    fs.readFileSync(
-      path.join(filesDir, 'angular-material', `index.html`),
-      'utf-8'
-    )
-  );
-}
-
-function addMaterialDependencies(pkg, variant) {
-  const angularVersion = variant?.replace('angular-v', '');
-  [
-    `@angular/cdk@^${angularVersion}`,
-    `@angular/material@^${angularVersion}`,
-  ].forEach((packageName) => {
-    // split on last @ to get name and version
-    const [name, version] = packageName.split(/@(?=[^@]*$)/);
-    pkg.dependencies[name] = version;
-  });
-}
-
 init().catch((e) => {
   console.error(e);
 });