Awesome

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