Overview

This library is for creating reusable, testable components and email templates using React.

Develop

Setup

1. Open a terminal
2. Clone git repository
3. Go into repository dir
4. Install root dependencies npm install
5. Start storybook npm run storybook or npm start

Storybook

Check this page to read more about storybook: https://storybook.js.org/

Folder structure

• .circleci: CircleCI configuration.
• .storybook: Storybook configuration.
• src
  • _snapshots_: Snapshot files for test.
  • components: Small components like header, footer, dashboard.
  • customComponents: Email layout components.
  • emailComponents: Rendered HTML email files.
  • emailStrings: String files of rendered HTML emails from emailComponents folder. This is the final result that will be returned.

Dependencies

• react-html-email
• check-prop-types

Adding a new email

1. Create a folder and create a new index.js and stories.js file in EmailComponents folder. If there's any components already created in components folder, use them. Or create your own component. Main style guide and variables are in the /styleGuide.js file.
2. Once you created email, import it from EmailStrings folder.
3. Create an test file in the same folder.
4. Add an export function to src/index.js file.
5. npm test to check if it's all good.

Test

• Functional test: npm test

Publish

1. npm version major | minor | patch to update version.
2. git push --tags and then the CircleCI will kindly test, build, and publish the package for you.
3. If you didn't receive any error message, then hooray! Skull your beer! 🍺

Usage

1. Install npm package via npm: npm install @busy-bee/emails
2. Import an email rendering function import { stringOfResetPasswordEmail } from @busy-bee/emails
3. Send appropriate data when you execute a function. Props are mandatory, Options are optional.
4. If the data/props is appropriate, you'll get a string of rendered email as return. Otherwise, you're get a ruthless error as return.

Test email rendering https://testi.at

Examples

import { stringOfResetPasswordEmail } from @busy-bee/emails;
const props = {
	firstName:  'Caroline',
	passwordToken: 'https://resetpassword.com/'
};

stringOfResetPasswordEmail(props);