@mittwald/mstudio-ext-react-components 0.2.0-alpha.175

package/README.md

@@ -0,0 +1,84 @@
+# @mittwald/mstudio-ext-react-components
+
+React components that can be used by mStudio extension developers
+
+This package is part of
+[Flow – mittwald design system](https://mittwald.github.io/flow/). See the
+homepage for more details.
+
+## Customize the mStudio page header for your extension
+
+This package offers some components, to customize and extend the mStudio page
+header.
+
+### `<Title>`
+
+With the `<Title>` component you can overwrite the page title of the mStudio
+header. You will usually need this customization if your extension has
+**subpages**.
+
+**Note**: Refer to the existing pages in the mStudio for best practices.
+
+```tsx
+import { Title } from "@mittwald/mstudio-ext-react-components";
+
+function DetailsPage() {
+  return (
+    <>
+      <Title>Details</Title>
+      {/* your code */}
+    </>
+  );
+}
+```
+
+### `<Actions>`
+
+With the `<Actions>` component you can extend the mStudio actions menu in the
+page header. Use the regular `<MenuItem>` component from
+`@mittwald/flow-remote-react-components` to define custom menu items.
+
+**Note**: Refer to the existing pages in the mStudio for best practices.
+
+```tsx
+import { MenuItem } from "@mittwald/flow-remote-react-components";
+import { Actions } from "@mittwald/mstudio-ext-react-components";
+
+function MainPage() {
+  return (
+    <>
+      <Actions>
+        <MenuItem onAction={onRename}>Rename</MenuItem>
+        <MenuItem onAction={onDelete}>Delete</MenuItem>
+      </Actions>
+      {/* your code */}
+    </>
+  );
+}
+```
+
+### `<Breadcrumb>`
+
+With the `<Breadcrumb>` component you can extend the mStudio with your own
+items. Use the regular `<Link>` component from
+`@mittwald/flow-remote-react-components` to define custom links. You will
+usually need this customization if your extension has **multiple subpages**.
+
+**Note**: Refer to the existing pages in the mStudio for best practices.
+
+```tsx
+import { Link } from "@mittwald/flow-remote-react-components";
+import { Breadcrumb } from "@mittwald/mstudio-ext-react-components";
+
+function ProfilePage() {
+  return (
+    <>
+      <Breadcrumb>
+        <Link href="/profiles">Profiles</Link>
+        <Link href="/profiles/5">Profile</Link>
+      </Breadcrumb>
+      {/* your code */}
+    </>
+  );
+}
+```

package/dist/js/components/Actions/Actions.mjs

@@ -0,0 +1,9 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { TunnelEntry } from '@mittwald/flow-remote-react-components';
+
+const Actions = (props) => /* @__PURE__ */ jsx(TunnelEntry, { id: "@mstudio-ext/actions", children: props.children });
+
+export { Actions, Actions as default };
+//# sourceMappingURL=Actions.mjs.map

package/dist/js/components/Actions/Actions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.mjs","sources":["../../../../src/components/Actions/Actions.tsx"],"sourcesContent":["import { TunnelEntry } from \"@mittwald/flow-remote-react-components\";\nimport type { FC, PropsWithChildren } from \"react\";\n\n/**\n * Use <MenuItem> children to add items to the actions menu.\n *\n * @example\n *   <Actions>\n *     <MenuItem onAction={onRename}>Rename</MenuItem>\n *     <MenuItem onAction={onDelete}>Delete</MenuItem>\n *   </Actions>;\n */\nexport const Actions: FC<PropsWithChildren> = (props) => (\n  <TunnelEntry id=\"@mstudio-ext/actions\">{props.children}</TunnelEntry>\n);\n\nexport default Actions;\n"],"names":[],"mappings":";;;AAYa,MAAA,OAAA,GAAiC,CAAC,KAC7C,qBAAA,GAAA,CAAC,eAAY,EAAG,EAAA,sBAAA,EAAwB,gBAAM,QAAS,EAAA;;;;"}

package/dist/js/components/Breadcrumb/Breadcrumb.mjs

@@ -0,0 +1,9 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { TunnelEntry } from '@mittwald/flow-remote-react-components';
+
+const Breadcrumb = (props) => /* @__PURE__ */ jsx(TunnelEntry, { id: "@mstudio-ext/breadcrumb", children: props.children });
+
+export { Breadcrumb, Breadcrumb as default };
+//# sourceMappingURL=Breadcrumb.mjs.map

package/dist/js/components/Breadcrumb/Breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.mjs","sources":["../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { TunnelEntry } from \"@mittwald/flow-remote-react-components\";\nimport type { FC, PropsWithChildren } from \"react\";\n\n/**\n * Use <Link> children to add items to the breadcrumb.\n *\n * @example\n *   <Breadcrumb>\n *     <Link href=\"/profiles\">Profiles</Link>\n *     <Link href=\"/profiles/5\">Profile</Link>\n *   </Breadcrumb>;\n */\nexport const Breadcrumb: FC<PropsWithChildren> = (props) => (\n  <TunnelEntry id=\"@mstudio-ext/breadcrumb\">{props.children}</TunnelEntry>\n);\n\nexport default Breadcrumb;\n"],"names":[],"mappings":";;;AAYa,MAAA,UAAA,GAAoC,CAAC,KAChD,qBAAA,GAAA,CAAC,eAAY,EAAG,EAAA,yBAAA,EAA2B,gBAAM,QAAS,EAAA;;;;"}

package/dist/js/components/Title/Title.mjs

@@ -0,0 +1,9 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { TunnelEntry } from '@mittwald/flow-remote-react-components';
+
+const Title = (props) => /* @__PURE__ */ jsx(TunnelEntry, { id: "@mstudio-ext/title", children: props.children });
+
+export { Title, Title as default };
+//# sourceMappingURL=Title.mjs.map

package/dist/js/components/Title/Title.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.mjs","sources":["../../../../src/components/Title/Title.tsx"],"sourcesContent":["import { TunnelEntry } from \"@mittwald/flow-remote-react-components\";\nimport type { FC, PropsWithChildren } from \"react\";\n\n/**\n * Overwrite the title of the current page.\n *\n * @example\n *   <Title>My title</Title>;\n */\nexport const Title: FC<PropsWithChildren> = (props) => (\n  <TunnelEntry id=\"@mstudio-ext/title\">{props.children}</TunnelEntry>\n);\n\nexport default Title;\n"],"names":[],"mappings":";;;AASa,MAAA,KAAA,GAA+B,CAAC,KAC3C,qBAAA,GAAA,CAAC,eAAY,EAAG,EAAA,oBAAA,EAAsB,gBAAM,QAAS,EAAA;;;;"}

package/dist/js/index.mjs

@@ -0,0 +1,4 @@
+export { Title } from './components/Title/Title.mjs';
+export { Actions } from './components/Actions/Actions.mjs';
+export { Breadcrumb } from './components/Breadcrumb/Breadcrumb.mjs';
+//# sourceMappingURL=index.mjs.map

package/dist/js/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/types/components/Actions/Actions.d.ts

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren } from 'react';
+/**
+ * Use <MenuItem> children to add items to the actions menu.
+ *
+ * @example
+ *   <Actions>
+ *     <MenuItem onAction={onRename}>Rename</MenuItem>
+ *     <MenuItem onAction={onDelete}>Delete</MenuItem>
+ *   </Actions>;
+ */
+export declare const Actions: FC<PropsWithChildren>;
+export default Actions;
+//# sourceMappingURL=Actions.d.ts.map

package/dist/types/components/Actions/Actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,iBAAiB,CAEzC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/types/components/Actions/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Actions';
+export * from './Actions';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Actions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,WAAW,CAAC"}

package/dist/types/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren } from 'react';
+/**
+ * Use <Link> children to add items to the breadcrumb.
+ *
+ * @example
+ *   <Breadcrumb>
+ *     <Link href="/profiles">Profiles</Link>
+ *     <Link href="/profiles/5">Profile</Link>
+ *   </Breadcrumb>;
+ */
+export declare const Breadcrumb: FC<PropsWithChildren>;
+export default Breadcrumb;
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/types/components/Breadcrumb/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,iBAAiB,CAE5C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/types/components/Breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Breadcrumb';
+export * from './Breadcrumb';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,cAAc,cAAc,CAAC"}

package/dist/types/components/Title/Title.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+/**
+ * Overwrite the title of the current page.
+ *
+ * @example
+ *   <Title>My title</Title>;
+ */
+export declare const Title: FC<PropsWithChildren>;
+export default Title;
+//# sourceMappingURL=Title.d.ts.map

package/dist/types/components/Title/Title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../../src/components/Title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAEvC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/types/components/Title/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Title';
+export * from './Title';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Title/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Title/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,cAAc,SAAS,CAAC"}

package/dist/types/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Title';
+export * from './Actions';
+export * from './Breadcrumb';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@mittwald/mstudio-ext-react-components",
+  "version": "0.2.0-alpha.175",
+  "type": "module",
+  "description": "React components that can be used by mStudio extension developers",
+  "homepage": "https://mittwald.github.io/flow",
+  "repository": "https://github.com/mittwald/flow",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/js/index.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=20.11"
+  },
+  "scripts": {
+    "build": "vite build --config vite.build.config.ts",
+    "clean": "rimraf dist",
+    "test": "exit 0",
+    "test:compile": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@mittwald/flow-remote-react-components": "0.2.0-alpha.177",
+    "@types/react": "^19"
+  },
+  "devDependencies": {
+    "@mittwald/typescript-config": "0.2.0-alpha.177",
+    "@types/node": "^22.13.10",
+    "nx": "^20.5.0",
+    "prettier": "^3.5.3",
+    "react": "^19",
+    "rimraf": "^6.0.1",
+    "rollup-plugin-auto-named-exports": "1.0.0-beta.3",
+    "rollup-preserve-directives": "^1.1.3",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.1",
+    "vite-plugin-banner": "^0.8.0",
+    "vite-plugin-checker": "^0.9.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-externalize-deps": "^0.9.0"
+  },
+  "peerDependencies": {
+    "react": "^19"
+  }
+}