@material-ui/icons#Event TypeScript Examples

withFullConfig = (): StoryFnReactReturnType => {
    const [selected, setSelected] = useState('');
    const isDarkMode = useDarkMode();

    // storybook tab names
    const drawerGroupId = 'Drawer';
    const headerGroupId = 'Header';
    const bodyGroupId = 'Body';
    const navGroupId = 'NavGroup';
    const navItemId = 'NavItem';
    const footerGroupId = 'Footer';

    const drawerKnobs: DrawerComponentProps = {
        activeItemBackgroundColor: color('activeItemBackgroundColor', Colors.blue[50], drawerGroupId),
        activeItemFontColor: color('activeItemFontColor', Colors.blue[500], drawerGroupId),
        activeItemIconColor: color('activeItemIconColor', Colors.blue[500], drawerGroupId),
        activeItemBackgroundShape: select('activeItemBackgroundShape', ['round', 'square'], 'square', drawerGroupId),
        chevron: boolean('chevron', false, drawerGroupId),
        chevronColor: color('chevronColor', Colors.gray[500], drawerGroupId),
        collapseIcon: getIcon(
            select('collapseIcon', ['undefined', '<Remove />', '<AddAPhoto />'], 'undefined', drawerGroupId)
        ),
        disableActiveItemParentStyles: boolean('disableActiveItemParentStyles', true, drawerGroupId),
        divider: boolean('divider', true, drawerGroupId),
        expandIcon: getIcon(select('expandIcon', ['undefined', '<Add />', '<PinDrop />'], 'undefined', drawerGroupId)),
        hidePadding: boolean('hidePadding', false, drawerGroupId),
        itemFontColor: color('itemFontColor', Colors.black[500], drawerGroupId),
        itemIconColor: color('itemIconColor', Colors.black[500], drawerGroupId),
        nestedBackgroundColor: color('nestedBackgroundColor', Colors.white[200], drawerGroupId),
        nestedDivider: boolean('nestedDivider', false, drawerGroupId),
        open: boolean('open', true, drawerGroupId),
        openOnHover: boolean('openOnHover (persistent only)', true, drawerGroupId),
        openOnHoverDelay: number(
            'openOnHoverDelay (persistent only)',
            500,
            {
                range: true,
                min: 100,
                max: 1000,
                step: 100,
            },
            drawerGroupId
        ),
        ripple: boolean('ripple', true, drawerGroupId),
        sideBorder: boolean('sideBorder', true, drawerGroupId),
        variant: select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent', drawerGroupId),
        condensed: boolean('condensed (rail only)', false, drawerGroupId),
        width: number(
            'width',
            350,
            {
                range: true,
                min: 200,
                max: 700,
                step: 50,
            },
            drawerGroupId
        ),
    };

    const headerKnobs: DrawerHeaderProps = {
        backgroundColor: color('backgroundColor', Colors.blue[500], headerGroupId),
        backgroundImage:
            headerBackgroundImageOptions[
                select('backgroundImage', ['undefined', 'Pattern', 'Farm'], 'Pattern', headerGroupId)
            ],
        divider: boolean('divider', false, headerGroupId),
        backgroundOpacity: number('backgroundOpacity', 0.4, { range: true, min: 0, max: 1, step: 0.1 }, headerGroupId),
        fontColor: color('fontColor', Colors.white[50], headerGroupId),
        icon: getIcon(select('icon', ['<Menu />', '<FitnessCenter />', 'undefined'], '<Menu />', headerGroupId)),
        subtitle: text('subtitle', 'Organize your menu items here', headerGroupId),
        title: text('title', 'Brightlayer UI Drawer', headerGroupId),
    };

    const bodyKnobs: DrawerBodyProps = {
        backgroundColor: color('backgroundColor', 'transparent', bodyGroupId),
    };

    const navGroupKnobs: Partial<DrawerNavGroupProps> = {
        title: text('drawerNavGroup[0].title', 'NavGroup 1', navGroupId),
        titleColor: color('titleColor', Colors.black[500], navGroupId),
        titleDivider: boolean('titleDivider', true, navGroupId),
    };

    const navItemKnobs: Partial<NavItem> = {
        hidden: boolean('hidden', false, navItemId),
        icon: getIcon(select('icon', ['<Dashboard />', '<FitnessCenter />', 'undefined'], '<Dashboard />', navItemId)),
        statusColor: color('statusColor', Colors.green[300], navItemId),
        subtitle: text('subtitle', 'Learn more about us', navItemId),
        title: text('title', overview, navItemId),
        disableRailTooltip: boolean('disableRailTooltip', false, navItemId),
    };

    const footerKnobs: Partial<DrawerFooterProps> = {
        hideContentOnCollapse: boolean('hideContentOnCollapse', true, footerGroupId),
        divider: boolean('divider', true, footerGroupId),
    };

    // DrawerNavGroup.items
    const links1 = [
        {
            hidden: navItemKnobs.hidden,
            icon: navItemKnobs.icon,
            statusColor: navItemKnobs.statusColor,
            subtitle: navItemKnobs.subtitle,
            // title is a required prop, using a placeholder in case the knob is empty
            title: navItemKnobs.title || 'title',
            disableRailTooltip: navItemKnobs.disableRailTooltip,
            itemID: '0',
            items: [
                {
                    title: monthlyReport,
                    itemID: monthlyReport,
                    onClick: (): void => {
                        setSelected(monthlyReport);
                    },
                },
                {
                    title: annualReport,
                    itemID: annualReport,
                    onClick: (): void => {
                        setSelected(annualReport);
                    },
                },
            ],
        },
        {
            title: timeline,
            itemID: timeline,
            onClick: (): void => {
                setSelected(timeline);
            },
            icon: <Toc />,
        },
        {
            title: locations,
            itemID: locations,
            onClick: (): void => {
                setSelected(locations);
            },
            icon: <PinDrop />,
        },
        {
            title: devices,
            itemID: devices,
            subtitle: '5 new warnings',
            statusColor: Colors.yellow[500],
            onClick: (): void => {
                setSelected(devices);
            },
            icon: <Devices />,
        },
        {
            title: photos,
            itemID: photos,
            onClick: (): void => {
                setSelected(photos);
            },
            icon: <AddAPhoto />,
        },
        {
            title: schedule,
            itemID: schedule,
            onClick: (): void => {
                setSelected(schedule);
            },
            icon: <Event style={getLeftToRightIconTransform()} />,
        },
    ];

    const links2 = [
        {
            title: userGuide,
            itemID: userGuide,
            onClick: (): void => {
                setSelected(userGuide);
            },
            icon: <MoveToInboxIcon />,
        },
        {
            title: agreement,
            itemID: agreement,
            subtitle: 'For Eaton employees only',
            onClick: (): void => {
                setSelected(agreement);
            },
            icon: <SendIcon style={getLeftToRightIconTransform()} />,
        },
        {
            title: accessibility,
            itemID: accessibility,
            icon: <Accessibility />,
            items: [
                {
                    title: colorContrastGuide,
                    itemID: colorContrastGuide,
                    onClick: (): void => {
                        setSelected(colorContrastGuide);
                    },
                },
                {
                    title: screenReader,
                    itemID: screenReader,
                    onClick: (): void => {
                        setSelected(screenReader);
                    },
                },
            ],
        },
        {
            title: notifications,
            itemID: notifications,
            onClick: (): void => {
                setSelected(notifications);
            },
            icon: <NotificationsActive />,
        },
    ];

    // Footer props
    const showFooter = boolean('Show footer', true, footerGroupId);
    const footerBackgroundColor = color('backgroundColor', Colors.white[50], footerGroupId);

    // You can replace the knob props with your own values
    return (
        <Drawer
            key={'drawer'}
            activeItem={selected}
            activeItemBackgroundColor={drawerKnobs.activeItemBackgroundColor}
            activeItemFontColor={drawerKnobs.activeItemFontColor}
            activeItemIconColor={drawerKnobs.activeItemIconColor}
            activeItemBackgroundShape={drawerKnobs.activeItemBackgroundShape}
            chevron={drawerKnobs.chevron}
            chevronColor={drawerKnobs.chevronColor}
            collapseIcon={drawerKnobs.collapseIcon}
            condensed={drawerKnobs.condensed}
            divider={drawerKnobs.divider}
            expandIcon={drawerKnobs.expandIcon}
            hidePadding={drawerKnobs.hidePadding}
            itemFontColor={drawerKnobs.itemFontColor}
            itemIconColor={drawerKnobs.itemIconColor}
            nestedBackgroundColor={drawerKnobs.nestedBackgroundColor}
            nestedDivider={drawerKnobs.nestedDivider}
            open={drawerKnobs.open}
            openOnHover={drawerKnobs.openOnHover}
            openOnHoverDelay={drawerKnobs.openOnHoverDelay}
            ripple={drawerKnobs.ripple}
            sideBorder={drawerKnobs.sideBorder}
            variant={drawerKnobs.variant}
            width={drawerKnobs.width}
            ModalProps={{
                disableEnforceFocus: true,
            }}
        >
            <DrawerHeader
                backgroundColor={headerKnobs.backgroundColor}
                backgroundImage={headerKnobs.backgroundImage}
                backgroundOpacity={headerKnobs.backgroundOpacity}
                divider={headerKnobs.divider}
                fontColor={headerKnobs.fontColor}
                icon={headerKnobs.icon}
                subtitle={headerKnobs.subtitle}
                title={headerKnobs.title}
            />
            <DrawerBody backgroundColor={bodyKnobs.backgroundColor}>
                <DrawerNavGroup
                    items={links1}
                    title={navGroupKnobs.title}
                    titleColor={navGroupKnobs.titleColor}
                    titleDivider={navGroupKnobs.titleDivider}
                />
                <DrawerNavGroup
                    items={links2}
                    titleContent={
                        <div
                            style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                fontWeight: 600,
                            }}
                        >
                            <Typography variant={'overline'} style={{ lineHeight: 'unset' }}>
                                NavGroup 2
                            </Typography>
                            <div>Software Version v1.0.3</div>
                        </div>
                    }
                    titleColor={navGroupKnobs.titleColor}
                    titleDivider={navGroupKnobs.titleDivider}
                />
            </DrawerBody>

            {showFooter && (
                <DrawerFooter backgroundColor={footerBackgroundColor} {...footerKnobs}>
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                            flexDirection: 'row',
                            padding: 16,
                        }}
                    >
                        <img
                            src={isDarkMode ? EatonFooterLogoDark : EatonFooterLogoLight}
                            alt="Eaton Logo"
                            height={28}
                            width={'auto'}
                        />
                        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                            <Typography
                                variant={'caption'}
                            >{`Copyright \u00A9 Eaton ${new Date().getFullYear()}`}</Typography>
                            <Typography variant={'caption'}>All Rights Reserved</Typography>
                        </div>
                    </div>
                </DrawerFooter>
            )}
        </Drawer>
    );
}