feat(React Context): Add HOC for button

- Add a sample Login Form template component
- Create an HOC provider component to access parent component context within child

Author: booleanhunter

src/components/contexts/withDataContext.tsx

@@ -0,0 +1,19 @@
+import React, { createContext } from 'react';
+
+const data = {} as any;
+export const DataContext = createContext(data);
+
+export const withDataContext = <P extends object>(Component: React.ComponentType<P>) => {
+    return function fn(props: P) {
+        return (
+            <DataContext.Consumer>
+                {
+                    (context) => <Component
+                        {...props}
+                        context={context}
+                    />
+                }
+            </DataContext.Consumer>
+        );
+    };
+};

src/components/elements/Button/index.tsx

@@ -6,20 +6,36 @@ import {
 
 import 'antd/lib/button/style/css';
 
-export interface ButtonProps extends AntButtonProps {
+import { withDataContext } from '../../contexts/withDataContext';
+
+interface ButtonStateProps extends AntButtonProps {
     label: string;
+    context?: any;
+}
+
+export interface ButtonActionProps {
+    customCallback?: (data: any) => void;
 }
 
+export type ButtonProps = ButtonStateProps & ButtonActionProps
+
 function Button(props: ButtonProps) {
-    const {label, ...rest} = props;
+    const { label, context, onClick, customCallback, ...rest } = props;
+
+    function handleClick(e: React.MouseEvent) {
+        customCallback && customCallback(context);
+    }
 
     return (
         <AntButton
             {...rest}
+            onClick={handleClick}
         >
             {props.label}
         </AntButton>
     )
 }
 
-export default Button;
+export default Button;
+
+export const ButtonWithContext = withDataContext(Button)

src/components/templates/LoginForm/index.stories.tsx

@@ -0,0 +1,26 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react/types-6-0';
+
+import LoginForm, { LoginFormProps } from './index';
+
+export default {
+    title: 'Components/Templates/Login Form',
+    component: LoginForm,
+    // argTypes: {
+    //     type: {
+    //         control: {
+    //             type: 'select',
+    //             options: [
+    //                 "default",
+    //                 "primary",
+    //                 "ghost",
+    //                 "dashed",
+    //             ],
+    //         },
+    //     },
+    // },
+};
+
+const Template: Story<LoginFormProps> = (args) => <LoginForm {...args} />;
+
+export const Default = Template.bind({});

src/components/templates/LoginForm/index.tsx

@@ -0,0 +1,52 @@
+import { useState, useEffect, createContext } from 'react';
+import { DataContext } from '../../contexts/withDataContext';
+import Button, {ButtonWithContext} from '../../elements/Button';
+
+import Input from '../../elements/Input';
+
+import Card from '../../widgets/Card';
+
+export interface LoginFormProps {
+
+}
+
+const data = {
+    page: "Login page",
+    company: "My company",
+}
+
+function LoginForm(props: LoginFormProps) {
+    function getContext (data: any) {
+        // console.log(data);
+    }
+
+    return (
+        <DataContext.Provider value={data}>
+            <Card
+                title="Login"
+                actions={[
+                    <ButtonWithContext
+                        type="primary"
+                        label="Login"
+                        customCallback={getContext}
+                    />,
+                    <Button
+                        type="ghost"
+                        label="Sign Up"
+                    />
+                ]}>
+                <Input
+                    type="text"
+                    placeholder="email"
+                />
+                <Input
+                    type="password"
+                    placeholder="password"
+                />
+            </Card>
+        </DataContext.Provider>
+        
+    )
+}
+
+export default LoginForm;