@backstage/ui 0.6.0 → 0.7.0-next.0

package/dist/hooks/useStyles.esm.js

@@ -0,0 +1,46 @@
+import { useBreakpoint, breakpoints } from './useBreakpoint.esm.js';
+import { componentDefinitions } from '../utils/componentDefinitions.esm.js';
+
+function resolveResponsiveValue(value, breakpoint) {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "object" && value !== null) {
+    const index = breakpoints.findIndex((b) => b.id === breakpoint);
+    for (let i = index; i >= 0; i--) {
+      if (value[breakpoints[i].id]) {
+        return value[breakpoints[i].id];
+      }
+    }
+    for (let i = 0; i < breakpoints.length; i++) {
+      if (value[breakpoints[i].id]) {
+        return value[breakpoints[i].id];
+      }
+    }
+  }
+  return void 0;
+}
+function useStyles(componentName, props = {}) {
+  const { breakpoint } = useBreakpoint();
+  const classNames = componentDefinitions[componentName].classNames;
+  const dataAttributes = {};
+  const resolvedProps = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (value !== void 0 && value !== null) {
+      const resolvedValue = resolveResponsiveValue(value, breakpoint);
+      if (resolvedValue !== void 0) {
+        resolvedProps[key] = resolvedValue;
+        dataAttributes[`data-${key}`] = resolvedValue;
+      }
+    }
+  }
+  return {
+    classNames,
+    dataAttributes,
+    resolvedProps
+    // Also return resolved props for convenience
+  };
+}
+
+export { useStyles };
+//# sourceMappingURL=useStyles.esm.js.map

package/dist/hooks/useStyles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyles.esm.js","sources":["../../src/hooks/useStyles.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 */\nimport { useBreakpoint, breakpoints } from './useBreakpoint';\nimport { componentDefinitions } from '../utils/componentDefinitions';\nimport type { ComponentDefinitionName, ComponentClassNames } from '../types';\n\n/**\n * Resolve a responsive value based on the current breakpoint\n * @param value - The responsive value (string or object with breakpoint keys)\n * @param breakpoint - The current breakpoint\n * @returns The resolved value for the current breakpoint\n */\nfunction resolveResponsiveValue(\n  value: string | Record<string, string>,\n  breakpoint: string,\n): string | undefined {\n  if (typeof value === 'string') {\n    return value;\n  }\n\n  if (typeof value === 'object' && value !== null) {\n    const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n    // Look for value at current breakpoint or smaller\n    for (let i = index; i >= 0; i--) {\n      if (value[breakpoints[i].id]) {\n        return value[breakpoints[i].id];\n      }\n    }\n\n    // If no value found, check from smallest breakpoint up\n    for (let i = 0; i < breakpoints.length; i++) {\n      if (value[breakpoints[i].id]) {\n        return value[breakpoints[i].id];\n      }\n    }\n  }\n\n  return undefined;\n}\n\n/**\n * React hook to get class names and data attributes for a component with responsive support\n * @param componentName - The name of the component\n * @param props - Object with prop values (can be responsive)\n * @returns Object with classNames and dataAttributes\n */\nexport function useStyles<T extends ComponentDefinitionName>(\n  componentName: T,\n  props: Record<string, any> = {},\n): {\n  classNames: ComponentClassNames<T>;\n  dataAttributes: Record<string, string>;\n  resolvedProps: Record<string, string>;\n} {\n  const { breakpoint } = useBreakpoint();\n  const classNames = componentDefinitions[componentName]\n    .classNames as ComponentClassNames<T>;\n\n  // Resolve responsive values and generate data attributes\n  const dataAttributes: Record<string, string> = {};\n  const resolvedProps: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (value !== undefined && value !== null) {\n      const resolvedValue = resolveResponsiveValue(value, breakpoint);\n      if (resolvedValue !== undefined) {\n        resolvedProps[key] = resolvedValue;\n        dataAttributes[`data-${key}`] = resolvedValue;\n      }\n    }\n  }\n\n  return {\n    classNames,\n    dataAttributes,\n    resolvedProps, // Also return resolved props for convenience\n  };\n}\n"],"names":[],"mappings":";;;AAyBA,SAAS,sBAAA,CACP,OACA,UACoB,EAAA;AACpB,EAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,IAAI,OAAO,KAAA,KAAU,QAAY,IAAA,KAAA,KAAU,IAAM,EAAA;AAC/C,IAAA,MAAM,QAAQ,WAAY,CAAA,SAAA,CAAU,CAAK,CAAA,KAAA,CAAA,CAAE,OAAO,UAAU,CAAA;AAG5D,IAAA,KAAA,IAAS,CAAI,GAAA,KAAA,EAAO,CAAK,IAAA,CAAA,EAAG,CAAK,EAAA,EAAA;AAC/B,MAAA,IAAI,KAAM,CAAA,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAG,EAAA;AAC5B,QAAA,OAAO,KAAM,CAAA,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA;AAAA;AAChC;AAIF,IAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,WAAA,CAAY,QAAQ,CAAK,EAAA,EAAA;AAC3C,MAAA,IAAI,KAAM,CAAA,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAG,EAAA;AAC5B,QAAA,OAAO,KAAM,CAAA,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA;AAAA;AAChC;AACF;AAGF,EAAO,OAAA,KAAA,CAAA;AACT;AAQO,SAAS,SACd,CAAA,aAAA,EACA,KAA6B,GAAA,EAK7B,EAAA;AACA,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,aAAc,EAAA;AACrC,EAAM,MAAA,UAAA,GAAa,oBAAqB,CAAA,aAAa,CAClD,CAAA,UAAA;AAGH,EAAA,MAAM,iBAAyC,EAAC;AAChD,EAAA,MAAM,gBAAwC,EAAC;AAE/C,EAAA,KAAA,MAAW,CAAC,GAAK,EAAA,KAAK,KAAK,MAAO,CAAA,OAAA,CAAQ,KAAK,CAAG,EAAA;AAChD,IAAI,IAAA,KAAA,KAAU,KAAa,CAAA,IAAA,KAAA,KAAU,IAAM,EAAA;AACzC,MAAM,MAAA,aAAA,GAAgB,sBAAuB,CAAA,KAAA,EAAO,UAAU,CAAA;AAC9D,MAAA,IAAI,kBAAkB,KAAW,CAAA,EAAA;AAC/B,QAAA,aAAA,CAAc,GAAG,CAAI,GAAA,aAAA;AACrB,QAAe,cAAA,CAAA,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAI,GAAA,aAAA;AAAA;AAClC;AACF;AAGF,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA;AAAA,GACF;AACF;;;;"}