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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Mittwald CM Service GmbH & Co. KG and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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://flow.mittwald.de/). 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 };
+//# 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":";;;AAYO,MAAM,OAAA,GAAiC,CAAC,KAAA,qBAC7C,GAAA,CAAC,eAAY,EAAA,EAAG,sBAAA,EAAwB,gBAAM,QAAA,EAAS;;;;"}

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 };
+//# 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":";;;AAYO,MAAM,UAAA,GAAoC,CAAC,KAAA,qBAChD,GAAA,CAAC,eAAY,EAAA,EAAG,yBAAA,EAA2B,gBAAM,QAAA,EAAS;;;;"}

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 };
+//# 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":";;;AASO,MAAM,KAAA,GAA+B,CAAC,KAAA,qBAC3C,GAAA,CAAC,eAAY,EAAA,EAAG,oBAAA,EAAsB,gBAAM,QAAA,EAAS;;;;"}

package/dist/js/index.mjs

@@ -0,0 +1,5 @@
+export { Title } from './components/Title/Title.mjs';
+export { Actions } from './components/Actions/Actions.mjs';
+export { Breadcrumb } from './components/Breadcrumb/Breadcrumb.mjs';
+export { LoadingFallbackTrigger as LoadingIndicator } from '@mittwald/flow-remote-react-components';
+//# 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,5 @@
+export * from './Title';
+export * from './Actions';
+export * from './Breadcrumb';
+export { LoadingFallbackTrigger as LoadingIndicator } from '@mittwald/flow-remote-react-components';
+//# 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;AAC7B,OAAO,EAAE,sBAAsB,IAAI,gBAAgB,EAAE,MAAM,wCAAwC,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,50 @@
+{
+  "name": "@mittwald/mstudio-ext-react-components",
+  "version": "0.2.0-alpha.1000",
+  "type": "module",
+  "description": "React components that can be used by mStudio extension developers",
+  "homepage": "https://flow.mittwald.de",
+  "repository": "https://github.com/mittwald/flow",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/js/index.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "scripts": {
+    "build": "vite build --config vite.build.config.ts",
+    "clean": "rimraf dist",
+    "test:compile": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@types/react": "^19.2"
+  },
+  "devDependencies": {
+    "@mittwald/flow-remote-react-components": "0.2.0-alpha.1000",
+    "@mittwald/typescript-config": "",
+    "@types/node": "^25.9.3",
+    "nx": "^22.7.5",
+    "prettier": "^3.8.4",
+    "react": "^19.2.0",
+    "rimraf": "^6.1.3",
+    "rollup-plugin-auto-named-exports": "1.0.0-beta.3",
+    "rollup-preserve-directives": "^1.1.3",
+    "typescript": "^6.0.3",
+    "vite": "7.3.6",
+    "vite-plugin-banner": "^0.8.1",
+    "vite-plugin-checker": "^0.14.1",
+    "vite-plugin-dts": "^5.0.3",
+    "vite-plugin-externalize-deps": "^0.10.0"
+  },
+  "peerDependencies": {
+    "@mittwald/flow-remote-react-components": "0.2.0-alpha.1000",
+    "react": "^19.2.0"
+  },
+  "gitHead": "f1c99726006518901e9a77538147ad44a0a12ab1"
+}