@gadagi/ui-navigation 1.0.0 → 1.0.1

package/dist/index.js

@@ -0,0 +1,2 @@
+/*! For license information please see index.js.LICENSE.txt */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@gadagi/design-system"),require("react-router-dom")):"function"==typeof define&&define.amd?define(["React",,],t):"object"==typeof exports?exports.gadagiUiNavigation=t(require("react"),require("@gadagi/design-system"),require("react-router-dom")):e.gadagiUiNavigation=t(e.React,e[void 0],e[void 0])}(this,(e,t,r)=>(()=>{"use strict";var o={698(e,t){var r=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function i(e,t,o){var i=null;if(void 0!==o&&(i=""+o),void 0!==t.key&&(i=""+t.key),"key"in t)for(var n in o={},t)"key"!==n&&(o[n]=t[n]);else o=t;return t=o.ref,{$$typeof:r,type:e,key:i,ref:void 0!==t?t:null,props:o}}t.Fragment=o,t.jsx=i,t.jsxs=i},848(e,t,r){e.exports=r(698)},158(e){e.exports=t},156(t){t.exports=e},362(e){e.exports=r}},i={};function n(e){var t=i[e];if(void 0!==t)return t.exports;var r=i[e]={exports:{}};return o[e](r,r.exports,n),r.exports}n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};n.r(a),n.d(a,{NavItem:()=>c,Navigation:()=>f});var s=n(848),l=n(156),d=n(158),p=n(362);const c=({item:e,collapsed:t})=>(0,s.jsxs)(p.NavLink,{to:e.path,style:({isActive:e})=>({display:"flex",alignItems:"center",gap:"10px",padding:t?"10px 12px":"10px 16px",borderRadius:"6px",textDecoration:"none",fontSize:d.typography.fontSize.sm,fontWeight:d.typography.fontWeight.medium,color:e?d.colors.primary[600]:d.colors.neutral[600],background:e?d.colors.primary[50]:"transparent",transition:"background 0.15s, color 0.15s",justifyContent:t?"center":void 0}),children:[e.icon&&(0,s.jsx)("span",{style:{fontSize:"16px",flexShrink:0},children:e.icon}),!t&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("span",{style:{flex:1},children:e.label}),void 0!==e.badge&&e.badge>0&&(0,s.jsx)(d.Badge,{variant:"info",children:e.badge})]})]}),f=({config:e,defaultCollapsed:t=!1})=>{const[r,o]=(0,l.useState)(t);return(0,s.jsxs)("nav",{style:{width:r?"56px":"240px",minHeight:"100vh",background:"#fff",borderRight:`1px solid ${d.colors.neutral[200]}`,padding:"12px 8px",display:"flex",flexDirection:"column",gap:"2px",transition:"width 0.2s ease",overflowX:"hidden"},children:[(0,s.jsx)("button",{onClick:()=>o(e=>!e),style:{alignSelf:r?"center":"flex-end",background:"transparent",border:"none",cursor:"pointer",padding:"6px",color:d.colors.neutral[400],fontSize:"18px",lineHeight:1,marginBottom:"8px"},title:r?"Expand":"Collapse",children:r?"->":"<-"}),e.items.map(e=>(0,s.jsx)(c,{item:e,collapsed:r},e.id))]})};return a})());

package/dist/index.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@gadagi/ui-navigation",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Sidebar navigation for gadagi micro-frontends",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "default": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
     }
   },
-  "files": ["src"],
+  "files": ["dist"],
   "scripts": {
     "build": "webpack --mode production && tsc -p tsconfig.build.json --emitDeclarationOnly",
     "dev": "webpack --mode development --watch"

package/src/NavItem.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import { NavItem as NavItemType } from '@gadagi/types';
-import { colors, typography, Badge } from '@gadagi/design-system';
-
-interface NavItemProps {
-  item: NavItemType;
-  collapsed?: boolean;
-}
-
-export const NavItem: React.FC<NavItemProps> = ({ item, collapsed }) => {
-  return (
-    <NavLink
-      to={item.path}
-      style={({ isActive }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        gap: '10px',
-        padding: collapsed ? '10px 12px' : '10px 16px',
-        borderRadius: '6px',
-        textDecoration: 'none',
-        fontSize: typography.fontSize.sm,
-        fontWeight: typography.fontWeight.medium,
-        color: isActive ? colors.primary[600] : colors.neutral[600],
-        background: isActive ? colors.primary[50] : 'transparent',
-        transition: 'background 0.15s, color 0.15s',
-        justifyContent: collapsed ? 'center' : undefined,
-      })}
-    >
-      {item.icon && <span style={{ fontSize: '16px', flexShrink: 0 }}>{item.icon}</span>}
-      {!collapsed && (
-        <>
-          <span style={{ flex: 1 }}>{item.label}</span>
-          {item.badge !== undefined && item.badge > 0 && (
-            <Badge variant="info">{item.badge}</Badge>
-          )}
-        </>
-      )}
-    </NavLink>
-  );
-};

package/src/Navigation.tsx

@@ -1,55 +0,0 @@
-import React, { useState } from 'react';
-import { NavigationConfig } from '@gadagi/types';
-import { colors, typography } from '@gadagi/design-system';
-import { NavItem } from './NavItem';
-
-interface NavigationProps {
-  config: NavigationConfig;
-  defaultCollapsed?: boolean;
-}
-
-export const Navigation: React.FC<NavigationProps> = ({
-  config,
-  defaultCollapsed = false,
-}) => {
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
-
-  return (
-    <nav
-      style={{
-        width: collapsed ? '56px' : '240px',
-        minHeight: '100vh',
-        background: '#fff',
-        borderRight: `1px solid ${colors.neutral[200]}`,
-        padding: '12px 8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '2px',
-        transition: 'width 0.2s ease',
-        overflowX: 'hidden',
-      }}
-    >
-      <button
-        onClick={() => setCollapsed(c => !c)}
-        style={{
-          alignSelf: collapsed ? 'center' : 'flex-end',
-          background: 'transparent',
-          border: 'none',
-          cursor: 'pointer',
-          padding: '6px',
-          color: colors.neutral[400],
-          fontSize: '18px',
-          lineHeight: 1,
-          marginBottom: '8px',
-        }}
-        title={collapsed ? 'Expand' : 'Collapse'}
-      >
-        {collapsed ? '->' : '<-'}
-      </button>
-
-      {config.items.map(item => (
-        <NavItem key={item.id} item={item} collapsed={collapsed} />
-      ))}
-    </nav>
-  );
-};

package/src/index.ts

@@ -1,2 +0,0 @@
-export { Navigation } from './Navigation';
-export { NavItem }    from './NavItem';