@blockle/blocks-react-slot 1.0.0

package/README.md

@@ -0,0 +1,42 @@
+# @blockle/blocks-slot
+
+A simple slot component for React.
+
+## Installation
+
+```bash
+npm install @blockle/blocks-slot
+```
+
+## Usage
+
+```tsx
+import { createSlottable, Slot } from '@blockle/blocks-slot';
+
+const Template = createSlottable('button'); // Provide a default tag name
+
+export const Button = ({asChild}) => {
+  return (
+    // Template setup
+    <Template className="btn" onClick={() => console.log('clicked')}>
+      [ICON]
+      <Slot>{asChild}</Slot>
+    </Template>
+  );
+};
+```
+
+```tsx
+import { Button } from './Button';
+
+export const App = () => {
+  return (
+    <>
+      <Button>Button</Button> {/* -> <button class="btn">[ICON] Tag button</button> */}
+      <Button asChild>
+        <a href="/">Anchor</a>
+      </Button> {/* -> <a class="btn">[ICON] Tag a</a> */}
+    </>
+  );
+};
+```

package/dist/Slot/Slot.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Slot = ({ children }) => {
+  return children;
+};
+exports.Slot = Slot;

package/dist/Slot/Slot.d.ts

@@ -0,0 +1,5 @@
+type SlotProps = {
+    children: React.ReactNode;
+};
+export declare const Slot: React.FC<SlotProps>;
+export {};

package/dist/Slot/Slot.js

@@ -0,0 +1,6 @@
+const Slot = ({ children }) => {
+  return children;
+};
+export {
+  Slot
+};

package/dist/createSlottable.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const react = require("react");
+const Slot = require("./Slot/Slot.cjs");
+function createSlottable(defaultElement) {
+  const Tag = defaultElement;
+  const Template = ({
+    asChild,
+    children,
+    ref,
+    ...rootProps
+  }) => {
+    if (!asChild) {
+      const tagProps = { ref, ...rootProps };
+      return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ...tagProps, children });
+    }
+    const childrenArray = react.Children.toArray(children);
+    const slotIndex = childrenArray.findIndex((child) => {
+      if (!react.isValidElement(child)) {
+        return false;
+      }
+      return child.type === Slot.Slot;
+    });
+    const slot = childrenArray[slotIndex];
+    if (!slot) {
+      return null;
+    }
+    if (!isValidElementWithChildren(slot)) {
+      return null;
+    }
+    if (!react.isValidElement(slot.props.children)) {
+      return null;
+    }
+    if (!isValidElementWithChildren(slot.props.children)) {
+      return null;
+    }
+    const nextChildren = [...childrenArray];
+    if (nextChildren.length === 1 && !slot.props.children.props.children) {
+      return react.cloneElement(
+        slot.props.children,
+        blocksCore.mergeProps(rootProps, slot.props.children.props)
+      );
+    }
+    nextChildren[slotIndex] = slot.props.children.props.children;
+    return react.cloneElement(
+      slot.props.children,
+      blocksCore.mergeProps(rootProps, slot.props.children.props),
+      nextChildren
+    );
+  };
+  return [Template, Slot.Slot];
+}
+function isValidElementWithChildren(child) {
+  return react.isValidElement(child) && !!child.props;
+}
+exports.createSlottable = createSlottable;

package/dist/createSlottable.d.ts

@@ -0,0 +1,32 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+import { default as React } from 'react';
+import { Slot } from './Slot/Slot';
+type TemplateProps = {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<Element>;
+};
+/**
+ * Create a Template component that can render as a child of another component with asChild prop.
+ *
+ * Example
+ * // Create a Template and Slot components with div as default element
+ * const { Template, Slot } = createAsChildContainer('div');
+ *
+ * const MyComponent = ({ children, asChild, ...restProps }) => {
+ *  return (
+ *   <Template asChild={asChild} {...restProps}>
+ *     <Slot>{childen}</Slot> // Slot is required, will be replaced with children
+ *   </Template>
+ * );
+ * }
+ *
+ * <MyComponent className="test">Not a link</MyComponent> // Renders as <div class="test">Not a link</div>
+ * <MyComponent className="test"><a href="#">Link</a></MyComponent> // Renders as <div class="test"><a href="#">Link</a></div>
+ * <MyComponent className="test" asChild><a href="#">Link</a></MyComponent> // Renders as <a href="#" class="test">Link</a>
+ */
+export declare function createSlottable<T extends keyof HTMLElementTagNameMap>(defaultElement: T): [
+    Template: React.FC<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]>>,
+    Slot: typeof Slot
+];
+export {};

package/dist/createSlottable.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@blockle/blocks-core";
+import { Children, isValidElement, cloneElement } from "react";
+import { Slot } from "./Slot/Slot.js";
+function createSlottable(defaultElement) {
+  const Tag = defaultElement;
+  const Template = ({
+    asChild,
+    children,
+    ref,
+    ...rootProps
+  }) => {
+    if (!asChild) {
+      const tagProps = { ref, ...rootProps };
+      return /* @__PURE__ */ jsx(Tag, { ...tagProps, children });
+    }
+    const childrenArray = Children.toArray(children);
+    const slotIndex = childrenArray.findIndex((child) => {
+      if (!isValidElement(child)) {
+        return false;
+      }
+      return child.type === Slot;
+    });
+    const slot = childrenArray[slotIndex];
+    if (!slot) {
+      return null;
+    }
+    if (!isValidElementWithChildren(slot)) {
+      return null;
+    }
+    if (!isValidElement(slot.props.children)) {
+      return null;
+    }
+    if (!isValidElementWithChildren(slot.props.children)) {
+      return null;
+    }
+    const nextChildren = [...childrenArray];
+    if (nextChildren.length === 1 && !slot.props.children.props.children) {
+      return cloneElement(
+        slot.props.children,
+        mergeProps(rootProps, slot.props.children.props)
+      );
+    }
+    nextChildren[slotIndex] = slot.props.children.props.children;
+    return cloneElement(
+      slot.props.children,
+      mergeProps(rootProps, slot.props.children.props),
+      nextChildren
+    );
+  };
+  return [Template, Slot];
+}
+function isValidElementWithChildren(child) {
+  return isValidElement(child) && !!child.props;
+}
+export {
+  createSlottable
+};

package/dist/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const createSlottable = require("./createSlottable.cjs");
+const Slot = require("./Slot/Slot.cjs");
+exports.createSlottable = createSlottable.createSlottable;
+exports.Slot = Slot.Slot;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { createSlottable } from './createSlottable';
+export { Slot } from './Slot/Slot';

package/dist/index.js

@@ -0,0 +1,6 @@
+import { createSlottable } from "./createSlottable.js";
+import { Slot } from "./Slot/Slot.js";
+export {
+  Slot,
+  createSlottable
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@blockle/blocks-react-slot",
+  "version": "1.0.0",
+  "description": "Slot",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.mts",
+        "require": "./dist/index.d.ts"
+      },
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest ",
+    "lint": "biome format ./src",
+    "format": "biome format --write ./src",
+    "ts": "tsc --noemit --project ./tsconfig.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/Blockle/blocks.git"
+  },
+  "author": "Niek Saarberg <n.saarberg@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Blockle/blocks/issues"
+  },
+  "homepage": "https://github.com/Blockle/blocks#readme",
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "@blockle/blocks-core": "^0.21.0"
+  }
+}