@flowtomic/ui 0.1.0 → 0.1.2

package/dist/components/organisms/web-preview/web-preview.d.ts

@@ -0,0 +1,39 @@
+/**
+ * WebPreview Component - Flowtomic UI
+ *
+ * Componente para visualizar páginas web em iframe
+ */
+import type { ComponentProps, ReactNode } from "react";
+import { Button, Input } from "../../atoms";
+export type WebPreviewContextValue = {
+    url: string;
+    setUrl: (url: string) => void;
+    consoleOpen: boolean;
+    setConsoleOpen: (open: boolean) => void;
+};
+export type WebPreviewProps = ComponentProps<"div"> & {
+    defaultUrl?: string;
+    onUrlChange?: (url: string) => void;
+};
+export declare const WebPreview: ({ className, children, defaultUrl, onUrlChange, ...props }: WebPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export type WebPreviewNavigationProps = ComponentProps<"div">;
+export declare const WebPreviewNavigation: ({ className, children, ...props }: WebPreviewNavigationProps) => import("react/jsx-runtime").JSX.Element;
+export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+};
+export declare const WebPreviewNavigationButton: ({ onClick, disabled, tooltip, children, ...props }: WebPreviewNavigationButtonProps) => import("react/jsx-runtime").JSX.Element;
+export type WebPreviewUrlProps = ComponentProps<typeof Input>;
+export declare const WebPreviewUrl: ({ value, onChange, onKeyDown, ...props }: WebPreviewUrlProps) => import("react/jsx-runtime").JSX.Element;
+export type WebPreviewBodyProps = ComponentProps<"iframe"> & {
+    loading?: ReactNode;
+};
+export declare const WebPreviewBody: ({ className, loading, src, ...props }: WebPreviewBodyProps) => import("react/jsx-runtime").JSX.Element;
+export type WebPreviewConsoleProps = ComponentProps<"div"> & {
+    logs?: Array<{
+        level: "log" | "warn" | "error";
+        message: string;
+        timestamp: Date;
+    }>;
+};
+export declare const WebPreviewConsole: ({ className, logs, children, ...props }: WebPreviewConsoleProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=web-preview.d.ts.map

package/dist/components/organisms/web-preview/web-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-preview.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/web-preview/web-preview.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EACL,MAAM,EAIN,KAAK,EAKN,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,sBAAsB,GAAG;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC;AAYF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,4DAMxB,eAAe,4CA0BjB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,mCAIlC,yBAAyB,4CAI3B,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,oDAMxC,+BAA+B,4CAoBjC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,aAAa,GAAI,0CAA0C,kBAAkB,4CA+BzF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uCAAuC,mBAAmB,4CAexF,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC;QACX,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;QAChC,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,IAAI,CAAC;KACjB,CAAC,CAAC;CACJ,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,yCAK/B,sBAAsB,4CAmDxB,CAAC"}

package/dist/components/organisms/web-preview/web-preview.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * WebPreview Component - Flowtomic UI
+ *
+ * Componente para visualizar páginas web em iframe
+ */
+import { ChevronDownIcon } from "lucide-react";
+import { createContext, useContext, useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Input, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../../atoms";
+const WebPreviewContext = createContext(null);
+const useWebPreview = () => {
+    const context = useContext(WebPreviewContext);
+    if (!context) {
+        throw new Error("WebPreview components must be used within a WebPreview");
+    }
+    return context;
+};
+export const WebPreview = ({ className, children, defaultUrl = "", onUrlChange, ...props }) => {
+    const [url, setUrl] = useState(defaultUrl);
+    const [consoleOpen, setConsoleOpen] = useState(false);
+    const handleUrlChange = (newUrl) => {
+        setUrl(newUrl);
+        onUrlChange?.(newUrl);
+    };
+    const contextValue = {
+        url,
+        setUrl: handleUrlChange,
+        consoleOpen,
+        setConsoleOpen,
+    };
+    return (_jsx(WebPreviewContext.Provider, { value: contextValue, children: _jsx("div", { className: cn("flex size-full flex-col rounded-lg border bg-card", className), ...props, children: children }) }));
+};
+export const WebPreviewNavigation = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center gap-1 border-b p-2", className), ...props, children: children }));
+export const WebPreviewNavigationButton = ({ onClick, disabled, tooltip, children, ...props }) => (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { className: "h-8 w-8 p-0 hover:text-foreground", disabled: disabled, onClick: onClick, size: "sm", variant: "ghost", ...props, children: children }) }), _jsx(TooltipContent, { children: _jsx("p", { children: tooltip }) })] }) }));
+export const WebPreviewUrl = ({ value, onChange, onKeyDown, ...props }) => {
+    const { url, setUrl } = useWebPreview();
+    const [inputValue, setInputValue] = useState(url);
+    useEffect(() => {
+        setInputValue(url);
+    }, [url]);
+    const handleChange = (event) => {
+        setInputValue(event.target.value);
+        onChange?.(event);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Enter") {
+            const target = event.target;
+            setUrl(target.value);
+        }
+        onKeyDown?.(event);
+    };
+    return (_jsx(Input, { className: "h-8 flex-1 text-sm", onChange: onChange ?? handleChange, onKeyDown: handleKeyDown, placeholder: "Enter URL...", value: value ?? inputValue, ...props }));
+};
+export const WebPreviewBody = ({ className, loading, src, ...props }) => {
+    const { url } = useWebPreview();
+    return (_jsxs("div", { className: "flex-1", children: [_jsx("iframe", { className: cn("size-full", className), sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-presentation", src: (src ?? url) || undefined, title: "Preview", ...props }), loading] }));
+};
+export const WebPreviewConsole = ({ className, logs = [], children, ...props }) => {
+    const { consoleOpen, setConsoleOpen } = useWebPreview();
+    return (_jsxs(Collapsible, { className: cn("border-t bg-muted/50 font-mono text-sm", className), onOpenChange: setConsoleOpen, open: consoleOpen, ...props, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { className: "flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50", variant: "ghost", children: ["Console", _jsx(ChevronDownIcon, { className: cn("h-4 w-4 transition-transform duration-200", consoleOpen && "rotate-180") })] }) }), _jsx(CollapsibleContent, { className: cn("px-4 pb-4", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"), children: _jsxs("div", { className: "max-h-48 space-y-1 overflow-y-auto", children: [logs.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: "No console output" })) : (logs.map((log, index) => (_jsxs("div", { className: cn("text-xs", log.level === "error" && "text-destructive", log.level === "warn" && "text-yellow-600", log.level === "log" && "text-foreground"), children: [_jsx("span", { className: "text-muted-foreground", children: log.timestamp.toLocaleTimeString() }), " ", log.message] }, `${log.timestamp.getTime()}-${index}`)))), children] }) })] }));
+};

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * flowtomic/ui
+ *
+ * Biblioteca de componentes UI reutilizáveis
+ * baseados em Radix UI e Tailwind CSS
+ *
+ * Estrutura baseada em Atomic Design:
+ * - Atoms: Componentes básicos e indivisíveis
+ * - Molecules: Componentes compostos
+ * - Organisms: Componentes complexos
+ */
+export * from "./components/atoms";
+export * from "./components/molecules";
+export * from "./components/organisms";
+export { cn } from "./lib/utils";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,cAAc,oBAAoB,CAAC;AAGnC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC"}