-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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>
- Loading branch information
1 parent
5b1db3e
commit c89ad5e
Showing
10 changed files
with
166 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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', | ||
}, | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Column, ColumnProps } from './Column'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
), | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Section, SectionProps } from './Section'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,3 @@ | ||
export * from './Email'; | ||
export * from './Column'; | ||
export * from './Section'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { CSSProperties } from 'react'; | ||
|
||
export interface BaseStyleProp<T extends string> { | ||
classes?: Record<T, CSSProperties>; | ||
className?: string; | ||
} |