@gtivr4/a1-design-system-react 0.1.0 → 0.2.3

package/src/components/cluster/cluster.css

@@ -0,0 +1,9 @@
+.a1-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: var(--a1-cluster-align, center);
+  justify-content: var(--a1-cluster-justify, flex-start);
+  row-gap: var(--a1-cluster-row-gap, var(--base-spacing-8));
+  column-gap: var(--a1-cluster-column-gap, var(--base-spacing-8));
+  min-width: 0;
+}

package/src/components/code/Code.jsx

@@ -0,0 +1,135 @@
+import { Children, isValidElement, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../button/Button.jsx";
+import { useLabel } from "../labels/Labels.jsx";
+import "./code.css";
+
+const variants = ["inline", "block"];
+
+function textFromChildren(children) {
+  if (children == null || typeof children === "boolean") return "";
+  if (typeof children === "string" || typeof children === "number") return String(children);
+  if (Array.isArray(children)) return children.map(textFromChildren).join("");
+  if (isValidElement(children)) return textFromChildren(children.props.children);
+  return "";
+}
+
+function writeClipboard(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    return navigator.clipboard.writeText(text).catch(() => writeClipboardFallback(text));
+  }
+
+  return writeClipboardFallback(text);
+}
+
+function writeClipboardFallback(text) {
+  if (typeof document === "undefined") return Promise.reject(new Error("Clipboard unavailable"));
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.insetBlockStart = "0";
+  textarea.style.insetInlineStart = "0";
+  textarea.style.inlineSize = "1px";
+  textarea.style.blockSize = "1px";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+
+  try {
+    textarea.setSelectionRange(0, textarea.value.length);
+    const copied = document.execCommand("copy");
+    if (!copied) throw new Error("Copy command failed");
+    return Promise.resolve();
+  } catch (error) {
+    return Promise.reject(error);
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+export function Code({
+  variant = "inline",
+  wrapping = false,
+  copyCode = false,
+  copyText,
+  className = "",
+  children,
+  ...props
+}) {
+  const resolvedVariant = variants.includes(variant) ? variant : "inline";
+  const [copied, setCopied] = useState(false);
+  const resetTimer = useRef(null);
+  const copyLabel = useLabel("code.copyCode", "Copy code");
+  const copiedLabel = useLabel("code.copied", "Copied");
+  const textToCopy = useMemo(
+    () => copyText || textFromChildren(Children.toArray(children)),
+    [children, copyText],
+  );
+  const shouldRenderBlock = resolvedVariant === "block" || copyCode;
+
+  useEffect(() => {
+    return () => {
+      if (resetTimer.current) window.clearTimeout(resetTimer.current);
+    };
+  }, []);
+
+  async function handleCopy() {
+    await writeClipboard(textToCopy);
+    setCopied(true);
+
+    if (resetTimer.current) window.clearTimeout(resetTimer.current);
+    resetTimer.current = window.setTimeout(() => {
+      setCopied(false);
+      resetTimer.current = null;
+    }, 2000);
+  }
+
+  const codeClasses = [
+    "a1-code",
+    `a1-code--${resolvedVariant}`,
+    wrapping && "a1-code--wrapping",
+    !shouldRenderBlock && className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  if (!shouldRenderBlock) {
+    return (
+      <code className={codeClasses} {...props}>
+        {children}
+      </code>
+    );
+  }
+
+  return (
+    <div
+      className={[
+        "a1-code-block",
+        copyCode && "a1-code-block--copyable",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <pre className="a1-code-block__pre">
+        <code className={codeClasses} {...props}>
+          {children}
+        </code>
+      </pre>
+      {copyCode && (
+        <Button
+          className="a1-code-block__copy"
+          icon="content_copy"
+          size="sm"
+          variant="tertiary"
+          onClick={handleCopy}
+          type="button"
+        >
+          {copied ? copiedLabel : copyLabel}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/code/code.css

@@ -0,0 +1,60 @@
+.a1-code {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  font-family: var(--component-inline-font-family-mono);
+  font-size: var(--component-inline-code-font-size);
+  line-height: 1.6;
+  color: var(--semantic-color-text-default);
+}
+
+.a1-code--inline {
+  display: inline;
+  padding: var(--component-inline-padding-block) var(--component-inline-padding-inline);
+  border-radius: var(--component-inline-border-radius);
+  background: var(--semantic-color-surface-raised);
+  white-space: nowrap;
+}
+
+.a1-code--inline.a1-code--wrapping {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.a1-code-block {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--base-spacing-8);
+  max-inline-size: 100%;
+  color: var(--semantic-color-text-default);
+}
+
+.a1-code-block__pre {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  inline-size: 100%;
+  margin: 0;
+  overflow-x: auto;
+  padding: var(--base-spacing-16);
+  border: var(--component-card-border-width) solid var(--semantic-color-border-subtle);
+  border-radius: var(--base-radius-md);
+  background: var(--semantic-color-surface-panel);
+}
+
+.a1-code--block {
+  display: block;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  white-space: pre;
+}
+
+.a1-code--block.a1-code--wrapping {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.a1-code-block__copy {
+  margin: 0;
+}