@orbe-agro/client-core 5.6.123 → 5.6.124

package/lib/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.tsx

@@ -1,179 +1,157 @@
-import Tooltip from "@/components/ui/Tooltip";
-import Menu from "@/components/ui/Menu";
-import AuthorityCheck from "@/components/shared/AuthorityCheck";
-import VerticalMenuIcon from "./VerticalMenuIcon";
-import { Link } from "react-router-dom";
-import Dropdown from "@/components/ui/Dropdown";
-import type { CommonProps } from "@/@types/common";
-import type { Direction } from "@/@types/theme";
-import type { NavigationTree } from "@/@types/navigation";
+import Tooltip from '@/components/ui/Tooltip'
+import Menu from '@/components/ui/Menu'
+import ScrollBar from '@/components/ui/ScrollBar'
+import VerticalMenuIcon from './VerticalMenuIcon'
+import { Link } from 'react-router-dom'
+import type { CommonProps } from '@/@types/common'
+import type { Direction } from '@/@types/theme'
+import type { NavigationTree } from '@/@types/navigation'
 
-const { MenuItem } = Menu;
+const { MenuItem } = Menu
 
 type LinkRenderer = (
-  nav: NavigationTree,
-  children: React.ReactNode
-) => React.ReactNode;
+    nav: NavigationTree,
+    children: React.ReactNode,
+) => React.ReactNode
 
 interface CollapsedItemProps extends CommonProps {
-  nav: NavigationTree;
-  direction?: Direction;
-  linkRenderer?: LinkRenderer;
-  onLinkClick?: (link: { key: string; title: string; path: string }) => void;
-  t: (
-    key: string,
-    fallback?: string | Record<string, string | number>
-  ) => string;
-  renderAsIcon?: boolean;
-  userAuthority: string[];
-  currentKey?: string;
-  parentKeys?: string[];
+    nav: NavigationTree
+    direction?: Direction
+    linkRenderer?: LinkRenderer
+    onLinkClick?: (link: { key: string; title: string; path: string }) => void
+    t: (
+        key: string,
+        fallback?: string | Record<string, string | number>,
+    ) => string
+    renderAsIcon?: boolean
+    userAuthority: string[]
+    currentKey?: string
+    parentKeys?: string[]
 }
 
 interface DefaultItemProps {
-  nav: NavigationTree;
-  onLinkClick?: (link: { key: string; title: string; path: string }) => void;
-  sideCollapsed?: boolean;
-  t: (
-    key: string,
-    fallback?: string | Record<string, string | number>
-  ) => string;
-  indent?: boolean;
-  userAuthority: string[];
-  showIcon?: boolean;
-  showTitle?: boolean;
-  linkRenderer?: LinkRenderer;
+    nav: NavigationTree
+    onLinkClick?: (link: { key: string; title: string; path: string }) => void
+    sideCollapsed?: boolean
+    t: (
+        key: string,
+        fallback?: string | Record<string, string | number>,
+    ) => string
+    indent?: boolean
+    userAuthority: string[]
+    showIcon?: boolean
+    showTitle?: boolean
+    linkRenderer?: LinkRenderer
 }
 
 interface VerticalMenuItemProps extends CollapsedItemProps, DefaultItemProps {}
 
-const CollapsedItem = ({
-  nav,
-  children,
-  direction,
-  renderAsIcon,
-  onLinkClick,
-  userAuthority,
-  t,
-  currentKey,
-  linkRenderer,
-}: CollapsedItemProps) => {
-  const linkContent = <span>{t(nav.translateKey, nav.title)}</span>;
-
-  const renderLink = () => {
-    if (linkRenderer) {
-      return linkRenderer(nav, linkContent);
-    }
-
-    return (
-      <Link
-        id={nav.path}
-        className="flex h-full w-full items-center outline-none"
-        to={nav.path}
-        target={nav.isExternalLink ? "_blank" : ""}
-        onClick={() =>
-          onLinkClick?.({
-            key: nav.key,
-            title: nav.title,
-            path: nav.path,
-          })
-        }
-      >
-        {linkContent}
-      </Link>
-    );
-  };
-
-  return (
-    <Dropdown.Item active={currentKey === nav.key}>
-      {nav.path ? renderLink() : <span>{t(nav.translateKey, nav.title)}</span>}
-    </Dropdown.Item>
-  );
-};
-
 const DefaultItem = (props: DefaultItemProps) => {
-  const {
-    nav,
-    onLinkClick,
-    showTitle,
-    indent,
-    showIcon = true,
-    userAuthority,
-    t,
-    linkRenderer,
-  } = props;
-
-  const linkContent = (
-    <>
-      {showIcon && <VerticalMenuIcon icon={nav.icon} />}
-      {showTitle && <span>{t(nav.translateKey, nav.title)}</span>}
-    </>
-  );
+    const {
+        nav,
+        onLinkClick,
+        showTitle,
+        indent,
+        showIcon = true,
+        t,
+        linkRenderer,
+    } = props
+
+    const translatedTitle = t(nav.translateKey, nav.title)
+
+    const renderItemContent = (titleClassName?: string) => (
+        <>
+            {showIcon && <VerticalMenuIcon icon={nav.icon} />}
+            {showTitle && (
+                <span className={titleClassName}>{translatedTitle}</span>
+            )}
+        </>
+    )
+
+    const linkContent = (
+        <span className="relative flex min-w-0 flex-1 items-center gap-2">
+            <span className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+                {renderItemContent('truncate')}
+            </span>
+            {showTitle && (
+                <div className="w-100 absolute -left-3 top-1/2 z-20 hidden min-w-[calc(100%+1.5rem)] -translate-y-1/2 group-hover/item:block group-focus-visible/item:block">
+                    <ScrollBar
+                        autoHide
+                        className="max-h-16 rounded-lg bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-gray-100"
+                    >
+                        <div className="flex h-full w-max min-w-full items-center gap-2 whitespace-nowrap rounded-lg px-3 font-semibold">
+                            {renderItemContent()}
+                        </div>
+                    </ScrollBar>
+                </div>
+            )}
+        </span>
+    )
+
+    const renderLink = () => {
+        if (linkRenderer) {
+            return linkRenderer(nav, linkContent)
+        }
 
-  const renderLink = () => {
-    if (linkRenderer) {
-      return linkRenderer(nav, linkContent);
+        return (
+            <Link
+                to={nav.path}
+                className="group/item relative flex w-full min-w-0 items-center gap-2"
+                target={nav.isExternalLink ? '_blank' : ''}
+                onClick={() =>
+                    onLinkClick?.({
+                        key: nav.key,
+                        title: nav.title,
+                        path: nav.path,
+                    })
+                }
+            >
+                {linkContent}
+            </Link>
+        )
     }
 
     return (
-      <Link
-        to={nav.path}
-        className="flex h-full w-full items-center gap-2"
-        target={nav.isExternalLink ? "_blank" : ""}
-        onClick={() =>
-          onLinkClick?.({
-            key: nav.key,
-            title: nav.title,
-            path: nav.path,
-          })
-        }
-      >
-        {linkContent}
-      </Link>
-    );
-  };
-
-  return (
-    <MenuItem key={nav.key} eventKey={nav.key} dotIndent={indent}>
-      {renderLink()}
-    </MenuItem>
-  );
-};
+        <MenuItem key={nav.key} eventKey={nav.key} dotIndent={indent}>
+            {renderLink()}
+        </MenuItem>
+    )
+}
 const VerticalSingleMenuItem = (props: VerticalMenuItemProps) => {
-  const { sideCollapsed, nav, t, userAuthority, onLinkClick, linkRenderer } =
-    props;
+    const { sideCollapsed, nav, t, userAuthority, onLinkClick, linkRenderer } =
+        props
+
+    if (sideCollapsed) {
+        return (
+            <Tooltip
+                title={t(nav.translateKey, nav.title)}
+                placement={props.direction === 'rtl' ? 'left' : 'right'}
+            >
+                <DefaultItem
+                    nav={nav}
+                    onLinkClick={onLinkClick}
+                    t={t}
+                    userAuthority={userAuthority}
+                    linkRenderer={linkRenderer}
+                    showIcon={true}
+                    showTitle={false}
+                    indent={props.indent}
+                />
+            </Tooltip>
+        )
+    }
 
-  if (sideCollapsed) {
     return (
-      <Tooltip
-        title={t(nav.translateKey, nav.title)}
-        placement={props.direction === "rtl" ? "left" : "right"}
-      >
         <DefaultItem
-          nav={nav}
-          onLinkClick={onLinkClick}
-          t={t}
-          userAuthority={userAuthority}
-          linkRenderer={linkRenderer}
-          showIcon={true}
-          showTitle={false}
-          indent={props.indent}
+            nav={nav}
+            onLinkClick={onLinkClick}
+            t={t}
+            userAuthority={userAuthority}
+            linkRenderer={linkRenderer}
+            showIcon={true}
+            showTitle={true}
+            indent={props.indent}
         />
-      </Tooltip>
-    );
-  }
-
-  return (
-    <DefaultItem
-      nav={nav}
-      onLinkClick={onLinkClick}
-      t={t}
-      userAuthority={userAuthority}
-      linkRenderer={linkRenderer}
-      showIcon={true}
-      showTitle={true}
-      indent={props.indent}
-    />
-  );
-};
-export default VerticalSingleMenuItem;
+    )
+}
+export default VerticalSingleMenuItem

package/lib/@ecme/components/ui/Button/Button.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Button from '../Button'
+
+// Define os metadados utilizados pelo Storybook para expor o componente na lista de componentes
+// e garante que o objeto esteja de acordo com a tipagem esperada pelo Storybook.
+const meta = {
+    title: '@ecme/Components/Button',
+    component: Button,
+} satisfies Meta<typeof Button>
+
+// Exporta para o Storybook identificar o novo story.
+export default meta
+
+// Tipo do Story baseado no tipo do meta, garantindo que os argumentos estejam de acordo com as props do componente.
+type TStory = StoryObj<typeof meta>
+
+export const Sandbox: TStory = {
+    args: {
+        children: 'Click Me',
+        disabled: false,
+    },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbe-agro/client-core",
-  "version": "5.6.123",
+  "version": "5.6.124",
   "description": "Biblioteca principal de componentes e utilidades para os microfrontends do Orbe Agro.",
   "type": "module",
   "main": "./dist/index.js",
@@ -123,6 +123,11 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.1",
+    "@storybook/addon-links": "^10.4.4",
+    "@storybook/addon-onboarding": "^10.4.4",
+    "@storybook/addon-styling-webpack": "^3.0.2",
+    "@storybook/react": "^10.4.4",
+    "@storybook/react-vite": "^10.4.4",
     "@tailwindcss/typography": "^0.5.15",
     "@types/d3-fetch": "^3.0.7",
     "@types/d3-scale": "^4.0.8",
@@ -146,6 +151,7 @@
     "postcss": "^8.4.45",
     "postcss-nesting": "^13.0.0",
     "prettier": "^3.3.3",
+    "storybook": "^10.4.4",
     "tailwindcss": "^3.4.10",
     "tw-colors": "^3.3.2",
     "typescript": "^5.7.2",
@@ -181,6 +187,8 @@
     "dev": "vite",
     "build:dev": "tsc -b ./tsconfig.lib.json && vite build --mode development",
     "build:lib": "tsc -b ./tsconfig.lib.json && vite build --mode production",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "lint": "oxlint .",
     "bump": "pnpm version patch --git-tag-version false"
   }