add more print with to prettier config

.prettierrc

@@ -2,5 +2,5 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "printWidth": 90
+  "printWidth": 100
 }

src/constants/config.constants.ts

@@ -6,6 +6,7 @@ export const defaultConfig: LunConfig = {
   defaultTemplate: 'react',
   provider: 'context',
   css: 'module',
+  className: 'clsx',
 };
 
-export const extsConfigFile = ['js', 'cjs'];
+export const extsConfigFile = ['js', 'cjs', 'mjs'];

src/controller/lun.controller.ts

@@ -13,34 +13,27 @@ import type {
   Css,
   CreatePage,
   CreateContext,
+  ClassName,
 } from '../models';
-import {
-  templateCSS,
-  templateComponent,
-  templateIndexComponent,
-} from '../templates/base';
+import { templateCSS, templateComponent, templateIndexComponent } from '../templates/base';
 import { getTemplateIndex, getTemplatePage } from '../templates/pages';
 import { getTemplateContext } from '../templates/contexts';
 
 export class Lun {
   private options: LunConfig = defaultConfig;
   private dir: string = getRootPath(defaultConfig.root);
-  private dirFolderPage: string = getRootPath(
-    defaultConfig.root,
-    defaultConfig.pagesFolder,
-  );
-  private dirFolderContext: string = getRootPath(
-    defaultConfig.root,
-    defaultConfig.provider,
-  );
+  private dirFolderPage: string = getRootPath(defaultConfig.root, defaultConfig.pagesFolder);
+  private dirFolderContext: string = getRootPath(defaultConfig.root, defaultConfig.provider);
   private cssType: Css = 'module';
+  private className: ClassName = 'clsx';
 
   setOptions(value: LunConfig) {
     this.options = value;
     this.dir = getRootPath(this.options.root);
     this.dirFolderPage = getRootPath(this.options.root, this.options.pagesFolder);
     this.dirFolderContext = getRootPath(this.options.root, this.options.provider);
     this.cssType = this.options.css;
+    this.className = this.options.className;
   }
 
   private printCreate = ({ type, name }: PrintCreate) => {
@@ -54,8 +47,7 @@ export class Lun {
   getFullPathComponent = (componentName: string, filename: string) =>
     getRootPath(this.dir, `components/${componentName}/${filename}`);
 
-  getPathComponentsFolder = (folder: string = '') =>
-    getRootPath(this.dir, `components/${folder}`);
+  getPathComponentsFolder = (folder: string = '') => getRootPath(this.dir, `components/${folder}`);
 
   createComponent({ componentName, type }: CreateComponent) {
     if (!componentName || typeof componentName === 'object') {
@@ -70,6 +62,7 @@ export class Lun {
       component: componentName,
       type: typeTemplate,
       cssType: this.cssType,
+      className: this.className,
     });
     const fileIndex = templateIndexComponent({
       component: componentName,
@@ -113,14 +106,8 @@ export class Lun {
     const { extIndex, extComponent } = getExt(typeTemplate);
     const folderPath = this.dirFolderContext;
     const folderContextComponent = path.resolve(folderPath, contextName);
-    const templateContext = path.resolve(
-      folderContextComponent,
-      `${contextName}.${extComponent}`,
-    );
-    const templateIndexContext = path.resolve(
-      folderContextComponent,
-      `index.${extIndex}`,
-    );
+    const templateContext = path.resolve(folderContextComponent, `${contextName}.${extComponent}`);
+    const templateIndexContext = path.resolve(folderContextComponent, `index.${extIndex}`);
 
     if (!fs.existsSync(folderPath)) fs.mkdirSync(folderPath);
     if (!fs.existsSync(folderContextComponent)) fs.mkdirSync(folderContextComponent);
@@ -154,14 +141,8 @@ export class Lun {
     if (!fs.existsSync(folderPath)) fs.mkdirSync(folderPath);
     if (!fs.existsSync(folderPageComponent)) fs.mkdirSync(folderPageComponent);
 
-    fs.writeFileSync(
-      templatePage,
-      getTemplatePage({ name: pageName, type: typeTemplate }),
-    );
-    fs.writeFileSync(
-      templateIndexPage,
-      getTemplateIndex({ name: pageName, type: typeTemplate }),
-    );
+    fs.writeFileSync(templatePage, getTemplatePage({ name: pageName, type: typeTemplate }));
+    fs.writeFileSync(templateIndexPage, getTemplateIndex({ name: pageName, type: typeTemplate }));
 
     this.printCreate({ type: 'page', name: pageName });
   }

src/models/config.models.ts

@@ -4,6 +4,8 @@ export type Css = 'vanilla' | 'module';
 
 export type PagesFolderName = 'views' | 'pages';
 
+export type ClassName = 'clsx' | 'classNames';
+
 export interface LunConfig {
   /** by default [src] - options: 'src' | 'app' | string */
   root: string;
@@ -15,4 +17,5 @@ export interface LunConfig {
   provider: string;
   /** css - vanilla or module */
   css: Css;
+  className: ClassName;
 }

src/templates/base.ts

@@ -1,17 +1,18 @@
-import { Css, Template } from '../models';
+import { ClassName, Css, Template } from '../models';
 import { componentWithJs } from './componentWithJs';
 import { componentWithTsx } from './componentWithTsx';
 
 interface TemplateProps {
   component: string;
   type: Template;
   cssType: Css;
+  className: ClassName;
 }
 
-export const templateComponent = ({ component, type, cssType }: TemplateProps) => {
+export const templateComponent = ({ component, type, cssType, className }: TemplateProps) => {
   const fun = type === 'react' ? componentWithJs : componentWithTsx;
 
-  return fun(component, cssType);
+  return fun(component, cssType, className);
 };
 
 export const templateCSS = `.container {
@@ -21,7 +22,7 @@ export const templateCSS = `.container {
 export const templateIndexComponent = ({
   component,
   type,
-}: Omit<TemplateProps, 'cssType'>) => {
+}: Omit<TemplateProps, 'cssType' | 'className'>) => {
   if (type === 'react') {
     return `export { default as ${component} } from './${component}'
 `;

src/templates/componentWithJs.ts

@@ -1,8 +1,8 @@
-import { Css } from '../models';
+import { ClassName, Css } from '../models';
 
-export const componentWithJs = (componentName: string, type: Css) => {
+export const componentWithJs = (componentName: string, type: Css, className: ClassName) => {
   return `import { forwardRef } from 'react'
-import cn from 'classnames'
+import cn from '${className}'
 
 ${
   type === 'module'

src/templates/componentWithTsx.ts

@@ -1,29 +1,27 @@
-import { Css } from '../models';
+import { ClassName, Css } from '../models';
 
-export const componentWithTsx = (componentName: string, type: Css) => {
-  return `import { FC, DetailedHTMLProps, HTMLAttributes, forwardRef } from 'react';
-import cn from 'classnames';
+export const componentWithTsx = (componentName: string, type: Css, className: ClassName) => {
+  return `import { FC, ComponentProps, forwardRef } from 'react';
+import ${className} from '${className}';
 
-${
-  type === 'module'
-    ? `import s from './${componentName}.module.css'`
-    : `import './${componentName}.css'`
-}
-  
-interface ${componentName}Props extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  //
+import ${type === 'module' ? `s from './${componentName}.module.css'` : `'./${componentName}.css'`}
+
+type PrimitiveProps = Omit<ComponentProps<'div'>, 'ref'>
+
+interface ${componentName}Props extends PrimitiveProps {
+  // your props
 }
-  
+
 const ${componentName} = forwardRef<HTMLDivElement, ${componentName}Props>(
   ({ className, children, ...props }, ref) => {
     return (
-      <div ref={ref} className={cn(s.container, className)} {...props}>
+      <div ref={ref} className={${className}(s.container, className)} {...props}>
         {children}
       </div>
     );
   }
 ) as FC<${componentName}Props>;
-  
+
 export default ${componentName};
 export type { ${componentName}Props }
 

src/templates/pages/withJs.ts

@@ -11,7 +11,5 @@ export const withJs = ({ name }: Props) => {
 `;
 };
 
-export const indexWithJs = ({
-  name,
-}: Props) => `export { default as ${name} } from './${name}';
+export const indexWithJs = ({ name }: Props) => `export { default as ${name} } from './${name}';
 `;

src/templates/pages/withTs.ts

@@ -11,7 +11,5 @@ export const withTs = ({ name }: Props) => {
 `;
 };
 
-export const indexWithTs = ({
-  name,
-}: Props) => `export { default as ${name} } from './${name}';
+export const indexWithTs = ({ name }: Props) => `export { default as ${name} } from './${name}';
 `;