[FEATURE] UI customization part 2 component primitives

components/.ladle/components.tsx

@@ -0,0 +1,20 @@
+// Copyright The Perses 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.
+
+import type { GlobalProvider } from '@ladle/react';
+import '@perses-dev/design-tokens/css';
+import '../src/next/css/index.css';
+
+export const Provider: GlobalProvider = ({ children, globalState }) => (
+  <div data-perses-mode={globalState.theme === 'dark' ? 'dark' : 'light'}>{children}</div>
+);

components/.ladle/config.mjs

@@ -0,0 +1,17 @@
+// Copyright The Perses 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.
+
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  stories: 'src/next/**/*.stories.tsx',
+};

components/package.json

@@ -14,12 +14,28 @@
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./next": {
+      "types": "./dist/next/index.d.ts",
+      "import": "./dist/next/index.js",
+      "require": "./dist/cjs/next/index.js"
+    },
+    "./next/css": "./dist/next/css/index.css"
+  },
   "scripts": {
     "clean": "rimraf dist/",
     "build": "concurrently \"npm:build:*\"",
     "build:cjs": "swc ./src -d dist/cjs --strip-leading-paths --config-file ../.cjs.swcrc",
     "build:esm": "swc ./src -d dist --strip-leading-paths --config-file ../.swcrc",
     "build:types": "tsc --project tsconfig.build.json",
+    "build:next-css": "copyfiles -u 1 \"src/next/**/*.css\" dist",
+    "ladle": "ladle serve",
+    "ladle:build": "ladle build",
     "type-check": "tsc --noEmit",
     "start": "concurrently -P \"npm:build:* -- {*}\" -- --watch",
     "test": "cross-env TZ=UTC jest",
@@ -30,38 +46,46 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@base-ui/react": "^1.0.0",
     "@codemirror/lang-json": "^6.0.1",
     "@date-fns/tz": "^1.4.1",
     "@fontsource/inter": "^5.0.0",
     "@mui/x-date-pickers": "^7.23.1",
-    "@perses-dev/spec": "0.2.0",
     "@perses-dev/client": "0.54.0",
-    "numbro": "^2.3.6",
+    "@perses-dev/spec": "0.2.0",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.20.5",
     "@uiw/react-codemirror": "^4.19.1",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "echarts": "5.5.0",
     "immer": "^10.1.1",
     "lodash": "^4.17.21",
     "mathjs": "^10.6.4",
     "mdi-material-ui": "^7.9.2",
     "notistack": "^3.0.2",
+    "numbro": "^2.3.6",
     "react-colorful": "^5.6.1",
     "react-error-boundary": "^3.1.4",
     "react-virtuoso": "^4.12.2"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.20"
+    "@ladle/react": "^4.0.0",
+    "@types/lodash": "^4.17.20",
+    "copyfiles": "^2.4.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^6.1.10",
+    "@perses-dev/design-tokens": "^0.54.0",
     "lodash": "^4.17.21",
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "files": [
     "dist"
   ]

components/src/next/css.d.ts

@@ -0,0 +1,14 @@
+// Copyright The Perses 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.
+
+declare module '*.css';

components/src/next/css/index.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright The Perses 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.
+ */
+
+@layer perses.reset, perses.tokens, perses.semantic, perses.components;

components/src/next/exports.test.tsx

@@ -0,0 +1,41 @@
+// Copyright The Perses 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.
+
+import { Button, Alert } from './index';
+import type { ButtonProps, ButtonVariant, ButtonColor, ButtonSize, AlertProps, AlertSeverity } from './index';
+
+describe('next barrel exports', () => {
+  it('exports Button component', () => {
+    expect(Button).toBeDefined();
+  });
+
+  it('exports Alert component', () => {
+    expect(Alert).toBeDefined();
+  });
+
+  it('exports type interfaces', () => {
+    const buttonProps: ButtonProps = {};
+    const variant: ButtonVariant = 'solid';
+    const color: ButtonColor = 'primary';
+    const size: ButtonSize = 'md';
+    const alertProps: AlertProps = {};
+    const severity: AlertSeverity = 'info';
+
+    expect(buttonProps).toBeDefined();
+    expect(variant).toBe('solid');
+    expect(color).toBe('primary');
+    expect(size).toBe('md');
+    expect(alertProps).toBeDefined();
+    expect(severity).toBe('info');
+  });
+});

components/src/next/index.ts

@@ -0,0 +1,18 @@
+// Copyright The Perses 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.
+
+export { Button } from './primitives/Button/Button';
+export type { ButtonProps, ButtonVariant, ButtonColor, ButtonSize } from './primitives/Button/Button';
+
+export { Alert } from './primitives/Alert/Alert';
+export type { AlertProps, AlertSeverity } from './primitives/Alert/Alert';

components/src/next/primitives/Alert/Alert.stories.tsx

@@ -0,0 +1,28 @@
+// Copyright The Perses 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.
+
+import type { Story } from '@ladle/react';
+import { Alert, AlertSeverity } from './Alert';
+
+const severities: AlertSeverity[] = ['error', 'warning', 'success', 'info'];
+
+export const AllSeverities: Story = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    {severities.map((severity) => (
+      <Alert key={severity} severity={severity}>
+        This is a {severity} alert.
+      </Alert>
+    ))}
+  </div>
+);
+AllSeverities.storyName = 'All Severities';

components/src/next/primitives/Alert/Alert.test.tsx

@@ -0,0 +1,56 @@
+// Copyright The Perses 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.
+
+import { render, screen } from '@testing-library/react';
+import { Alert } from './Alert';
+
+describe('Alert', () => {
+  it('renders children', () => {
+    render(<Alert>Something happened</Alert>);
+    expect(screen.getByRole('alert')).toHaveTextContent('Something happened');
+  });
+
+  it('applies the ps-Alert class', () => {
+    render(<Alert>Test</Alert>);
+    expect(screen.getByRole('alert')).toHaveClass('ps-Alert');
+  });
+
+  it('defaults to info severity', () => {
+    render(<Alert>Test</Alert>);
+    expect(screen.getByRole('alert')).toHaveAttribute('data-severity', 'info');
+  });
+
+  it('sets data-severity attribute', () => {
+    render(<Alert severity="error">Error!</Alert>);
+    expect(screen.getByRole('alert')).toHaveAttribute('data-severity', 'error');
+  });
+
+  it('merges additional className', () => {
+    render(<Alert className="custom">Test</Alert>);
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveClass('ps-Alert');
+    expect(alert).toHaveClass('custom');
+  });
+
+  it('renders all severity levels', () => {
+    const severities = ['error', 'warning', 'success', 'info'] as const;
+    const { unmount } = render(<Alert severity="error">Test</Alert>);
+    unmount();
+
+    for (const severity of severities) {
+      const { unmount: cleanup } = render(<Alert severity={severity}>{severity}</Alert>);
+      expect(screen.getByRole('alert')).toHaveAttribute('data-severity', severity);
+      cleanup();
+    }
+  });
+});

components/src/next/primitives/Alert/Alert.tsx

@@ -0,0 +1,31 @@
+// Copyright The Perses 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.
+
+import clsx from 'clsx';
+import './alert.css';
+
+export type AlertSeverity = 'error' | 'warning' | 'success' | 'info';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  severity?: AlertSeverity;
+}
+
+export function Alert({ severity = 'info', className, children, ...rest }: AlertProps): React.ReactElement {
+  const classes = clsx('ps-Alert', className);
+
+  return (
+    <div {...rest} role="alert" className={classes} data-severity={severity}>
+      {children}
+    </div>
+  );
+}

components/src/next/primitives/Alert/alert.css

@@ -0,0 +1,52 @@
+/*
+ * Copyright The Perses 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.
+ */
+
+@layer perses.components {
+  .ps-Alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--perses-spacing-sm);
+    padding: var(--perses-spacing-md) var(--perses-spacing-lg);
+    border: 1px solid transparent;
+    border-radius: var(--perses-radius-md);
+    font-family: var(--perses-font-family);
+    font-size: var(--perses-font-size-sm);
+    line-height: var(--perses-line-height-normal);
+  }
+
+  .ps-Alert[data-severity='error'] {
+    background-color: var(--perses-status-bg-error);
+    border-color: var(--perses-status-border-error);
+    color: var(--perses-status-text-error);
+  }
+
+  .ps-Alert[data-severity='warning'] {
+    background-color: var(--perses-status-bg-warning);
+    border-color: var(--perses-status-border-warning);
+    color: var(--perses-status-text-warning);
+  }
+
+  .ps-Alert[data-severity='success'] {
+    background-color: var(--perses-status-bg-success);
+    border-color: var(--perses-status-border-success);
+    color: var(--perses-status-text-success);
+  }
+
+  .ps-Alert[data-severity='info'] {
+    background-color: var(--perses-status-bg-info);
+    border-color: var(--perses-status-border-info);
+    color: var(--perses-status-text-info);
+  }
+}