@meonode/ui 0.0.1-alpha.1

package/docs/conditional-component-with-hook.md

@@ -0,0 +1,71 @@
+```ts
+
+// Wraps a hook-capable component into a BaseNode-compatible Client Component
+import { Component } from '@src/lib/node/core.node'
+
+// Layout primitives (synthetic components for JSX-less DOM generation)
+import { Column, Row, Div, P } from '@src/lib/node/html.node'
+import { useState, useEffect } from 'react'
+
+// Shared theme object passed into components. This may be written in a different file and imported.
+const theme = {
+  background: { primary: 'lightgreen', secondary: 'lightyellow' },
+}
+
+// Exported component rendered via <Component /> (client wrapper)
+export default Component(() => {
+  // React hook for conditional UI
+  const [showDetails, setShowDetails] = useState(false)
+
+  // Declarative layout using Column as root container
+  return Column({
+    theme,
+    padding: 20,
+    gap: 15,
+    children: [
+      // Header row with a toggle button
+      Row({
+        gap: 10,
+        children: [
+          Div({
+            onClick: () => setShowDetails(prev => !prev),
+            style: {
+              cursor: 'pointer',
+              userSelect: 'none',
+              padding: '10px 20px',
+              backgroundColor: 'theme.background.primary', // Node engine will handle this
+              borderRadius: 5,
+              fontWeight: 'bold',
+            },
+            children: showDetails ? 'Hide Details' : 'Show Details',
+          }),
+        ],
+      }),
+
+      // Conditionally render DetailComponent via function wrapper
+      // Ensures it's treated as a renderable function (deferred React class or element that is NOT called directly)
+      // Node engine will handle this like magic
+      showDetails ? () => DetailComponent({ info: 'Here are some details!' }) : null,
+    ],
+  })
+})
+
+// A stateful detail section using useEffect and styled Div
+const DetailComponent = ({ info }: { info: string }) => {
+  useEffect(() => {
+    console.log('DetailComponent mounted')
+    return () => {
+      console.log('DetailComponent unmounted')
+    }
+  }, [])
+
+  return Div({
+    padding: 15,
+    border: '1px solid green',
+    borderRadius: 6,
+    backgroundColor: 'theme.background.secondary', // Node engine will handle this
+    children: P({ children: info }),
+  })
+}
+
+```

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@meonode/ui",
+  "description": "`@meonode/ui` is a lightweight yet powerful utility for the programmatic creation and manipulation of React elements. It offers an enhanced, structured way to define components, manage props (separating CSS from DOM attributes), handle theming, and compose children *before* they are rendered by React. This provides greater control and flexibility, especially for dynamic UIs and design systems.",
+  "version": "0.0.1-alpha.1",
+  "type": "module",
+  "main": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/main.js",
+      "types": "./dist/main.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "docs",
+    "package.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "lint": "eslint --fix",
+    "build": "rm -rf ./dist && babel src --out-dir dist --extensions \".ts,.js\" && tsc && tsc-alias && copyfiles -u 1 \"src/**/*.json\" dist",
+    "publish": "npm publish"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-transform-json-modules": "^7.27.1",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-typescript": "^7.27.1",
+    "@eslint/js": "^9.27.0",
+    "@types/copyfiles": "^2",
+    "@types/react": "^19.1.4",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-preset-minify": "^0.5.2",
+    "copyfiles": "^2.4.1",
+    "eslint": "^9.27.0",
+    "eslint-plugin-jsdoc": "^50.6.17",
+    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "prettier": "^3.5.3",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.1"
+  },
+  "packageManager": "yarn@4.9.1",
+  "peerDependencies": {
+    "react": "*"
+  },
+  "license": "MIT"
+}