@archbase/components 3.0.0

package/src/notification/ArchbaseDialog.tsx

@@ -0,0 +1,212 @@
+/**
+ * ArchbaseDialog — diálogo de confirmação/erro usando Mantine modals.
+ * @status stable
+ */
+import { Accordion, Button, Flex, Paper, rem, ScrollArea, Text, TextInput } from '@mantine/core';
+import { ContextModalProps, modals } from '@mantine/modals';
+import {
+	IconAlertTriangleFilled,
+	IconBug,
+	IconCircleCheckFilled,
+	IconCircleFilled,
+	IconInfoCircle,
+	IconInfoCircleFilled,
+	IconTriangle,
+} from '@tabler/icons-react';
+import { archbaseI18next } from '@archbase/core';
+import React, { ChangeEventHandler, ReactNode } from 'react';
+
+export class ArchbaseDialog {
+	static showConfirmDialogYesNo = (title: string, question: string, onConfirm: () => void, onCancel: () => void) => {
+		modals.openConfirmModal({
+			title,
+			centered: true,
+			children: <Text size="sm">{question}</Text>,
+			labels: { confirm: archbaseI18next.t('archbase:No'), cancel: archbaseI18next.t('archbase:Yes') },
+			confirmProps: { color: 'red' },
+			cancelProps: { color: 'green' },
+			onConfirm: onCancel,
+			onCancel: onConfirm,
+		});
+	};
+
+	static showInfo = (message: ReactNode, title?: string, onConfirm?: () => void) => {
+		modals.open({
+			title: title || archbaseI18next.t('archbase:Information'),
+			children: (
+				<Paper>
+					<Flex gap="md" direction="row" justify="flex-start" align="center">
+						<IconInfoCircleFilled size="2rem" style={{ color: '#099CFF' }} />
+						{ typeof message === "string" ? <Text size="md">{message}</Text> : message }
+					</Flex>
+					<Button
+						fullWidth
+						onClick={() => {
+							modals.closeAll();
+							onConfirm && onConfirm!();
+						}}
+						mt="md"
+					>
+						Ok
+					</Button>
+				</Paper>
+			),
+		});
+	};
+
+	static showWarning = (message: ReactNode, title?: string, onConfirm?: () => void) => {
+		modals.open({
+			title: title || archbaseI18next.t('archbase:Attention'),
+			children: (
+				<Paper>
+					<Flex gap="md" direction="row" justify="flex-start" align="center">
+						<IconAlertTriangleFilled size="2rem" style={{ color: 'orange' }} />
+						{ typeof message === "string" ? <Text size="md">{message}</Text> : message }
+					</Flex>
+					<Button
+						fullWidth
+						onClick={() => {
+							modals.closeAll();
+							onConfirm && onConfirm!();
+						}}
+						mt="md"
+					>
+						Ok
+					</Button>
+				</Paper>
+			),
+		});
+	};
+
+	static showSuccess = (message: ReactNode, title?: string, onConfirm?: () => void) => {
+		modals.open({
+			title: title || archbaseI18next.t('archbase:Attention'),
+			children: (
+				<Paper>
+					<Flex gap="md" direction="row" justify="flex-start" align="center">
+						<IconCircleCheckFilled size="2rem" style={{ color: '#1AC455' }} />
+						{ typeof message === "string" ? <Text size="md">{message}</Text> : message }
+					</Flex>
+					<Button
+						fullWidth
+						onClick={() => {
+							modals.closeAll();
+							onConfirm && onConfirm!();
+						}}
+						mt="md"
+					>
+						Ok
+					</Button>
+				</Paper>
+			),
+		});
+	};
+
+	static showError = (message: ReactNode, title?: string, onConfirm?: () => void) => {
+		modals.open({
+			title: title || archbaseI18next.t('archbase:Attention'),
+			size: 'md',
+			children: (
+				<Paper>
+					<Flex gap="md" direction="row" justify="flex-start" align="center">
+						<IconBug size="96px" style={{ color: 'red' }} />
+						{ typeof message === "string" ? <Text size="md">{message}</Text> : message }
+					</Flex>
+					<Button
+						fullWidth
+						onClick={() => {
+							modals.closeAll();
+							onConfirm && onConfirm!();
+						}}
+						mt="md"
+					>
+						Ok
+					</Button>
+				</Paper>
+			),
+		});
+	};
+
+	static showErrorWithDetails = (title: string, message: string, detailMessage?: string, onConfirm?: () => void) => {
+		modals.openContextModal({
+			modal: 'archbaseShowError',
+			title: title,
+			innerProps: {
+				message,
+				detailMessage,
+				onConfirm,
+			},
+		});
+	};
+
+	static showInputDialog = (
+		label: string,
+		placeholder?: string,
+		title?: string,
+		onInputChange?: ChangeEventHandler<any> | undefined,
+		onConfirm?: () => void,
+		onCancel?: () => void,
+	) => {
+		modals.open({
+			title: title || archbaseI18next.t('archbase:Informe'),
+			children: (
+				<Paper>
+					<TextInput label={label} placeholder={placeholder} data-autofocus onChange={onInputChange} />
+					<Button
+						onClick={() => {
+							modals.closeAll();
+							onConfirm && onConfirm!();
+						}}
+						mt="md"
+					>
+						Ok
+					</Button>
+					<Button
+						onClick={() => {
+							modals.closeAll();
+							onCancel && onCancel!();
+						}}
+						mt="md"
+					>
+						{archbaseI18next.t('archbase:Cancel')}
+					</Button>
+				</Paper>
+			),
+		});
+	};
+}
+
+export const CustomShowErrorModal = ({
+	context,
+	id,
+	innerProps,
+}: ContextModalProps<{ message: ReactNode; detailMessage?: ReactNode; onConfirm?: () => void }>) => (
+	<Paper miw={'400px'}>
+		<Accordion variant="contained">
+			<Accordion.Item value="photos">
+				<Accordion.Control icon={<IconBug size="2.8rem" style={{ color: 'red' }} />}>
+					<ScrollArea h={'160px'} mah={'160px'}>
+						{innerProps.message}
+					</ScrollArea>
+				</Accordion.Control>
+				<Accordion.Panel>
+					<ScrollArea h={'200px'} mah={'200px'}>
+						{innerProps.detailMessage}
+					</ScrollArea>
+				</Accordion.Panel>
+			</Accordion.Item>
+		</Accordion>
+		<Button
+			fullWidth
+			mt="md"
+			onClick={() => {
+				if (innerProps.onConfirm) {
+					innerProps.onConfirm();
+				}
+				context.closeModal(id);
+			}}
+		>
+			Ok
+		</Button>
+	</Paper>
+);

package/src/notification/ArchbaseNotifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseNotifications.d.ts","sourceRoot":"","sources":["ArchbaseNotifications.tsx"],"names":[],"mappings":"AAKA,qBAAa,qBAAqB;WACnB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,SAAO,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;WAkBjF,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,SAAO,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;WAkBrF,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,SAAO,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI;CAiBnG"}

package/src/notification/ArchbaseNotifications.tsx

@@ -0,0 +1,64 @@
+/**
+ * ArchbaseNotifications — helpers para mostrar notificações Mantine (erro/sucesso/info).
+ * @status stable
+ */
+import { Text } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { IconAlertCircle, IconBug, IconCircleCheck } from '@tabler/icons-react';
+import React from 'react';
+
+export class ArchbaseNotifications {
+	public static showError(title: string, error: string, autoClose = 5000, variant?: string): void {
+		notifications.show({
+			withCloseButton: true,
+			autoClose,
+			title: (
+				<Text c="red" fz="lg">
+					{title}
+				</Text>
+			),
+			message: error,
+			variant,
+			withBorder: true,
+			color: 'red',
+			icon: <IconBug size="1.4rem" />,
+			loading: false,
+		});
+	}
+
+	public static showSuccess(title: string, message: string, autoClose = 5000, variant?: string): void {
+		notifications.show({
+			withCloseButton: true,
+			autoClose,
+			title: (
+				<Text c="#1AC455" fz="lg">
+					{title}
+				</Text>
+			),
+			message,
+			variant: 'filled',
+			withBorder: true,
+			color: '#1AC455',
+			icon: <IconCircleCheck size="1.4rem" />,
+			loading: false,
+		});
+	}
+
+	public static showWarning(title: string, message: string, autoClose = 5000, variant?: string): void {
+		notifications.show({
+			withCloseButton: true,
+			autoClose,
+			title: (
+				<Text c="orange" fz="lg">
+					{title}
+				</Text>
+			),
+			message,
+			variant: 'filled',
+			withBorder: true,
+			color: 'orange',
+			icon: <IconAlertCircle size="1.4rem" />,
+			loading: false,
+		});
+	}
+}

package/src/notification/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC"}

package/src/notification/index.ts

@@ -0,0 +1,4 @@
+export { ArchbaseNotifications } from './ArchbaseNotifications';
+export { ArchbaseAlert } from './ArchbaseAlert';
+export type { ArchbaseAlertProps } from './ArchbaseAlert';
+export { ArchbaseDialog, CustomShowErrorModal } from './ArchbaseDialog';

package/src/notification/intro.mdx

@@ -0,0 +1,4 @@
+import { Meta, Markdown } from '@storybook/blocks';
+
+
+<Meta title="Alertas e notificações/Introdução" />

package/src/onboarding/ArchbaseOnboardingTour.tsx

@@ -0,0 +1,147 @@
+import React, { ReactNode, useState, useEffect } from 'react';
+import { OnboardingTour as MantineOnboardingTour } from '@gfazioli/mantine-onboarding-tour';
+import type { OnboardingTourStep } from '@gfazioli/mantine-onboarding-tour';
+
+export interface ArchbaseOnboardingTourStep {
+  /**
+   * ID único do step
+   */
+  id: string;
+  /**
+   * Seletor CSS do elemento a ser destacado
+   */
+  target?: string;
+  /**
+   * Título do step
+   */
+  title?: ReactNode;
+  /**
+   * Conteúdo/descrição do step
+   */
+  content?: ReactNode;
+}
+
+export interface ArchbaseOnboardingTourProps {
+  /**
+   * Array de steps do tour
+   */
+  steps: ArchbaseOnboardingTourStep[];
+  /**
+   * Callback quando o tour é iniciado
+   */
+  onStart?: () => void;
+  /**
+   * Callback quando o tour é finalizado
+   */
+  onEnd?: () => void;
+  /**
+   * Callback quando o step muda
+   */
+  onChange?: (step: OnboardingTourStep) => void;
+  /**
+   * Iniciar o tour automaticamente ao montar o componente
+   * @default false
+   */
+  autoStart?: boolean;
+  /**
+   * Se o tour deve ser repetido (loop)
+   */
+  loop?: boolean;
+  /**
+   * Conteúdo da aplicação (children é obrigatório no componente base)
+   */
+  children: ReactNode;
+}
+
+/**
+ * Componente ArchbaseOnboardingTour
+ *
+ * Wrapper sobre @gfazioli/mantine-onboarding-tour para criar tours interativos
+ * de onboarding em aplicações React. Ideal para introduzir novos usuários às
+ * funcionalidades do sistema.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const tourSteps: ArchbaseOnboardingTourStep[] = [
+ *     {
+ *       id: 'welcome',
+ *       target: '#dashboard',
+ *       title: 'Bem-vindo ao Dashboard',
+ *       content: 'Aqui você pode ver todas as suas métricas.',
+ *     },
+ *     {
+ *       id: 'settings',
+ *       target: '#settings',
+ *       title: 'Configurações',
+ *       content: 'Ajuste suas preferências aqui.',
+ *     },
+ *   ];
+ *
+ *   return (
+ *     <ArchbaseOnboardingTour
+ *       steps={tourSteps}
+ *       autoStart={true}
+ *       onEnd={() => console.log('Tour finalizado!')}
+ *     >
+ *       <YourAppContent />
+ *     </ArchbaseOnboardingTour>
+ *   );
+ * }
+ * ```
+ */
+export function ArchbaseOnboardingTour({
+  steps,
+  onStart,
+  onEnd,
+  onChange,
+  autoStart = false,
+  loop = false,
+  children,
+}: ArchbaseOnboardingTourProps) {
+  const [started, setStarted] = useState(false);
+
+  useEffect(() => {
+    if (autoStart) {
+      setStarted(true);
+    }
+  }, [autoStart]);
+
+  // Converter steps para o formato esperado pelo mantine-onboarding-tour
+  const tourSteps: OnboardingTourStep[] = steps.map((step) => ({
+    id: step.id,
+    title: step.title,
+    content: step.content,
+  }));
+
+  return (
+    <MantineOnboardingTour
+      tour={tourSteps}
+      started={started}
+      onOnboardingTourStart={onStart}
+      onOnboardingTourEnd={onEnd}
+      onOnboardingTourChange={onChange}
+      loop={loop}
+    >
+      {children}
+    </MantineOnboardingTour>
+  );
+}
+
+/**
+ * Hook simplificado para controlar o tour programaticamente
+ *
+ * Para controle programático completo, use o hook `useOnboardingTour`
+ * diretamente de @gfazioli/mantine-onboarding-tour
+ */
+export function useArchbaseOnboarding() {
+  // Hook simplificado - para controle completo, use o hook da biblioteca base
+  return {
+    start: () => {
+      console.warn('Para controle completo do tour, use o hook useOnboardingTour de @gfazioli/mantine-onboarding-tour');
+    },
+    stop: () => {
+      console.warn('Para controle completo do tour, use o hook useOnboardingTour de @gfazioli/mantine-onboarding-tour');
+    },
+  };
+}

package/src/onboarding/index.ts

@@ -0,0 +1,2 @@
+export { ArchbaseOnboardingTour, useArchbaseOnboarding } from './ArchbaseOnboardingTour';
+export type { ArchbaseOnboardingTourProps, ArchbaseOnboardingTourStep } from './ArchbaseOnboardingTour';