Merge branch 'master' into bui-surfaces
This commit is contained in:
Charles de Dreuille
File diff suppressed because it is too large
Load Diff
+15
-12
@@ -5,9 +5,7 @@
|
||||
"role": "web-library"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"main": "dist/index.esm.js",
|
||||
"types": "dist/index.d.ts"
|
||||
"access": "public"
|
||||
},
|
||||
"keywords": [
|
||||
"backstage"
|
||||
@@ -22,17 +20,25 @@
|
||||
"sideEffects": [
|
||||
"*.css"
|
||||
],
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./css/styles.css": "./src/css/styles.css",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
"package.json": [
|
||||
"package.json"
|
||||
]
|
||||
}
|
||||
},
|
||||
"main": "src/index.ts",
|
||||
"types": "src/index.ts",
|
||||
"files": [
|
||||
"dist",
|
||||
"css"
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "yarn build:app && yarn build:css",
|
||||
"build:app": "backstage-cli package build",
|
||||
"build:css": "node scripts/build-css.mjs",
|
||||
"build:css:watch": "node scripts/build-css.mjs --watch",
|
||||
"build": "backstage-cli package build",
|
||||
"clean": "backstage-cli package clean",
|
||||
"lint": "backstage-cli package lint",
|
||||
"prepack": "backstage-cli package prepack",
|
||||
@@ -50,12 +56,9 @@
|
||||
"@backstage/cli": "workspace:^",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"chalk": "^5.4.1",
|
||||
"eslint-plugin-storybook": "^10.3.0-alpha.1",
|
||||
"glob": "^11.0.1",
|
||||
"globals": "^15.11.0",
|
||||
"lightningcss": "^1.29.1",
|
||||
"mini-css-extract-plugin": "^2.9.2",
|
||||
"react": "^18.0.2",
|
||||
"react-dom": "^18.0.2",
|
||||
"react-router-dom": "^6.30.2",
|
||||
|
||||
@@ -1971,7 +1971,9 @@ export const TabsDefinition: {
|
||||
export interface TabsProps extends TabsProps_2 {}
|
||||
|
||||
// @public
|
||||
export const Tag: (props: TagProps) => JSX_2.Element;
|
||||
export const Tag: ForwardRefExoticComponent<
|
||||
TagProps & RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
|
||||
// @public
|
||||
export const TagGroup: <T extends object>(
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* eslint-disable no-restricted-imports */
|
||||
import { transform, bundle } from 'lightningcss';
|
||||
import fs from 'node:fs';
|
||||
import chalk from 'chalk';
|
||||
/* eslint-enable no-restricted-imports */
|
||||
|
||||
const srcFile = 'src/css/styles.css';
|
||||
const distDir = 'css';
|
||||
const distFile = `${distDir}/styles.css`;
|
||||
|
||||
// Check if styles.css exists
|
||||
if (!fs.existsSync(srcFile)) {
|
||||
console.error(`${srcFile} does not exist`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Ensure the dist/css directory exists
|
||||
if (!fs.existsSync(distDir)) {
|
||||
fs.mkdirSync(distDir, { recursive: true });
|
||||
}
|
||||
|
||||
const args = process.argv.slice(2);
|
||||
const watchMode = args.includes('--watch');
|
||||
|
||||
async function buildCSS(logs = true) {
|
||||
const css = fs.readFileSync(srcFile);
|
||||
|
||||
let { code: bundleCode } = bundle({
|
||||
filename: srcFile,
|
||||
});
|
||||
|
||||
const { code } = transform({
|
||||
filename: distFile,
|
||||
code: bundleCode,
|
||||
minify: false,
|
||||
});
|
||||
|
||||
// Prepend the layer order declaration that lightningcss removes during bundling
|
||||
// This is crucial to maintain the correct layer cascade order
|
||||
const layerDeclaration = '@layer tokens, base, components, utilities;\n\n';
|
||||
const finalCode = layerDeclaration + code;
|
||||
|
||||
fs.writeFileSync(distFile, finalCode);
|
||||
if (logs) {
|
||||
console.log(chalk.blue('CSS transformed and minified: ') + 'styles.css');
|
||||
console.log(chalk.green('CSS file built successfully!'));
|
||||
}
|
||||
}
|
||||
|
||||
if (watchMode) {
|
||||
fs.watch('src/css', { recursive: true }, (eventType, filename) => {
|
||||
if (filename === 'styles.css') {
|
||||
console.log(
|
||||
chalk.yellow(`Changes detected in ${filename}, rebuilding...`),
|
||||
);
|
||||
buildCSS(false).catch(console.error);
|
||||
}
|
||||
});
|
||||
buildCSS().catch(console.error);
|
||||
console.log(chalk.yellow('Watching for CSS changes...'));
|
||||
} else {
|
||||
buildCSS().catch(console.error);
|
||||
}
|
||||
@@ -137,13 +137,26 @@ export function Table<T extends TableItem>({
|
||||
data !== undefined,
|
||||
);
|
||||
|
||||
const manualColumnSizing = columnConfig.some(
|
||||
col =>
|
||||
col.width != null ||
|
||||
col.minWidth != null ||
|
||||
col.maxWidth != null ||
|
||||
col.defaultWidth != null,
|
||||
);
|
||||
|
||||
const wrapResizable = manualColumnSizing
|
||||
? (elem: React.ReactNode) => (
|
||||
<ResizableTableContainer>{elem}</ResizableTableContainer>
|
||||
)
|
||||
: (elem: React.ReactNode) => <>{elem}</>;
|
||||
|
||||
return (
|
||||
<div className={className} style={style}>
|
||||
<VisuallyHidden aria-live="polite" id={liveRegionId}>
|
||||
{liveRegionLabel}
|
||||
</VisuallyHidden>
|
||||
|
||||
<ResizableTableContainer>
|
||||
{wrapResizable(
|
||||
<TableRoot
|
||||
selectionMode={selectionMode}
|
||||
selectionBehavior={selectionBehavior}
|
||||
@@ -207,8 +220,8 @@ export function Table<T extends TableItem>({
|
||||
);
|
||||
}}
|
||||
</TableBody>
|
||||
</TableRoot>
|
||||
</ResizableTableContainer>
|
||||
</TableRoot>,
|
||||
)}
|
||||
{pagination.type === 'page' && (
|
||||
<TablePagination
|
||||
pageSize={pagination.pageSize}
|
||||
|
||||
@@ -21,7 +21,7 @@ import {
|
||||
Tag as ReactAriaTag,
|
||||
Button as ReactAriaButton,
|
||||
} from 'react-aria-components';
|
||||
import type { ReactNode } from 'react';
|
||||
import { forwardRef, type PropsWithRef, type ReactNode, type Ref } from 'react';
|
||||
import { RiCloseCircleLine } from '@remixicon/react';
|
||||
import clsx from 'clsx';
|
||||
import { useStyles } from '../../hooks/useStyles';
|
||||
@@ -64,47 +64,50 @@ export const TagGroup = <T extends object>(props: TagGroupProps<T>) => {
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
export const Tag = (props: TagProps) => {
|
||||
const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {
|
||||
size: 'small',
|
||||
...props,
|
||||
});
|
||||
const { children, className, icon, size, href, ...rest } = cleanedProps;
|
||||
const textValue = typeof children === 'string' ? children : undefined;
|
||||
export const Tag = forwardRef(
|
||||
(props: PropsWithRef<TagProps>, ref: Ref<HTMLDivElement>) => {
|
||||
const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {
|
||||
size: 'small',
|
||||
...props,
|
||||
});
|
||||
const { children, className, icon, size, href, ...rest } = cleanedProps;
|
||||
const textValue = typeof children === 'string' ? children : undefined;
|
||||
|
||||
useRoutingRegistrationEffect(href);
|
||||
useRoutingRegistrationEffect(href);
|
||||
|
||||
return (
|
||||
<ReactAriaTag
|
||||
textValue={textValue}
|
||||
className={clsx(classNames.tag, styles[classNames.tag], className)}
|
||||
data-size={size}
|
||||
href={href}
|
||||
{...rest}
|
||||
>
|
||||
{({ allowsRemoving }) => (
|
||||
<>
|
||||
{icon && (
|
||||
<span
|
||||
className={clsx(classNames.tagIcon, styles[classNames.tagIcon])}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
)}
|
||||
{children as ReactNode}
|
||||
{allowsRemoving && (
|
||||
<ReactAriaButton
|
||||
className={clsx(
|
||||
classNames.tagRemoveButton,
|
||||
styles[classNames.tagRemoveButton],
|
||||
)}
|
||||
slot="remove"
|
||||
>
|
||||
<RiCloseCircleLine size={16} />
|
||||
</ReactAriaButton>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ReactAriaTag>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<ReactAriaTag
|
||||
ref={ref}
|
||||
textValue={textValue}
|
||||
className={clsx(classNames.tag, styles[classNames.tag], className)}
|
||||
data-size={size}
|
||||
href={href}
|
||||
{...rest}
|
||||
>
|
||||
{({ allowsRemoving }) => (
|
||||
<>
|
||||
{icon && (
|
||||
<span
|
||||
className={clsx(classNames.tagIcon, styles[classNames.tagIcon])}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
)}
|
||||
{children as ReactNode}
|
||||
{allowsRemoving && (
|
||||
<ReactAriaButton
|
||||
className={clsx(
|
||||
classNames.tagRemoveButton,
|
||||
styles[classNames.tagRemoveButton],
|
||||
)}
|
||||
slot="remove"
|
||||
>
|
||||
<RiCloseCircleLine size={16} />
|
||||
</ReactAriaButton>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ReactAriaTag>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user