{"_id":"@archivisio/c4-modelizer-sdk","name":"@archivisio/c4-modelizer-sdk","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@archivisio/c4-modelizer-sdk","version":"1.0.0","description":"Shared SDK for C4 Modelizer applications - Types, Zustand store and reusable hooks","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","type":"module","author":{"name":"archivisio"},"license":"CC-BY-NC-4.0","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"},"./core":{"types":"./dist/core/index.d.ts","import":"./dist/core.esm.js","require":"./dist/core.js"},"./ui":{"types":"./dist/ui/index.d.ts","import":"./dist/ui.esm.js","require":"./dist/ui.js"}},"keywords":["c4","architecture","modeling","sdk","zustand","react","typescript"],"scripts":{"build":"npm run clean && tsc -p tsconfig.build.json && vite build","dev":"vite build --watch","lint":"eslint src --ext .ts,.tsx","type-check":"tsc --noEmit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","clean":"rm -rf dist","prepublishOnly":"npm run clean && npm run build","publish:github":"npm run prepublishOnly && npm publish --registry=https://npm.pkg.github.com","pack:check":"npm pack --dry-run"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","zustand":"^5.0.3"},"dependencies":{"@xyflow/react":"^12.6.0"},"devDependencies":{"@eslint/js":"^9.29.0","@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.5.2","@types/jest":"^29.5.14","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","@vitejs/plugin-react":"^4.3.4","eslint":"^9.29.0","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19","globals":"^15.15.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","react":"^19.1.0","react-dom":"^19.1.0","ts-jest":"^29.2.5","typescript":"~5.7.2","typescript-eslint":"^8.26.0","vite":"^6.3.4","zustand":"^5.0.5"},"_id":"@archivisio/c4-modelizer-sdk@1.0.0","gitHead":"314fc790b54cc04a909d8ed0b1410973bf520142","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-M927mZXeQ+wgGnND38Ux21mMDfwBSs7hZVN+QWYAvQ27fUNhmcX4nM50pFk+ELEWObTG2yXekK9b/cxX7RKxug==","shasum":"14a6220f916a6ecb418d4c9874751be78b401d84","tarball":"https://registry.npmjs.org/@archivisio/c4-modelizer-sdk/-/c4-modelizer-sdk-1.0.0.tgz","fileCount":46,"unpackedSize":366719,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICW/tasE4conQVuZCFxOUJ6j1+qb0vXbuideSjuilf++AiBY6NYSXuFL8Rshtw6qJBIuzcxwVld9AfRvddMK7Bon4Q=="}]},"_npmUser":{"name":"eth3rnit3","email":"eth3rnit3@gmail.com","actor":{"name":"eth3rnit3","email":"eth3rnit3@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"eth3rnit3","email":"eth3rnit3@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/c4-modelizer-sdk_1.0.0_1750597117633_0.41099111603624316"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-22T12:58:37.551Z","1.0.0":"2025-06-22T12:58:37.804Z","modified":"2025-06-22T12:58:38.092Z"},"maintainers":[{"name":"eth3rnit3","email":"eth3rnit3@gmail.com"}],"description":"Shared SDK for C4 Modelizer applications - Types, Zustand store and reusable hooks","keywords":["c4","architecture","modeling","sdk","zustand","react","typescript"],"author":{"name":"archivisio"},"license":"CC-BY-NC-4.0","readme":"# C4 Modelizer SDK\n\nShared SDK for C4 Modelizer applications - Types, Zustand store and reusable hooks.\n\n## Installation\n\n### From GitHub Packages\n\n```bash\n# Configure GitHub registry (one time setup)\nnpm config set @archivisio:registry https://npm.pkg.github.com\n\n# Install the package\nnpm install @archivisio/c4-modelizer-sdk\n```\n\n### From NPM (future)\n\n```bash\nnpm install c4-modelizer-sdk\n```\n\n## Peer Dependencies\n\nThe SDK requires the following dependencies in your project:\n\n```bash\nnpm install react react-dom zustand @xyflow/react\n```\n\n## SDK Structure\n\n```\nc4-modelizer-sdk/\n├── src/\n│   ├── core/           # Types, store, core hooks\n│   │   ├── types/      # Core C4 types\n│   │   ├── store/      # Zustand store\n│   │   └── hooks/      # Business hooks\n│   ├── ui/             # UI components and contexts\n│   │   └── contexts/   # React contexts\n│   └── utils/          # Utilities\n```\n\n## Usage\n\n### Main import\n\n```typescript\nimport { \n  // Types\n  SystemBlock, \n  ContainerBlock, \n  ComponentBlock, \n  CodeBlock,\n  ConnectionInfo,\n  FlatC4Model,\n  \n  // Store\n  useFlatC4Store,\n  useActiveEntities,\n  useFilteredEntities,\n  \n  // Hooks\n  useFlatModelActions,\n  useFlatNavigation,\n  useFlatNodes,\n  useFlatEdges,\n  \n  // UI\n  DialogProvider,\n  useDialogs\n} from '@archivisio/c4-modelizer-sdk';\n```\n\n### Selective imports\n\n```typescript\n// Core only\nimport { useFlatC4Store, useFlatModelActions } from '@archivisio/c4-modelizer-sdk/core';\n\n// UI only\nimport { DialogProvider, useDialogs } from '@archivisio/c4-modelizer-sdk/ui';\n```\n\n## API Documentation\n\n### Zustand Store\n\nThe main store for managing C4 model state:\n\n```typescript\nconst {\n  model,\n  addSystem,\n  updateSystem,\n  removeSystem,\n  setActiveSystem,\n  // ... other actions\n} = useFlatC4Store();\n```\n\n### Main Hooks\n\n#### useFlatModelActions\n\nHook for CRUD actions on C4 elements:\n\n```typescript\nconst {\n  addElement,\n  handleElementSave,\n  handleNodeDelete,\n  resetStore\n} = useFlatModelActions();\n\n// Add element at current level\naddElement({ name: \"My System\" });\n\n// Add with custom labels\naddElement({}, { \n  system: \"New System\",\n  container: \"New Container\" \n});\n```\n\n#### useFlatNavigation\n\nHook for navigation between C4 levels:\n\n```typescript\nconst {\n  navigateToSystem,\n  navigateToContainer,\n  navigateToComponent,\n  navigateToCode\n} = useFlatNavigation();\n\n// Navigate to a container\nnavigateToContainer(systemId);\n```\n\n#### useFlatNodes\n\nHook for ReactFlow, generates nodes for current level:\n\n```typescript\nconst {\n  currentNodes,\n  handleNodePositionChange,\n  getNodeById\n} = useFlatNodes({\n  onEditSystem: (id) => console.log('Edit system', id),\n  onEditContainer: (id) => console.log('Edit container', id),\n  // ... other callbacks\n});\n```\n\n#### useFlatEdges\n\nHook for ReactFlow, generates edges (connections):\n\n```typescript\nconst {\n  edges,\n  onConnect,\n  handleEdgeClick,\n  handleConnectionSave\n} = useFlatEdges({\n  onConnectionDialog: (connection) => console.log('Connection dialog', connection),\n  getTechnologyColor: (techId) => getTechnologyById(techId)?.color || '#fff'\n});\n```\n\n### UI Contexts\n\n#### DialogProvider\n\nProvider for managing edit dialogs:\n\n```typescript\nfunction App() {\n  return (\n    <DialogProvider>\n      <YourApp />\n    </DialogProvider>\n  );\n}\n\n// In a child component\nconst {\n  openEditDialog,\n  openConnectionDialog,\n  dialogOpen,\n  editingElement\n} = useDialogs();\n```\n\n## Integration Example\n\n```typescript\nimport React from 'react';\nimport {\n  useFlatC4Store,\n  useFlatModelActions,\n  useFlatNodes,\n  useFlatEdges,\n  DialogProvider,\n  useDialogs\n} from '@archivisio/c4-modelizer-sdk';\nimport { ReactFlow } from '@xyflow/react';\n\nfunction C4ModelizerApp() {\n  const { model } = useFlatC4Store();\n  const { handleAddElement } = useFlatModelActions();\n  const { openEditDialog } = useDialogs();\n  \n  const { currentNodes, handleNodePositionChange } = useFlatNodes({\n    onEditSystem: (id) => openEditDialog(id, false),\n    onEditContainer: (id) => openEditDialog(id, true),\n  });\n  \n  const { edges, onConnect } = useFlatEdges({\n    onConnectionDialog: (connection) => console.log('Edit connection', connection)\n  });\n\n  return (\n    <div style={{ height: '100vh' }}>\n      <button onClick={handleAddElement}>\n        Add Element\n      </button>\n      \n      <ReactFlow\n        nodes={currentNodes}\n        edges={edges}\n        onConnect={onConnect}\n        onNodeDragStop={(_, node) => \n          handleNodePositionChange(node.id, node.position)\n        }\n      />\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <DialogProvider>\n      <C4ModelizerApp />\n    </DialogProvider>\n  );\n}\n\nexport default App;\n```\n\n## Core Types\n\n### BaseBlock\n\n```typescript\ninterface BaseBlock {\n  id: string;\n  name: string;\n  description?: string;\n  url?: string;\n  position: { x: number; y: number };\n  type: 'system' | 'container' | 'component' | 'code';\n  technology?: string;\n  original?: {\n    id: string;\n    type: 'system' | 'container' | 'component' | 'code';\n  };\n}\n```\n\n### SystemBlock, ContainerBlock, ComponentBlock, CodeBlock\n\nInterfaces extending BaseBlock with specific properties for each level.\n\n### FlatC4Model\n\n```typescript\ninterface FlatC4Model {\n  systems: FlatSystemBlock[];\n  containers: FlatContainerBlock[];\n  components: FlatComponentBlock[];\n  codeElements: FlatCodeBlock[];\n  viewLevel: ViewLevel;\n  activeSystemId?: string;\n  activeContainerId?: string;\n  activeComponentId?: string;\n}\n```\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build SDK\nnpm run build\n\n# Development with watch\nnpm run dev\n\n# Linting\nnpm run lint\n\n# Type checking\nnpm run type-check\n```\n\n## License\n\nCC-BY-NC-4.0","readmeFilename":"README.md","_rev":"1-be78c067e725a29716a6dead158e5195"}