@nodeblocks/frontend-chat-conversation-block 0.1.0

package/dist/lib.d.ts

@@ -0,0 +1,87 @@
+import { ComponentProps, FunctionComponent, ReactElement, ReactNode } from 'react';
+/**
+ * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.
+ *
+ * @example
+ * <Block>
+ *   {({ defaultBlocks: { header, ...defaultBlocks }, defaultBlockOrder }) => ({
+ *     blocks: {
+ *       ...defaultBlocks,
+ *       header: {
+ *         ...header,
+ *         props: {
+ *           ...header.props,
+ *           label: "Custom Label"
+ *         }
+ *       },
+ *       subheader: <CustomComponent />
+ *     },
+ *     blockOrder: ["header", "subheader", "body", "footer"]
+ *   })}
+ * </Block>
+ */
+export type BlocksOverride<DefaultBlocks, CustomBlocks> = (({ defaultBlocks, defaultBlockOrder, }: {
+    defaultBlocks: DefaultBlocks;
+    defaultBlockOrder: readonly (keyof DefaultBlocks)[];
+}) => {
+    blocks: Partial<DefaultBlocks> & CustomBlocks;
+    blockOrder: readonly (keyof DefaultBlocks)[] | readonly (keyof CustomBlocks)[];
+}) | ReactNode;
+/**
+ * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.
+ *
+ * @param components - A map of default block keys to component functions.
+ *
+ * @example
+ * const defaultBlocks = createDefaultBlocks({
+ *   title: Title,
+ *   description: Description,
+ *   form: Form,
+ * });
+ */
+export declare function createDefaultBlocks<T extends Record<string, FunctionComponent<any>>>(components: T): {
+    [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;
+};
+/**
+ * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.
+ * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.
+ *
+ * @param props
+ * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).
+ * @param props.defaultBlocks - The default blocks of outer component.
+ * @param props.children - A function returning the JSX to render.
+ *
+ * @example
+ * <BlocksOverrideComponent
+ *   defaultBlocks={defaultFormBlocks}
+ *   blocksOverride={children}
+ * >
+ *   {({ blocks, blockOrder }) =>
+ *     blockOrder.map((key) => (
+ *       <Fragment key={String(key)}>{blocks[key]}</Fragment>
+ *     ))
+ *   }
+ * </BlocksOverrideComponent>
+ */
+export declare function BlocksOverrideComponent<DefaultBlocks extends Record<string, ReactNode>, CustomBlocks extends Record<string, ReactNode>>({ blocksOverride, defaultBlocks, defaultBlockOrder, children, }: {
+    blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;
+    defaultBlocks: DefaultBlocks;
+    defaultBlockOrder: (keyof DefaultBlocks)[];
+    children: ({ blocks, blockOrder, }: {
+        blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;
+        blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];
+    }) => ReactNode;
+}): ReactNode;
+type MergeTypes<Object1, Object2> = {
+    [K in keyof Object1 | keyof Object2]: K extends keyof Object1 ? Object1[K] : K extends keyof Object2 ? Object2[K] : never;
+};
+export declare function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B): MergeTypes<B, A>;
+type ClassName = string | ClassName[] | undefined | null;
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+export declare function classNames(...classes: ClassName[]): string;
+export {};
+//# sourceMappingURL=lib.d.ts.map

package/dist/lib.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAiB,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,cAAc,CAAC,aAAa,EAAE,YAAY,IAClD,CAAC,CAAC,EACA,aAAa,EACb,iBAAiB,GAClB,EAAE;IACD,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;CACrD,KAAK;IACJ,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC;IAE9C,UAAU,EAAE,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,GAAG,SAAS,CAAC,MAAM,YAAY,CAAC,EAAE,CAAC;CAChF,CAAC,GACF,SAAS,CAAC;AAEd;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAClF,UAAU,EAAE,CAAC,GACZ;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;CACzD,CAMA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,uBAAuB,CACrC,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC/C,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC9C,EACA,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,cAAc,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;IAC5D,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;IAC3C,QAAQ,EAAE,CAAC,EACT,MAAM,EACN,UAAU,GACX,EAAE;QAED,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;QACvD,UAAU,EAAE,SAAS,CAAC,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,EAAE,CAAC;KACnE,KAAK,SAAS,CAAC;CACjB,aAmBA;AAED,KAAK,UAAU,CAAC,OAAO,EAAE,OAAO,IAAI;KACjC,CAAC,IAAI,MAAM,OAAO,GAAG,MAAM,OAAO,GAAG,CAAC,SAAS,MAAM,OAAO,GACzD,OAAO,CAAC,CAAC,CAAC,GACV,CAAC,SAAS,MAAM,OAAO,GACrB,OAAO,CAAC,CAAC,CAAC,GACV,KAAK;CACZ,CAAC;AAEF,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAmBrF,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAClC;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@nodeblocks/frontend-chat-conversation-block",
+  "version": "0.1.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "browser": "dist/index.iife.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "dist/index.css"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rm -rf dist && cross-env NODE_ENV=development rollup -c --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "rollup": "^4.28.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-serve": "^1.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2"
+  },
+  "dependencies": {
+    "@basaldev/blocks-frontend-framework": "^4.3.6",
+    "@mui/base": "5.0.0-beta.30",
+    "date-fns": "^4.1.0",
+    "deepmerge": "^4.3.1"
+  }
+}

package/readme.md

@@ -0,0 +1,64 @@
+## 🚀 Nodeblocks Frontend Starter Kit
+
+Welcome to the Nodeblocks Frontend Starter Kit! 🎉 This kit is designed to make building frontend libraries in React super easy, helping you streamline your development workflow with minimal fuss. Let's dive in! 🤿
+
+### ✨ Features
+
+- **🚀 Bundling with Rollup:** Get a clean, minimalistic approach to bundling your JavaScript files for smoother frontend development.
+- **💙 TypeScript Support:** We've included a pre-configured `tsconfig.json` to ensure your TypeScript setup is strict, efficient, and ready to go.
+- **⚙️ Peer Dependencies:** Keep bundle sizes lean with React and React DOM set as peer dependencies.
+- **🎨 CSS Support:** Easily import and process CSS files, giving you more control over your styles.
+
+### 🛠️ How to Use
+
+1. **Clone this repository** 🌀:
+
+   ```bash
+   git clone <repository-url>
+   cd <repository-directory>
+   ```
+
+2. **Install dependencies** 📦:
+
+   ```bash
+   npm install
+   ```
+
+3. **Start development** 🛠️:
+
+   ```bash
+   npm run watch
+   ```
+
+4. **Build for production** 🏗️:
+   ```bash
+   npm run build
+   ```
+
+### 🧪 How to Test
+
+The `test` folder contains examples that demonstrate how to use the libraries you create with this starter kit. These examples show compatibility with various bundlers, such as:
+
+- **Create React App** (Webpack)
+- **Vite** ⚡
+- **Rollup** (itself) (Coming soon) 🔄
+- **Parcel** (Coming soon) 📦
+
+This ensures Nodeblocks libraries integrate seamlessly with different workflows. 🛠️✨
+
+**Before running each project make sure you run `npm link`:**
+
+1. In the root of this project:
+   ```bash
+   npm link
+   ```
+2. In the test project you want to run:
+
+   ```bash
+   npm i
+   npm link @basaldev/frontend-starter-kit
+   ```
+
+   (Note that in real life your library would not be called frontend-starter-kit.)
+
+3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.