@granto-umbrella/umbrella-components 3.0.36 → 3.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "3.0.36",
+  "version": "3.0.38",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -30,6 +30,7 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "build:storybook": "storybook build -o storybook-static",
     "predeploy": "npm run build-storybook",
     "deploy": "gh-pages -d storybook-static",
     "version": "npm run build && git add .",

package/src/components/molecules/FieldSelector/FieldSelector.styles.ts

@@ -2,14 +2,14 @@ import {
   semanticBorders,
   semanticColors,
   typographyTokens,
-} from '@/styles/tokens';
+} from '../../../styles/tokens';
 import styled from 'styled-components';
 
 export const Container = styled.div`
   display: flex;
   gap: 2rem;
   justify-content: center;
-  padding: 2rem;
+  padding: 2rem 0;
 `;
 
 export const Column = styled.div`

package/src/components/organisms/ExportExcelModal/ExportExcelModal.styles.ts

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import * as Dialog from '@radix-ui/react-dialog';
+import { semanticColors } from '../../../styles/tokens';
+
+export const Overlay = styled(Dialog.Overlay)`
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 50;
+`;
+
+export const Content = styled(Dialog.Content)`
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  z-index: 1000;
+  background: transparent;
+`;
+
+export const Panel = styled.div`
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  width: min(850px, calc(100% - 32px));
+  border-top: 6px solid ${semanticColors.branding.surface.enabled};
+`;
+
+export const Title = styled.h2`
+  font-size: 28px;
+  font-weight: 600;
+  color: ${semanticColors.base.text};
+  margin-bottom: 16px;
+  padding-right: 12px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  margin-top: -2px;
+`;
+
+export const CloseIcon = styled(Dialog.Close)`
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+
+  svg {
+    color: #888;
+  }
+`;
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  margin-bottom: 24px;
+`;

package/src/components/organisms/ExportExcelModal/ExportExcelModal.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import {
+  CloseIcon,
+  Content,
+  Header,
+  Overlay,
+  Panel,
+} from './ExportExcelModal.styles';
+import FieldSelector from '../../molecules/FieldSelector/FieldSelector';
+import ButtonGroup from '../../molecules/ButtonGroup/ButtonGroup';
+export const ExportExcelModal = ({
+  open,
+  onOpenChange,
+  onClose,
+  data,
+  title,
+  description,
+  onExport,
+  onSave,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onClose: () => void;
+  onRetry?: () => void;
+  data: any;
+  title: string;
+  description: string;
+  onExport?: (data: any) => void;
+  onSave?: (data: any) => void;
+}) => {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Overlay />
+      <Content>
+        <Panel>
+          <Header>
+            <div>
+              <Dialog.Title>{title}</Dialog.Title>
+              <Dialog.Description>{description}</Dialog.Description>
+            </div>
+
+            <CloseIcon aria-label="Fechar" onClick={onClose}>
+              <X size={28} color="#BDBDBD" />
+            </CloseIcon>
+          </Header>
+
+          <FieldSelector
+            availableFields={data.available}
+            selectedFields={data.selected}
+            setAvailableFields={data.setAvailable}
+            setSelectedFields={data.setSelected}
+            handleSave={(data) => console.log('Nova ordem:', data)}
+          />
+
+          <ButtonGroup
+            buttons={[
+              {
+                label: 'Salvar e exportar planilha',
+                variant: 'primary',
+                onClick: () => {
+                  if (onExport) onExport(data.selected);
+                },
+              },
+              {
+                label: 'Salvar configurações',
+                variant: 'outline',
+                onClick: () => {
+                  if (onSave) onSave(data.selected);
+                },
+              },
+            ]}
+            orientation="horizontal"
+          />
+        </Panel>
+      </Content>
+    </Dialog.Root>
+  );
+};

package/src/index.ts

@@ -64,6 +64,7 @@ import {
   StyledDialogOverlay,
 } from './components/organisms/Dialog/Dialog.styles';
 import DonutEmissionsChart from './components/organisms/DonutEmissionsChart';
+import { ExportExcelModal } from './components/organisms/ExportExcelModal/ExportExcelModal';
 import {
   FormControl,
   FormDescription,
@@ -87,6 +88,7 @@ export {
   FieldSelector,
   BannerAjuda,
   Badge,
+  ExportExcelModal,
   Breadcrumb,
   Button,
   ButtonGroup,