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>

src/components/Column/Column.stories.tsx

@@ -22,4 +22,10 @@ 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

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

src/components/Section/Section.tsx

@@ -1,21 +1,32 @@
 import { ReactNode } from 'react';
+import { makeStyles } from '../../utils/makeStyles';
+import { BaseStyleProp } from '../types';
 
-export interface SectionProps {
+type SectionStyles = 'root' | 'body' | 'row';
+
+export interface SectionProps extends BaseStyleProp<SectionStyles> {
   children?: ReactNode;
-  className?: string;
 }
 
-export const Section = ({ children, className }: SectionProps): JSX.Element => {
+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={{ width: '100%', border: '0', verticalAlign: 'top' }}
+      style={styles.root}
       className={className}
     >
-      <tbody>
-        <tr>{children}</tr>
+      <tbody style={styles.body}>
+        <tr style={styles.row}>{children}</tr>
       </tbody>
     </table>
   );

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;
+}