@gyramais/gyra-design 0.1.0

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type DividerProps = {
+  id?: string;
+  className?: string;
+  margin?: number;
+  children?: React.ReactNode;
+}
+
+const Divider = ({
+  id,
+  className,
+  margin = 26,
+  children,
+}: DividerProps) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-divider",
+        className,
+      )}
+      style={{
+        padding: `${margin}px 0px`,
+      }}
+    >
+      <hr className="gyramais-divider-divider" />
+
+      {children && (
+        <div className="gyramais-divider-content">
+          {children}
+        </div>
+      )}
+
+      <hr className="gyramais-divider-divider" />
+    </div>
+  );
+};
+
+export { Divider };

package/src/components/Divider/index.css

@@ -0,0 +1,20 @@
+.gyramais-divider {
+  @apply
+    flex
+    items-center
+    w-full;
+}
+
+.gyramais-divider .gyramais-divider-divider {
+  @apply
+    w-full
+    border-[var(--border-color)];
+}
+
+.gyramais-divider .gyramais-divider-content {
+  @apply
+    px-[6px]
+    text-base
+    text-[#7D9585]
+    font-light;
+}

package/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export * from "./Divider";

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Drawer } from "./Drawer";
+import { Button } from '../Button';
+
+
+const meta: Meta<typeof Drawer> = {
+  title: "Library/Components/Drawer",
+  component: Drawer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: ({ visible = false }) => {
+    const [internalVisible, setInternalVisible] = useState(false);
+
+    useEffect(() => {
+      setInternalVisible(visible);
+    }, [visible]) 
+
+    return (
+      <>
+        <div className="p-4">
+          <Button onClick={() => setInternalVisible(true)}>
+            Abrir drawer
+          </Button>
+        </div>
+
+        <Drawer
+          visible={internalVisible}
+          onClose={() => setInternalVisible(false)}  
+        >
+          Teste
+        </Drawer>
+      </>
+    );
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+export const Default: Story = {
+  args: {
+    className: '',
+    visible: false,
+    children: (
+      'Informação qualquer'
+    ),
+  },
+}

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import { default as PrimitiveDrawer } from 'react-modern-drawer' 
+
+type DrawerProps = {
+  className?: string;
+  visible?: boolean;
+  onClose?: () => void;
+  direction?: 'left' | 'top' | 'right' | 'bottom';
+  children?: React.ReactNode;
+}
+
+const Drawer = ({
+  className,
+  visible = false,
+  onClose,
+  direction = 'right',
+  children,
+}: DrawerProps) => {
+  return (
+    <PrimitiveDrawer
+      open={visible}
+      onClose={onClose}
+      direction={direction}
+      className={classNames(
+        "gyramais-drawer",
+        className,
+      )}
+      duration={200}
+    >
+      <div className="gyramais-drawer-content">
+        {children}
+      </div>
+    </PrimitiveDrawer>
+  );
+};
+
+export { Drawer };

package/src/components/Drawer/index.css

@@ -0,0 +1,15 @@
+.gyramais-drawer {
+  @apply
+    min-w-[90%]
+    max-w-[90%]
+
+    md:min-w-[700px]
+    md:max-w-[90%]
+}
+
+.gyramais-drawer .gyramais-drawer-content {
+  @apply
+    p-4
+
+    md:p-6;
+}

package/src/components/Drawer/index.ts

@@ -0,0 +1 @@
+export * from "./Drawer";

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { DropdownMenu } from "./DropdownMenu";
+import { Button } from "../Button";
+import SettingsIcon from '@mui/icons-material/Settings';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: "Library/Components/DropdownMenu",
+  component: DropdownMenu,
+  parameters: {
+    layout: 'centered',
+  },
+  render: (props) => (
+    <div className="w-full h-[300px] flex items-center justify-center">
+      <DropdownMenu {...props}>
+        {props.children}
+      </DropdownMenu>
+    </div>
+  )
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    title: '',
+    items: [{
+      key: 'options',
+      title: 'Opções',
+      onClick: () => alert('Opções'),
+    }, {
+      separator: true,
+    }, {
+      key: 'promotions',
+      title: 'Promoções',
+      disabled: true,
+    }],
+    children: (
+      <Button type="white" icon={(<SettingsIcon />)} />
+    ),
+  },
+}
+
+export const Title: Story = {
+  args: {
+    id: '',
+    className: '',
+    title: 'Configurações',
+    items: [{
+      key: 'options',
+      title: 'Opções',
+      onClick: () => alert('Opções'),
+    }, {
+      key: 'promotions',
+      title: 'Promoções',
+      disabled: true,
+    }],
+    children: (
+      <Button type="white" icon={(<SettingsIcon />)} />
+    ),
+  },
+}

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import {
+  DropdownMenu as PrimitiveDropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../shadcn/dropdown-menu";
+
+
+type DropdownMenuProps = {
+  id?: string;
+  className?: string;
+  title?: string;
+  visible?: boolean;
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
+  sideOffset?: number;
+  items?: Array<{
+    key?: string;
+    title?: string | React.ReactNode;
+    disabled?: boolean;
+    separator?: boolean;
+    onClick?: () => void;
+  }>;
+  children?: React.ReactNode;
+}
+
+const DropdownMenu = ({
+  id,
+  className,
+  title,
+  visible,
+  align,
+  side,
+  sideOffset = 8,
+  items = [],
+  children,
+}: DropdownMenuProps) => {
+  return (
+    <PrimitiveDropdownMenu
+      modal={false}
+      open={visible}
+    >
+      <DropdownMenuTrigger className="gyramais-dropdown-menu-trigger">
+        {children}
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        id={id}
+        className={classNames(
+          'gyramais-dropdown-menu-content',
+          className,
+        )}
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        {title && (
+          <>
+            <DropdownMenuLabel>
+              {title}
+            </DropdownMenuLabel>
+            
+            <DropdownMenuSeparator className="gyramais-dropdown-menu-separator" />
+          </>
+        )}
+
+        {items.map((item) => item.separator ? (
+          <DropdownMenuSeparator className="gyramais-dropdown-menu-separator" />
+        ) : (
+          <DropdownMenuItem
+            id={item.key}
+            className="gyramais-dropdown-menu-item"
+            key={item.key}
+            onClick={item.onClick}
+            disabled={item.disabled}
+          >
+            {item.title}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </PrimitiveDropdownMenu>
+  );
+};
+
+export { DropdownMenu };

package/src/components/DropdownMenu/index.css

@@ -0,0 +1,18 @@
+.gyramais-dropdown-menu-content {
+  @apply
+    w-fit
+    bg-white
+    border-[var(--border-color)]
+    shadow-xl
+    rounded-[12px];
+}
+
+.gyramais-dropdown-menu-content .gyramais-dropdown-menu-separator {
+  @apply
+    bg-[var(--border-color)];
+}
+
+.gyramais-dropdown-menu-content .gyramais-dropdown-menu-item {
+  @apply
+    cursor-pointer;
+}

package/src/components/DropdownMenu/index.ts

@@ -0,0 +1 @@
+export * from "./DropdownMenu";

package/src/components/Filter/Filter.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Filter } from "./Filter";
+
+
+const meta: Meta<typeof Filter> = {
+  title: "Library/Components/Filter",
+  component: Filter,
+  parameters: {
+    layout: 'padded',
+  },
+  render: ({ initialValues, filters, onFilter }) => (
+    <div className="w-full h-[500px] flex items-center">
+      <Filter
+        initialValues={initialValues}
+        filters={filters}
+        onFilter={onFilter}
+      />
+    </div>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Filter>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    filters: [{
+      key: 'isPartner',
+      name: 'Apenas clientes de parceiros',
+      type: 'boolean',
+      disabled: false,
+    }, {
+      key: 'businessNumber',
+      name: 'Número da empresa',
+      type: 'text',
+      disabled: false,
+    }],
+    onFilter: (filters) => console.log(filters),
+  },
+}
+
+export const WithInitialValue: Story = {
+  args: {
+    id: '',
+    className: '',
+    filters: [{
+      key: 'isPartner',
+      name: 'Apenas clientes de parceiros',
+      type: 'boolean',
+      disabled: false,
+    }, {
+      key: 'businessNumber',
+      name: 'Número da empresa',
+      type: 'text',
+      disabled: false,
+    }],
+    initialValues: {
+      isPartner: true,
+    },
+    onFilter: (filters) => console.log(filters),
+  },
+}
+
+export const UniqueFilterBoolean: Story = {
+  args: {
+    id: '',
+    className: '',
+    filters: [{
+      key: 'onlyCnpj',
+      name: 'Apenas CNPJ',
+      type: 'boolean',
+      disabled: false,
+    }],
+    onFilter: (filters) => console.log(filters),
+  },
+}
+
+export const UniqueFilterText: Story = {
+  args: {
+    id: '',
+    className: '',
+    filters: [{
+      key: 'onlyCnpj',
+      name: 'CNPJ',
+      type: 'text',
+      disabled: false,
+    }],
+    onFilter: (filters) => console.log(filters),
+  },
+}

package/src/components/Filter/Filter.tsx

@@ -0,0 +1,213 @@
+import React, { useState, useEffect, useMemo } from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import { Button } from '../Button';
+import { HoverCard } from "../HoverCard";
+import { Row } from "../Row";
+import { Col } from "../Col";
+import { Input } from "../Input";
+import { Switch } from "../Switch";
+
+import FilterListIcon from '@mui/icons-material/FilterList';
+
+type FilterItem = {
+  key: string;
+  name: string;
+  type: 'text' | 'boolean';
+  disabled?: boolean;
+};
+
+type FilterValue = {
+  [key: string]: string | boolean;
+};
+
+type FilterProps = {
+  id?: string;
+  className?: string;
+  initialValues?: FilterValue;
+  filters?: Array<FilterItem>;
+  onFilter: (values: { [key: string]: string | boolean }) => void;
+}
+
+const Filter = ({
+  id,
+  className,
+  initialValues = {},
+  filters = [],
+  onFilter,
+}: FilterProps) => {
+  const [values, setValues] = useState<FilterValue>({});
+  const [filtersOpened, setFiltersOpened] = useState(false);
+  const [filtersWithValue, setFiltersWithValue] = useState(0);
+
+  const uniqueFilter: FilterItem | boolean = useMemo(() => filters.length === 1 && filters[0], [filters]);
+
+  const handleChangeFilterValue: (params: {
+    key: string;
+    value: string | boolean;
+  }) => void = ({ key, value }) => setValues({...values, [key]: value });
+
+  const handleFilterButtonClick: () => void = () => {
+    if (typeof uniqueFilter === 'object' && uniqueFilter.type === 'boolean') {
+      const key = uniqueFilter.key;
+      const value = values[key] !== true;
+
+      handleChangeFilterValue({ key, value })
+      onFilter({ [key]: value });
+      return;
+    }
+
+    setFiltersOpened(!filtersOpened);
+  };
+
+  const clearFilterValues = () => {
+    if (filters) {
+      const temp: FilterValue = {};
+
+      filters.forEach(({ key, type }) => {
+        temp[key] = '';
+
+        if (type === 'boolean') {
+          temp[key] = false;
+        }
+      });
+
+      setValues(temp);
+    }
+
+    setFiltersWithValue(0);
+  };
+
+  const renderFilterItem: (params: FilterItem) => React.ReactNode = ({
+    key,
+    name,
+    type,
+    disabled,
+  }) => {
+    if (values[key] === null || values[key] === undefined) {
+      return false;
+    }
+
+    if (type === 'boolean') {
+      return (
+        <Row columns={3} gap={8} align="center">
+          <Col span={2} className="gyramais-filter-label">
+            {name}
+          </Col>
+
+          <Col span={1} className="gyramais-filter-switch-area">
+            <Switch
+              disabled={disabled}
+              checked={!!values[key]}
+              onCheckedChange={(checked) => handleChangeFilterValue({ key, value: checked })}
+            />
+          </Col>
+        </Row>
+      )
+    }
+    
+    return (
+      <Input
+        disabled={disabled}
+        placeholder={name}
+        value={values[key] || ''}
+        onChange={(e) => handleChangeFilterValue({ key, value: e.target.value })}
+      />
+    )
+  };
+
+  useEffect(() => {
+    const temp: FilterValue = {};
+    
+    if (filters) {
+      filters.forEach(({ key, type }) => {
+        const initialValue = initialValues[key];
+
+        if (type === 'text') {
+          temp[key] = initialValue && typeof initialValue === 'string' ? `${initialValue}` : '';
+        }
+
+        if (type === 'boolean') {
+          temp[key] = initialValue && typeof initialValue === 'boolean' ? initialValue : false;
+        }
+      });
+
+      setValues(temp);
+    }
+
+    const appliedFilters = Object.values(temp).filter(Boolean).length;
+    setFiltersWithValue(appliedFilters);
+  }, []);
+
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-filter",
+        className,
+      )}
+    >
+      <HoverCard
+        visible={filtersOpened}
+        side="top"
+        align="start"
+        content={(
+          <Row columns={1} gap={16} className="gyramais-filter-filters-container">
+            {filters.map((filter) => (
+              <Col key={filter.key} span={1} className="gyramais-filter-filters-item">
+                {renderFilterItem(filter)}
+              </Col>
+            ))}
+
+            <Col span={1}>
+              <Row columns={2} gap={8} align="center">
+                <Col span={2} className="gyramais-filter-filters-footer">
+                  <Button
+                    className="mr-4"
+                    link
+                    onClick={clearFilterValues}
+                  >
+                    Limpar
+                    {filters.length === 1 ? ' filtro' : ' filtros'}
+                  </Button>
+
+                  <Button
+                    onClick={() => {
+                      const appliedFilters = Object.values(values).filter(Boolean).length;
+
+                      onFilter?.(values);
+                      setFiltersWithValue(appliedFilters);
+                      setFiltersOpened(false);
+                    }}
+                  >
+                    Filtrar
+                  </Button>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+        )}
+      >
+        <div className="gyramais-filter-button-container">
+          {typeof uniqueFilter !== 'object' && filtersWithValue > 0 && (
+            <div className="gyramais-filter-filters-count">
+              {filtersWithValue}
+            </div>
+          )}
+
+          <Button
+            className="gyramais-filter-button"
+            type={typeof uniqueFilter === 'object' && values[uniqueFilter.key] && !filtersOpened ? 'primary' : 'white'}
+            icon={(<FilterListIcon className="gyramais-filter-button-icon" />)}
+            onClick={handleFilterButtonClick}
+          >
+            {typeof uniqueFilter === 'object' && uniqueFilter.name || 'Filtro'}
+          </Button>
+        </div>
+      </HoverCard>
+    </div>
+  );
+};
+
+export { Filter };