@notchapp/api 0.1.0

package/README.md

@@ -0,0 +1,54 @@
+# @notchapp/api
+
+Component API for building NotchApp widgets.
+
+Install with:
+
+```bash
+npm install @notchapp/api
+```
+
+Use it in a widget:
+
+```tsx
+import { Button, Stack, Text } from "@notchapp/api";
+
+export const initialState = {
+  count: 0,
+};
+
+export const actions = {
+  increment(state) {
+    return {
+      ...state,
+      count: (state?.count ?? 0) + 1,
+    };
+  },
+};
+
+export default function Widget({ environment, state }) {
+  return (
+    <Stack spacing={10}>
+      <Text>Hello from NotchApp</Text>
+      <Text tone="secondary">{`Span ${environment.span} • Count ${state.count}`}</Text>
+      <Button title="Increment" action="increment" />
+    </Stack>
+  );
+}
+```
+
+Current exports:
+
+- `Stack`
+- `Inline`
+- `Row`
+- `Text`
+- `Icon`
+- `IconButton`
+- `Checkbox`
+- `Input`
+- `Button`
+
+The SDK source and examples live in the main repository:
+
+<https://github.com/itstauq/NotchApp>

package/index.js

@@ -0,0 +1,139 @@
+function flattenChildren(input) {
+  if (input == null || input === false) return [];
+  if (Array.isArray(input)) return input.flatMap(flattenChildren);
+  return [input];
+}
+
+function extractText(input) {
+  return flattenChildren(input)
+    .map((item) => {
+      if (typeof item === "string" || typeof item === "number") return String(item);
+      if (item && typeof item.text === "string") return item.text;
+      return "";
+    })
+    .join("");
+}
+
+function wrapNode(input) {
+  if (input == null || input === false) return null;
+  const flattened = flattenChildren(input);
+  if (flattened.length === 0) return null;
+  return { node: flattened[0] };
+}
+
+function Stack(props = {}) {
+  return {
+    id: props.id ?? undefined,
+    type: "Stack",
+    direction: props.direction ?? "vertical",
+    spacing: props.spacing ?? 8,
+    children: flattenChildren(props.children),
+  };
+}
+
+function Inline(props = {}) {
+  return {
+    id: props.id ?? undefined,
+    type: "Inline",
+    spacing: props.spacing ?? 8,
+    children: flattenChildren(props.children),
+  };
+}
+
+function Row(props = {}) {
+  return {
+    id: props.id ?? undefined,
+    type: "Row",
+    action: props.action ?? null,
+    payload: props.payload ?? null,
+    children: flattenChildren(props.children),
+  };
+}
+
+function Text(props = {}) {
+  return {
+    id: props.id ?? undefined,
+    type: "Text",
+    text: props.text ?? extractText(props.children),
+    role: props.role ?? undefined,
+    tone: props.tone ?? undefined,
+    lineClamp: props.lineClamp ?? undefined,
+    strikethrough: props.strikethrough ?? undefined,
+    children: [],
+  };
+}
+
+function Icon(props = {}) {
+  return {
+    id: props.id ?? undefined,
+    type: "Icon",
+    symbol: props.symbol ?? props.icon ?? props.name ?? undefined,
+    tone: props.tone ?? undefined,
+    children: [],
+  };
+}
+
+function IconButton(props = {}) {
+  return {
+    id: props.id ?? undefined,
+    type: "IconButton",
+    symbol: props.symbol ?? props.icon ?? props.name ?? undefined,
+    action: props.action ?? null,
+    payload: props.payload ?? null,
+    tone: props.tone ?? undefined,
+    disabled: props.disabled ?? false,
+    children: [],
+  };
+}
+
+function Checkbox(props = {}) {
+  return {
+    id: props.id ?? undefined,
+    type: "Checkbox",
+    checked: props.checked ?? false,
+    action: props.action ?? null,
+    payload: props.payload ?? null,
+    children: [],
+  };
+}
+
+function Input(props = {}) {
+  return {
+    id: props.id ?? undefined,
+    type: "Input",
+    value: props.value ?? "",
+    placeholder: props.placeholder ?? "",
+    changeAction: props.changeAction ?? null,
+    submitAction: props.submitAction ?? null,
+    leadingAccessory: wrapNode(props.leadingAccessory),
+    trailingAccessory: wrapNode(props.trailingAccessory),
+    children: [],
+  };
+}
+
+function Button(props = {}) {
+  return {
+    id: props.id ?? undefined,
+    type: "Button",
+    title: props.title ?? extractText(props.children),
+    action: props.action ?? null,
+    payload: props.payload ?? null,
+    children: [],
+  };
+}
+
+module.exports = {
+  Stack,
+  Inline,
+  Row,
+  Text,
+  Icon,
+  IconButton,
+  Checkbox,
+  Input,
+  Button,
+  __internal: {
+    flattenChildren,
+    extractText,
+  },
+};

package/jsx-runtime.js

@@ -0,0 +1,28 @@
+const { __internal } = require("./index.js");
+
+const Fragment = Symbol.for("notch.fragment");
+
+function jsx(type, props, key) {
+  if (type === Fragment) {
+    return __internal.flattenChildren(props?.children);
+  }
+
+  const merged = { ...(props ?? {}) };
+  if (key != null && merged.id == null) {
+    merged.id = String(key);
+  }
+
+  if (typeof type === "function") {
+    return type(merged);
+  }
+
+  throw new Error(`Unsupported JSX type: ${String(type)}`);
+}
+
+const jsxs = jsx;
+
+module.exports = {
+  Fragment,
+  jsx,
+  jsxs,
+};

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@notchapp/api",
+  "version": "0.1.0",
+  "description": "Widget component API for building NotchApp widgets",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "jsx-runtime.js"
+  ],
+  "keywords": [
+    "notchapp",
+    "widgets",
+    "api",
+    "jsx",
+    "macos"
+  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/itstauq/NotchApp.git",
+    "directory": "sdk/packages/api"
+  },
+  "homepage": "https://github.com/itstauq/NotchApp#readme",
+  "bugs": {
+    "url": "https://github.com/itstauq/NotchApp/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./jsx-runtime": "./jsx-runtime.js"
+  }
+}