@backstage/ui 0.6.0 → 0.6.1

package/dist/utils/componentDefinitions.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentDefinitions.esm.js","sources":["../../src/utils/componentDefinitions.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../types';\n\n/**\n * Component definitions for the Backstage UI library\n * @public\n */\nexport const componentDefinitions = {\n  Avatar: {\n    classNames: {\n      root: 'bui-AvatarRoot',\n      image: 'bui-AvatarImage',\n      fallback: 'bui-AvatarFallback',\n    },\n    dataAttributes: {\n      size: ['small', 'medium', 'large'] as const,\n    },\n  },\n  Box: {\n    classNames: {\n      root: 'bui-Box',\n    },\n  },\n  Button: {\n    classNames: {\n      root: 'bui-Button',\n    },\n    dataAttributes: {\n      size: ['small', 'medium', 'large'] as const,\n      variant: ['primary', 'secondary', 'ghost'] as const,\n    },\n  },\n  ButtonIcon: {\n    classNames: {\n      root: 'bui-ButtonIcon',\n    },\n  },\n  ButtonLink: {\n    classNames: {\n      root: 'bui-ButtonLink',\n    },\n  },\n  Card: {\n    classNames: {\n      root: 'bui-Card',\n      header: 'bui-CardHeader',\n      body: 'bui-CardBody',\n      footer: 'bui-CardFooter',\n    },\n  },\n  Checkbox: {\n    classNames: {\n      root: 'bui-CheckboxRoot',\n      label: 'bui-CheckboxLabel',\n      indicator: 'bui-CheckboxIndicator',\n    },\n    dataAttributes: {\n      checked: [true, false] as const,\n    },\n  },\n  Collapsible: {\n    classNames: {\n      root: 'bui-CollapsibleRoot',\n      trigger: 'bui-CollapsibleTrigger',\n      panel: 'bui-CollapsiblePanel',\n    },\n  },\n  Container: {\n    classNames: {\n      root: 'bui-Container',\n    },\n  },\n  FieldLabel: {\n    classNames: {\n      root: 'bui-FieldLabelWrapper',\n      label: 'bui-FieldLabel',\n      secondaryLabel: 'bui-FieldSecondaryLabel',\n      description: 'bui-FieldDescription',\n    },\n  },\n  Flex: {\n    classNames: {\n      root: 'bui-Flex',\n    },\n  },\n  Grid: {\n    classNames: {\n      root: 'bui-Grid',\n      item: 'bui-GridItem',\n    },\n  },\n  Header: {\n    classNames: {\n      toolbar: 'bui-HeaderToolbar',\n      toolbarWrapper: 'bui-HeaderToolbarWrapper',\n      toolbarContent: 'bui-HeaderToolbarContent',\n      toolbarControls: 'bui-HeaderToolbarControls',\n      toolbarIcon: 'bui-HeaderToolbarIcon',\n      toolbarName: 'bui-HeaderToolbarName',\n      breadcrumbs: 'bui-HeaderBreadcrumbs',\n      breadcrumb: 'bui-HeaderBreadcrumb',\n      breadcrumbLink: 'bui-HeaderBreadcrumbLink',\n      breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator',\n      tabsWrapper: 'bui-HeaderTabsWrapper',\n    },\n  },\n  HeaderPage: {\n    classNames: {\n      root: 'bui-HeaderPage',\n      content: 'bui-HeaderPageContent',\n      tabsWrapper: 'bui-HeaderPageTabsWrapper',\n      controls: 'bui-HeaderPageControls',\n    },\n  },\n  Heading: {\n    classNames: {\n      root: 'bui-Heading',\n    },\n    dataAttributes: {\n      variant: ['title1', 'title2', 'title3', 'subtitle'] as const,\n      color: ['primary', 'secondary', 'muted'] as const,\n      truncate: [true, false] as const,\n    },\n  },\n  Icon: {\n    classNames: {\n      root: 'bui-Icon',\n    },\n  },\n  Link: {\n    classNames: {\n      root: 'bui-Link',\n    },\n    dataAttributes: {\n      variant: ['subtitle', 'body', 'caption', 'label'] as const,\n      weight: ['regular', 'bold'] as const,\n    },\n  },\n  List: {\n    classNames: {\n      root: 'bui-List',\n      row: 'bui-ListRow',\n      label: 'bui-ListLabel',\n    },\n  },\n  Menu: {\n    classNames: {\n      trigger: 'bui-MenuTrigger',\n      backdrop: 'bui-MenuBackdrop',\n      positioner: 'bui-MenuPositioner',\n      popup: 'bui-MenuPopup',\n      arrow: 'bui-MenuArrow',\n      item: 'bui-MenuItem',\n      group: 'bui-MenuGroup',\n      groupLabel: 'bui-MenuGroupLabel',\n      radioGroup: 'bui-MenuRadioGroup',\n      radioItem: 'bui-MenuRadioItem',\n      radioItemIndicator: 'bui-MenuRadioItemIndicator',\n      checkboxItem: 'bui-MenuCheckboxItem',\n      checkboxItemIndicator: 'bui-MenuCheckboxItemIndicator',\n      submenuTrigger: 'bui-MenuSubmenuTrigger',\n      separator: 'bui-MenuSeparator',\n    },\n  },\n  Popover: {\n    classNames: {\n      root: 'bui-Popover',\n    },\n  },\n  RadioGroup: {\n    classNames: {\n      root: 'bui-RadioGroup',\n      content: 'bui-RadioGroupContent',\n      radio: 'bui-Radio',\n    },\n  },\n  ScrollArea: {\n    classNames: {\n      root: 'bui-ScrollAreaRoot',\n      viewport: 'bui-ScrollAreaViewport',\n      scrollbar: 'bui-ScrollAreaScrollbar',\n      thumb: 'bui-ScrollAreaThumb',\n    },\n  },\n  SearchField: {\n    classNames: {\n      root: 'bui-SearchField',\n      clear: 'bui-InputClear',\n    },\n  },\n  Select: {\n    classNames: {\n      root: 'bui-Select',\n      trigger: 'bui-SelectTrigger',\n      value: 'bui-SelectValue',\n      icon: 'bui-SelectIcon',\n      list: 'bui-SelectList',\n      item: 'bui-SelectItem',\n      itemIndicator: 'bui-SelectItemIndicator',\n      itemLabel: 'bui-SelectItemLabel',\n    },\n    dataAttributes: {\n      size: ['small', 'medium'] as const,\n    },\n  },\n  Skeleton: {\n    classNames: {\n      root: 'bui-Skeleton',\n    },\n  },\n  Switch: {\n    classNames: {\n      root: 'bui-Switch',\n      indicator: 'bui-SwitchIndicator',\n    },\n  },\n  Table: {\n    classNames: {\n      root: 'bui-TableRoot',\n      header: 'bui-TableHeader',\n      body: 'bui-TableBody',\n      row: 'bui-TableRow',\n      head: 'bui-TableHead',\n      caption: 'bui-TableCaption',\n      cell: 'bui-TableCell',\n      cellText: 'bui-TableCellText',\n      cellLink: 'bui-TableCellLink',\n      cellProfile: 'bui-TableCellProfile',\n      cellProfileAvatar: 'bui-TableCellProfileAvatar',\n      cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n      cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n      cellProfileName: 'bui-TableCellProfileName',\n      cellProfileLink: 'bui-TableCellProfileLink',\n    },\n  },\n  Tabs: {\n    classNames: {\n      tabs: 'bui-Tabs',\n      tabList: 'bui-TabList',\n      tabListWrapper: 'bui-TabListWrapper',\n      tab: 'bui-Tab',\n      tabActive: 'bui-TabActive',\n      tabHovered: 'bui-TabHovered',\n      panel: 'bui-TabPanel',\n    },\n  },\n  Text: {\n    classNames: {\n      root: 'bui-Text',\n    },\n    dataAttributes: {\n      variant: ['subtitle', 'body', 'caption', 'label'] as const,\n      weight: ['regular', 'bold'] as const,\n      color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n      truncate: [true, false] as const,\n    },\n  },\n  TextField: {\n    classNames: {\n      root: 'bui-TextField',\n      inputWrapper: 'bui-InputWrapper',\n      input: 'bui-Input',\n      inputIcon: 'bui-InputIcon',\n    },\n    dataAttributes: {\n      invalid: [true, false] as const,\n      disabled: [true, false] as const,\n    },\n  },\n  Tooltip: {\n    classNames: {\n      tooltip: 'bui-Tooltip',\n      arrow: 'bui-TooltipArrow',\n    },\n  },\n} as const satisfies Record<string, ComponentDefinition>;\n"],"names":[],"mappings":"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"}

package/dist/utils/extractProps.esm.js

@@ -0,0 +1,49 @@
+function extractProps(props, propDefs) {
+  let className = (props.className || "").split(" ");
+  let style = { ...props.style };
+  for (const key in propDefs) {
+    const propDef = propDefs[key];
+    if (!Object.hasOwn(props, key) && !propDef.hasOwnProperty("default")) {
+      continue;
+    }
+    const value = Object.hasOwn(props, key) ? props[key] : propDefs[key].default;
+    const propDefsValues = propDef.values;
+    const propDefsCustomProperties = propDef.customProperties;
+    const propDefsClassName = propDef.className;
+    const isResponsive = propDef.responsive;
+    const handleValue = (val, prefix = "") => {
+      if (key === "as") return;
+      if (propDefsValues?.includes(val)) {
+        className.push(`${prefix}${propDefsClassName}-${val}`);
+      } else {
+        if (propDefsCustomProperties) {
+          for (const customProperty of propDefsCustomProperties) {
+            const customPropertyKey = isResponsive && prefix ? `${customProperty}-${prefix.slice(0, -1)}` : customProperty;
+            style[customPropertyKey] = val;
+          }
+        }
+        className.push(`${prefix}${propDefsClassName}`);
+      }
+    };
+    if (isResponsive && typeof value === "object" && value !== null) {
+      const breakpointValues = value;
+      for (const breakpoint in breakpointValues) {
+        const prefix = breakpoint === "initial" ? "" : `${breakpoint}:`;
+        handleValue(breakpointValues[breakpoint], prefix);
+      }
+    } else {
+      handleValue(value);
+    }
+  }
+  const cleanedProps = Object.keys(props).reduce((acc, key) => {
+    if (!propDefs.hasOwnProperty(key)) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
+  const newClassNames = className.filter((name) => name && name.trim() !== "").join(" ");
+  return { ...cleanedProps, className: newClassNames, style };
+}
+
+export { extractProps };
+//# sourceMappingURL=extractProps.esm.js.map

package/dist/utils/extractProps.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractProps.esm.js","sources":["../../src/utils/extractProps.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\ntype BasePropDef = {\n  type: string;\n  values?: readonly unknown[];\n  default?: unknown;\n  required?: boolean;\n  className?: string;\n  responsive?: true;\n  customProperties?: string[];\n};\n\nexport function extractProps(\n  props: {\n    className?: string;\n    style?: React.CSSProperties;\n    children?: React.ReactNode;\n    as?: keyof JSX.IntrinsicElements;\n    [key: string]: any;\n  },\n  propDefs: { [name in string]: BasePropDef },\n) {\n  let className: string[] = (props.className || '').split(' ');\n  let style: React.CSSProperties = { ...props.style };\n\n  for (const key in propDefs) {\n    const propDef = propDefs[key];\n\n    // Check if the prop is present or has a default value\n    if (!Object.hasOwn(props, key) && !propDef.hasOwnProperty('default')) {\n      continue; // Skip processing if neither is present\n    }\n\n    const value = Object.hasOwn(props, key)\n      ? (props[key] as unknown)\n      : propDefs[key].default;\n    const propDefsValues = propDef.values;\n    const propDefsCustomProperties = propDef.customProperties;\n    const propDefsClassName = propDef.className;\n    const isResponsive = propDef.responsive;\n\n    const handleValue = (val: unknown, prefix: string = '') => {\n      // Skip adding class name if the key is \"as\"\n      if (key === 'as') return;\n\n      if (propDefsValues?.includes(val)) {\n        className.push(`${prefix}${propDefsClassName}-${val}`);\n      } else {\n        if (propDefsCustomProperties) {\n          for (const customProperty of propDefsCustomProperties) {\n            const customPropertyKey =\n              isResponsive && prefix\n                ? `${customProperty}-${prefix.slice(0, -1)}`\n                : customProperty;\n            style[customPropertyKey as keyof typeof style] = val as any;\n          }\n        }\n        className.push(`${prefix}${propDefsClassName}`);\n      }\n    };\n\n    if (isResponsive && typeof value === 'object' && value !== null) {\n      const breakpointValues = value as { [key: string]: unknown };\n      // Handle responsive object values\n      for (const breakpoint in breakpointValues) {\n        const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`;\n        handleValue(breakpointValues[breakpoint], prefix);\n      }\n    } else {\n      handleValue(value);\n    }\n  }\n\n  // Ensure keys from props that are defined in propDefs are removed\n  const cleanedProps = Object.keys(props).reduce((acc, key) => {\n    if (!propDefs.hasOwnProperty(key)) {\n      acc[key] = props[key];\n    }\n    return acc;\n  }, {} as { [key: string]: any });\n\n  const newClassNames = className\n    .filter(name => name && name.trim() !== '')\n    .join(' ');\n\n  return { ...cleanedProps, className: newClassNames, style };\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "backstage": {
     "role": "web-library"
   },
@@ -81,5 +81,13 @@
     "@types/react": {
       "optional": true
     }
-  }
+  },
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
+  "module": "./dist/index.esm.js"
 }