diff --git a/README.md b/README.md index c76aba4..0bbdd76 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ npx @dreamsicle.io/create-component [options] ## 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] +Usage: @dreamsicle.io/create-component [options] 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 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 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 The name of the template directory (default: "_Template") + -v, --verbose Output extra information to the console (default: false) + -h, --help display help for command ``` diff --git a/examples/components/_CustomTemplate/_Template.tsx b/examples/components/_CustomTemplate/_Template.tsx new file mode 100644 index 0000000..1665a7e --- /dev/null +++ b/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 { + 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 ( +
+

+ Hello from the _Template component. +

+ {children} +
+ ); + } +} + +export default _Template; diff --git a/examples/components/_CustomTemplate/utils.ts b/examples/components/_CustomTemplate/utils.ts new file mode 100644 index 0000000..cd9178b --- /dev/null +++ b/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!`); +} diff --git a/examples/components/_Template/_Template.scss b/examples/components/_Template/_Template.scss index ed0f293..6e1e0b8 100644 --- a/examples/components/_Template/_Template.scss +++ b/examples/components/_Template/_Template.scss @@ -1,3 +1,5 @@ +// @ts-nocheck + @import '../../mixins'; ._Template { diff --git a/examples/components/_Template/_Template.stories.tsx b/examples/components/_Template/_Template.stories.tsx index c4a5f32..87cbc88 100644 --- a/examples/components/_Template/_Template.stories.tsx +++ b/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'; diff --git a/examples/components/_Template/_Template.test.tsx b/examples/components/_Template/_Template.test.tsx index 6b32de0..70d9fb5 100644 --- a/examples/components/_Template/_Template.test.tsx +++ b/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'; diff --git a/examples/components/_Template/_Template.tsx b/examples/components/_Template/_Template.tsx index 278bb66..5869573 100644 --- a/examples/components/_Template/_Template.tsx +++ b/examples/components/_Template/_Template.tsx @@ -1,3 +1,5 @@ +// @ts-nocheck + import React from 'react'; import classNames from 'classnames'; import './_Template.scss'; diff --git a/examples/components/_Template/unmodified.ts b/examples/components/_Template/unmodified.ts index c1f04f4..3b5ef22 100644 --- a/examples/components/_Template/unmodified.ts +++ b/examples/components/_Template/unmodified.ts @@ -1,3 +1,5 @@ +// @ts-nocheck + /** * This tests an unmodified file. */ diff --git a/examples/components/_Template/utils/_Template.utils.ts b/examples/components/_Template/utils/_Template.utils.ts index 0cd6b12..b330c63 100644 --- a/examples/components/_Template/utils/_Template.utils.ts +++ b/examples/components/_Template/utils/_Template.utils.ts @@ -1,3 +1,5 @@ +// @ts-nocheck + /** * This is a test `_Template` util class file. * diff --git a/examples/components/_Template/utils/_template-utils.ts b/examples/components/_Template/utils/_template-utils.ts index 66e67e2..e3a9ebd 100644 --- a/examples/components/_Template/utils/_template-utils.ts +++ b/examples/components/_Template/utils/_template-utils.ts @@ -1,3 +1,5 @@ +// @ts-nocheck + /** * This is a test `_Template` util functions file. * diff --git a/examples/components/_Template/utils/nested-unmodified.ts b/examples/components/_Template/utils/nested-unmodified.ts index 3ed290f..71508bc 100644 --- a/examples/components/_Template/utils/nested-unmodified.ts +++ b/examples/components/_Template/utils/nested-unmodified.ts @@ -1,3 +1,5 @@ +// @ts-nocheck + /** * This tests a nested unmodified file. */ diff --git a/index.js b/index.js index 0d12e50..dd78b9a 100644 --- a/index.js +++ b/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 ', + '-p, --path ', '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 ', + '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)}"`); } } diff --git a/package-lock.json b/package-lock.json index ff683d0..d318bdf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@dreamsicle.io/create-component", - "version": "2.0.0", + "version": "1.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@dreamsicle.io/create-component", - "version": "2.0.0", + "version": "1.4.0", "license": "MIT", "dependencies": { "chalk": "~5.3.0", diff --git a/package.json b/package.json index b5ce122..5beec93 100644 --- a/package.json +++ b/package.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",