alex-dishen/moris

Moris

Moris is a configurable npm package featuring a user-friendly CLI for effortless React component creation. It streamlines the process with templates, scaffolding options, and code consistency, boosting productivity in React development.

Installation

npm

$ npm i moris
or
$ npm i -g moris

yarn

$ yarn add moris
or
$ yarn global add moris

CLI Usage

🚨 Note:

• If you installed package locally use it with npx before each command: npx moris c component Example

• If the package is installed globally then use it without npx: moris create c Example

Commands

Command	Alias	Default	Usage	Description
create component	c c		moris c c Example	Command to tell Moris to create a component
Options
--path	-p	src/components	moris c c Example -p src/pages	Optional argument that is used to specify a path you want a component to be created at
--size	-s	s	moris c c Example -s l	Optional argument that is used to specify a size of the component. xs - index.tsx, styles.ts. s - index.tsx, styles.ts, types.ts. m - index.tsx, styles.ts, types.ts, useExample.ts. l - index.tsx, styles.ts, types.ts, useExample.ts, constants.ts xl - index.tsx, styles.ts, types.ts, useExample.ts, constants.ts, helpers.ts

Default files

If you run command moris c c Example -s xl such folder structure and file contents will be created

src
└─ components
    └─ Example
      ├── index.tsx
      ├── styles.ts
      ├── useExample.ts
      ├── types.ts
      └── constants.ts

// index.tsx 

import { useExample } from './useExample';
import { ExampleProps } from './types';
import { ExampleWrapper } from './styles';

const Example = ({}: ExampleProps) => {
  useExample();

  return <ExampleWrapper></ExampleWrapper>;
};

export default Example;

// styles.ts

import styled from 'styled-components';

export const ExampleWrapper = styled.div``;

// useExample.ts

import { useState, useEffect } from 'react';

export const useExample = () => {};

// types.ts

export type ExampleProps = {};

Configuration file

To change Moris default settings create a file moris.json at the root of your project

Usage

moris.json

{
    "useAbsolutePath": "-",
    "indexContent": "import React from 'react'\nimport ${name}Wrapper from '${path}${name}'\n",
    "stylesContent": "import styled from 'styled'\n export const ${name}Wrapper = styled.div``\n"
}

Arguments

Argument	Usage	Options
useAbsolutePath	"useAbsolutePath": "src"	- path without any suffixes, anything you want any suffix you prefer
defaultComponentSet	"defaultComponentSet": "l"	xs s m l xl
defaultPath	"defaultPath": "src/features"
indexContent	"indexContent": "import React from 'react'\n"
stylesContent	"stylesContent": "import styled from 'styled'\n"
hookContent	"hookContent": "import { useState, useEffect } from 'react'\n"
typesContent	"typesContent": "import AnotherType from 'types/Example'"
constantsContent	"constantsContent": "import AnotherConstant from 'constants/Example'"

Variables

Variable	Usage	Description
${name}	export const ${name}Wrapper = styled.div``	Uses a dynamic name that you pass when creating a component instead of a statically generated
${path}	import ${name}Wrapper from '${path}${name}'	Uses a dynamic path that you pass when creating a component instead of a statically generated