shellscape · shellscape · Jul 4, 2024 · Apr 17, 2024 · Apr 17, 2024 · Apr 17, 2024
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -62,6 +62,8 @@ jobs:
           moon run :build --query "project~plugin-*"
 
       - name: Package Tests
+        env:
+          FORCE_COLOR: 1
         run: moon run :test --affected --concurrency 1 --remote
 
       - name: Smoke Test

diff --git a/apps/preview/app/src/templates.ts b/apps/preview/app/src/templates.ts
@@ -33,7 +33,7 @@ export const gather = async () => {
     const absHtmlPath = `${path
       .replace(relativePath, absBuildPath)
       .replace(/\.(jsx|tsx)$/, '')}.html`;
-    const templateName = templateNameMap[absHtmlPath];
+    const templateName = templateNameMap[absHtmlPath] || basePath.split('/').at(-1);
     return {
       ...acc,
       [path]: {

diff --git a/docs/components/background.md b/docs/components/background.md
@@ -0,0 +1,76 @@
+---
+title: 'Background'
+description: 'A JSX email component for background images in your Email template'
+slug: background
+type: component
+---
+
+<!--@include: @/include/header.md-->
+
+<!--@include: @/include/install.md-->
+
+## Usage
+
+Add the background component to your email template.
+
+```jsx
+import { Body, Column, Html, Section } from 'jsx-email';
+
+const Email = () => {
+  return (
+    <Html lang="en">
+      <Body>
+        <Background src="link-to-image" bgColor="#FFFFFF" width={600}>
+          <Row>
+            <Column>Content goes here</Column>
+          </Row>
+        </Background>
+      </Body>
+    </Html>
+  );
+};
+```
+
+## Component Props
+
+```tsx
+interface BackgroundProps
+  extends Omit<React.ComponentPropsWithoutRef<'td'>, 'height' | 'width' | 'bgcolor'> {
+  src: string;
+  bgColor?: string;
+  bgRepeat?: 'repeat' | 'no-repeat';
+  height?: number;
+  width?: number;
+}
+```
+
+```tsx
+src: string;
+```
+
+The path to the image
+
+```tsx
+bgColor?: string;
+```
+
+The hex code that represents the fallback `background-color` incase the image doesn't load
+
+```tsx
+bgRepeat?: 'repeat' | 'no-repeat';
+```
+
+A string that represents the value of `background-repeat`.
+Default value is `no-repeat`
+
+```tsx
+height?: number;
+```
+
+The `height` of the container in pixels
+
+```tsx
+width?: number;
+```
+
+The `width` of the container in pixels
diff --git a/docs/components/button-legacy.md b/docs/components/button-legacy.md
@@ -0,0 +1,48 @@
+---
+title: 'Button'
+description: A JSX email component which styles an anchor element to appear as a button
+slug: button
+type: component
+---
+
+<!--@include: @/include/header.md-->
+
+::: tip
+Semantics: Quite often in the email world we talk about buttons when we actually mean links. Behind the scenes this component is a `<a>` element which is styled like a `<button>` element.
+:::
+
+<!--@include: @/include/install.md-->
+
+## Usage
+
+Add the component to your email template. Include styles where needed.
+
+```jsx
+import { Button } from 'jsx-email';
+
+const Email = () => {
+  return (
+    <Button href="https://example.com" style={{ color: '#61dafb', padding: '10px 20px' }}>
+      Click me
+    </Button>
+  );
+};
+```
+
+## Component Props
+
+```ts
+href: string;
+```
+
+The url to navigate to when the button is clicked.
+
+```ts
+target?: string;
+```
+
+Specifies the value of the `"target"` attribute for the button `target`.
+
+:::tip
+This component also expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'a'>`.
+:::
diff --git a/docs/components/button.md b/docs/components/button.md
@@ -22,8 +22,8 @@ import { Button } from 'jsx-email';
 
 const Email = () => {
   return (
-    <Button href="https://example.com" style={{ color: '#61dafb', padding: '10px 20px' }}>
-      Click me
+    <Button width={160} height={60} href="https://jsx.email" target="_blank">
+      JOIN US
     </Button>
   );
 };
@@ -32,17 +32,97 @@ const Email = () => {
 ## Component Props
 
 ```ts
-href: string;
+export interface ButtonProps extends BaseProps<'a'> {
+  width: number;
+  height: number;
+  href?: string;
+  align?: 'left' | 'center' | 'right';
+  backgroundColor?: string;
+  borderColor?: string;
+  borderRadius?: number;
+  borderSize?: number;
+  fontSize?: number;
+  textColor?: string;
+  withBackground?: boolean;
+}
+```
+
+:::tip
+It is **highly reccommended** to use the component props to set these values rather than css for **optimal email client compatibility** especially in Outlook clients
+:::
+
+```ts
+href?: string;
 ```
 
 The url to navigate to when the button is clicked.
 
+```ts
+width: number;
+```
+
+Specifies the `width` of the Button in pixels
+
+```ts
+height: number;
+```
+
+Specifies the `height` of the Button in pixels
+
+```ts
+align?: 'left' | 'center' | 'right';
+```
+
+Specifies the horizontal alignment of the Button in the container. Default value is `left`
+
 ```ts
 target?: string;
 ```
 
 Specifies the value of the `"target"` attribute for the button `target`.
 
+```ts
+backgroundColor?: string;
+```
+
+Specifies the hex value for the `background-color` of the button
+
+```ts
+borderColor?: string;
+```
+
+Specifies the hex value `border-color` for the button
+
+```ts
+borderRadius?: number;
+```
+
+Specifies the `border-radius` value for the button in pixels
+
+```ts
+borderSize?: number;
+```
+
+Specifies the `border-width` value in pixels
+
+```ts
+fontSize?: number;
+```
+
+Specifies the `font-size` value in pixels
+
+```ts
+textColor?: string;
+```
+
+Specifies the hex value for the `color` of the text
+
+```ts
+withBackground?: boolean;
+```
+
+Set to `true` if `Button` is nested in a `Background` component. Neccessary for good Outlook compatibility.
+
 :::tip
 This component also expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'a'>`.
 :::
diff --git a/docs/components/column.md b/docs/components/column.md
@@ -29,4 +29,25 @@ const Email = () => {
 
 ## Component Props
 
-This component has no custom props, but expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'td'>`.
+```tsx
+export interface ColumnProps extends BaseProps<'td'> {
+  bgColor?: string;
+  bgImage?: string;
+}
+```
+
+```tsx
+bgColor: string;
+```
+
+Used to set the background color in HTML email by wrapping the `bgcolor` property of `<td>` elements
+
+```tsx
+bgImage: string;
+```
+
+Used to set background images in HTML email by wrapping the `background` property of `<td>` elements
+
+:::tip
+This component expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'td'>`.
+:::
diff --git a/docs/components/conditional.md b/docs/components/conditional.md
@@ -49,6 +49,12 @@ expression?: string;
 
 If provided, the string will be used as the conditional expression within the HTML comment. e.g. a value of `lt ie 10` would result in a conditional comment block starting with `<!--[if lt ie 10]>`.
 
+```ts
+head?: boolean;
+```
+
+If `true`, the conditional expression will be placed in the `head` section of your email template.
+
 ```ts
 mso?: boolean;
 ```

diff --git a/docs/components/font.md b/docs/components/font.md
@@ -59,7 +59,7 @@ export interface FontProps {
 fallbackFontFamily: FallbackFont | FallbackFont[];
 ```
 
-The fallback font family the system should you, if web fonts are not supported or the chosen font is not installed on the system.
+The fallback font family the system should use, if web fonts are not supported or the chosen font is not installed on the system.
 
 ```ts
 fontFamily: string;

diff --git a/docs/components/graph.md b/docs/components/graph.md
@@ -0,0 +1,91 @@
+---
+title: 'Graph'
+description: 'A JSX email component for displaying graphs in your Email template'
+slug: graph
+type: component
+---
+
+<!--@include: @/include/header.md-->
+
+::: tip
+This component is wrapper around [QuickChart API](https://quickchart.io/) for generating email compatible charts
+:::
+
+<!--@include: @/include/install.md-->
+
+## Usage
+
+Add the graph component to your email template.
+
+```jsx
+import { Html, Body, Section, Graph } from 'jsx-email';
+
+const Email = () => {
+  return (
+    <Html lang="en">
+      <Body>
+        <Section>
+          <Graph
+            width={100}
+            height={100}
+            title="Graph with jsx-email"
+            config={{
+              type: 'bar',
+              data: {
+                labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                datasets: [
+                  {
+                    data: [10, 6.5, 3, 6, 4, 0.1, 0.5]
+                  }
+                ]
+              }
+            }}
+          />
+        </Section>
+      </Body>
+    </Html>
+  );
+};
+```
+
+## Component Props
+
+```tsx
+config: ChartConfiguration & Record<string, any>;
+```
+
+An object that contains the chart configuration settings, combining [ChartConfiguration](https://www.chartjs.org/docs/2.9.4/charts/) properties.
+
+:::tip
+You can play around with your chart configuration in this [playground](https://quickchart.io/sandbox)
+:::
+
+```tsx
+title: string;
+```
+
+This is a required string that provides the title of the graph.
+
+```tsx
+background?: string;
+```
+
+An optional string that sets the background color of the graph.
+
+```tsx
+className?: string;
+```
+
+This is optional string that applies a custom CSS class to the graph component for additional styling.
+
+```tsx
+height?: number;
+```
+
+This is an optional number that specifies the height of the graph in pixels.
+
+```tsx
+width?: number;
+```
+
+This is an optional number that specifies the width of the graph in pixels.