@studiocubics/components 0.0.1

package/src/Typography/ClampedText/ClampedText.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+import { cn } from "@studiocubics/utils";
+import type { ElementType } from "react";
+import styles from "./ClampedText.module.css";
+
+/**
+ * Props specific to the ClampedText component.
+ *
+ * These extend the intrinsic element props of whatever element is passed via `as`.
+ * @group ClampedText
+ * @category inputs
+ */
+export interface ClampedTextBaseProps {
+  lineCount?: number;
+}
+const defaultElement = "p";
+type DefaultElement = typeof defaultElement;
+/**
+ * Polymorphic props for the ClampedText component.
+ *
+ * `C` defines the element type rendered by the component (e.g. `"ClampedText"`, `"a"`, `"div"`).
+ * All intrinsic props for `C` are supported unless overridden by `ClampedTextBaseProps`.
+ *
+ * @group ClampedText
+ * @category inputs
+ */
+export type ClampedTextProps<C extends ElementType = DefaultElement> =
+  PolymorphicComponentProps<C, ClampedTextBaseProps>;
+
+/**
+ * Base implementation for the ClampedText component.
+ *
+ * This is a polymorphic component that defaults to rendering a `<ClampedText>`.
+ * Use the `as` prop to change the underlying element.
+ *
+ * @typeParam C - The intrinsic or custom element type to render.
+ *
+ * @group ClampedText
+ * @category inputs
+ */
+function ClampedTextBase<C extends ElementType = DefaultElement>(
+  props: ClampedTextProps<C>,
+) {
+  const { as, className, lineCount = 1, style, ...restProps } = props;
+  const Component = (as || defaultElement) as ElementType;
+
+  const componentProps = {
+    className: cn(className, styles.root),
+    style: { WebkitLineClamp: `${lineCount}`, ...style },
+    ...restProps,
+  };
+
+  return <Component {...componentProps} />;
+}
+ClampedTextBase.displayName = "ClampedText";
+
+/**
+ * A polymorphic ClampedText component.
+ *
+ * By default it renders a `<ClampedText>`, but any element can be used via the `as` prop:
+ *
+ * ```tsx
+ * <ClampedText as="a" href="/docs">Read docs</ClampedText>
+ * ```
+ *
+ * @group ClampedText
+ * @category inputs
+ */
+export const ClampedText = ClampedTextBase as PolymorphicComponentType<
+  ClampedTextBaseProps,
+  DefaultElement
+>;

package/src/Typography/CopyableText/CopyableText.module.css

@@ -0,0 +1,21 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap);
+  & > span {
+    background-color: var(--color-surface);
+    border-radius: var(--shape-br-sm);
+    padding: var(--spacing-gap);
+    overflow: auto hidden;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.9em;
+    flex: 1;
+    &::-webkit-scrollbar {
+      /* Hide scrollbar for Chrome, Safari, and Opera */
+      display: none;
+    }
+  }
+}

package/src/Typography/CopyableText/CopyableText.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+import { cn } from "@studiocubics/utils";
+import {
+  type ComponentProps,
+  type MouseEvent,
+  useEffect,
+  useState,
+  type ElementType,
+} from "react";
+import styles from "./CopyableText.module.css";
+import { useDelayedAction } from "@studiocubics/hooks";
+import { Button, type ButtonProps } from "../../Inputs/Button/Button";
+
+export interface CopyableTextBaseProps {
+  children: string;
+  disabled?: boolean;
+  slotProps?: {
+    button?: ButtonProps;
+  };
+}
+
+const defaultElement = "div";
+type DefaultElement = typeof defaultElement;
+
+export type CopyableTextProps<C extends ElementType = DefaultElement> =
+  PolymorphicComponentProps<C, CopyableTextBaseProps>;
+
+function CopyableTextBase<C extends ElementType = DefaultElement>(
+  props: CopyableTextProps<C>,
+) {
+  const {
+    as,
+    children,
+    className,
+    disabled = false,
+    slotProps = {},
+    ...rest
+  } = props as CopyableTextProps<DefaultElement>;
+
+  const [copied, setCopied] = useState(false);
+  const delay = useDelayedAction();
+  const Component = (as || defaultElement) as ElementType;
+  const componentProps = { ...rest, className: cn(className, styles.root) };
+
+  async function handleCopy(e: MouseEvent<HTMLButtonElement>) {
+    await navigator.clipboard.writeText(children);
+    setCopied(true);
+    slotProps.button?.onClick?.(e);
+  }
+  useEffect(() => {
+    if (copied) {
+      delay(() => setCopied(false), 2000);
+    }
+  }, [delay, copied]);
+  return (
+    <Component {...componentProps}>
+      <span>{children}</span>
+      <Button
+        disabled={disabled}
+        square
+        size="sm"
+        {...slotProps.button}
+        onClick={handleCopy}
+      >
+        {copied ? (
+          <CheckIcon width={24} height={24} />
+        ) : (
+          <CopyIcon width={24} height={24} />
+        )}
+      </Button>
+    </Component>
+  );
+}
+
+CopyableTextBase.displayName = "CopyableText";
+
+export const CopyableText = CopyableTextBase as PolymorphicComponentType<
+  CopyableTextBaseProps,
+  DefaultElement
+>;
+
+export function CopyIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+}
+// TODO convert to animated check icon
+function CheckIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M4 12 9 17l11 -11" />
+    </svg>
+  );
+}

package/src/Typography/PageTitle/PageTitle.module.css

@@ -0,0 +1,47 @@
+.root {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--spacing-gap-4);
+  border-bottom: 1px solid var(--color-outline);
+  gap: var(--spacing-gap-3);
+  & h1 {
+    font-size: var(--fs-h2);
+  }
+  & h2 {
+    font-weight: normal;
+    color: var(--color-on-background-faint);
+    font-size: var(--fs-body2);
+  }
+}
+.noBorder {
+  border-bottom: none;
+}
+.size_lg {
+  padding: var(--spacing-gap-6);
+  & h1 {
+    font-size: var(--fs-h1);
+  }
+  & h2 {
+    font-size: var(--fs-body);
+  }
+}
+.size_sm {
+  padding: var(--spacing-gap-2);
+  & h1 {
+    font-size: var(--fs-h4);
+  }
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-gap-2);
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+}

package/src/Typography/PageTitle/PageTitle.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import styles from "./PageTitle.module.css";
+import { cn } from "@studiocubics/utils";
+
+export interface PageTitleProps {
+  title: ReactNode;
+  actions?: ReactNode;
+  subtitle?: ReactNode;
+  size?: "sm" | "md" | "lg";
+  noBorders?: boolean;
+}
+
+export function PageTitle({
+  title,
+  subtitle,
+  actions,
+  size = "md",
+  noBorders = false,
+}: PageTitleProps) {
+  return (
+    <div
+      className={cn(
+        styles.root,
+        styles[`size_${size}`],
+        noBorders ? styles.noBorder : ""
+      )}
+    >
+      <div className={styles.main}>
+        <h1>{title}</h1>
+        <h2>{subtitle}</h2>
+      </div>
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </div>
+  );
+}

package/src/Typography/_index.ts

@@ -0,0 +1,3 @@
+export * from "./PageTitle/PageTitle";
+export * from "./ClampedText/ClampedText";
+export * from "./CopyableText/CopyableText";

package/src/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./Cards/_index";
+export * from "./Display/_index";
+export * from "./Forms/_index";
+export * from "./Inputs/_index";
+export * from "./Layout/_index";
+export * from "./Misc/_index";
+export * from "./Navigation/_index";
+export * from "./Typography/_index";

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    // Output
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["./src"]
+}