w-design-system 0.0.29 → 0.0.30

package/src/components/Sidebar/SidebarGroup/index.tsx

@@ -0,0 +1,90 @@
+import { MouseEvent, PropsWithChildren, useCallback, useEffect, useState } from 'react'
+import { SidebarGroupContainer, SidebarGroupHeaderContainer } from './styles'
+import React from 'react'
+import { IconWrapper } from '../../IconWrapper'
+import { Paragraph } from '../../Paragraph'
+import { theme } from '../../Themes'
+import { chevronDownSVG, lockSVG } from '../../../assets/icon'
+
+export interface SidebarGroupProps {
+  title: string
+  icon: string
+  sidebarOpen: boolean
+  disabled?: boolean
+  isCurrentGroup?: boolean
+  onClick: () => void
+}
+
+const SidebarGroup = ({
+  title,
+  icon,
+  children,
+  sidebarOpen,
+  disabled,
+  onClick,
+  isCurrentGroup,
+}: PropsWithChildren<SidebarGroupProps>) => {
+  const [groupOpen, setGroupOpen] = useState(false)
+
+  useEffect(() => {
+    if (groupOpen && disabled) setGroupOpen(false)
+  }, [groupOpen, disabled])
+
+  const onClickHandler = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      if (disabled) return
+
+      if (!sidebarOpen) {
+        onClick()
+      } else {
+        event.stopPropagation()
+        setGroupOpen(!groupOpen)
+      }
+    },
+    [disabled, sidebarOpen, groupOpen, onClick],
+  )
+
+  let color = '#fff'
+
+  if (disabled) {
+    color = 'rgba(255,255,255,0.3)'
+  }
+
+  if (isCurrentGroup) {
+    color = '#217efd'
+  }
+
+  return (
+    <SidebarGroupContainer open={sidebarOpen} groupOpen={groupOpen}>
+      <SidebarGroupHeaderContainer
+        disabled={disabled}
+        sidebarOpen={sidebarOpen}
+        groupOpen={groupOpen}
+        onClick={onClickHandler}
+      >
+        <IconWrapper src={icon} color={color} />
+        {sidebarOpen && (
+          <span className="title">
+            <Paragraph size="medium" heavyBod={isCurrentGroup} color={disabled ? theme.colors.shade40 : 'white'}>
+              {title}
+            </Paragraph>
+          </span>
+        )}
+        {sidebarOpen &&
+          (!disabled ? (
+            <IconWrapper
+              className={`icon ${groupOpen ? 'icon-rotate' : ''}`}
+              src={chevronDownSVG}
+              width="16px"
+              color={theme.colors.shade30}
+            />
+          ) : (
+            <IconWrapper src={lockSVG} width="14px" color="white" />
+          ))}
+      </SidebarGroupHeaderContainer>
+      {children}
+    </SidebarGroupContainer>
+  )
+}
+
+export default SidebarGroup

package/src/components/Sidebar/SidebarGroup/styles.ts

@@ -0,0 +1,83 @@
+import styled from 'styled-components'
+import { theme } from '../../Themes'
+
+interface SidebarGroupContainerProps {
+  open: boolean
+  groupOpen: boolean
+}
+
+export const SidebarGroupContainer = styled.div<SidebarGroupContainerProps>`
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+
+  height: ${({ groupOpen, open }) => (groupOpen && open ? 'auto' : '40px')};
+  background-color: ${({ groupOpen, open }) => (groupOpen && open ? 'rgba(255, 255, 255, 0.1)' : 'inherit')};
+  overflow: hidden;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: #192d53;
+  }
+
+  .wrapperTitle {
+    cursor: pointer;
+    min-height: ${({ groupOpen, open }) => (groupOpen && open ? '40px' : '54px')};
+    padding: 0 14px;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: 30px;
+    justify-content: left;
+    svg {
+      width: 20px;
+    }
+  }
+
+  &.locked {
+    pointer-events: none;
+  }
+`
+
+interface SidebarGroupContainerHeaderProps {
+  sidebarOpen: boolean
+  groupOpen: boolean
+  disabled?: boolean
+}
+
+export const SidebarGroupHeaderContainer = styled.div<SidebarGroupContainerHeaderProps>`
+  display: flex;
+  align-items: center;
+  min-height: ${({ groupOpen, sidebarOpen }) => (groupOpen && sidebarOpen ? '40px' : '40px')};
+  ${({ groupOpen, sidebarOpen }) => groupOpen && sidebarOpen && 'border-bottom: 1px solid rgba(255, 255, 255, 0.1)'};
+  justify-content: ${sidebarOpen => (sidebarOpen ? 'space-between' : 'center')};
+  text-wrap: nowrap;
+
+  padding: 8px 12px;
+  cursor: pointer;
+  height: 100%;
+  gap: 24px;
+
+  color: ${({ disabled }) => (disabled ? 'rgba(255, 255, 255, 0.3)' : '#fff')};
+
+  .title {
+    width: 100%;
+  }
+
+  svg {
+    width: 20px;
+  }
+`
+
+export const LockedModal = styled.div`
+  width: 400px;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  .item-locked {
+    color: ${theme.colors.honey40};
+  }
+`

package/src/components/Sidebar/SidebarItem/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { IconWrapper } from '../../IconWrapper'
+import { Paragraph } from '../../Paragraph'
+import { Bullet, Container } from './styles'
+import { theme } from '../../Themes'
+
+export interface SidebarItemProps {
+  disabled?: boolean
+  title: string
+  icon?: string
+  onClick: () => void
+  isCurrentItem: boolean
+  sidebarOpen: boolean
+  isInsideGroup?: boolean
+}
+
+const SidebarItem = ({
+  title,
+  disabled,
+  icon,
+  isInsideGroup,
+  isCurrentItem,
+  sidebarOpen,
+  onClick,
+}: SidebarItemProps) => {
+  let color = '#fff'
+
+  if (disabled) {
+    color = 'rgba(255,255,255,0.3)'
+  }
+
+  if (isCurrentItem) {
+    color = theme.colors.cyan30
+  }
+
+  return (
+    <Container
+      isCurrentItem={isCurrentItem}
+      disabled={disabled ?? false}
+      sidebarOpen={sidebarOpen}
+      isInsideGroup={isInsideGroup}
+      onClick={() => !disabled && onClick()}
+    >
+      {isInsideGroup ? (
+        <Bullet />
+      ) : (
+        icon && (
+          <div className="icon">
+            <IconWrapper src={icon} color={color} />
+          </div>
+        )
+      )}
+      {sidebarOpen && (
+        <span className="title">
+          <Paragraph
+            size={!isInsideGroup ? 'medium' : 'small'}
+            /* eslint-disable-next-line no-nested-ternary */
+            color={disabled ? theme.colors.shade40 : !isInsideGroup ? 'white' : theme.colors.shade10}
+            heavyBod={isCurrentItem}
+          >
+            {title}
+          </Paragraph>
+        </span>
+      )}
+    </Container>
+  )
+}
+
+export default SidebarItem

package/src/components/Sidebar/SidebarItem/styles.ts

@@ -0,0 +1,70 @@
+import styled from 'styled-components'
+
+interface SidebarItemContainerProps {
+  sidebarOpen: boolean
+  disabled: boolean
+  isCurrentItem: boolean
+  isInsideGroup?: boolean
+}
+
+export const Container = styled.div<SidebarItemContainerProps>`
+  display: flex;
+  justify-content: ${({ sidebarOpen }) => (sidebarOpen ? 'space-between' : 'center')};
+  align-items: center;
+  min-height: 38px;
+  padding: 8px;
+  gap: 24px;
+
+  color: ${({ disabled }) => (disabled ? 'rgba(255,255,255,0.4)' : '#fff')};
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  border-radius: ${({ isInsideGroup }) => !isInsideGroup && '4px'};
+  &:hover {
+    background-color: #192d53;
+  }
+  &:not(:last-child) {
+    border-bottom: ${({ isInsideGroup }) => isInsideGroup && '1px solid rgba(255, 255, 255, 0.1)'};
+  }
+
+  .wrapper {
+    padding: 4px;
+    cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+    display: flex;
+    align-items: center;
+  }
+
+  .title {
+    text-decoration: none;
+    width: 100%;
+    text-wrap: nowrap;
+  }
+
+  .lock {
+    position: absolute;
+    right: 20px;
+    svg {
+      opacity: 0.5;
+      position: absolute;
+      margin-bottom: 16px;
+      font-size: 10px;
+    }
+  }
+`
+
+export const Bullet = styled.div`
+  position: relative;
+  width: 24px;
+  height: 100%;
+
+  &::after {
+    position: absolute;
+    background: #fff;
+
+    right: 0px;
+    top: -2.5px;
+    content: '';
+    width: 5px;
+    height: 5px;
+
+    border-radius: 50%;
+  }
+`

package/src/components/Sidebar/SidebarLogo/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { chevronLeftSVG, chevronRightSVG } from '../../../assets/icon'
+import { IconWrapper } from '../../IconWrapper'
+import { SidebarLogoContainer } from './styles'
+
+export interface SidebarLogoProps {
+  sidebarOpen: boolean
+  logoOpacity?: number
+  setSidebarOpen: (value: boolean) => void
+  logoUrl: string
+}
+
+const SidebarLogo = ({ sidebarOpen, setSidebarOpen, logoOpacity, logoUrl }: SidebarLogoProps) => {
+  return (
+    <SidebarLogoContainer logoUrl={logoUrl} logoOpacity={logoOpacity} sidebarOpen={sidebarOpen}>
+      <button type="button" onClick={() => setSidebarOpen(!sidebarOpen)} className="close" aria-label="Fechar menu">
+        <IconWrapper src={sidebarOpen ? chevronRightSVG : chevronLeftSVG} color="#fff" width="12px" height="12px" />
+      </button>
+      <div className="logo" />
+    </SidebarLogoContainer>
+  )
+}
+export default SidebarLogo

package/src/components/Sidebar/SidebarLogo/styles.ts

@@ -0,0 +1,53 @@
+import styled from 'styled-components'
+
+interface SidebarLogoContainerProps {
+  logoOpacity?: number
+  sidebarOpen: boolean
+  logoUrl: string
+}
+
+export const SidebarLogoContainer = styled.div<SidebarLogoContainerProps>`
+  position: relative;
+
+  --padding: 8px;
+
+
+  margin-bottom: 32px;
+
+  .logo {
+    height: 40px;
+
+    background: url(${({ logoUrl }) => logoUrl});
+    background-size: ${({ sidebarOpen: open }) => (open ? `202px 40px` : '141px 28px')};
+    background-repeat: no-repeat;
+    background-position: -8px 0px;
+
+    opacity: ${({ logoOpacity }) => logoOpacity ?? 1};
+  }
+
+  .close {
+    --width: 28px;
+    --height: 32px;
+    display: flex;
+    position: absolute;
+
+    align-items: center;
+    justify-content: center;
+
+    height: var(--height);
+    width: var(--width);
+
+    background: #001640;
+    color: #fff;
+
+    border-radius: 0 var(--width) var(--width) 0;
+
+    top: 42px;
+    right: calc((var(--padding) + var(--width)) * -1);
+
+    border: none;
+    cursor: pointer;
+
+    z-index: 2;
+  }
+`

package/src/components/Sidebar/index.tsx

@@ -0,0 +1,127 @@
+import { useState } from 'react'
+import SidebarGroup from './SidebarGroup'
+import SidebarItem from './SidebarItem'
+import SidebarLogo from './SidebarLogo'
+
+import React from 'react'
+import { SidebarContainer, SidebarScrollContainer, SidebarScrollWrapperContainer, SidebarSpacer } from './styles'
+
+export interface SidebarLayoutItemTypeItem {
+  id: string
+  type: 'item'
+}
+
+export interface SidebarLayoutItemTypeGroup {
+  id: string
+  type: 'group'
+}
+
+export interface SidebarLayoutItemTypeSpacer {
+  type: 'spacer'
+}
+
+export interface SidebarItemData {
+  showInMenu?: boolean
+  menuTitle: string
+  icon: string
+  disabled: boolean
+  link?: string
+}
+
+export interface SidebarGroupData {
+  name: string
+  link?: string
+  icon: string
+  itemIds: string[]
+}
+
+export interface SidebarProps {
+  layout: (SidebarLayoutItemTypeItem | SidebarLayoutItemTypeGroup | SidebarLayoutItemTypeSpacer)[]
+  currentItemId: string
+  currentGroupId: string
+  setLink: (link: string) => void
+  items: Record<string, SidebarItemData>
+  groups: Record<string, SidebarGroupData>
+  logoUrl: string
+  logoOpacity?: number
+}
+
+export const Sidebar = ({
+  logoUrl,
+  layout,
+  currentItemId,
+  currentGroupId,
+  setLink,
+  items,
+  logoOpacity,
+  groups,
+}: SidebarProps) => {
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+
+  const sidebarItemClickHandler = (itemId: string) => {
+    const item = items[itemId]
+    const link = item?.link
+    if (link) setLink(link)
+  }
+
+  return (
+    <SidebarContainer sidebarOpen={sidebarOpen}>
+      <SidebarLogo
+        logoUrl={logoUrl}
+        sidebarOpen={sidebarOpen}
+        setSidebarOpen={setSidebarOpen}
+        logoOpacity={logoOpacity}
+      />
+      <SidebarScrollWrapperContainer>
+        <SidebarScrollContainer>
+          {layout
+            .map((item, index) => ({ id: index, disabled: undefined, ...item }))
+            .map(item => {
+              if (item.type === 'spacer') return <SidebarSpacer key={item.id} />
+              if (item.type === 'item')
+                return (
+                  <SidebarItem
+                    key={item.id}
+                    title={items[item.id]?.menuTitle}
+                    icon={items[item.id]?.icon}
+                    disabled={items[item.id]?.disabled}
+                    onClick={() => sidebarItemClickHandler(item.id)}
+                    sidebarOpen={sidebarOpen}
+                    isCurrentItem={currentItemId === item.id}
+                  />
+                )
+              if (item.type === 'group') {
+                const group = groups[item.id]
+                return (
+                  <SidebarGroup
+                    disabled={group.itemIds.every(id => items[id]?.disabled)}
+                    key={item.id}
+                    title={group.name}
+                    icon={group.icon}
+                    sidebarOpen={sidebarOpen}
+                    onClick={() => group.link && setLink(group.link)}
+                    isCurrentGroup={currentGroupId === item.id}
+                  >
+                    {group.itemIds
+                      .filter(id => items[id]?.showInMenu !== false)
+                      .map(id => (
+                        <SidebarItem
+                          key={id}
+                          title={items[id]?.menuTitle}
+                          disabled={items[id]?.disabled}
+                          onClick={() => sidebarItemClickHandler(id)}
+                          isCurrentItem={currentItemId === id}
+                          sidebarOpen={sidebarOpen}
+                          isInsideGroup
+                        />
+                      ))}
+                  </SidebarGroup>
+                )
+              }
+              return null
+            })}
+        </SidebarScrollContainer>
+      </SidebarScrollWrapperContainer>
+    </SidebarContainer>
+  )
+}

package/src/components/Sidebar/stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Sidebar } from './index'
+import { action } from '@storybook/addon-actions'
+import { dashboardSVG } from '../../assets/icon'
+
+const meta: Meta<typeof Sidebar> = {
+  title: 'Components/Sidebar',
+  tags: ['autodocs'],
+
+  component: Sidebar,
+} satisfies Meta<typeof Sidebar>
+
+export default meta
+
+type Story = StoryObj<typeof Sidebar>
+
+export const Playground: Story = {
+  render: () => {
+    return (
+        <Sidebar
+          layout={[
+            {
+              type: 'item',
+              id: 'DASHBOARD',
+            },
+            { type: 'group', id: 'group1' },
+          ]}
+          items={{
+            DASHBOARD: {
+              menuTitle: 'Dashboard',
+              icon: dashboardSVG,
+              link: '/dashboard',
+              disabled: false,
+            },
+          }}
+          currentItemId={''}
+          currentGroupId={''}
+          setLink={action('setLink')}
+          groups={{
+            group1: {
+              name: 'Group 1',
+              icon: dashboardSVG,
+              itemIds: ['DASHBOARD'],
+            },
+          }}
+          logoUrl={''}
+        />
+    )
+  },
+}

package/src/components/Sidebar/styles.ts

@@ -0,0 +1,80 @@
+import styled from 'styled-components'
+import { theme } from '../Themes'
+
+interface SidebarContainerProps {
+  sidebarOpen: boolean
+}
+
+export const SidebarContainer = styled.div<SidebarContainerProps>`
+  display: flex;
+  flex-direction: column;
+  grid-area: sidebar;
+  position: relative;
+  box-sizing: border-box;
+  color: white;
+  background: ${theme.colors.cyan50};
+  height: 100vh;
+  height: 100dvh;
+  padding: 16px 16px 0 16px;
+  width: min-content;
+  border-radius: ${({ sidebarOpen }) => sidebarOpen && '0 60px 0px 0;'};
+
+  /* Mantenha o estilo do container ao passar o mouse */
+  &:hover {
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    &::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+    }
+  }
+`
+
+export const SidebarScrollContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: calc(100% - 36px);
+  margin-bottom: 36px;
+`
+
+export const SidebarScrollWrapperContainer = styled.div`
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+  }
+
+  &:hover {
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    &::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+    }
+  }
+`
+
+export const SidebarSpacer = styled.div`
+  flex-grow: 1;
+`

package/src/components/Types/index.ts

@@ -1,9 +1,17 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
 import type { DatePickerProps } from '../DatePicker'
 import type { DateRangePickerProps } from '../DateRangePicker'
-import type { SelectProps } from '../Select'
-import type { SelectRef } from '../Select'
 import type { PaginateProps } from '../Paginate'
+import type { SelectProps, SelectRef } from '../Select'
+import type {
+  SidebarGroupData,
+  SidebarItemData,
+  SidebarLayoutItemTypeGroup,
+  SidebarLayoutItemTypeItem,
+  SidebarLayoutItemTypeSpacer,
+  SidebarProps,
+} from '../Sidebar'
+
 type ColorsVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'gray' | 'warning' | 'yellow'
 type ColorsVariantBanner = 'notice' | 'success' | 'danger' | 'warning'
 
@@ -53,4 +61,16 @@ export interface TabsTypes extends HTMLAttributes<HTMLDivElement> {
   onTabChange?: (activeTab: string) => void
 }
 
-export { DatePickerProps, DateRangePickerProps, SelectProps, SelectRef, PaginateProps }
+export {
+  DatePickerProps,
+  DateRangePickerProps,
+  PaginateProps,
+  SelectProps,
+  SelectRef,
+  SidebarGroupData,
+  SidebarItemData,
+  SidebarLayoutItemTypeGroup,
+  SidebarLayoutItemTypeItem,
+  SidebarLayoutItemTypeSpacer,
+  SidebarProps,
+}