@fibery/ui-kit 6.0.0 → 7.0.0

package/src/unit/labeled-unit.tsx

@@ -0,0 +1,28 @@
+import {css, cx} from "@linaria/core";
+
+import {space, textClasses} from "../design-system";
+
+const labelCss = css`
+  padding-bottom: ${space.s2}px;
+  padding-top: ${space.s6}px;
+`;
+
+const labeledUnitCss = css`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  line-height: 1.2;
+  width: 100%;
+`;
+
+export const UnitLabel = ({children}: {children: React.ReactNode}) => (
+  <div className={cx(textClasses.heading7, labelCss)}>{children}</div>
+);
+
+export const LabeledUnit = ({label, children}: {label: React.ReactNode; children: React.ReactElement}) => (
+  <div className={labeledUnitCss}>
+    <UnitLabel>{label}</UnitLabel>
+    {children}
+  </div>
+);

package/src/unit/primitive.tsx

@@ -7,6 +7,7 @@ import {border, space, themeVars} from "../design-system";
 import {FieldIcon} from "../field-icon";
 import {Tooltip} from "../tooltip";
 import {useTruncated} from "../tooltip-if-overflown";
+import {LabeledUnit} from "./labeled-unit";
 import {
   basicUnitClassName,
   bigSizeUnitClassName,
@@ -15,18 +16,20 @@ import {
   clickableClassName,
   fullUnitWrapperClassName,
   invalidUnitClassName,
+  pillRadiusClassName,
   positionUnitClass,
   regularSizeUnitClassName,
   regularSizeUnitMinWidthClassName,
-  unitDescriptionClassName,
   unitMinHeightClassName,
-  unitTitleClassName,
-  unitWithTitleClassName,
 } from "./styles";
 import type {UnitPrimitiveProps} from "./types";
 import {UnitButtonGroup} from "./unit-button-group";
 import {UnitContent} from "./unit-content";
 
+const unitDescriptionClassName = css`
+  margin-bottom: ${space.s1}px;
+`;
+
 const resetButtonStylesClassName = css`
   all: unset;
   background-color: ${themeVars.transparent};
@@ -71,14 +74,15 @@ export const UnitPrimitive = ({
   navButton,
   // Appearance
   big = false,
+  pill = false,
   tooltip = true,
-  header = false,
+  withLabel = false,
   border = true,
   color = themeVars.textColor,
   bgColor = themeVars.transparent,
   fontWeight,
   shrinkable = true,
-  clickable = border,
+  clickable = false,
   setMinWidth = true,
   setMinHeight = true,
   // Callback
@@ -101,6 +105,7 @@ export const UnitPrimitive = ({
     setMinWidth && (big ? bigSizeUnitMinWidthClassName : regularSizeUnitMinWidthClassName),
     setMinHeight && unitMinHeightClassName,
     border && borderClassName,
+    pill && pillRadiusClassName,
     invalid && invalidUnitClassName,
     clickable && clickableClassName
   );
@@ -124,17 +129,10 @@ export const UnitPrimitive = ({
     />
   );
 
-  const contentWithHeader = header ? (
-    <div className={unitWithTitleClassName}>
-      <div className={unitTitleClassName}>{title}</div>
-      {content}
-    </div>
-  ) : (
-    content
-  );
+  const labeledContent = withLabel ? <LabeledUnit label={title}>{content}</LabeledUnit> : content;
 
   if (!tooltip) {
-    return <div className={positionUnitClass}>{contentWithHeader}</div>;
+    return <div className={positionUnitClass}>{labeledContent}</div>;
   }
 
   const tooltipTitle = (
@@ -179,9 +177,8 @@ export const UnitPrimitive = ({
 
   return (
     <div className={positionUnitClass}>
-      <Tooltip side="bottom" align="start" title={tooltipTitle} description={tooltipDescription}>
-        {/* The trigger needs a host element: the unit content root does not forward refs/handlers */}
-        <div>{contentWithHeader}</div>
+      <Tooltip side="bottom" align="start" openOnFocus={false} title={tooltipTitle} description={tooltipDescription}>
+        <div>{labeledContent}</div>
       </Tooltip>
     </div>
   );

package/src/unit/styles.ts

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 
-import {fontSize, space, textStyles, themeVars} from "../../src/design-system";
+import {border, fontSize, space, textStyles, themeVars} from "../../src/design-system";
 
 export const textEllipsisClassName = css`
   white-space: nowrap;
@@ -9,7 +9,7 @@ export const textEllipsisClassName = css`
 `;
 
 export const basicUnitClassName = css`
-  border-radius: ${space.s6}px;
+  border-radius: ${border.radius6}px;
   border: none;
 `;
 
@@ -49,22 +49,6 @@ export const unitMinHeightClassName = css`
   min-height: ${space.s24}px;
 `;
 
-// TODO(textClasses migration): consumers in packages/ui-kit/src/unit/primitive.tsx, packages/ui-kit/src/unit/unit-with-title.tsx, fibery-ui/src/components/units/* need cx(textClasses.heading7, ...)
-export const unitTitleClassName = css`
-  ${textStyles.heading7}
-  padding-bottom: ${space.s2}px;
-  padding-top: ${space.s6}px;
-`;
-
-export const unitWithTitleClassName = css`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  line-height: 1.2;
-  width: 100%;
-`;
-
 export const invalidUnitClassName = css``;
 
 export const clickableClassName = css`
@@ -87,7 +71,7 @@ export const borderClassName = css`
     bottom: 0;
     box-shadow: ${themeVars.inputBorderColor} inset;
     mix-blend-mode: ${themeVars.inputBorderBlendMode};
-    border-radius: ${space.s6}px;
+    border-radius: ${border.radius6}px;
     pointer-events: none;
   }
 
@@ -117,24 +101,28 @@ export const borderClassName = css`
   }
 `;
 
-export const basicUnitContentClassName = css`
-  padding-left: ${space.s4}px;
-  padding-right: ${space.s4}px;
-`;
+export const pillRadiusClassName = css`
+  border-radius: ${border.radius16}px;
 
-export const unitContentContainerClassName = css`
-  overflow: hidden;
-`;
+  &::before {
+    border-radius: ${border.radius16}px;
+    box-shadow: ${themeVars.inputBorderColorThin} inset;
+  }
 
-export const unitDescriptionClassName = css`
-  margin-bottom: ${space.s1}px;
+  &.${clickableClassName}:hover::before {
+    box-shadow: ${themeVars.inputBorderHoverColorThin} inset;
+  }
+
+  &.${clickableClassName}:focus::before {
+    box-shadow: ${themeVars.inputBorderFocusColorThin} inset;
+  }
 `;
 
 export const fullUnitWrapperClassName = css`
   display: flex;
   align-items: center;
   padding: ${space.s6}px;
-  border-radius: ${space.s5}px;
+  border-radius: ${border.radius6}px;
   background-color: ${themeVars.cardBg};
   margin-bottom: ${space.s4}px;
 `;

package/src/unit/types.ts

@@ -12,13 +12,15 @@ export type UnitPrimitiveProps = {
   title?: ReactNode;
   fieldIcon?: string;
   description?: ReactNode;
-  icons?: React.ReactNodeArray;
+  icons?: React.ReactNode[];
   hint?: ReactNode;
   navButton?: ReactNode;
   // Appearance
   big?: boolean;
+  /** Round corners to half the height (pill/stadium shape). */
+  pill?: boolean;
   tooltip?: boolean;
-  header?: boolean;
+  withLabel?: boolean;
   border?: boolean;
   color?: string;
   bgColor?: string | null;

package/src/unit/unit-content.tsx

@@ -1,17 +1,22 @@
-import {cx} from "@linaria/core";
+import {css, cx} from "@linaria/core";
 import type {ReactNode} from "react";
 
-import {
-  alignCenterClassName,
-  basicUnitContentClassName,
-  textEllipsisClassName,
-  unitContentContainerClassName,
-} from "./styles";
+import {space} from "../design-system";
+import {alignCenterClassName, textEllipsisClassName} from "./styles";
 import {UnitContentLayout} from "./unit-content-layout";
 
+const contentContainerCss = css`
+  overflow: hidden;
+`;
+
+const contentCss = css`
+  padding-left: ${space.s4}px;
+  padding-right: ${space.s4}px;
+`;
+
 type Props = {
   big: boolean;
-  icons?: React.ReactNodeArray;
+  icons?: React.ReactNode[];
   shrinkable?: boolean;
   truncate?: boolean;
   setNode?: (element: HTMLElement | null) => void;
@@ -35,8 +40,8 @@ export const UnitContent = ({big, icons, shrinkable, truncate, setNode, children
         : null}
 
       {children && (
-        <div className={unitContentContainerClassName}>
-          <div ref={setNode} className={cx(basicUnitContentClassName, truncate && textEllipsisClassName)}>
+        <div className={contentContainerCss}>
+          <div ref={setNode} className={cx(contentCss, truncate && textEllipsisClassName)}>
             {children}
           </div>
         </div>

package/src/unit/unit.tsx

@@ -0,0 +1,88 @@
+import type {KeyboardEvent, ReactNode} from "react";
+
+import {themeVars} from "../design-system";
+import {UnitPrimitive} from "./primitive";
+
+export type UnitVariant = "outlined" | "plain" | "filled";
+
+export type UnitSize = "small" | "medium";
+
+export type UnitProps = {
+  variant?: UnitVariant;
+  size?: UnitSize;
+  readOnly?: boolean;
+  /** Render the field label above the value (full-size presentation). */
+  withLabel?: boolean;
+  invalid?: boolean;
+  tooltip?: boolean;
+  // Content
+  children?: ReactNode;
+  title?: ReactNode;
+  fieldIcon?: string;
+  description?: ReactNode;
+  hint?: ReactNode;
+  icons?: ReactNode[];
+  navButton?: ReactNode;
+  // Data-driven appearance (overrides the variant's default fill/color)
+  color?: string;
+  bgColor?: string | null;
+  fontWeight?: number;
+  shrinkable?: boolean;
+  /** Round corners to half the height (pill/stadium shape). */
+  pill?: boolean;
+  // Interaction escape hatches — override the variant-derived defaults.
+  border?: boolean;
+  button?: boolean;
+  clickable?: boolean;
+  // Layout escape hatches — orthogonal to variant (markup, not appearance).
+  setMinWidth?: boolean;
+  setMinHeight?: boolean;
+  overflow?: boolean;
+  renderAsDiv?: boolean;
+  inline?: boolean;
+  multiline?: boolean;
+  // Callbacks
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void;
+};
+
+const getVariantBgColor = (variant: UnitVariant, readOnly: boolean) => {
+  if (variant === "filled") {
+    return themeVars.unitBg;
+  }
+  if (variant === "outlined" && readOnly) {
+    return themeVars.inputDisabledBgColor;
+  }
+  return themeVars.transparent;
+};
+
+export const Unit = ({
+  variant = "outlined",
+  size = "small",
+  readOnly = false,
+  withLabel = false,
+  invalid,
+  color,
+  bgColor,
+  border,
+  button,
+  clickable,
+  onClick,
+  ...rest
+}: UnitProps) => {
+  const interactive = variant === "outlined" && !readOnly;
+  return (
+    <UnitPrimitive
+      {...rest}
+      big={size === "medium"}
+      border={border ?? (variant === "outlined" && !readOnly)}
+      bgColor={bgColor ?? getVariantBgColor(variant, readOnly)}
+      button={button ?? (interactive || Boolean(onClick))}
+      clickable={clickable ?? interactive}
+      withLabel={withLabel}
+      invalid={invalid}
+      color={color}
+      onClick={onClick}
+    />
+  );
+};

package/vite.config.ts

@@ -0,0 +1,85 @@
+import {readFileSync} from "node:fs";
+import path from "node:path";
+
+import wyw from "@wyw-in-js/vite";
+import {globSync} from "glob";
+import {defineConfig} from "vite";
+
+const root = import.meta.dirname;
+const sourcePattern = path.join(root, "src/**/*.{ts,tsx}");
+const linariaEntries = globSync(sourcePattern, {
+  absolute: true,
+  ignore: ["**/*.test.{ts,tsx}", "**/__tests__/**"],
+}).filter((file) => readFileSync(file, "utf8").includes("@linaria/"));
+
+if (linariaEntries.length === 0) {
+  throw new Error("No UI-kit Linaria modules found to evaluate.");
+}
+
+const droppedClassNameTitles = new Set([
+  "div",
+  "span",
+  "img",
+  "a",
+  "className",
+  "ul",
+  "li",
+  "p",
+  "b",
+  "style",
+  "h4",
+  "blockquote",
+  "pre",
+  "abbr",
+]);
+const classNameSuffixNoise = /(Styles?|Css|Class|ClassName)$/u;
+const wywViteConfig = {
+  conditionNames: ["@fibery/source", "..."],
+  configFile: false,
+  evalConsole: "pipe",
+  eval: {
+    resolver: "native",
+    require: "off",
+    strategy: "static",
+  },
+  prefixer: false,
+  evaluate: true,
+  classNameSlug(hash: string, title: string) {
+    if (droppedClassNameTitles.has(title)) {
+      return hash;
+    }
+    return `${hash}-${title.replace(classNameSuffixNoise, "")}`;
+  },
+  displayName: true,
+  sourceMap: false,
+  features: {
+    dangerousCodeRemover: true,
+    globalCache: true,
+    happyDOM: false,
+    softErrors: false,
+    useWeakRefInEval: true,
+  },
+  include: [sourcePattern],
+  exclude: ["**/node_modules/**"],
+  transformLibraries: false,
+} as Parameters<typeof wyw>[0];
+
+export default defineConfig({
+  resolve: {
+    conditions: ["@fibery/source", "browser"],
+  },
+  define: {
+    "process.env.NODE_ENV": JSON.stringify("production"),
+    "process.env.NODE_DEBUG": "undefined",
+  },
+  plugins: [wyw(wywViteConfig)],
+  build: {
+    target: "esnext",
+    write: false,
+    minify: false,
+    reportCompressedSize: false,
+    rollupOptions: {
+      input: linariaEntries,
+    },
+  },
+});

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: [["@fibery/babel-preset/typescript"], ["@wyw-in-js"]],
-};

package/scripts/generate-icons.mjs

@@ -1,142 +0,0 @@
-import {readFile} from "fs/promises";
-import path from "node:path";
-import {fileURLToPath} from "node:url";
-
-import fs from "fs-extra";
-import {glob} from "glob";
-import {parse} from "svg-parser";
-import svgo from "svgo";
-import {recursiveReduce} from "unist-util-reduce";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const WORD_RE = /[A-Z]+(?![a-z])|[A-Z]?[a-z]+|\d+/g;
-const words = (s) => String(s).match(WORD_RE) ?? [];
-const cap = (w) => w[0].toUpperCase() + w.slice(1).toLowerCase();
-const pascalCase = (s) => words(s).map(cap).join("");
-const camelCase = (s) =>
-  words(s)
-    .map((w, i) => (i ? cap(w) : w.toLowerCase()))
-    .join("");
-const kebabCase = (s) =>
-  words(s)
-    .map((w) => w.toLowerCase())
-    .join("-");
-
-const svgoConfig = (prefix) => ({
-  plugins: [
-    {
-      name: "preset-default",
-    },
-    {
-      name: "prefixIds",
-      params: {
-        prefix,
-      },
-    },
-  ],
-});
-
-const preludeTemplate = ({source, generator}) => `/**
- * This file was automatically generated. Do not edit manually.
- * ${
-   source
-     ? `
- * @see import("${source}")`
-     : ""
- }
- * @see import("${generator}")
- */
-`;
-
-const render = ({source, generator, svgIdentifier, svgIdentifierPath}) =>
-  `${preludeTemplate({source, generator})}
-import {forwardRef} from "react";
-import ${svgIdentifier}Svg from "../ast/${svgIdentifierPath}";
-import {Icon} from "../icon";
-import type {IconBaseProps} from "../types";
-
-const ${svgIdentifier} = forwardRef<SVGSVGElement, IconBaseProps>(function ${svgIdentifier}(
-  props: IconBaseProps,
-  ref: React.Ref<SVGSVGElement>
-) {return <Icon {...props} className={props.className} ref={ref} icon={${svgIdentifier}Svg} />});
-
-export default ${svgIdentifier};
-`.trim();
-
-const defTemplate = ({source, generator, identifier, content}) => `${preludeTemplate({source, generator})}
-import type {IconDefinition} from "../types";
-
-const ${identifier}: IconDefinition = ${content};
-
-export default ${identifier};
-`;
-
-const iconsDir = path.join(__dirname, "../src/icons");
-const iconsSvgPathDir = path.join(iconsDir, "./svg");
-const iconsReactPathDir = path.join(iconsDir, "./react");
-const iconsAstPathDir = path.join(iconsDir, "./ast");
-const pattern = "**/*.svg";
-const icons = await glob(pattern, {cwd: iconsSvgPathDir});
-
-await fs.remove(iconsReactPathDir);
-await fs.remove(iconsAstPathDir);
-
-const generator = path.relative(iconsReactPathDir, __filename);
-let barrelExportContent = preludeTemplate({source: null, generator: generator}) + "\n";
-for (const icon of icons) {
-  const name = pascalCase(icon.replace("/", "-").replace(".svg", ""));
-  const resultFileName = icon.replaceAll("/", "-").replace(".svg", "");
-  const iconPath = path.join(iconsSvgPathDir, icon);
-  const source = path.relative(iconsReactPathDir, iconPath);
-
-  const ast = parse(svgo.optimize((await readFile(iconPath)).toString(), svgoConfig(name)).data);
-
-  await fs.outputFile(
-    path.join(iconsAstPathDir, `./${resultFileName}.ts`),
-    defTemplate({
-      source,
-      generator,
-      identifier: name,
-      content: JSON.stringify({
-        icon: recursiveReduce(ast, (node) => {
-          const {class: className, xmlns, ...rest} = node.properties ?? {};
-          return {
-            ...node,
-            properties: Object.fromEntries(
-              Object.entries(rest).map(([key, value]) => {
-                if (key === "style") {
-                  const style = {};
-                  value.split(";").forEach((styleItem) => {
-                    const [styleKey, styleValue] = styleItem.split(":").map((s) => s.trim());
-                    if (styleKey && styleValue) {
-                      style[camelCase(styleKey)] = styleValue;
-                    }
-                  });
-                  return [camelCase(key), style];
-                }
-                return [camelCase(key), value];
-              })
-            ),
-          };
-        }),
-        name: kebabCase(name),
-      }),
-    })
-  );
-
-  await fs.outputFile(
-    path.join(iconsReactPathDir, `${resultFileName}.tsx`),
-    render({
-      source,
-      generator,
-      svgIdentifier: name,
-      svgIdentifierPath: resultFileName,
-    })
-  );
-
-  barrelExportContent += `export {default as ${name}} from "./${resultFileName}";\n`;
-}
-await fs.outputFile(path.join(iconsReactPathDir, `./index.tsx`), barrelExportContent);
-await fs.outputFile(path.join(iconsAstPathDir, `./index.tsx`), barrelExportContent);

package/src/__mocks__/style-mock.js

@@ -1 +0,0 @@
-module.exports = {};

package/src/unit/unit-with-title.tsx

@@ -1,13 +0,0 @@
-import {unitTitleClassName, unitWithTitleClassName} from "./styles";
-
-type Props = {
-  title: React.ReactNode;
-  children: React.ReactElement;
-};
-
-export const UnitWithTitle = ({children, title}: Props) => (
-  <div className={unitWithTitleClassName}>
-    <div className={unitTitleClassName}>{title}</div>
-    {children}
-  </div>
-);