feat(User Interaction): Add onChange event

package.json

@@ -10,11 +10,13 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.8",
     "antd": "^4.12.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-scripts": "4.0.2",
+    "styled-components": "^5.2.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },

src/components/elements/Menu/MenuItem/index.tsx

@@ -0,0 +1,36 @@
+
+import {
+    Menu as AntMenu,
+    MenuItemProps as AntMenuItemProps,
+} from 'antd';
+
+import 'antd/lib/menu/style/css';
+
+import {
+    withTracking,
+} from '../../../../library/user-analytics/react/components/withTracking';
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
+
+export interface MenuItemProps extends Omit<AntMenuItemProps, "onClick"> {
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+
+function MenuItem(props: MenuItemProps) {
+    const handleClick: AntMenuItemProps["onClick"] = (info) => {
+        props.onClick && props.onClick(info.domEvent);
+    }
+
+    return (
+        <AntMenu.Item
+            {...props}
+            onClick={handleClick}
+        >
+            {props.children}
+        </AntMenu.Item>
+    )
+}
+
+export default MenuItem;
+
+export const MenuItemWithTracking = withTracking(MenuItem);

src/components/elements/Menu/index.stories.tsx

@@ -0,0 +1,74 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react/types-6-0';
+
+import Menu, { MenuProps } from './index';
+import MenuItem from './MenuItem';
+
+export default {
+    title: 'Components/Elements/Menu',
+    component: Menu,
+    argTypes: {
+        mode: {
+            control: {
+                type: 'select',
+                options: [
+                    "horizontal",
+                    "vertical",
+                    "vertical-left",
+                    "vertical-right",
+                    "inline"
+                ],
+            },
+        },
+        theme: {
+            control: {
+                type: 'select',
+                options: [
+                    "light",
+                    "dark",
+                ],
+            },
+        },
+        items: {
+            control: {
+                type: 'array',
+            },
+        },
+        defaultSelectedKeys: {
+            control: {
+                type: 'array',
+            }
+        },
+    },
+};
+
+const Template: Story<MenuProps> = (args) => (
+    <Menu {...args}>
+        <MenuItem>
+        Link 11
+        </MenuItem>
+        <MenuItem>
+        Link 22
+        </MenuItem>
+    </Menu>
+)
+
+export const HorizontalMenu = Template.bind({});
+
+HorizontalMenu.args = {
+    theme:"dark",
+    mode:"horizontal",
+    defaultSelectedKeys:['1'],
+    style:{ 
+        lineHeight: '64px' 
+    },
+};
+
+// const TemplateOne: Story<any> = (args) => (<Menu>
+//     <MenuItem>
+//        Link 11
+//     </MenuItem>
+//     <MenuItem>
+//        Link 22
+//     </MenuItem>
+// </Menu>)

src/components/elements/Menu/index.tsx

@@ -0,0 +1,30 @@
+import { Menu as AntMenu, MenuProps as AntMenuProps } from 'antd';
+
+import 'antd/lib/menu/style/css';
+
+
+export interface MenuProps extends AntMenuProps {
+
+}
+
+function Menu(props: MenuProps) {
+    const { theme, mode, defaultSelectedKeys, style } = props;
+
+    const onItemHover = (data: any) => {
+        console.log("item has been clicked", data)
+    }
+
+    return (
+        <AntMenu
+            theme={theme}
+            mode={mode}
+            defaultSelectedKeys={defaultSelectedKeys}
+            style={style}
+        >
+            { props.children }
+
+        </AntMenu>
+    );
+}
+
+export default Menu;

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

@@ -0,0 +1,69 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react/types-6-0';
+import MenuItem from '../../elements/Menu/MenuItem';
+
+import LandingPage, { LandingPageProps } from './index';
+import logo from './static/logo.png';
+
+export default {
+    title: 'Components/Templates/Landing Page',
+    component: LandingPage,
+    argTypes: {
+        mode: {
+            control: {
+                type: 'select',
+                options: [
+                    "horizontal",
+                    "vertical",
+                    "vertical-left",
+                    "vertical-right", 
+                    "inline",
+                ],
+            },
+        },
+        theme: {
+            control: {
+                type: 'select',
+                options: [
+                    "light",
+                    "dark",
+                ],
+            },
+        },
+        items: {
+            control: {
+                type: 'array',
+            },
+        },
+        defaultSelectedKeys: {
+            control: {
+                type: 'array',
+            }
+        }
+    },
+};
+
+const Template: Story<any> = (args) => {
+    const { items} = args;
+    return (
+    <LandingPage {...args}>
+
+        { 
+            items.map((item: string, i: any) => {
+                return (
+                <MenuItem key={`${i}`}>{item}</MenuItem>
+            )})
+        }
+
+    </LandingPage>
+)};
+
+export const Default = Template.bind({});
+
+Default.args = {
+    items: ["Landing 1", "Landing 2", "Landing 3"],
+    theme: "dark",
+    style:{ lineHeight: '64px' },
+    mode: 'horizontal',
+    logo: logo,
+};