LG-3534 Create sub component tool

.changeset/ninety-hats-fix.md

@@ -0,0 +1,6 @@
+---
+'@lg-tools/create': minor
+'@lg-tools/cli': minor
+---
+
+Adds `--parent` flag to `lg create` command. Passing in this flag will create a subcomponent of the given parent.

tools/cli/src/index.ts

@@ -31,6 +31,10 @@ cli
     '-d, --directory [directory]',
     'The directory to write the new package. Defaults to the first entry in lg.config.json scopes',
   )
+  .option(
+    '-p, --parent [parent]',
+    'Creates a sub-component to the provided parent',
+  )
   .action(createPackage);
 
 /** Install */

tools/create/src/create.types.ts

@@ -1,6 +1,7 @@
 export interface CreatePackageOptions {
   directory?: string;
   scope?: string;
+  parent?: string;
 }
 
 export interface TemplateParameters {

tools/create/src/createComponent.ts

@@ -0,0 +1,107 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+import fse from 'fs-extra';
+import path from 'path';
+
+import { getNameVariants } from './utils/getNameVariants';
+import { writeFiles } from './utils/writeFiles';
+import { CreatePackageOptions } from './create.types';
+import {
+  component,
+  componentIndex,
+  index,
+  pkgJson,
+  readMe,
+  spec,
+  story,
+  styles,
+  tsConfig,
+  types,
+} from './templates';
+
+interface CreateComponentArgs
+  extends Pick<Required<CreatePackageOptions>, 'scope' | 'directory'> {
+  name: string;
+}
+
+export function createComponent({
+  name,
+  scope,
+  directory,
+}: CreateComponentArgs) {
+  const rootDir = process.cwd();
+
+  const { packageNameKebab, packageNameTitle, packageNamePascal } =
+    getNameVariants(name);
+
+  console.log(
+    chalk.green(
+      `Creating package ${chalk.bold(scope + '/' + packageNameKebab)}`,
+    ),
+  );
+
+  // Create the appropriate directory
+  const packageDir = path.resolve(rootDir, directory, packageNameKebab);
+
+  // Create the package directories
+  fse.mkdir(packageDir, { recursive: true }, err => {
+    if (err) {
+      console.log(`Package ${packageNameKebab} already exists`);
+      return;
+    }
+
+    // Write the appropriate files for each template
+    writeFiles(
+      [
+        {
+          name: 'package.json',
+          contents: pkgJson({
+            scope,
+            packageNameKebab,
+            packageNameTitle,
+          }),
+        },
+        {
+          name: 'tsconfig.json',
+          contents: tsConfig,
+        },
+        {
+          name: 'README.md',
+          contents: readMe({ packageNameKebab, packageNameTitle }),
+        },
+        {
+          name: 'src/index.ts',
+          contents: index({ packageNamePascal }),
+        },
+        {
+          name: `src/${packageNamePascal}.stories.tsx`,
+          contents: story({ packageNamePascal }),
+        },
+        {
+          name: `src/${packageNamePascal}/index.ts`,
+          contents: componentIndex({ packageNamePascal }),
+        },
+        {
+          name: `src/${packageNamePascal}/${packageNamePascal}.tsx`,
+          contents: component({ packageNamePascal }),
+        },
+        {
+          name: `src/${packageNamePascal}/${packageNamePascal}.spec.tsx`,
+          contents: spec({ packageNamePascal, packageNameKebab }),
+        },
+        {
+          name: `src/${packageNamePascal}/${packageNamePascal}.types.ts`,
+          contents: types({ packageNamePascal }),
+        },
+        {
+          name: `src/${packageNamePascal}/${packageNamePascal}.styles.ts`,
+          contents: styles,
+        },
+      ],
+      {
+        dir: packageDir,
+        packageNamePascal,
+      },
+    );
+  });
+}

tools/create/src/createSubComponent.ts

@@ -0,0 +1,73 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+import fse from 'fs-extra';
+import path from 'path';
+
+import { getComponentPath } from './utils/getComponentPath';
+import { getNameVariants } from './utils/getNameVariants';
+import { writeFiles } from './utils/writeFiles';
+import { CreatePackageOptions } from './create.types';
+import { component, componentIndex, spec, styles, types } from './templates';
+
+interface CreateComponentArgs {
+  name: string;
+  parent: Required<CreatePackageOptions>['parent'];
+}
+
+export function createSubComponent({ name, parent }: CreateComponentArgs) {
+  const { packageNamePascal: parentNamePascal } = getNameVariants(parent);
+  const { packageNameKebab, packageNamePascal } = getNameVariants(name);
+
+  console.log(
+    chalk.green(
+      `Creating sub-component ${chalk.bold(
+        parentNamePascal + '/' + packageNamePascal,
+      )}`,
+    ),
+  );
+
+  const parentDir = getComponentPath(parent);
+
+  if (!parentDir) {
+    console.error(chalk.red(`Could not find parent package ${parent}`));
+    process.exit(127);
+  }
+
+  const subComponentDir = path.resolve(parentDir, 'src', packageNamePascal);
+
+  fse.mkdir(subComponentDir, { recursive: true }, err => {
+    if (err) {
+      console.log(`Package ${packageNameKebab} already exists`);
+      return;
+    }
+
+    writeFiles(
+      [
+        {
+          name: `index.ts`,
+          contents: componentIndex({ packageNamePascal }),
+        },
+        {
+          name: `${packageNamePascal}.tsx`,
+          contents: component({ packageNamePascal }),
+        },
+        {
+          name: `${packageNamePascal}.spec.tsx`,
+          contents: spec({ packageNamePascal, packageNameKebab }),
+        },
+        {
+          name: `${packageNamePascal}.types.ts`,
+          contents: types({ packageNamePascal }),
+        },
+        {
+          name: `${packageNamePascal}.styles.ts`,
+          contents: styles,
+        },
+      ],
+      {
+        dir: subComponentDir,
+        packageNamePascal,
+      },
+    );
+  });
+}

tools/create/src/index.ts

@@ -1,131 +1,26 @@
 /* eslint-disable no-console */
 import { getLGConfig } from '@lg-tools/meta';
-import chalk from 'chalk';
-import fse from 'fs-extra';
-import { camelCase, kebabCase, startCase } from 'lodash';
-import path from 'path';
 
 import { CreatePackageOptions } from './create.types';
-import {
-  component,
-  componentIndex,
-  index,
-  pkgJson,
-  readMe,
-  spec,
-  story,
-  styles,
-  tsConfig,
-  types,
-} from './templates';
+import { createComponent } from './createComponent';
+import { createSubComponent } from './createSubComponent';
 
 export function createPackage(name: string, options: CreatePackageOptions) {
-  const rootDir = process.cwd();
-
   const { scopes } = getLGConfig();
-  const scope = options.scope ?? Object.keys(scopes)[0];
-  const directory = options.directory ?? scopes[scope];
-
-  // Construct all required parameters
-  const packageNameKebab = kebabCase(name);
-  const packageNameTitle = startCase(name);
-  const packageNamePascal = camelCase(name).replace(/^\w/, c =>
-    c.toUpperCase(),
-  );
-
-  console.log(
-    chalk.green(
-      `Creating package ${chalk.bold(scope + '/' + packageNameKebab)}`,
-    ),
-  );
-
-  // Create the appropriate directory
-  const packageDir = path.resolve(rootDir, directory, packageNameKebab);
 
-  // Create the package directories
-  fse.mkdir(packageDir, { recursive: true }, err => {
-    if (err) {
-      console.log(`Package ${packageNameKebab} already exists`);
-      return;
-    }
+  const parent = options.parent;
 
-    // Write the appropriate files for each template
-    writeFiles(
-      [
-        {
-          name: 'package.json',
-          contents: pkgJson({
-            scope,
-            packageNameKebab,
-            packageNameTitle,
-          }),
-        },
-        {
-          name: 'tsconfig.json',
-          contents: tsConfig,
-        },
-        {
-          name: 'README.md',
-          contents: readMe({ packageNameKebab, packageNameTitle }),
-        },
-        {
-          name: 'src/index.ts',
-          contents: index({ packageNamePascal }),
-        },
-        {
-          name: `src/${packageNamePascal}.stories.tsx`,
-          contents: story({ packageNamePascal }),
-        },
-        {
-          name: `src/${packageNamePascal}/index.ts`,
-          contents: componentIndex({ packageNamePascal }),
-        },
-        {
-          name: `src/${packageNamePascal}/${packageNamePascal}.tsx`,
-          contents: component({ packageNamePascal }),
-        },
-        {
-          name: `src/${packageNamePascal}/${packageNamePascal}.spec.tsx`,
-          contents: spec({ packageNamePascal, packageNameKebab }),
-        },
-        {
-          name: `src/${packageNamePascal}/${packageNamePascal}.types.ts`,
-          contents: types({ packageNamePascal }),
-        },
-        {
-          name: `src/${packageNamePascal}/${packageNamePascal}.styles.ts`,
-          contents: styles,
-        },
-      ],
-      {
-        dir: packageDir,
-        packageNamePascal,
-      },
-    );
-  });
-}
-
-function handleErr(err: NodeJS.ErrnoException | null) {
-  if (err) throw err;
-}
-
-function writeFiles(
-  files: Array<{
-    name: string;
-    contents: string;
-  }>,
-  config: {
-    dir: string;
-    packageNamePascal: string;
-  },
-) {
-  // Make the directory src and src/Component
-  fse.mkdirSync(path.resolve(config.dir, 'src', config.packageNamePascal), {
-    recursive: true,
-  });
+  // TODO: get scope & directory from parent
+  const scope = options.scope ?? Object.keys(scopes)[0];
+  const directory = options.directory ?? scopes[scope];
 
-  // Write all component files
-  for (const { name, contents } of files) {
-    fse.writeFile(path.resolve(config.dir, name), contents, handleErr);
+  if (parent) {
+    createSubComponent({ name, parent });
+  } else {
+    createComponent({
+      name,
+      scope,
+      directory,
+    });
   }
 }

tools/create/src/templates/component/src/Component/component.template.ts

@@ -2,11 +2,11 @@ import { TemplateParameters } from '../../../../create.types';
 
 export const component = ({
   packageNamePascal,
-}: Pick<TemplateParameters, 'packageNamePascal'>) => `
-import React from 'react';
+}: Pick<TemplateParameters, 'packageNamePascal'>) => `import React from 'react';
+import { ${packageNamePascal}Props } from './${packageNamePascal}.types';
 
 // TODO: forwardRef
-export function ${packageNamePascal}({}) {
+export function ${packageNamePascal}({}: ${packageNamePascal}Props) {
   return <div>your content here</div>;
 }
 

tools/create/src/utils/getComponentPath.ts

@@ -0,0 +1,27 @@
+import { getLGConfig } from '@lg-tools/meta';
+import fse from 'fs-extra';
+import path from 'path';
+
+/** Given a component name, return its absolute path */
+export function getComponentPath(name: string): string | undefined {
+  const { scopes } = getLGConfig();
+  const rootDir = process.cwd();
+
+  if (name.startsWith('@')) {
+    // We have scope defined for us, so we can compute the absolute path
+    const [scope, packageName] = name.split('/'); // ['@leafygreen-ui', 'button']
+    const parentDir: string | undefined = scopes[scope]; // 'packages'
+
+    if (fse.existsSync(path.resolve(rootDir, parentDir, packageName))) {
+      return path.resolve(rootDir, parentDir, packageName);
+    }
+  } else {
+    // We need to check all package directories for the component
+    for (const dir of Object.values(scopes)) {
+      // ['packages', 'tools'] / 'button'
+      if (fse.existsSync(path.resolve(rootDir, dir, name))) {
+        return path.resolve(rootDir, dir, name);
+      }
+    }
+  }
+}