feat(component): add column and section (#46)

* feat(component): add column

add column component

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* feat(component): add section

add section component

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* fix(component): fix email component

fixed email component with updated tags

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* docs(storybook): fix email stories

fix email stories with the updated component structure

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* docs(storybook): add stories for column

add missing stories for column component

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* docs(storybook): stories for section

add stories for section component

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* ci(storybook): fix storybook.yml

fix storybook.yml script to only deploy when push to main branch

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* fix(components): fix Email, Section, Column

fix the structure of Email, Section and Column components

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* docs(storybook): fix Email stories

fix Email stories with the new structure

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* docs(storybook): fix Section stories

fix Section stories with new structure

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* docs(storybook): fix Column stories

fix Column stories

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* feat(props): export props

export props for components from the library

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* fix(component): fix Email component

fix Email component with classes

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* fix(types): fix types props for Email

fix types using Record and add styles to the prop for Email component

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* fix(types): fix types and props for Column

fix types to use Record and add styles props for Column component
fix stories for Column with styles

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

* fix(component): fix types and props name

fix types with extends BaseStyleProp and adding classes to the props list

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

src/components/Column/Column.stories.tsx

@@ -0,0 +1,31 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Email } from '../Email/Email';
+import { Section } from '../Section/Section';
+import { Column } from './Column';
+
+export default {
+  component: Column,
+} as ComponentMeta<typeof Column>;
+
+//“template” of how args map to rendering
+const Template: ComponentStory<typeof Column> = (args) => (
+  <Email>
+    <Section>
+      <Column {...args} />
+    </Section>
+  </Email>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: <p style={{ margin: '0', fontSize: '30px' }}>Hello World</p>,
+  align: 'center',
+  classes: {
+    root: {
+      backgroundColor: 'red',
+      color: 'white',
+    },
+  },
+};

src/components/Column/Column.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { BaseStyleProp } from '../types';
+import { makeStyles } from '../../utils/makeStyles';
+
+type ColumnStyles = 'root';
+
+export interface ColumnProps extends BaseStyleProp<ColumnStyles> {
+  children?: ReactNode;
+  align?: 'left' | 'center' | 'right';
+}
+
+const useStyles = makeStyles({
+  root: {},
+});
+
+export const Column = ({
+  children,
+  className,
+  classes,
+  align = 'left',
+}: ColumnProps): JSX.Element => {
+  const styles = useStyles({ classes });
+
+  return (
+    <td className={className} style={styles.root} align={align}>
+      {children}
+    </td>
+  );
+};

src/components/Column/index.ts

@@ -0,0 +1 @@
+export { Column, ColumnProps } from './Column';

src/components/Email/Email.stories.tsx

@@ -12,5 +12,21 @@ const Template: ComponentStory<typeof Email> = (args) => <Email {...args} />;
 export const Default = Template.bind({});
 
 Default.args = {
-  children: <h2>Hello world</h2>,
+  children: (
+    <table style={{ width: '100%' }}>
+      <tbody>
+        <tr>
+          <td>
+            <p style={{ margin: '0', fontSize: '30px' }}>Hello World</p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+  classes: {
+    root: {
+      backgroundColor: 'gray',
+      color: 'white',
+    },
+  },
 };

src/components/Email/Email.tsx

@@ -1,9 +1,26 @@
 import { ReactNode } from 'react';
+import { BaseStyleProp } from '../types';
+import { makeStyles } from '../../utils/makeStyles';
 
-export interface EmailProps {
+type EmailStyles = 'root';
+
+export interface EmailProps extends BaseStyleProp<EmailStyles> {
   children?: ReactNode;
 }
 
-export const Email = ({ children }: EmailProps): JSX.Element => {
-  return <div>{children}</div>;
+const useStyles = makeStyles({
+  root: {
+    margin: '0px auto',
+    maxWidth: '600px',
+  },
+});
+
+export const Email = ({ children, className, classes }: EmailProps): JSX.Element => {
+  const styles = useStyles({ classes });
+
+  return (
+    <div style={styles.root} className={className}>
+      {children}
+    </div>
+  );
 };

src/components/Section/Section.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Email } from '../Email/Email';
+import { Section } from './Section';
+
+export default {
+  component: Section,
+} as ComponentMeta<typeof Section>;
+
+//“template” of how args map to rendering
+const Template: ComponentStory<typeof Section> = (args) => (
+  <Email>
+    <Section {...args} />
+  </Email>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: (
+    <td>
+      <p style={{ margin: '0', fontSize: '30px' }}>Hello World 1</p>
+      <p style={{ margin: '0', fontSize: '25px', marginTop: '10px' }}>Hello World 2</p>
+    </td>
+  ),
+};

src/components/Section/Section.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { makeStyles } from '../../utils/makeStyles';
+import { BaseStyleProp } from '../types';
+
+type SectionStyles = 'root' | 'body' | 'row';
+
+export interface SectionProps extends BaseStyleProp<SectionStyles> {
+  children?: ReactNode;
+}
+
+const useStyles = makeStyles({
+  root: { width: '100%', border: '0', verticalAlign: 'top' },
+  body: {},
+  row: {},
+});
+
+export const Section = ({ children, className, classes }: SectionProps): JSX.Element => {
+  const styles = useStyles({ classes });
+
+  return (
+    <table
+      cellPadding="0"
+      cellSpacing="0"
+      role="presentation"
+      style={styles.root}
+      className={className}
+    >
+      <tbody style={styles.body}>
+        <tr style={styles.row}>{children}</tr>
+      </tbody>
+    </table>
+  );
+};

src/components/Section/index.ts

@@ -0,0 +1 @@
+export { Section, SectionProps } from './Section';

src/components/index.ts

@@ -1 +1,3 @@
 export * from './Email';
+export * from './Column';
+export * from './Section';

src/components/types/index.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+
+export interface BaseStyleProp<T extends string> {
+  classes?: Record<T, CSSProperties>;
+  className?: string;
+}