@omniumretail/component-library 1.2.71 → 1.2.72

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -1,85 +0,0 @@
-import { RightCircleOutlined } from "@ant-design/icons";
-import { Meta, StoryFn } from "@storybook/react-vite";
-import { Sidebar, SidebarProps } from '.';
-
-export default {
-    title: 'Sidebar',
-    component: Sidebar,
-} as Meta;
-
-const Template: StoryFn<SidebarProps> = (args: any) => {
-    const navigate = (targetRoute: string) => {
-        console.log(targetRoute);
-    }
-
-    return <Sidebar {...args} navigateFunction={navigate}></Sidebar>;
-}
-
-export const Primary = Template.bind({});
-Primary.args = {
-    isOpen: true,
-    links: [
-        {
-            label: "Ciclo de Avaliação",
-            targetRoute: "/ciclodeavaliacao",
-            active: true,
-            icon: <RightCircleOutlined />,
-        },
-        {
-            label: "Gestão de Questionários",
-            targetRoute: "/gestaodequestionarios",
-            active: true,
-            sublinks: [
-                {
-                    label: "Subpage 1121212",
-                    targetRoute: "/analytics/subpage121212",
-                    active: false,
-                },
-                {
-                    label: "Subpage 2111",
-                    targetRoute: "/analytics/subpage211",
-                    active: false
-                }
-            ]
-        },
-        {
-            label: "Analytics",
-            targetRoute: "/analytics",
-            active: false,
-            sublinks: [
-                {
-                    label: "Subpage 1",
-                    targetRoute: "/analytics/subpage1",
-                    active: false,
-                },
-                {
-                    label: "Subpage 2",
-                    targetRoute: "/analytics/subpage2",
-                    active: false
-                }
-            ]
-        }
-    ],
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    isOpen: false,
-    links: [
-        {
-            label: "Ciclo de Avaliação",
-            targetRoute: "/ciclodeavaliacao",
-            active: false,
-        },
-        {
-            label: "Gestão de Questionários",
-            targetRoute: "/gestaodequestionarios",
-            active: false,
-        },
-        {
-            label: "Analytics",
-            targetRoute: "/analytics",
-            active: false,
-        },
-    ],
-};

package/src/components/Sidebar/index.tsx

@@ -1,127 +0,0 @@
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
-import { useState, useEffect } from 'react';
-
-export interface Links {
-  label: string;
-  targetRoute: string;
-  active: boolean;
-  icon?: React.ReactNode;
-  sublinks?: Links[];
-  activeSubMenu?: boolean;
-}
-
-export interface SidebarProps {
-  isOpen?: boolean;
-  links: Links[];
-  navigateFunction: (targetRoute: string) => void;
-}
-
-export const Sidebar = (props: SidebarProps) => {
-  const { isOpen = false, links, navigateFunction } = props;
-  const [sidebarOpen, setSidebarOpen] = useState<boolean>(isOpen);
-  const [activeSubMenuIndex, setActiveSubMenuIndex] = useState<number>(-1);
-  const [isMobile, setIsMobile] = useState<boolean>(false);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= 768); // Altere a largura máxima para se adequar ao seu design responsivo
-    };
-
-    window.addEventListener('resize', handleResize);
-    handleResize();
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  const sidebarClasses = classNames({
-    [styles.sidebarClosed]: !sidebarOpen,
-  }, styles.sidebar);
-
-  const toggleSidebar = () => {
-    if (!isMobile) {
-      setSidebarOpen(!sidebarOpen);
-    }
-  };
-
-  const toggleSubMenu = (index: number) => {
-    setActiveSubMenuIndex(activeSubMenuIndex === index ? -1 : index);
-  };
-
-  const isLinkActive = (link: Links) => {
-    if (link.sublinks) {
-      return link.sublinks.some(sublink => sublink.active);
-    }
-    return link.active;
-  };
-
-  useEffect(() => {
-    if (isMobile) {
-      setSidebarOpen(false);
-    }
-  }, [isMobile]);
-
-  return (
-    <div className={sidebarClasses}>
-      {!isMobile && (
-        <div className={styles.toggle} onClick={toggleSidebar}>
-          {sidebarOpen ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
-        </div>
-      )}
-      {links &&
-        links.map((link: Links, index: number) => {
-          const { label, targetRoute, icon, sublinks } = link;
-          const isActive = isLinkActive(link);
-          const isActiveSubMenu = activeSubMenuIndex === index;
-
-          const sidebarItemClasses = classNames({
-            [styles.sidebarItemActive]: isActive,
-            [styles.sidebarHasIcon]: icon
-          }, styles.sidebarItem);
-
-          return (
-            <div
-              className={sidebarItemClasses}
-              onClick={() => {
-                if (sublinks) {
-                  toggleSubMenu(index);
-                } else {
-                  navigateFunction(targetRoute);
-                }
-              }}
-              onMouseEnter={() => toggleSubMenu(index)}
-              onMouseLeave={() => toggleSubMenu(-1)}
-              key={index}
-            >
-              {icon ? (sidebarOpen ? label : icon) : label}
-              {sublinks && isActiveSubMenu && (
-                <div className={`${sidebarOpen ? styles.subMenu : ''}`}>
-                  {sublinks.map((sublink: Links, subindex: number) => {
-                    const { label: subLabel, targetRoute: subTargetRoute, active: subActive, icon: subIcon } = sublink;
-
-                    const subLinkClasses = classNames({
-                      [styles.sidebarItemActive]: subActive,
-                      [styles.sidebarHasIcon]: icon,
-                    }, styles.subMenuItem);
-
-                    return (
-                      <div
-                        className={`${styles.sidebarItem} ${subLinkClasses}`}
-                        onClick={() => navigateFunction(subTargetRoute)}
-                        key={subindex}
-                      >
-                        {subIcon ? (sidebarOpen ? subLabel : subIcon) : (sidebarOpen ? subLabel : subLabel.charAt(0))}
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-          );
-        })}
-    </div>
-  );
-};

package/src/components/Sidebar/styles.module.scss

@@ -1,141 +0,0 @@
-.sidebar {
-    width: 300px;
-    max-width: 300px;
-    height: 100%;
-    background-color: var(--color-white);
-    padding: 24px;
-    position: relative;
-    transition: var(--transition-fast);
-    overflow: hidden;
-
-    @media (max-width: 1024px) {
-        width: 250px;
-        max-width: 250px;
-        padding: 12px;
-    }
-
-}
-
-.sidebarClosed {
-    max-width: 100px;
-    width: 100px;
-    overflow: hidden;
-
-    @media (max-width: 1024px) {
-        max-width: 75px;
-        width: 75px;
-    }
-}
-
-.sidebarClosed .sidebarItem {
-    font-size: 0;
-    transition: 0;
-    padding-left: 42px;
-
-    @media (max-width: 1024px) {
-        padding-left: 30px;
-    }
-}
-
-.sidebarClosed .sidebarItem:first-letter {
-    font-size: var(--font-size-body-4);
-
-    @media (max-width: 1024px) {
-        font-size: var(--font-size-body-3);
-    }
-}
-
-.sidebarClosed .sidebarHasIcon {
-    font-size: 24px;
-    padding-left: 35px;
-
-    @media (max-width: 1024px) {
-        font-size: 20px;
-        padding-left: 26px;
-    }
-}
-
-.sidebarItem {
-    color: var(--color-black);
-    padding: 16px;
-    font-weight: var(--font-weight-semibold);
-    text-transform: uppercase;
-    position: relative;
-    white-space: nowrap;
-    cursor: pointer;
-
-    @media (max-width: 1024px) {
-        font-size: var(--font-size-body-3);
-    }
-}
-
-.sidebarItem:after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 1px;
-    width: 100%;
-    background-color: var(--color-orange);
-    transform: scaleY(.5);
-}
-
-.sidebarItemActive {
-    color: var(--color-orange) !important;
-}
-
-.toggle {
-    position: absolute;
-    top: 12px;
-    right: 24px;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1;
-    cursor: pointer;
-
-    @media (max-width: 1024px) {
-        right: 4px;
-    }
-}
-
-.toggle>* {
-    font-size: var(--font-size-body-5);
-
-    @media (max-width: 1024px) {
-        font-size: var(--font-size-body-4);
-    }
-}
-
-.subMenu {
-    margin-top: 8px;
-    padding-left: 16px;
-}
-
-.subMenuItem {
-    color: var(--color-black);
-    padding: 8px;
-    margin-top: 8px;
-    font-weight: var(--font-weight-semibold);
-    cursor: pointer;
-}
-
-/* Estilos para dispositivos móveis */
-@media (max-width: 767px) {
-    .sidebar {
-        width: 50px;
-        max-width: 50px;
-        padding: 12px;
-    }
-
-    .sidebarClosed .sidebarItem {
-        padding: 12px 12px 12px 16px;
-    }
-
-    .sidebarClosed .sidebarHasIcon {
-        font-size: 20px;
-        padding-left: 12px;
-    }
-}

package/src/components/Switch/Switch.stories.tsx

@@ -1,14 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-vite";
-import { Switch } from '.';
-import { SwitchProps } from 'antd';
-
-export default {
-    title: 'Switch',
-    component: Switch,
-} as Meta;
-
-const Template: StoryFn<SwitchProps> = (args: any) => <Switch {...args}></Switch>;
-
-export const Primary = Template.bind({});
-Primary.args = {
-};

package/src/components/Switch/index.tsx

@@ -1,18 +0,0 @@
-import { Switch as AntdSwitch, SwitchProps } from 'antd';
-import styles from './styles.module.scss';
-import classNames from 'classnames';
-
-export interface NewSwitchProps extends SwitchProps {
-    customClass?: string;
-}
-
-export const Switch = ({ customClass, ...props }: NewSwitchProps) => {
-    const selectClasses = {
-        [styles.switch]: true,
-        [`${customClass}`]: customClass,
-    }
-
-    return (
-        <AntdSwitch {...props} className={ classNames(selectClasses) } />
-    );
-};

package/src/components/Switch/styles.module.scss

@@ -1,7 +0,0 @@
-.switch {
-    background-color: var(--color-grey) !important;
-
-    &[aria-checked="true"] {
-        background: var(--color-orange) !important;
-    }
-}