line-flex-message-renderer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kanketsu-jp
+
+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,126 @@
+# line-flex-message-renderer
+
+React component to render LINE Flex Message JSON as a visual preview — pixel-accurate to the LINE app.
+
+## Installation
+
+```bash
+npm install line-flex-message-renderer
+# or
+pnpm add line-flex-message-renderer
+```
+
+## Quick Start
+
+```tsx
+import { FlexMessagePreview, LineChatFrame } from 'line-flex-message-renderer';
+
+const flexJson = {
+  type: 'bubble',
+  body: {
+    type: 'box',
+    layout: 'vertical',
+    contents: [
+      { type: 'text', text: 'Hello, World!', weight: 'bold', size: 'xl' },
+    ],
+  },
+};
+
+function App() {
+  return (
+    <LineChatFrame>
+      <FlexMessagePreview json={flexJson} />
+    </LineChatFrame>
+  );
+}
+```
+
+## Components
+
+### FlexMessagePreview
+
+Renders a Flex Message bubble or carousel.
+
+```tsx
+<FlexMessagePreview json={flexBubbleOrCarousel} className="my-class" style={{ margin: 8 }} />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `json` | `FlexContainer` | Flex Message JSON (bubble or carousel) |
+| `className` | `string?` | Additional CSS class |
+| `style` | `CSSProperties?` | Additional inline styles |
+
+### LineChatFrame
+
+Wraps content in a LINE chat UI frame.
+
+```tsx
+<LineChatFrame accountName="My Bot" width={375}>
+  <FlexMessagePreview json={flexJson} />
+</LineChatFrame>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | Content to display |
+| `accountName` | `string?` | `"トーク"` | Header title |
+| `avatarUrl` | `string?` | — | Avatar image URL (defaults to green BOT icon) |
+| `width` | `number?` | `375` | Frame width in pixels |
+
+### LineTextBubble
+
+Renders a plain text message bubble.
+
+```tsx
+<LineTextBubble text="Hello!" />
+```
+
+## Supported Flex Message Components
+
+- **box** — vertical / horizontal / baseline layouts
+- **text** — with span support, wrapping, max lines
+- **image** — aspect ratio, aspect mode (cover/fit)
+- **button** — primary / secondary / link styles
+- **separator** — horizontal line
+- **spacer** — flexible space
+- **filler** — flex-grow space
+- **icon** — inline icon image
+
+## Bubble Sizes
+
+| Size | Width |
+|------|-------|
+| nano | 120px |
+| micro | 150px |
+| kilo | 230px |
+| mega (default) | 300px |
+| giga | 386px |
+
+## Carousel Support
+
+Pass a carousel container to render multiple bubbles with horizontal scrolling:
+
+```tsx
+<FlexMessagePreview
+  json={{
+    type: 'carousel',
+    contents: [bubble1, bubble2, bubble3],
+  }}
+/>
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm storybook    # Start Storybook dev server
+pnpm test         # Run tests
+pnpm build        # Build for production
+pnpm typecheck    # Type check
+pnpm lint         # Lint
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,472 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/constants.ts
+var TEXT_SIZE = {
+  xxs: "11px",
+  xs: "12px",
+  sm: "13px",
+  md: "14px",
+  lg: "16px",
+  xl: "18px",
+  xxl: "22px",
+  "3xl": "26px",
+  "4xl": "30px",
+  "5xl": "36px"
+};
+var SPACING = {
+  none: "0px",
+  xs: "2px",
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  xxl: "20px"
+};
+var IMAGE_SIZE = {
+  xxs: "40px",
+  xs: "60px",
+  sm: "80px",
+  md: "100px",
+  lg: "120px",
+  xl: "150px",
+  xxl: "180px",
+  "3xl": "220px",
+  "4xl": "260px",
+  "5xl": "300px",
+  full: "100%"
+};
+var ICON_SIZE = {
+  xxs: "14px",
+  xs: "16px",
+  sm: "18px",
+  md: "20px",
+  lg: "24px",
+  xl: "28px",
+  xxl: "32px"
+};
+var BUBBLE_WIDTH = {
+  nano: "120px",
+  micro: "150px",
+  kilo: "230px",
+  mega: "300px",
+  giga: "386px"
+};
+
+// src/utils.ts
+function resolveSize(value, map, fallback) {
+  if (!value) return fallback;
+  return map[value] ?? value;
+}
+function FlexButtonComponent({ component }) {
+  const isPrimary = component.style === "primary";
+  const isLink = component.style === "link";
+  const height = component.height === "sm" ? "40px" : "52px";
+  const style = {
+    width: "100%",
+    height,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: isPrimary || component.style === "secondary" ? "9999px" : void 0,
+    backgroundColor: isPrimary ? component.color ?? "#17C950" : isLink ? "transparent" : "#EFEFEF",
+    color: isPrimary ? "#ffffff" : isLink ? component.color ?? "#42659A" : "#111111",
+    fontSize: TEXT_SIZE.sm,
+    fontWeight: 600,
+    border: "none",
+    cursor: "pointer",
+    marginTop: resolveSize(component.margin, SPACING, void 0),
+    flex: component.flex !== void 0 ? `${component.flex} 0 0%` : void 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style, children: component.action.label });
+}
+function FlexIconComponent({ component }) {
+  const size = resolveSize(component.size, ICON_SIZE, ICON_SIZE.md);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: component.url,
+      alt: "",
+      style: { width: size, height: size, objectFit: "contain" }
+    }
+  );
+}
+function FlexImageComponent({ component }) {
+  const [w, h] = (component.aspectRatio ?? "1:1").split(":").map(Number);
+  const style = {
+    width: component.size === "full" ? "100%" : resolveSize(component.size, IMAGE_SIZE, IMAGE_SIZE.md),
+    marginTop: resolveSize(component.margin, SPACING, void 0),
+    flex: component.flex !== void 0 ? `${component.flex} 0 0%` : void 0,
+    backgroundColor: component.backgroundColor
+  };
+  const innerStyle = {
+    width: "100%",
+    paddingTop: `${h / w * 100}%`,
+    position: "relative",
+    overflow: "hidden"
+  };
+  const imgStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: component.aspectMode === "fit" ? "contain" : "cover"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: innerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: component.url, alt: "", style: imgStyle }) }) });
+}
+function FlexSeparatorComponent({
+  component
+}) {
+  const style = {
+    borderTop: `1px solid ${component.color ?? "#E5E5E5"}`,
+    marginTop: resolveSize(component.margin, SPACING, void 0),
+    width: "100%"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("hr", { style });
+}
+function FlexSpanComponent({ span }) {
+  const style = {
+    fontSize: resolveSize(span.size, TEXT_SIZE, "inherit"),
+    color: span.color,
+    fontWeight: span.weight === "bold" ? 700 : void 0,
+    textDecoration: span.decoration !== "none" ? span.decoration : void 0,
+    fontStyle: span.style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style, children: span.text });
+}
+var alignMap = {
+  start: "left",
+  center: "center",
+  end: "right"
+};
+var gravityMap = {
+  top: "flex-start",
+  center: "center",
+  bottom: "flex-end"
+};
+function FlexTextComponent({ component }) {
+  const hasSpans = component.contents && component.contents.length > 0;
+  const fontSize = resolveSize(component.size, TEXT_SIZE, TEXT_SIZE.md);
+  const style = {
+    fontSize,
+    color: component.color,
+    fontWeight: component.weight === "bold" ? 700 : 400,
+    textAlign: alignMap[component.align ?? "start"] ?? "left",
+    marginTop: resolveSize(component.margin, SPACING, void 0),
+    flex: component.flex !== void 0 ? `${component.flex} 0 0%` : void 0,
+    alignSelf: component.gravity ? gravityMap[component.gravity] : void 0,
+    textDecoration: component.decoration !== "none" ? component.decoration : void 0,
+    fontStyle: component.style,
+    lineHeight: component.lineSpacing ?? 1.4,
+    ...!component.wrap ? {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    } : {
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word"
+    },
+    ...component.maxLines && component.wrap ? {
+      display: "-webkit-box",
+      WebkitLineClamp: component.maxLines,
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden"
+    } : {}
+  };
+  if (hasSpans) {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { style, children: component.contents?.map((span, i) => /* @__PURE__ */ jsxRuntime.jsx(FlexSpanComponent, { span }, i)) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { style, children: component.text });
+}
+function FlexComponentRenderer({
+  component
+}) {
+  switch (component.type) {
+    case "box":
+      return /* @__PURE__ */ jsxRuntime.jsx(FlexBoxComponent, { component });
+    case "text":
+      return /* @__PURE__ */ jsxRuntime.jsx(FlexTextComponent, { component });
+    case "image":
+      return /* @__PURE__ */ jsxRuntime.jsx(FlexImageComponent, { component });
+    case "button":
+      return /* @__PURE__ */ jsxRuntime.jsx(FlexButtonComponent, { component });
+    case "separator":
+      return /* @__PURE__ */ jsxRuntime.jsx(FlexSeparatorComponent, { component });
+    case "spacer":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            flexGrow: 1,
+            height: resolveSize(component.size, SPACING, "0px")
+          }
+        }
+      );
+    case "filler":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexGrow: component.flex ?? 1 } });
+    case "icon":
+      return /* @__PURE__ */ jsxRuntime.jsx(FlexIconComponent, { component });
+    default:
+      return null;
+  }
+}
+function FlexBoxComponent({ component }) {
+  const isVertical = component.layout === "vertical";
+  const isBaseline = component.layout === "baseline";
+  const style = {
+    display: "flex",
+    flexDirection: isVertical ? "column" : "row",
+    alignItems: isBaseline ? "baseline" : component.alignItems ?? (isVertical ? "stretch" : "center"),
+    justifyContent: component.justifyContent,
+    gap: resolveSize(component.spacing, SPACING, void 0),
+    marginTop: resolveSize(component.margin, SPACING, void 0),
+    padding: resolveSize(component.paddingAll, SPACING, void 0),
+    paddingTop: resolveSize(component.paddingTop, SPACING, void 0),
+    paddingBottom: resolveSize(component.paddingBottom, SPACING, void 0),
+    paddingLeft: resolveSize(component.paddingStart, SPACING, void 0),
+    paddingRight: resolveSize(component.paddingEnd, SPACING, void 0),
+    backgroundColor: component.backgroundColor,
+    borderRadius: component.cornerRadius,
+    borderColor: component.borderColor,
+    borderWidth: component.borderWidth,
+    borderStyle: component.borderWidth ? "solid" : void 0,
+    flex: component.flex !== void 0 ? `${component.flex} 0 0%` : void 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, children: component.contents.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(FlexComponentRenderer, { component: child }, i)) });
+}
+function BubbleRenderer({
+  json,
+  className,
+  style: extraStyle
+}) {
+  const width = BUBBLE_WIDTH[json.size ?? "mega"];
+  const headerBg = json.styles?.header?.backgroundColor;
+  const bodyBg = json.styles?.body?.backgroundColor;
+  const footerBg = json.styles?.footer?.backgroundColor;
+  const footerSep = json.styles?.footer?.separator;
+  const bodySep = json.styles?.body?.separator;
+  const heroSep = json.styles?.hero?.separator;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width,
+        maxWidth: "100%",
+        borderRadius: "16px",
+        overflow: "hidden",
+        backgroundColor: "#ffffff",
+        boxShadow: "0 1px 6px rgba(0,0,0,0.12)",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif',
+        ...extraStyle
+      },
+      children: [
+        json.header && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px 16px 0", backgroundColor: headerBg }, children: /* @__PURE__ */ jsxRuntime.jsx(FlexBoxComponent, { component: json.header }) }),
+        heroSep && /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { borderTop: "1px solid #E5E5E5", margin: 0 } }),
+        json.hero && /* @__PURE__ */ jsxRuntime.jsx(FlexImageComponent, { component: json.hero }),
+        bodySep && /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { borderTop: "1px solid #E5E5E5", margin: 0 } }),
+        json.body && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px", backgroundColor: bodyBg }, children: /* @__PURE__ */ jsxRuntime.jsx(FlexBoxComponent, { component: json.body }) }),
+        footerSep && /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { borderTop: "1px solid #E5E5E5", margin: 0 } }),
+        json.footer && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 16px 16px", backgroundColor: footerBg }, children: /* @__PURE__ */ jsxRuntime.jsx(FlexBoxComponent, { component: json.footer }) })
+      ]
+    }
+  );
+}
+function FlexMessagePreview({
+  json,
+  className,
+  style
+}) {
+  if (json.type === "carousel") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className,
+        style: {
+          display: "flex",
+          gap: 8,
+          overflowX: "auto",
+          scrollSnapType: "x mandatory",
+          ...style
+        },
+        children: json.contents.map((bubble, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { scrollSnapAlign: "start", flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(BubbleRenderer, { json: bubble }) }, i))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(BubbleRenderer, { json, className, style });
+}
+function DefaultAvatar() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        width: 36,
+        height: 36,
+        borderRadius: "50%",
+        backgroundColor: "#00B900",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        color: "#fff",
+        fontSize: 11,
+        fontWeight: 700
+      },
+      children: "BOT"
+    }
+  );
+}
+function LineChatFrame({
+  children,
+  accountName = "\u30C8\u30FC\u30AF",
+  avatarUrl,
+  width = 375
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width,
+        minHeight: 500,
+        borderRadius: 12,
+        overflow: "hidden",
+        boxShadow: "0 4px 24px rgba(0,0,0,0.18)",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif'
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              backgroundColor: "#00B900",
+              color: "#fff",
+              padding: "12px 16px",
+              fontSize: 16,
+              fontWeight: 700,
+              display: "flex",
+              alignItems: "center",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  width: "18",
+                  height: "18",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  role: "img",
+                  "aria-label": "Back",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 18l-6-6 6-6" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: accountName })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              backgroundColor: "#7B9EB0",
+              flex: 1,
+              padding: "16px 12px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 8
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "flex-end",
+                  gap: 8
+                },
+                children: [
+                  avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: avatarUrl,
+                      alt: "",
+                      style: {
+                        width: 36,
+                        height: 36,
+                        borderRadius: "50%",
+                        objectFit: "cover",
+                        flexShrink: 0
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(DefaultAvatar, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: "calc(100% - 52px)" }, children })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              backgroundColor: "#F7F7F7",
+              padding: "10px 12px",
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              borderTop: "1px solid #E0E0E0"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  backgroundColor: "#fff",
+                  borderRadius: 20,
+                  padding: "8px 14px",
+                  fontSize: 14,
+                  color: "#999"
+                },
+                children: "Aa"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function LineTextBubble({ text }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        backgroundColor: "#ffffff",
+        borderRadius: "16px 16px 16px 4px",
+        padding: "10px 14px",
+        fontSize: 14,
+        lineHeight: 1.5,
+        color: "#111111",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        maxWidth: 260,
+        boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif'
+      },
+      children: text
+    }
+  );
+}
+
+exports.FlexMessagePreview = FlexMessagePreview;
+exports.LineChatFrame = LineChatFrame;
+exports.LineTextBubble = LineTextBubble;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map