ahoendgen/plop-generator-react-atomic-component

An opinionated plop generator for typescript atomic react components.

plop generator react atomic component

An opinionated plop generator for typescript atomic react components.

Installation

This package is hosted on npm.

npm install --save-dev @a9g/plop-generator-react-atomic-component

Usage

First, create two interfaces to include classnames or styles (depending on if you are using react-native or not) to include them into your props. h

import { StyleProp, ViewStyle } from "react-native";

export interface PropsWithClassName {
  className?: string;
}

export interface PropsWithStyle {
  style?: StyleProp<ViewStyle>;
}

Afterwards, be sure you have plop installed. Then, add the following lines to your plopfile.js.

const atomicGenerator =
  require("@a9g/plop-generator-react-atomic-component").default;

const defaultConfig = {
  createIndex: true,
  functional: true,
  basePath: "src/ui/components",
  withClassnameInterfaceImportPath: "/framework/ui", //make sure to configure this path
  withStyleInterfaceImportPath: "/framework/ui",
  tests: true,
  stories: true,
  styledComponents: true,
  useNative: false, // native and macro can't be used together
  useMacro: false,
  typeFormatter: "pascaleCase",
  fileNameFormatter: "pascaleCase",
  dirNameFormatter: "pascaleCase"
};

atomicGenerator(plop, defaultConfig);

so your plopfile.js could look e.g. like this

const atomicGenerator =
  require("@a9g/plop-generator-react-atomic-component").default;

const defaultConfig = {
  createIndex: true,
  functional: true,
  basePath: "src/ui/components",
  withClassnameInterfaceImportPath: "/framework/ui", //make sure to configure this path
  withStyleInterfaceImportPath: "/framework/ui",
  tests: true,
  stories: true,
  styledComponents: true,
  useNative: false,
  useMacro: false,
  typeFormatter: "pascaleCase",
  fileNameFormatter: "pascaleCase",
  dirNameFormatter: "pascaleCase"
};

const config = plop => {
  atomicGenerator(plop, defaultConfig);
};

module.exports = config;

Now you'll have access to the atomic-component generator as shown below.

plop atomic-component

src
└── ui
   └── components
      └── $Type
         └── $ComponentName
            ├── $ComponentName.tsx
            ├── $ComponentName.test.tsx (optional)
            ├── $ComponentName.stories.tsx (optional)
            ├── $ComponentName.styles.tsx (optional)
            └── index.tsx (optional)

Configuration

export interface GeneratorConfig {
  choices?: string[]; //modify the default atomic naming choices eg. ["Atom", "Molecule", "Organism", "Template", "Page"],

  createIndex: boolean; //create an index file
  functional: boolean; //should the template be functional or class based?
  basePath: string; //where do you want to store the generated files
  withClassnameInterfaceImportPath: string; //from where can we import the classname interface
  withStyleInterfaceImportPath: string; //from where can we import the styles interface
  tests: boolean; //create test files
  stories: boolean; //create story files
  styledComponents: boolean; //use styled components
  useNative: boolean; //use react native
  useMacro: boolean; // use styled components macro import. native and macro can't be used together
  templateIndex?: string; //path to the corresponding files, need to be an absolute path
  templateStory?: string;
  templateStyles?: string;
  templateTest?: string;
  templateComponentFunctional?: string;
  templateComponentClassBased?: string;
  typeFormatter?: FileNameFormatters;
  fileNameFormatter?: FileNameFormatters;
  dirNameFormatter?: FileNameFormatters;
}

FileNameFormatters

export enum FileNameFormatters {
  "pascalCase" = "pascalCase",
  "camelCase" = "camelCase",
  "kebabCase" = "kebabCase",
  "snakeCase" = "snakeCase",
  "lowerCase" = "lowerCase"
}

Questions

Report bugs or provide feedback by filing issues

License

MIT see license.md