Skip to content

[FEATURE] UI customization. Add Box primitive component #299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zhuje wants to merge 2 commits into
base: ui-customization
Choose a base branch
from
Open

[FEATURE] UI customization. Add Box primitive component #299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0b8da9
[FEATURE] UI customization. Add Box primitive component
zhuje Sep 17, 2026
8db66d2
[IGNORE] Update package.json so design-tokens are a dependency
zhuje Sep 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
"@mui/x-date-pickers": "^7.23.1",
"@perses-dev/spec": "0.3.0-beta.8",
"@perses-dev/client": "0.55.0-beta.8",
"@perses-dev/design-tokens": "0.54.0",
"numbro": "^2.3.6",
"@tanstack/match-sorter-utils": "^8.19.4",
"@tanstack/react-table": "^8.20.5",
Expand Down
2 changes: 2 additions & 0 deletions components/src/next/contexts/ComponentsContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,15 @@ import { createContext } from 'react';
import type { ComponentType, ReactNode, SVGProps } from 'react';

import type { AlertProps } from '../primitives/Alert';
import type { BoxProps } from '../primitives/Box';
import type { ButtonProps } from '../primitives/Button';
import type { SpinnerProps } from '../primitives/Spinner';

export interface PersesComponents {
Button: ComponentType<ButtonProps>;
Alert: ComponentType<AlertProps>;
Spinner: ComponentType<SpinnerProps>;
Box: ComponentType<BoxProps>;
}

export interface PersesIcons {
Expand Down
255 changes: 255 additions & 0 deletions components/src/next/primitives/Box/Box.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
// 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 { Box } from './Box';
import type { SpacingToken } from './Box';

export const BasicBox: Story = () => (
<Box p="md" style={{ border: '1px solid #ccc' }}>
This is a basic box with padding.
</Box>
);
BasicBox.storyName = 'Basic Box';

export const DisplayVariations: Story = () => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<div>
<h3>Display: block</h3>
<Box display="block" p="md" style={{ border: '1px solid #ccc' }}>
Block box
</Box>
</div>
<div>
<h3>Display: flex</h3>
<Box display="flex" gap="md" p="md" style={{ border: '1px solid #ccc' }}>
<Box p="md" style={{ backgroundColor: '#eee' }}>
Item 1
</Box>
<Box p="md" style={{ backgroundColor: '#eee' }}>
Item 2
</Box>
</Box>
</div>
<div>
<h3>Display: inline-block</h3>
<Box display="inline-block" p="md" style={{ border: '1px solid #ccc', marginRight: '1rem' }}>
Inline 1
</Box>
<Box display="inline-block" p="md" style={{ border: '1px solid #ccc' }}>
Inline 2
</Box>
</div>
</div>
);
DisplayVariations.storyName = 'Display Variations';

export const SpacingTokens: Story = () => {
const tokens: SpacingToken[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'];

return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<div>
<h3>Padding Tokens</h3>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{tokens.map((token) => (
<Box key={`p-${token}`} p={token} style={{ border: '1px solid #ccc', backgroundColor: '#f5f5f5' }}>
p={'{token}'}: {token}
</Box>
))}
</div>
</div>

<div>
<h3>Margin Tokens</h3>
<div style={{ backgroundColor: '#f0f0f0', padding: '1rem' }}>
{tokens.map((token) => (
<Box key={`m-${token}`} m={token} style={{ border: '1px solid #ccc', backgroundColor: '#fff' }}>
m={'{token}'}: {token}
</Box>
))}
</div>
</div>
</div>
);
};
SpacingTokens.storyName = 'Spacing Tokens';

export const DirectionalSpacing: Story = () => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<div>
<h3>Horizontal Padding (px)</h3>
<Box px="lg" py="sm" style={{ border: '1px solid #ccc' }}>
Large horizontal, small vertical padding
</Box>
</div>

<div>
<h3>Vertical Padding (py)</h3>
<Box px="sm" py="lg" style={{ border: '1px solid #ccc' }}>
Small horizontal, large vertical padding
</Box>
</div>

<div>
<h3>Directional Margins (mx, my)</h3>
<div style={{ backgroundColor: '#f0f0f0', padding: '1rem' }}>
<Box mx="lg" my="md" style={{ border: '1px solid #ccc', backgroundColor: '#fff' }}>
Large horizontal, medium vertical margin
</Box>
</div>
</div>
</div>
);
DirectionalSpacing.storyName = 'Directional Spacing';

export const FlexLayout: Story = () => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<div>
<h3>Flex Direction: row (default)</h3>
<Box display="flex" flexDirection="row" gap="md" p="md" style={{ border: '1px solid #ccc' }}>
<Box p="md" style={{ backgroundColor: '#eee', flex: '1' }}>
Item 1
</Box>
<Box p="md" style={{ backgroundColor: '#eee', flex: '1' }}>
Item 2
</Box>
<Box p="md" style={{ backgroundColor: '#eee', flex: '1' }}>
Item 3
</Box>
</Box>
</div>

<div>
<h3>Flex Direction: column</h3>
<Box display="flex" flexDirection="column" gap="md" p="md" style={{ border: '1px solid #ccc' }}>
<Box p="md" style={{ backgroundColor: '#eee' }}>
Item 1
</Box>
<Box p="md" style={{ backgroundColor: '#eee' }}>
Item 2
</Box>
<Box p="md" style={{ backgroundColor: '#eee' }}>
Item 3
</Box>
</Box>
</div>

<div>
<h3>Align Items: center</h3>
<Box display="flex" gap="md" alignItems="center" p="md" style={{ border: '1px solid #ccc', minHeight: '100px' }}>
<Box style={{ backgroundColor: '#eee', width: '80px' }}>Short</Box>
<Box style={{ backgroundColor: '#eee', padding: '1rem' }}>
This is taller
<br />
content
</Box>
</Box>
</div>

<div>
<h3>Justify Content: space-between</h3>
<Box display="flex" justifyContent="space-between" p="md" style={{ border: '1px solid #ccc' }}>
<Box p="md" style={{ backgroundColor: '#eee' }}>
Left
</Box>
<Box p="md" style={{ backgroundColor: '#eee' }}>
Center
</Box>
<Box p="md" style={{ backgroundColor: '#eee' }}>
Right
</Box>
</Box>
</div>
</div>
);
FlexLayout.storyName = 'Flex Layout';

export const Responsive: Story = () => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<h3>Combining Multiple Props</h3>
<Box
display="flex"
flexDirection="column"
gap="lg"
p="lg"
m="md"
style={{
border: '2px solid #0066cc',
backgroundColor: '#f0f7ff',
borderRadius: '4px',
maxWidth: '500px',
}}
>
<Box display="flex" gap="md" alignItems="center">
<Box p="md" style={{ backgroundColor: '#fff', flex: '1' }}>
Header
</Box>
<Box p="md" style={{ backgroundColor: '#fff' }}>
Badge
</Box>
</Box>

<Box p="md" style={{ backgroundColor: '#fff' }}>
<p>This is the main content of the box component.</p>
<p>It demonstrates how multiple props work together.</p>
</Box>

<Box display="flex" gap="md">
<Box p="md" style={{ backgroundColor: '#fff', flex: '1' }}>
Cancel
</Box>
<Box p="md" style={{ backgroundColor: '#fff', flex: '1' }}>
Submit
</Box>
</Box>
</Box>
</div>
);
Responsive.storyName = 'Combined Props';

export const ZeroSpacing: Story = () => (
<Box p={0} style={{ border: '1px solid #ccc' }}>
This box has zero padding (no space inside border).
</Box>
);
ZeroSpacing.storyName = 'Zero Spacing';

export const Sizing: Story = () => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<div>
<h3>Fixed Width and Height</h3>
<Box width="200px" height="100px" style={{ border: '1px solid #ccc', backgroundColor: '#f5f5f5' }}>
200px x 100px
</Box>
</div>

<div>
<h3>Percentage Width</h3>
<div style={{ border: '1px dashed #999', padding: '1rem' }}>
<Box width="50%" height="60px" style={{ border: '1px solid #ccc', backgroundColor: '#eee' }}>
50% width
</Box>
</div>
</div>

<div>
<h3>Width Only (height determined by content)</h3>
<Box width="300px" p="md" style={{ border: '1px solid #ccc', backgroundColor: '#f5f5f5' }}>
This box has a fixed width of 300px, but its height grows to fit the content inside it.
</Box>
</div>
</div>
);
Sizing.storyName = 'Sizing';
Loading
Loading