Merge pull request #3 from dreamsicle-io/release/1.4.0-RC2

Release/1.4.0 rc2

Author: theenoahmason

README.md

@@ -12,7 +12,7 @@ npx @dreamsicle.io/create-component [options] <name>
 
 ## Getting started
 
-All that is necessary to start using the tool is a component name `name`, which corresponds to a pascal-cased string that will serve as the component name, and a relative `--path`/`-p` that contains a `_Template` directory.
+All that is necessary to start using the tool is a component name `name`, which corresponds to a pascal-cased string that will serve as the component name, and a relative `--path`/`-p` that contains a `_Template` directory (or other directory as specified by the `-t`/`--templateDir` option).
 
 ### 1. Install
 
@@ -26,7 +26,7 @@ npm install --save-dev @dreamsicle.io/create-component
 
 While it is possible to run this script directly, it is recommended that you add scripts to your `package.json` file in order to make using this tool easier and faster. The app structure isn't likely to change in any given project often, so this will help in making the usage more consistent.
 
-The scripts `name` arg can be passed through to the script when running it through `npm`, therefore all that is recommended is to set up a script corresponding to each path that contains a `_Template` directory.
+The scripts `name` arg can be passed through to the script when running it through `npm`, therefore all that is recommended is to set up a script corresponding to each path that contains a `_Template` directory (or other directory as specified by the `-t`/`--templateDir` option).
 
 **Setting up scripts is simple ― consider an application with the following structure:**
 
@@ -55,6 +55,8 @@ The scripts `name` arg can be passed through to the script when running it throu
 
 > **Note:** If your templates live outside of the directory you want them to be created in, use the `-o` or `--outputPath` option to set the output path.
 
+> **Note:** If you want the template directory to have a different name than `_Template` for stylistic or conflict reasons, use the `-t`/`--templateDir` option.
+
 ### 3. Run the scripts
 
 Given the scripts created in step #2 above, run them as follows ― being sure to provide a component name after the script name. These commands will clone the `_Template` directory in each of the corresponding project directories and will perform replacements both on the file names themselves as well as on the text content within the files.
@@ -82,7 +84,9 @@ The following table documents which text nodes will be operated on when the `_Te
 | `_version`    | The root package's version      | `1.0.0`           | ✔️                | ❌               |
 | `_date`       | The date as `m/d/yyyy`          | `3/23/2022`       | ✔️                | ❌               |
 
-> **Note:** Version 2.0.0 will provide an API for adding custom replacements to the script.
+> **Note:** The `_Template` and `_template` replacements are not affected by the `-t`/`--templateDir` option.
+
+> **Coming soon:** Version 2.0.0 will provide an API for adding custom replacements to the script.
 
 ## Logging
 
@@ -114,17 +118,18 @@ npx @dreamsicle.io/create-component --help
 **The above would ouput the following help information:**
 
 ```
-Usage: npx @dreamsicle.io/create-component [options] <name>
+Usage: @dreamsicle.io/create-component [options] <name>
 
 Create a templated component structure.
 
 Arguments:
-  name                     The name of the component
+  name                        The name of the component
 
 Options:
-  -V, --version            output the version number
-  -p, --path <path>        The relative path where the template to be used lives
-  -o, --outputPath [path]  The relative path where the component should be placed, if different from the template path
-  -v, --verbose            Output extra information to the console (default: false)
-  -h, --help               display help for command
+  -V, --version               output the version number
+  -p, --path <string>         The relative path where the template to be used lives
+  -o, --outputPath [string]   The relative path where the component should be placed, if different from the template path
+  -t, --templateDir <string>  The name of the template directory (default: "_Template")
+  -v, --verbose               Output extra information to the console (default: false)
+  -h, --help                  display help for command
 ```

examples/components/_CustomTemplate/_Template.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+
+import React from 'react';
+import classNames from 'classnames';
+import './_Template.scss';
+
+export interface Props {
+  id?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface State {}
+
+/**
+ * Components / _Template
+ *
+ * Describe the custom `_Template` component's use cases here.
+ * Include what it does, why it was developed, and why
+ * it's awesome.
+ *
+ * @since _version Added by the `create-component` script on `_date`
+ */
+class _Template extends React.Component<Props, State> {
+  static defaultProps: Props = {};
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const { id, className, children } = this.props;
+    const {} = this.state;
+    const containerClass = classNames('_Template', className);
+    return (
+      <div id={id} className={containerClass}>
+        <h3>
+          Hello from the <code>_Template</code> component.
+        </h3>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default _Template;

examples/components/_CustomTemplate/utils.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+
+/**
+ * This is a test `_Template` util functions file.
+ * 
+ * @since _version Added on `_date`
+ */
+export function _TemplateUtil() {
+	console.log(`Hello from the _Template utils file!`);
+}

examples/components/_Template/_Template.scss

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 @import '../../mixins';
 
 ._Template {

examples/components/_Template/_Template.stories.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import _Template from './_Template';

examples/components/_Template/_Template.test.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import React from 'react';
 import { render } from '@testing-library/react';
 import _Template from './_Template';

examples/components/_Template/_Template.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import React from 'react';
 import classNames from 'classnames';
 import './_Template.scss';

examples/components/_Template/unmodified.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * This tests an unmodified file.
  */

examples/components/_Template/utils/_Template.utils.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * This is a test `_Template` util class file.
  * 

examples/components/_Template/utils/_template-utils.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * This is a test `_Template` util functions file.
  * 

examples/components/_Template/utils/nested-unmodified.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * This tests a nested unmodified file.
  */

index.js

@@ -13,6 +13,7 @@ import zod from 'zod';
  * @typedef {object} Options
  * @property {string} path
  * @property {string} outputPath
+ * @property {string} templateDir
  * @property {boolean} verbose
  */
 
@@ -99,7 +100,7 @@ let options;
 const program = new Command();
 program
 	.version(pkg.version)
-	.name('npx @dreamsicle.io/create-component')
+	.name('@dreamsicle.io/create-component')
 	.description('Create a templated component structure.')
 	// Construct arguments.
 	.argument(
@@ -112,19 +113,27 @@ program
 	)
 	// Construct options.
 	.option(
-		'-p, --path <path>',
+		'-p, --path <string>',
 		'The relative path where the template to be used lives',
 		(value) => {
 			return zod.string().trim().safeParse(value).data || '';
 		}
 	)
 	.option(
-		'-o, --outputPath [path]',
+		'-o, --outputPath [string]',
 		'The relative path where the component should be placed, if different from the template path',
 		(value) => {
 			return zod.string().trim().safeParse(value).data || '';
 		}
 	)
+	.option(
+		'-t, --templateDir <string>',
+		'The name of the template directory',
+		(value) => {
+			return zod.string().trim().safeParse(value).data || '';
+		},
+		'_Template'
+	)
 	.option(
 		'-v, --verbose',
 		'Output extra information to the console',
@@ -135,7 +144,7 @@ program
 		// Initialize args and options.
 		options = { ...opts };
 		componentName = name;
-		srcPath = path.resolve(options.path, '_Template');
+		srcPath = path.resolve(options.path, options.templateDir);
 		tmpPath = path.resolve(tmpDirPath, componentName);
 		destPath = path.resolve(options.outputPath || options.path, componentName);
 		// Run creation.
@@ -254,7 +263,6 @@ function validate() {
 	}
 	// Check if the component directory already exists.
 	if (fs.existsSync(destPath)) {
-		
 		throw new Error(`There is already a directory at "${path.relative(cwd, destPath)}"`);
 	}
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dreamsicle.io/create-component",
-	"version": "2.0.0",
+	"version": "1.4.0",
 	"type": "module",
 	"main": "index.js",
 	"license": "MIT",