sdaia-ui 1.0.1

package/src/components/DgaIcon/DgaIcon.types.ts

@@ -0,0 +1,57 @@
+import type { SVGAttributes } from 'react';
+import type { DgaIconName, DgaIconVariant } from './generated/icon-names';
+
+export type { DgaIconName, DgaIconVariant };
+
+/**
+ * Props for the tree-shakeable {@link DgaIcon} component.
+ *
+ * Prefer this over {@link DgaIconByNameProps} when the icon is known at
+ * build time — only the icons you import from `sdaia-ui/dga-icons` end
+ * up in your bundle.
+ */
+export interface DgaIconProps
+  extends Omit<SVGAttributes<SVGSVGElement>, 'children'> {
+  /**
+   * Data URL string imported from `sdaia-ui/dga-icons`
+   * (re-exports from `@platformscode/icons`). Example:
+   *
+   * ```tsx
+   * import { home01Stroke } from 'sdaia-ui/dga-icons';
+   * <DgaIcon data={home01Stroke} />
+   * ```
+   */
+  data: string;
+  /**
+   * Pixel size or any CSS length. Default: `"1em"` so the icon inherits
+   * the current font-size (works with `size-icon-*` tokens).
+   */
+  size?: number | string;
+  /**
+   * Adds an `<title>` element for screen readers. Omit for purely
+   * decorative icons — `aria-hidden="true"` is applied automatically.
+   */
+  title?: string;
+  /**
+   * When true, applies a horizontal flip under `[dir=rtl]` ancestors via
+   * the `rtl:-scale-x-100` utility. `DgaIconByName` enables this
+   * automatically for directional icons (arrows, chevrons, forward,
+   * backward, next, previous). Direction itself is inherited from an
+   * ancestor element — there is no `dir` prop on the SVG itself.
+   */
+  flipOnRtl?: boolean;
+}
+
+/**
+ * Props for the dynamic {@link DgaIconByName} component.
+ *
+ * ⚠️ Bundle-size note: `DgaIconByName` references the full map of
+ * `@platformscode/icons` exports. Importing it pulls the entire icon set
+ * into your bundle. Use it only when the icon name is runtime data (CMS
+ * fields, admin pickers). For static cases, use {@link DgaIconProps}.
+ */
+export interface DgaIconByNameProps extends Omit<DgaIconProps, 'data'> {
+  name: DgaIconName;
+  /** Default: `"stroke"`. */
+  variant?: DgaIconVariant;
+}

package/src/components/DgaIcon/DgaIcon.variants.ts

@@ -0,0 +1,41 @@
+/**
+ * DgaIcon root — inline-block by default, inherits currentColor, and
+ * never shrinks in a flex context. `gds-icon` mirrors the class that
+ * upstream `@platformscode/icons` SVGs carry, so any project-level
+ * overrides keyed on that class keep working.
+ */
+export const ROOT = 'gds-icon inline-block shrink-0 align-[-0.125em]';
+
+/**
+ * When `flipOnRtl` resolves to true, horizontal-flip the icon under `[dir=rtl]`.
+ * Only applied to directional icons by default (see DIRECTIONAL_ICON_PATTERNS).
+ */
+export const RTL_FLIP = 'rtl:-scale-x-100';
+
+/**
+ * Short list of regex patterns identifying icons whose visual orientation
+ * should flip in RTL layouts. Anything outside this list renders as-is.
+ *
+ * Keep this conservative — only icons whose meaning depends on direction
+ * (chevrons, arrows pointing left/right, "back"/"forward" glyphs).
+ */
+export const DIRECTIONAL_ICON_PATTERNS: readonly RegExp[] = [
+  /^arrow-left(-|$)/,
+  /^arrow-right(-|$)/,
+  /^chevron-left(-|$)/,
+  /^chevron-right(-|$)/,
+  /^caret-left(-|$)/,
+  /^caret-right(-|$)/,
+  /^square-arrow-left(-|$)/,
+  /^square-arrow-right(-|$)/,
+  /^circle-arrow-left(-|$)/,
+  /^circle-arrow-right(-|$)/,
+  /^forward(-|$)/,
+  /^backward(-|$)/,
+  /^next$/,
+  /^previous$/,
+];
+
+export function isDirectionalIcon(baseName: string): boolean {
+  return DIRECTIONAL_ICON_PATTERNS.some((rx) => rx.test(baseName));
+}

package/src/components/DgaIcon/DgaIconByName.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { forwardRef } from 'react';
+// eslint-disable-next-line import/no-namespace
+import * as PlatformsCodeIcons from '@platformscode/icons';
+import { DgaIcon } from './DgaIcon';
+import { isDirectionalIcon } from './DgaIcon.variants';
+import type { DgaIconByNameProps } from './DgaIcon.types';
+
+// Minimal local declaration so the NODE_ENV check type-checks without
+// pulling in @types/node. At runtime, bundlers (Next.js, Vite, Webpack)
+// statically replace `process.env.NODE_ENV` with the literal string.
+declare const process: { env: { NODE_ENV?: string } } | undefined;
+
+/**
+ * Renders a DGA icon selected at **runtime** by its kebab-case name.
+ *
+ * ⚠️ **Bundle-size:** referencing this component pulls the full
+ * `@platformscode/icons` map into your bundle (~6 MB of data URL
+ * strings). Use it only when the icon name is runtime data (CMS fields,
+ * admin pickers). For static imports, prefer {@link DgaIcon}.
+ *
+ * @example
+ * ```tsx
+ * import { DgaIconByName } from 'sdaia-ui';
+ * <DgaIconByName name="home-01" variant="stroke" size={24} />
+ * ```
+ */
+export const DgaIconByName = forwardRef<SVGSVGElement, DgaIconByNameProps>(
+  function DgaIconByName(
+    { name, variant = 'stroke', flipOnRtl, ...rest },
+    ref,
+  ) {
+    const key = toExportName(name, variant);
+    const data = (PlatformsCodeIcons as Record<string, string | undefined>)[key];
+
+    if (typeof data !== 'string') {
+      if (typeof process !== 'undefined' && process?.env?.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `[DgaIconByName] Unknown icon: "${name}" (variant "${variant}"). Lookup key "${key}" is not exported from @platformscode/icons.`,
+        );
+      }
+      return null;
+    }
+
+    // Default: auto-flip directional icons in RTL; overridable via prop.
+    const resolvedFlipOnRtl =
+      flipOnRtl ?? isDirectionalIcon(name);
+
+    return (
+      <DgaIcon
+        ref={ref}
+        data={data}
+        flipOnRtl={resolvedFlipOnRtl}
+        {...rest}
+      />
+    );
+  },
+);
+
+/**
+ * Convert a kebab-case name + variant into the camelCase export name used
+ * by `@platformscode/icons`. Example: `"home-01" + "stroke"` → `"home01Stroke"`.
+ */
+function toExportName(name: string, variant: 'solid' | 'stroke'): string {
+  const camel = name
+    .split('-')
+    .map((part, idx) =>
+      idx === 0
+        ? part
+        : part.charAt(0).toUpperCase() + part.slice(1),
+    )
+    .join('');
+  return camel + variant.charAt(0).toUpperCase() + variant.slice(1);
+}