Skip to content

Commit aae13a6

Browse files
niloysikdarniloysikdar
authoredAug 6, 2022
docs(example): add example app (#69)
* docs(example): add example app Add an example folder with the example of how to use our package Resolves #59 Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com> * docs(example): enhance example Enhance example for both cjs and esm by providing separate directories with detailed README.md files Resolves #59 Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>
1 parent 3b1a86a commit aae13a6

15 files changed

+162
-3
lines changed
 

‎.eslintignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ node_modules/
22
public/
33
build/
44
dist/
5-
docs/
5+
docs/
6+
example/

‎.gitignore

+4-1
Original file line numberDiff line numberDiff line change
@@ -107,4 +107,7 @@ dist
107107
.vscode/
108108

109109
# Lock file
110-
package-lock.json
110+
package-lock.json
111+
112+
# Example lib folder
113+
example/lib/

‎.prettierignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ public/
33
build/
44
dist/
55
docs/
6-
CHANGELOG.md
6+
CHANGELOG.md
7+
example/lib/

‎example/README.md

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# @leopardslab/react-email Example
2+
3+
### Running the Example
4+
5+
- After installing the dependencies, you can create your Email Layout using the existing components.
6+
7+
```jsx
8+
import { Email, Section, Column, Typography } from '@leopardslab/react-email';
9+
10+
export const HelloEmail = ({ name }: { name: string }) => {
11+
return (
12+
<Email>
13+
<Section>
14+
<Column>
15+
<Typography variant="h2">Hello {name}</Typography>
16+
</Column>
17+
</Section>
18+
</Email>
19+
);
20+
};
21+
```
22+
23+
- If you're using TypeScript to build the React-based Email Layout, then you'll also need to compile the code to JavaScript using
24+
25+
```bash
26+
yarn build
27+
```
28+
29+
or
30+
31+
```bash
32+
npm run build
33+
```
34+
35+
It will create both the `CommonJS(CJS)` and `ECMAScript Modules(ESM)` versions of the Email Layout inside the `lib` directory.
36+
37+
- You can import the Layout inside the Node.js environment and use the `generateEmail`, `generateTextEmail` methods. The examples for both the `CommonJS(CJS)` and `ECMAScript Modules(ESM)` versions are inside the **_[generate-cjs](https://github.com/leopardslab/react-email/tree/main/example/generate-cjs)_** and **_[generate-esm](https://github.com/leopardslab/react-email/tree/main/example/generate-esm)_** directories respectively.
38+
39+
- You can run the commands inside each directory to execute the utility methods.
40+
41+
```bash
42+
yarn generate
43+
```
44+
45+
or
46+
47+
```bash
48+
node index.js
49+
```

‎example/generate-cjs/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
### This directory shows the example on how to use the `generateEmail`, `generateTextEmail` methods from the [@leopardslab/react-email](https://www.npmjs.com/package/@leopardslab/react-email) library in Node.js with `CommonJS(CJS)` pattern ( i.e. `"type": "commonjs"` in `package.json` with `require` syntax ).

‎example/generate-cjs/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const { generateEmail, generateTextEmail } = require('@leopardslab/react-email');
2+
3+
const { HelloEmail } = require('../lib/cjs');
4+
5+
const htmlEmail = generateEmail(HelloEmail({ name: 'John' }));
6+
console.log(`HTML email: ${htmlEmail}`);
7+
8+
const textEmail = generateTextEmail(HelloEmail({ name: 'John' }));
9+
console.log(`Text email: ${textEmail}`);

‎example/generate-cjs/package.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "generate-cjs",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"type": "commonjs",
6+
"main": "index.js",
7+
"scripts": {
8+
"generate": "node index.js"
9+
}
10+
}

‎example/generate-esm/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
### This directory shows the example on how to use the `generateEmail`, `generateTextEmail` methods from the [@leopardslab/react-email](https://www.npmjs.com/package/@leopardslab/react-email) library in Node.js with `ECMAScript Modules(ESM)` pattern ( i.e. `"type": "module",` in `package.json` with `import/export` syntax ).

‎example/generate-esm/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log('This will be used with ECMAScript Modules');

‎example/generate-esm/package.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "generate-esm",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"type": "module",
6+
"main": "index.js",
7+
"scripts": {
8+
"generate": "node index.js"
9+
}
10+
}

‎example/package.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "react-email-example",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"scripts": {
6+
"prepare": "yarn build",
7+
"build": "rm -rf lib && yarn build:esm && yarn build:cjs",
8+
"build:esm": "tsc -p tsconfig.json",
9+
"build:cjs": "tsc -p tsconfig.json --module commonjs --outDir lib/cjs --target es2015"
10+
},
11+
"dependencies": {
12+
"@leopardslab/react-email": "file:leopardslab-react-email-1.7.0.tgz"
13+
},
14+
"devDependencies": {
15+
"typescript": "^4.7.4"
16+
}
17+
}

‎example/src/Layouts/HelloEmail.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Email, Section, Column, Typography } from '@leopardslab/react-email';
2+
3+
export const HelloEmail = ({ name }: { name: string }) => {
4+
return (
5+
<Email>
6+
<Section>
7+
<Column>
8+
<Typography variant="h2">Hello {name}</Typography>
9+
</Column>
10+
</Section>
11+
</Email>
12+
);
13+
};

‎example/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { HelloEmail } from './Layouts/HelloEmail';

‎example/tsconfig.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"compilerOptions": {
3+
"outDir": "lib/esm",
4+
"module": "ESNext",
5+
"target": "ESNext",
6+
"lib": ["ES6", "DOM", "ESNext"],
7+
"jsx": "react-jsx",
8+
"declaration": true,
9+
"moduleResolution": "node",
10+
"noUnusedLocals": true,
11+
"noUnusedParameters": true,
12+
"esModuleInterop": true,
13+
"noImplicitReturns": true,
14+
"noImplicitThis": true,
15+
"noImplicitAny": true,
16+
"strictNullChecks": true,
17+
"suppressImplicitAnyIndexErrors": true,
18+
"allowSyntheticDefaultImports": true
19+
},
20+
"include": ["src/**/*"],
21+
"exclude": ["node_modules", "lib"]
22+
}

‎example/yarn.lock

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+
5+
"@leopardslab/react-email@file:leopardslab-react-email-1.7.0.tgz":
6+
version "1.7.0"
7+
resolved "file:leopardslab-react-email-1.7.0.tgz"
8+
integrity sha512-sQbKH/PeRRDlozw133EM7IfaqQdtVIWCygQ52TO2QJONdtwWlwNq+IH8J3d07NMRuSwLPJwQP8yjDkJnk3dbiQ==
9+
dependencies:
10+
textversionjs "^1.1.3"
11+
12+
textversionjs@^1.1.3:
13+
version "1.1.3"
14+
resolved "https://registry.npmjs.org/textversionjs/-/textversionjs-1.1.3.tgz"
15+
integrity sha512-yZbBK7+1KRkgTJFOeIkCbQSZ+jR9ojDO/KrUKN3xEA6hA/DCMJ+aMWqjZ0rpxBJDjesbP795P5NEw+j3NnWJtA==
16+
17+
typescript@^4.7.4:
18+
version "4.7.4"
19+
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
20+
integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==

0 commit comments

Comments
 (0)