diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml deleted file mode 100644 index 6d32d10a..00000000 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ /dev/null @@ -1,20 +0,0 @@ -body: - - type: textarea - attributes: - label: Summary - description: What do you need help with? - validations: - required: true - - type: textarea - attributes: - label: Additional information - description: Any code snippets, error messages, or dependency details that may be related? - render: js - validations: - required: false - - type: input - attributes: - label: Example - description: A link to a minimal reproduction is helpful for collaborative debugging! - validations: - required: false diff --git a/.github/DISCUSSION_TEMPLATE/ideas.yml b/.github/DISCUSSION_TEMPLATE/ideas.yml deleted file mode 100644 index 3c81f93e..00000000 --- a/.github/DISCUSSION_TEMPLATE/ideas.yml +++ /dev/null @@ -1,23 +0,0 @@ -body: - - type: textarea - attributes: - label: Goals - description: Short list of what the feature request aims to address? - value: | - 1. - 2. - 3. - validations: - required: true - - type: textarea - attributes: - label: Background - description: Discuss prior art, why do you think this feature is needed? Are there current alternatives? - validations: - required: true - - type: textarea - attributes: - label: Proposal - description: How should this feature be implemented? Are you interested in contributing? - validations: - required: true diff --git a/.github/ISSUE_TEMPLATE/1.bug_report.yml b/.github/ISSUE_TEMPLATE/1.bug_report.yml deleted file mode 100644 index 9b28401b..00000000 --- a/.github/ISSUE_TEMPLATE/1.bug_report.yml +++ /dev/null @@ -1,69 +0,0 @@ -name: Bug Report -description: Create a bug report for React Email -labels: ['Type: Bug'] -body: - - type: textarea - attributes: - label: Describe the Bug - description: A clear and concise description of what the bug is. - validations: - required: true - - type: dropdown - attributes: - label: Which package is affected (leave empty if unsure) - multiple: true - options: - - '@react-email/body' - - '@react-email/button' - - '@react-email/column' - - '@react-email/components' - - '@react-email/container' - - '@react-email/font' - - '@react-email/head' - - '@react-email/heading' - - '@react-email/hr' - - '@react-email/html' - - '@react-email/img' - - '@react-email/link' - - '@react-email/preview' - - '@react-email/render' - - '@react-email/row' - - '@react-email/section' - - '@react-email/tailwind' - - '@react-email/text' - - 'client' - - 'create-email' - - 'demo' - - 'docs' - - 'examples' - - 'react-email' - - 'web' - - type: input - attributes: - label: Link to the code that reproduces this issue - description: | - A link to a GitHub repository minimal reproduction. A minimal reproduction code is really helpful to understand the issue. - validations: - required: true - - type: textarea - attributes: - label: To Reproduce - description: Steps to reproduce the behavior, please provide a clear description of how to reproduce the issue, based on the linked minimal reproduction. Screenshots can be provided in the issue body below. If using code blocks, make sure that [syntax highlighting is correct](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting) and double check that the rendered preview is not broken. - validations: - required: true - - type: textarea - attributes: - label: Expected Behavior - description: A clear and concise description of what you expected to happen. - validations: - required: true - - type: markdown - attributes: - value: Before posting the issue go through the steps you've written down to make sure the steps provided are detailed and clear. - - type: markdown - attributes: - value: Contributors should be able to follow the steps provided in order to reproduce the bug. - - type: input - attributes: - label: What's your node version? (if relevant) - description: 'Please specify the exact version.' diff --git a/.github/ISSUE_TEMPLATE/BUG.md b/.github/ISSUE_TEMPLATE/BUG.md new file mode 100644 index 00000000..4dc8ff79 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/BUG.md @@ -0,0 +1,53 @@ +--- +name: 🐞 Bug Report +about: Something went awry and you'd like to tell us about it. + +--- + + + +- Component or Package Name: +- Component or Package Version: +- `@jsxp-email/cli` Version?: +- Operating System (or Browser): +- Node Version: +- Link to reproduction _(⚠️ read below)_: + + + + +### Expected Behavior + + +### Actual Behavior + + +### Additional Information + + diff --git a/.github/ISSUE_TEMPLATE/DOCS.md b/.github/ISSUE_TEMPLATE/DOCS.md new file mode 100644 index 00000000..20596ff3 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/DOCS.md @@ -0,0 +1,35 @@ +--- +name: πŸ“š Documentation +about: Are the docs lacking or missing something? Do they need some new πŸ”₯ hotness? Tell us here. + +--- + + + +- Component or Package Name: +- Component or Package Version: + +Documentation Is: + + + +- [ ] Missing +- [ ] Needed +- [ ] Confusing +- [ ] Not Sure? + +### Please Explain in Detail... + + +### Your Proposal for Changes diff --git a/.github/ISSUE_TEMPLATE/FEATURE.md b/.github/ISSUE_TEMPLATE/FEATURE.md new file mode 100644 index 00000000..dd114cca --- /dev/null +++ b/.github/ISSUE_TEMPLATE/FEATURE.md @@ -0,0 +1,26 @@ +--- +name: ✨ Feature Request +about: Suggest an idea for this project + +--- + + + +- Component or Package Name: +- Component or Package Version: + +### Feature Use Case + + +### Feature Proposal diff --git a/.github/ISSUE_TEMPLATE/MODIFICATION.md b/.github/ISSUE_TEMPLATE/MODIFICATION.md new file mode 100644 index 00000000..6902fad6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/MODIFICATION.md @@ -0,0 +1,29 @@ +--- +name: πŸ”§ Modification Request +about: Would you like something work differently? Have an alternative approach? This is the template for you. + +--- + + + +- Component or Package Name: +- Component or Package Version: + +### Expected Behavior / Situation + + +### Actual Behavior / Situation + + +### Modification Proposal diff --git a/.github/ISSUE_TEMPLATE/NEW_COMPONENT.md b/.github/ISSUE_TEMPLATE/NEW_COMPONENT.md new file mode 100644 index 00000000..de6e6913 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/NEW_COMPONENT.md @@ -0,0 +1,46 @@ +--- +name: πŸ”Œ New Component +about: Request a new Component or Tools + +--- + + + +Request Checklist: + + +- [ ] I have searched https://npmjs.com/ before opening this issue +- [ ] I have searched https://jsx.email/docs before opening this issue + +### New Component/Tool Use Case + + + +### New Component/Tool Proposal + + diff --git a/.github/ISSUE_TEMPLATE/SUPPORT.md b/.github/ISSUE_TEMPLATE/SUPPORT.md new file mode 100644 index 00000000..c4531eba --- /dev/null +++ b/.github/ISSUE_TEMPLATE/SUPPORT.md @@ -0,0 +1,13 @@ +--- +name: πŸ†˜ Support, Help, and Advice +about: πŸ‘‰πŸ½ Need help or tech support? Please don't open an issue! Head to https://discord.gg/E9ZGqYRZ or start a Discussion https://github.com/shellscape/jsx-email/discussions + +--- + +Hey there! If you need help or tech support then this is not the place to +ask. Please head to our [Discord](https://discord.gg/E9ZGqYRZ) +instead or start a Discussion https://github.com/shellscape/jsx-email/discussions. + +If you arrived here because you think JSX email's documentation is unclear, +insufficient or wrong, please consider creating an issue for the documentation +instead. diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml deleted file mode 100644 index dfe2d68d..00000000 --- a/.github/ISSUE_TEMPLATE/config.yml +++ /dev/null @@ -1,8 +0,0 @@ -blank_issues_enabled: false -contact_links: - - name: Ask a question - url: https://github.com/resendlabs/react-email/discussions - about: Ask questions and discuss with other community members - - name: Feature request - url: https://github.com/resendlabs/react-email/discussions/new?category=ideas - about: Feature requests should be opened as discussions diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 353c2728..c2976c29 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,11 +1,54 @@ - + +## Component / Package Name: + +This PR contains: + +- [ ] bugfix +- [ ] feature +- [ ] refactor +- [ ] documentation +- [ ] other + +Are tests included? + +- [ ] yes (_bugfixes and features will not be merged without tests_) +- [ ] no + +Breaking Changes? + +- [ ] yes (_breaking changes will not be merged unless absolutely necessary_) +- [ ] no + +If yes, please include "BREAKING CHANGES:" in the first commit message body, followed by a description of what is breaking. + +List any relevant issue numbers: + + + +### Description + + diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index e666d45d..458be228 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -28,7 +28,7 @@ jobs: - name: Set Git Config run: | git config pull.rebase false - git config --global user.email "release-workflow@rollup.dev" + git config --global user.email "release-workflow@jsx.email" git config --global user.name "Release Workflow" git remote set-url origin https://github.com/${{ github.repository }} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bd421baa..fc17c9aa 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,23 +1,66 @@ -## Contributing -Wanna help? Awesome! There are many ways you can contribute. +## Contributing in this repository -## Improving the docs -Documentation is extremely important and takes a fair deal of time and effort to write and keep updated. Everything is written in Markdown to facilitate the process of contributing. +We πŸ’› contributions! The rules for contributing to this org are few: -## Building new components -We’re open to expanding the catalog of components to cover as many use cases as possible. We suggest to open an issue for discussion first to make sure your idea is aligned with the project goals. +1. Don't be a jerk +1. Search issues before opening a new one +1. Lint and run tests locally before submitting a PR +1. Adhere to the code style the project has chosen + +## Repo Info + +The `jsx-email` repository is a [Monorepo](https://en.wikipedia.org/wiki/Monorepo) that uses two primary tools; [`pnpm`](https://pnpm.io/) and [`Moon`](https://moonrepo.dev/). `pnpm` is used for package management and [workspace management](https://pnpm.io/workspaces) of the repo. `Moon` is used as our task runner for the repo - all commands to work with the packages and code in the repo go through `Moon`. We also assume that you have Node.js installed, because this is a project that leverages React. + +### Getting Started + +If you're new to either `pnpm` or `Moon` you'll want to run the `bootstrap.sh` script first. It will install everything you'll need to get started, and bootstrap your environment: + +```console +$ ./shared/bootstrap.sh +``` + +Next we'll want to get dependencies installed, and get everything built. _(Note: One of the benefits of `Moon` is that it uses intelligent caching to assert that dependencies are always up to date before running any command. We don't techincally have to install dependencies first)_: + +```console +$ pnpm install +``` + +Build all of the packages in the repo: + +```console +$ moon run repo:build.packages +``` + +And build the cli: + +```console +$ moon run cli:build +``` + +## Before Committing + +1. Use at least Node.js v18.0.0 or higher. [NVM](https://github.com/creationix/nvm) can be handy for switching between Node versions. +1. Lint your changes via `moon run repo:lint`. Fix any errors and warnings before committing. +1. Test your changes via `moon run repo:test`. Only Pull Requests with passing tests will be accepted. + +## Submitting Code + +Any code change should be submitted as a pull request. Our guidelines for Pull Requests: + +- Please fill in our template in its entirety. Please don't reformat it or modify it +- The description should explain what the code does and give steps to execute it +- The pull request should also contain tests +- Before submitting your Pull Request, please lint your changes by running `moon run repo:lint` in the root directory +- If any checks fail for your Pull Request, please resolve them. Always feel free to ask for help if unable to resolve issues with checks + +## Code Review Process + +The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge. + +It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you? Does it resolve any known Github issues? Adding a line "resolves #" (e.g. "resolves #23") to the description of your pull request or of a specific commit will automatically close this issue once the pull request is merged. -## Opening issues -Open an issue to report bugs or to propose new features. -**- Reporting bugs:** -describe the bug as clearly as you can, including steps to reproduce, what happened and what you were expecting to happen. Also include browser version, OS and other related software’s (npm, Node.js, etc) versions when applicable. -**- Suggesting features:** explain the proposed feature, what it should do, why it is useful, how users should use it. Give us as much info as possible so it will be easier to discuss, access and implement the proposed feature. When you’re unsure about a certain aspect of the feature, feel free to leave it open for others to discuss and find an appropriate solution. -## Proposing pull requests -Pull requests are very welcome. Note that if you are going to propose drastic changes, be sure to open an issue for discussion first, to make sure that your PR will be accepted before you spend effort coding it. -**- Forking the repository:** clone it locally and create a branch for your proposed bug fix or new feature. Avoid working directly on the main branch. -**- Making changes:** implement your bug fix or feature, write tests to cover it and make sure all tests are passing. Then commit your changes, push your bug fix/feature branch to the origin (your forked repo) and open a pull request to the upstream (the repository you originally forked)β€˜s main branch. diff --git a/README.md b/README.md index e7a538fa..670789ff 100644 --- a/README.md +++ b/README.md @@ -1,135 +1,98 @@ -![React email cover](https://react.email/static/covers/react-email.png) -
React Email
-
The next generation of writing emails.
High-quality, unstyled components for creating emails.
-
-
-Website - Β· -GitHub - Β· -Discord -
- -## Fork Information - -This is a soft fork of `@react-email`. The information below is accurate, however when using this fork, substitute `@jsx-email` for `@react-email` in instructions. - -Users can expect that this project is in line with the upstream project. The intent of this project to provide an up to date channel, merging PRs from the upstream project quickly and rolling out fixes and new features faster than the `react-email` project can currently tackle. - -## Introduction - -A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. -It reduces the pain of coding responsive emails with dark mode support. It also takes care of inconsistencies between Gmail, Outlook, and other email clients for you. - -## Why +[npm]: https://img.shields.io/npm/v/@jsx-email/html +[npm-url]: https://www.npmjs.com/package/@jsx-email/html -We believe that email is an extremely important medium for people to communicate. However, we need to stop developing emails like 2010, and rethink how email can be done in 2022 and beyond. Email development needs a revamp. A renovation. Modernized for the way we build web apps today. +[![npm][npm]][npm-url] +[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com) -## Install - -Install one of the components from your command line. - -#### With yarn - -```sh -yarn add @react-email/button -E -``` +
+ JSX email

+
-#### With npm +
+ JSX email + JSX email provides a set of React components and helpers for building delightful and responsive email templates, compatible with modern email clients. +

+ The components handle the heavy lifting of compatibility and client insonsistency so designers and developers can focus on building impactful and engaging templates. +
+
-```sh -npm install @react-email/button -E -``` +## Getting Started -## Getting started +Everything to know about the components, props, and usage is available within our [Documentation Site](https://jsx.email/docs). Please give that a read and let us know if there's anything we can help with. -Add the component to your email template. Include styles where needed. +## Requirements -```jsx -import { Button } from '@react-email/button'; +The packages and components that make up JSX email require an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+. -const Email = () => { - return ( - - ); -}; -``` +
+
+ JSX email
+ Compatible with all modern email services +

+
## Components -A set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup. - -- [Html](https://github.com/resendlabs/react-email/tree/main/packages/html) -- [Head](https://github.com/resendlabs/react-email/tree/main/packages/head) -- [Heading](https://github.com/resendlabs/react-email/tree/main/packages/heading) -- [Button](https://github.com/resendlabs/react-email/tree/main/packages/button) -- [Link](https://github.com/resendlabs/react-email/tree/main/packages/link) -- [Image](https://github.com/resendlabs/react-email/tree/main/packages/img) -- [Divider](https://github.com/resendlabs/react-email/tree/main/packages/hr) -- [Paragraph](https://github.com/resendlabs/react-email/tree/main/packages/text) -- [Container](https://github.com/resendlabs/react-email/tree/main/packages/container) -- [Preview](https://github.com/resendlabs/react-email/tree/main/packages/preview) -- [Body](https://github.com/resendlabs/react-email/tree/main/packages/body) -- [Column](https://github.com/resendlabs/react-email/tree/main/packages/column) -- [Section](https://github.com/resendlabs/react-email/tree/main/packages/section) -- [Font](https://github.com/resendlabs/react-email/tree/main/packages/font) - -## Integrations - -Emails built with React Email can be converted into HTML and sent using any email service provider. Here are some examples: - -- [Resend](https://github.com/resendlabs/react-email/tree/main/examples/resend) -- [Nodemailer](https://github.com/resendlabs/react-email/tree/main/examples/nodemailer) -- [SendGrid](https://github.com/resendlabs/react-email/tree/main/examples/sendgrid) -- [Postmark](https://github.com/resendlabs/react-email/tree/main/examples/postmark) -- [AWS SES](https://github.com/resendlabs/react-email/tree/main/examples/aws-ses) - -## Support - -All components were tested using the most popular email clients. - -| Gmail logo | Apple Mail | Outlook logo | Yahoo! Mail logo | HEY logo | Superhuman logo | -| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -| Gmail βœ” | Apple Mail βœ” | Outlook βœ” | Yahoo! Mail βœ” | HEY βœ” | Superhuman βœ” | +A list of available components found here: + +| | | +| ------------------------------------| ----------------------------------------------------------------------------------------- | +| [body](packages/body) | | +| [button](packages/button) | | +| [column](packages/column) | | +| [container](packages/container) | | +| [font](packages/font) | | +| [head](packages/head) | | +| [heading](packages/heading) | | +| [hr](packages/hr) | | +| [html](packages/html) | | +| [image](packages/image) | | +| [link](packages/link) | | +| [markdown](packages/markdown) | | +| [preview](packages/preview) | | +| [row](packages/row) | | +| [section](packages/section) | | +| [tailwind](packages/tailwind) | | +| [text](packages/text) | | +| | | + +## Helper Packages + +A list of available helper packages found here: + +| | | +| ----------------------------------- | ---------------------------------------------------------- | +| [all](packages/all) | A package containing all available JSX email components | +| [cli](packages/cli) | A CLI for working with Email Templates made with jsx-email | +| [render](packages/render) | Render JSX email components to HTML email | +| | | + +## Service Integrations + +Email built and rendered with JSX email can be used with any email provider that provides an API for sending email as a `String`. +This includes [AWS SES](https://aws.amazon.com/ses), [Loops](https://loops.so), [Nodemailer](https://nodemailer.com), [Postmark](https://postmarkapp.com),[Resend](https://resend.com), and [SendGrid](https://sendgrid.com). + + ## Contributing, Working With This Repo -The `jsx-email` repository is a [Monorepo](https://en.wikipedia.org/wiki/Monorepo) that uses two primary tools; [`pnpm`](https://pnpm.io/) and [`Moon`](https://moonrepo.dev/). `pnpm` is used for package management and [workspace management](https://pnpm.io/workspaces) of the repo. `Moon` is used as our task runner for the repo - all commands to work with the packages and code in the repo go through `Moon`. We also assume that you have Node.js installed, because this is a project that leverages React. - -### Getting Started - -If you're new to either `pnpm` or `Moon` you'll want to run the `bootstrap.sh` script first. It will install everything you'll need to get started, and bootstrap your environment: +We πŸ’› contributions! After all, this is a community-driven project. We have no corporate sponsorship or backing. The maintainers and users keep this project going! -```console -$ ./shared/bootstrap.sh -``` +Please check out our [Contribution Guide](./CONTRIBUTING.md). -Next we'll want to get dependencies installed, and get everything built. _(Note: One of the benefits of `Moon` is that it uses intelligent caching to assert that dependencies are always up to date before running any command. We don't techincally have to install dependencies first)_: - -```console -$ pnpm install -``` - -Build all of the packages in the repo: - -```console -$ moon run jsx-email:build.packages -``` - -And build the cli: - -```console -$ moon run cli:build -``` +## Attribution 🧑 -Read more on our [Contribution Guide](https://react.email/docs/contributing). +This project was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)). -## Attribution 🧑 +`JSX email` is a fork of `react-email`. The goals of this project are to provide similar benefits, with an improved focus on Developer Experience, maintenance, fast improvements and fast releases. Improvements over `react-email` include: -This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)). +- Smoother Developer Experience (DX) +- Better Command Line tools +- Less complex, smoother Preview Server +- Faster improvements and releases +- Community-driven maintenance +- No vendor lock-in for tools. `jsx-email` uses only generic components and tools. ## License diff --git a/assets/brackets.svg b/assets/brackets.svg new file mode 100644 index 00000000..2aefd934 --- /dev/null +++ b/assets/brackets.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/clients.svg b/assets/clients.svg new file mode 100644 index 00000000..127f5bf3 --- /dev/null +++ b/assets/clients.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/npm-header.svg b/assets/npm-header.svg new file mode 100644 index 00000000..72c2efde --- /dev/null +++ b/assets/npm-header.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/all/README.md b/packages/all/README.md new file mode 100644 index 00000000..a2d54418 --- /dev/null +++ b/packages/all/README.md @@ -0,0 +1,55 @@ +[npm]: https://img.shields.io/npm/v/@jsx-email/all +[npm-url]: https://www.npmjs.com/package/@jsx-email/all + +[![npm][npm]][npm-url] +[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com) + +
+ JSX email

+
+ +# @jsx-email/all + +
+ JSX email + A package containing all available JSX email components +
+ +## Requirements + +This packages requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+. + +## Install + +```shell +pnpm add @jsx-email/all + +# We recommend pnpm - https://pnpm.io +# But npm and yarn are supported +# npm add @jsx-email/all +# yarn add @jsx-email/all +``` + + +## Usage + +We recommend using the [../cli](`@jsx-email/cli`) for creating new templates. + +Create an email template file (e.g. `Email.tsx`) and import the component: + +```jsx +import { Heading } from "@jsx-email/all"; + +const Email = () => { + return Lorem ipsum; +}; +``` + + +## Attribution 🧑 + +This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)). + +## License + +[MIT License](./LICENSE.md) diff --git a/packages/components/package.json b/packages/all/package.json similarity index 94% rename from packages/components/package.json rename to packages/all/package.json index a123342b..f7ce04d7 100644 --- a/packages/components/package.json +++ b/packages/all/package.json @@ -1,10 +1,10 @@ { - "name": "@jsx-email/components", + "name": "@jsx-email/all", "version": "0.0.8", "publishConfig": { "access": "public" }, - "description": "All react-email components", + "description": "A package containing all available JSX email components ", "license": "MIT", "repository": { "type": "git", diff --git a/packages/components/src/index.ts b/packages/all/src/index.ts similarity index 100% rename from packages/components/src/index.ts rename to packages/all/src/index.ts diff --git a/packages/body/README.md b/packages/body/README.md new file mode 100644 index 00000000..b1bea334 --- /dev/null +++ b/packages/body/README.md @@ -0,0 +1,72 @@ +[npm]: https://img.shields.io/npm/v/@jsx-email/html +[npm-url]: https://www.npmjs.com/package/@jsx-email/html + +[![npm][npm]][npm-url] +[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com) + +
+ JSX email

+
+ +# @jsx-email/html + +
+ JSX email + A JSX email component for +
+ +## Requirements + +This packages requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+. + +
+
+ JSX email
+ Compatible with all modern email services +

+
+ +## Install + +```shell +$ pnpm add @jsx-email/$1 + +# We recommend pnpm - https://pnpm.io +# But npm and yarn are supported +# npm add @jsx-email/$1 +# yarn add @jsx-email/$1 +``` + +## Usage + +We recommend using the [../cli](`@jsx-email/cli`) for creating new templates. + +Create an email template file (e.g. `Email.tsx`) and import the component: + +```jsx +import { Html } from "@jsx-email/html"; +import { Body } from "@jsx-email/body"; +import { Column } from "@jsx-email/column"; +import { Section } from "@jsx-email/section"; + +const Email = () => { + return ( + + +
+ {/* First column */} + {/* Second column */} +
+ + + ); +}; +``` + +## Attribution 🧑 + +This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)). + +## License + +[MIT License](./LICENSE.md) diff --git a/packages/body/readme.md b/packages/body/readme.md deleted file mode 100644 index 05476d5a..00000000 --- a/packages/body/readme.md +++ /dev/null @@ -1,64 +0,0 @@ -![React Email HTML cover](https://react.email/static/covers/html.png) - -
@react-email/body
-
A React body component to wrap emails.
-
-
-Website - Β· -Documentation - Β· -Twitter -
- -## Install - -Install component from your command line. - -#### With yarn - -```sh -yarn add @react-email/body -E -``` - -#### With npm - -```sh -npm install @react-email/body -E -``` - -## Getting started - -Add the component to your email template. Include styles where needed. - -```jsx -import { Html } from "@jsx-email/html"; -import { Body } from "@jsx-email/body"; -import { Section } from "@jsx-email/section"; -import { Column } from "@jsx-email/section"; - -const Email = () => { - return ( - - -
- {/* First column */} - {/* Second column */} -
- - - ); -}; -``` - -## Support - -This component was tested using the most popular email clients. - -| Gmail logo | Apple Mail | Outlook logo | Yahoo! Mail logo | HEY logo | Superhuman logo | -| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -| Gmail βœ” | Apple Mail βœ” | Outlook βœ” | Yahoo! Mail βœ” | HEY βœ” | Superhuman βœ” | - -## License - -MIT License diff --git a/packages/body/src/body.tsx b/packages/body/src/body.tsx index d5486b06..8ce4b7e0 100644 --- a/packages/body/src/body.tsx +++ b/packages/body/src/body.tsx @@ -5,7 +5,7 @@ type RootProps = React.ComponentPropsWithoutRef<'body'>; export interface BodyProps extends RootProps {} export const Body: React.FC> = ({ children, style, ...props }) => ( - + {children} ); diff --git a/packages/button/README.md b/packages/button/README.md new file mode 100644 index 00000000..203680f8 --- /dev/null +++ b/packages/button/README.md @@ -0,0 +1,66 @@ +[npm]: https://img.shields.io/npm/v/@jsx-email/button +[npm-url]: https://www.npmjs.com/package/@jsx-email/button + +[![npm][npm]][npm-url] +[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com) + +
+ JSX email

+
+ +# @jsx-email/button + +
+ JSX email + A JSX email component for +
+ +## Requirements + +This packages requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+. + +## Install + +```shell +pnpm add @jsx-email/button + +# We recommend pnpm - https://pnpm.io +# But npm and yarn are supported +# npm add @jsx-email/button +# yarn add @jsx-email/button +``` + + +## Usage + +We recommend using the [../cli](`@jsx-email/cli`) for creating new templates. + +Create an email template file (e.g. `Email.tsx`) and import the component: + +```jsx +import { Button } from "@jsx-email/button"; + +const Email = () => { + return ( + + ); +}; +``` + +## Props + +| Name | Type | Default | Description | +| ------ | ------ | -------- | ------------------------------------------------ | +| href | string | | Link to be triggered when the button is clicked | +| target | string | `_blank` | Specify the target attribute for the button link | + + +## Attribution 🧑 + +This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)). + +## License + +[MIT License](./LICENSE.md) diff --git a/packages/button/readme.md b/packages/button/readme.md deleted file mode 100644 index 7c5002c2..00000000 --- a/packages/button/readme.md +++ /dev/null @@ -1,63 +0,0 @@ -![React Email button cover](https://react.email/static/covers/button.png) - -
@react-email/button
-
A link that is styled to look like a button.
-
-
-Website - Β· -GitHub - Β· -Discord -
- -## Install - -Install component from your command line. - -#### With yarn - -```sh -yarn add @react-email/button -E -``` - -#### With npm - -```sh -npm install @react-email/button -E -``` - -## Getting started - -Add the component to your email template. Include styles where needed. - -```jsx -import { Button } from "@jsx-email/button"; - -const Email = () => { - return ( - - ); -}; -``` - -## Props - -| Name | Type | Default | Description | -| ------ | ------ | -------- | ------------------------------------------------ | -| href | string | | Link to be triggered when the button is clicked | -| target | string | `_blank` | Specify the target attribute for the button link | - -## Support - -This component was tested using the most popular email clients. - -| Gmail logo | Apple Mail | Outlook logo | Yahoo! Mail logo | HEY logo | Superhuman logo | -| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -| Gmail βœ” | Apple Mail βœ” | Outlook βœ” | Yahoo! Mail βœ” | HEY βœ” | Superhuman βœ” | - -## License - -MIT License diff --git a/packages/button/src/button.tsx b/packages/button/src/button.tsx index b692c350..01f1b41d 100644 --- a/packages/button/src/button.tsx +++ b/packages/button/src/button.tsx @@ -44,7 +44,7 @@ export const Button = React.forwardRef>( diff --git a/packages/cli/README.md b/packages/cli/README.md new file mode 100644 index 00000000..211a1bb1 --- /dev/null +++ b/packages/cli/README.md @@ -0,0 +1,74 @@ +[npm]: https://img.shields.io/npm/v/@jsx-email/cli +[npm-url]: https://www.npmjs.com/package/@jsx-email/cli + +[![npm][npm]][npm-url] +[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com) + +
+ JSX email

+
+ +# @jsx-email/cli + +![jsx-email](../../assets/brackets.svg) The Command Line Interface and developer tooling for JSX email. + +## Requirements + +This packages requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+. + +## Install + +```shell +pnpm add @jsx-email/cli -D + +# We recommend pnpm - https://pnpm.io +# But npm and yarn are supported +# npm add @jsx-email/cli -D +# yarn add @jsx-email/cli -D +``` + +Nearly all installations of this package will want it installed into `devDependencies` so please make sure to add the `-D` flag. + +## Usage + +Installing this package will add an `email` binary, which will be available to `pnpm exec`, `npx`, and `yarn`. + +Invoking the CLI without parameters or flags will produce help information in the console. From there, all of the functions of the CLI can be viewed, along with any applicable parameters and flags: + +```console +β†’ pnpm exec email + +@jsx-email/cli v0.0.0 + +A CLI for working with Email Templates made with jsx-email + +Usage + $ email [...options] + +Commands + build