feat: add multi prompt

jimsheen · Jul 19, 2023 · 04784cf · 04784cf
1 parent e785ad9
commit 04784cf
Show file tree

Hide file tree

Showing 45 changed files with 3,801 additions and 4,456 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -2,6 +2,8 @@ name: Release & Publish
 
 on:
   push:
+    branches:
+      - feat/prompt-update-multi
     tags:
       - 'v*'
 
@@ -45,7 +47,6 @@ jobs:
           node-version: '14.x'
           registry-url: 'https://npm.pkg.github.com'
           scope: '@jimsheen'
-      - run: npm run addscope
       - name: Publish to GitHub Packages
         run: npm publish
         env:

diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -1,16 +1,17 @@
-# Create Barrel Folder
+# Create React Component
+
+This CLI tool helps to create a folder with a barrel index file and offers options to generate the following:
 
-Create a folder with a barrel index file and options to generate the following:
 - React Functional Component
 - React Hook
-- .test file with testing library and component render setup
-- Storybook .stories
-- SCSS file
-- index.tsx 
+- Test file with testing library and component render setup
+- Storybook stories
+- Styled component file
+- Support for custom configuration using an `.rc` file
 
 ## Usage
 
-```npx create-barrel-folder ComponentName```
+`npx create-barrel-folder`
 
 creates directory:
 
@@ -20,79 +21,16 @@ ComponentName
 - index.ts
 ```
 
-index.ts (barrel file)
-```
+`index.ts` (barrel file)
+
+```ts
 export { default } from './ComponentName'
 export * from './ComponentName'
 ```
 
-ComponentName.tsx
-```
-import React from 'react'
-import './ComponentName.scss'
-
-export interface ComponentNameProps {}
-
-const ComponentName = ({}: ComponentNameProps) => {
-  return (
-    <>
-      <h1>ComponentName</h1>
-    </>
-  )
-}
-
-export default ComponentName
-```
-
-## Options
-
-CLI usage options `npx create-barrel-folder --help`
-```
-Create Barrel File
-
-  Auto create react files and folder with a barrel file 
-
-Options
-
-  --src string[]                                                                                        
-  -h, --help              Display the usage guide                                                       
-  -p, --proptypes         Create JS file with prop types                                                
-  -s, --story             Create a storybook file                                                       
-  -j, --test              Create a test file                                                            
-  -c, --scss              Create an scss file                                                           
-  -f, --fileType string   File type to create (tsx, ts, js, jsx)                                        
-  -k, --hook              Create a React Hook
-```
-
-## Default Props
-
-```
-export interface Config {
-  "fileType": "ts" | "js" | "tsx" | "jsx";
-  "typescript": boolean,
-  "barrel": boolean,
-  "scss": boolean,
-  "test": boolean,
-  "story": boolean,
-  hook: boolean,
-}
-
-const defaultConfig = {
-  fileType: "tsx",
-  typescript: true,
-  barrel: true,
-  scss: false,
-  test: false,
-  story: false,
-  hook: false,
-  type: "rfc"
-} as Config
-```
-
-## Generated Files Example
+`ComponentName.tsx`
 
-#### React Functional Component `ComponentName.tsx`
-```
+```ts
 import React from 'react'
 import './ComponentName.scss'
 
@@ -109,92 +47,62 @@ const ComponentName = ({}: ComponentNameProps) => {
 export default ComponentName
 ```
 
-#### Test file `ComponentName.test.tsx`
-
-```
-import React from 'react'
-import { render, screen } from '@testing-library/react';
-
-import ComponentName, { ComponentNameProps } from './ComponentName'
-
-const defaultProps = {} as ComponentNameProps
-
-const setup = (props?: ComponentNameProps) => {
-  const newProps = {
-  ...defaultProps,
-  ...props
-  } as ComponentNameProps;
-
-  const utils = render(<ComponentName {...newProps} />);
-
-  // example of how to query an element
-  const element = () => screen.queryByText('some element')
-
-  return {
-    ...utils,
-    element
-  }
-}
-
-describe('ComponentName', () => {
-  it('should render', () => {
-    const { element } = setup()
-    expect(element()).toBeInTheDocument()
-  })
-})
-```
-
-#### Storybook file `ComponentName.stories.tsx`
-```
-import React from 'react'
-import { Story } from '@storybook/react'
-
-import ComponentName, { ComponentNameProps } from './ComponentName'
-
-export default {
-  title: 'ComponentName',
-  component: ComponentName,
-  parameters: { actions: { argTypesRegex: '^on.*' } },
-  argTypes: {},
-  args: {} as ComponentNameProps
-}
-
-const Template: Story<ComponentNameProps> = (args) => <ComponentName {...args} />
-
-export const Default = Template.bind({})
-Default.args = {}
-```
-
-#### SCSS file `ComponentName.scss`
-```
-.ComponentName {}
-```
-
-#### React Hook
-`npx create-barrel-folder useHookExample --hook` generates `useHookExample.tsx`
-```
-import React from 'react'
-
-export interface useHookExampleProps {}
-
-const useHookExample = ({}: useHookExampleProps) => {
-  
-  return {}
+## Custom Configuration
+
+You can define a custom config file in your project root to set default behavior of the tool. The tool will look for the config file in the following order:
+
+- a package.json property if it is needed
+- a JSON or YAML, JS "rc file" .ggcrcrc or .ggcrcrc.json or .ggcrcrc.js or.ggcrcrc.yml, .ggcrcrc.yaml
+
+Your custom config file should export an object with the configuration. The default overridable configuration structure is as follows:
+
+```js
+// ggcrcrc.js
+module.exports = {
+  component: {
+    barrel: true,
+    story: true,
+    test: true,
+    styled: true,
+    rules: {
+      required: {
+        message: 'Component name is required',
+      },
+      tests: [
+        {
+          validate: (value) => /^[A-Z]/.test(value),
+          message: 'Component name should start with a capital letter',
+        },
+        {
+          validate: (value) => value.length >= 3,
+          message: 'Component name should be at least 3 characters long',
+        },
+      ],
+    },
+  },
+  hook: {
+    barrel: true,
+    test: true,
+    styled: false,
+    rules: {
+      required: {
+        message: 'Hook name is required',
+      },
+      tests: [
+        {
+          validate: (value) => /^use[A-Z]/.test(value),
+          message: "Hook name should start with 'use'",
+        },
+      ],
+    },
+  },
 }
-
-export default useHookExample
 ```
 
- ## TODO
+You can override any of these defaults in your `.cbfrc.js` or `.cbfrc.ts` file. If you are using TypeScript for your `.cbfrc.ts` file, remember to transpile it to JavaScript, as Node.js cannot understand TypeScript natively.
 
- [ ] - Support Standard JS RFC
+## TODO
 
- [ ] - Add support for proptypes
-
- [ ] - Generate class components
-
- [ ] - Pass custom config file / default options (possible .rc file (install pacakge locally?))
-
- [ ]  - Allow user to pass custom templates
-
- [ ] - Generate CSS file
+- [ ] Allow user to pass custom templates
+- [ ] pass file name as default arg e.g `crc componentName`
+- [x] Support custom `.rc` configuration files
diff --git a/commitlint.config.js b/commitlint.config.js
diff --git a/config/fileTransformer.js b/config/fileTransformer.js
@@ -1,9 +1,9 @@
+/* eslint-disable */
 // source: https://jestjs.io/docs/code-transformation#examples
-
-const path = require('path');
+const path = require('path')
 
 module.exports = {
   process(src, filename, config, options) {
-    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'
   },
-};
+}
diff --git a/config/tsconfig.cjs.json b/config/tsconfig.cjs.json
diff --git a/config/tsconfig.esm.json b/config/tsconfig.esm.json
diff --git a/config/tsconfig.types.json b/config/tsconfig.types.json
diff --git a/config/tsconfig.umd.json b/config/tsconfig.umd.json
diff --git a/config/webpack.config.js b/config/webpack.config.js
diff --git a/jest.config.js b/jest.config.js
@@ -5,13 +5,10 @@ module.exports = {
     '**/?(*.)+(spec|test).+(ts|tsx|js)',
   ],
   transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+    '^.+\\.(ts|tsx)$': ['ts-jest', {
+      tsconfig: 'tsconfig.json'
+    }],
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|aac|oga)$':
       './config/fileTransformer.js',
   },
-  globals: {
-    'ts-jest': {
-      tsconfig: 'tsconfig.json'
-    }
-  }
 }