mirror of
https://github.com/apache/superset.git
synced 2026-08-05 05:22:37 +00:00
feat(build): migrate from Prettier to Oxfmt for performant code formatting (#42434)
This commit is contained in:
@@ -16,7 +16,9 @@
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
title: Bar Chart
|
||||
sidebar_position: 1
|
||||
---
|
||||
@@ -27,18 +29,18 @@ The Bar Chart component is used to visualize categorical data with rectangular b
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `data` | `array` | `[]` | Array of data objects to visualize |
|
||||
| `width` | `number` | `800` | Width of the chart in pixels |
|
||||
| `height` | `number` | `600` | Height of the chart in pixels |
|
||||
| `xField` | `string` | - | Field name for x-axis values |
|
||||
| `yField` | `string` | - | Field name for y-axis values |
|
||||
| `colorField` | `string` | - | Field name for color encoding |
|
||||
| `colorScheme` | `string` | `'supersetColors'` | Color scheme to use |
|
||||
| `showLegend` | `boolean` | `true` | Whether to show the legend |
|
||||
| `showGrid` | `boolean` | `true` | Whether to show grid lines |
|
||||
| `labelPosition` | `string` | `'top'` | Position of bar labels: 'top', 'middle', 'bottom' |
|
||||
| Prop | Type | Default | Description |
|
||||
| --------------- | --------- | ------------------ | ------------------------------------------------- |
|
||||
| `data` | `array` | `[]` | Array of data objects to visualize |
|
||||
| `width` | `number` | `800` | Width of the chart in pixels |
|
||||
| `height` | `number` | `600` | Height of the chart in pixels |
|
||||
| `xField` | `string` | - | Field name for x-axis values |
|
||||
| `yField` | `string` | - | Field name for y-axis values |
|
||||
| `colorField` | `string` | - | Field name for color encoding |
|
||||
| `colorScheme` | `string` | `'supersetColors'` | Color scheme to use |
|
||||
| `showLegend` | `boolean` | `true` | Whether to show the legend |
|
||||
| `showGrid` | `boolean` | `true` | Whether to show grid lines |
|
||||
| `labelPosition` | `string` | `'top'` | Position of bar labels: 'top', 'middle', 'bottom' |
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
@@ -16,7 +16,9 @@
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
title: Component Library
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
@@ -16,7 +16,9 @@
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
title: Grid
|
||||
sidebar_position: 1
|
||||
---
|
||||
@@ -27,29 +29,29 @@ The Grid component provides a flexible layout system for arranging content in ro
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `gutter` | `number` or `[number, number]` | `0` | Grid spacing between items, can be a single number or [horizontal, vertical] |
|
||||
| `columns` | `number` | `12` | Number of columns in the grid |
|
||||
| `justify` | `string` | `'start'` | Horizontal alignment: 'start', 'center', 'end', 'space-between', 'space-around' |
|
||||
| `align` | `string` | `'top'` | Vertical alignment: 'top', 'middle', 'bottom' |
|
||||
| `wrap` | `boolean` | `true` | Whether to wrap items when they overflow |
|
||||
| Prop | Type | Default | Description |
|
||||
| --------- | ------------------------------ | --------- | ------------------------------------------------------------------------------- |
|
||||
| `gutter` | `number` or `[number, number]` | `0` | Grid spacing between items, can be a single number or [horizontal, vertical] |
|
||||
| `columns` | `number` | `12` | Number of columns in the grid |
|
||||
| `justify` | `string` | `'start'` | Horizontal alignment: 'start', 'center', 'end', 'space-between', 'space-around' |
|
||||
| `align` | `string` | `'top'` | Vertical alignment: 'top', 'middle', 'bottom' |
|
||||
| `wrap` | `boolean` | `true` | Whether to wrap items when they overflow |
|
||||
|
||||
### Row Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `gutter` | `number` or `[number, number]` | `0` | Spacing between items in the row |
|
||||
| `justify` | `string` | `'start'` | Horizontal alignment for this row |
|
||||
| `align` | `string` | `'top'` | Vertical alignment for this row |
|
||||
| Prop | Type | Default | Description |
|
||||
| --------- | ------------------------------ | --------- | --------------------------------- |
|
||||
| `gutter` | `number` or `[number, number]` | `0` | Spacing between items in the row |
|
||||
| `justify` | `string` | `'start'` | Horizontal alignment for this row |
|
||||
| `align` | `string` | `'top'` | Vertical alignment for this row |
|
||||
|
||||
### Col Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `span` | `number` | - | Number of columns the grid item spans |
|
||||
| `offset` | `number` | `0` | Number of columns the grid item is offset |
|
||||
| `xs`, `sm`, `md`, `lg`, `xl` | `number` or `object` | - | Responsive props for different screen sizes |
|
||||
| Prop | Type | Default | Description |
|
||||
| ---------------------------- | -------------------- | ------- | ------------------------------------------- |
|
||||
| `span` | `number` | - | Number of columns the grid item spans |
|
||||
| `offset` | `number` | `0` | Number of columns the grid item is offset |
|
||||
| `xs`, `sm`, `md`, `lg`, `xl` | `number` or `object` | - | Responsive props for different screen sizes |
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
@@ -16,9 +16,10 @@
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
---
|
||||
title: Test
|
||||
---
|
||||
|
||||
## title: Test
|
||||
|
||||
import { StoryExample } from '../../src/components/StorybookWrapper';
|
||||
|
||||
@@ -28,7 +29,9 @@ This is a test using our custom StorybookWrapper component.
|
||||
|
||||
<StoryExample
|
||||
component={() => (
|
||||
<div style={{ padding: '10px', background: '#f0f0f0', borderRadius: '4px' }}>
|
||||
<div
|
||||
style={{ padding: '10px', background: '#f0f0f0', borderRadius: '4px' }}
|
||||
>
|
||||
This is a simple example component
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -16,12 +16,18 @@
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
---
|
||||
title: Button Component
|
||||
sidebar_position: 1
|
||||
|
||||
---
|
||||
|
||||
import { StoryExample, StoryWithControls } from '../../../src/components/StorybookWrapper';
|
||||
title: Button Component
|
||||
sidebar_position: 1
|
||||
|
||||
---
|
||||
|
||||
import {
|
||||
StoryExample,
|
||||
StoryWithControls,
|
||||
} from '../../../src/components/StorybookWrapper';
|
||||
import { Button } from '../../../../superset-frontend/packages/superset-ui-core/src/components/Button';
|
||||
|
||||
# Button Component
|
||||
@@ -31,6 +37,7 @@ The Button component is a fundamental UI element used throughout Superset for us
|
||||
## Basic Usage
|
||||
|
||||
The default button with primary styling:
|
||||
|
||||
<StoryExample
|
||||
component={() => (
|
||||
<Button buttonStyle="primary" onClick={() => console.log('Clicked!')}>
|
||||
@@ -56,47 +63,57 @@ The default button with primary styling:
|
||||
buttonStyle: 'primary',
|
||||
buttonSize: 'default',
|
||||
label: 'Click Me',
|
||||
disabled: false
|
||||
disabled: false,
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: 'buttonStyle',
|
||||
label: 'Button Style',
|
||||
type: 'select',
|
||||
options: ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'default', 'link', 'dashed']
|
||||
options: [
|
||||
'primary',
|
||||
'secondary',
|
||||
'tertiary',
|
||||
'success',
|
||||
'warning',
|
||||
'danger',
|
||||
'default',
|
||||
'link',
|
||||
'dashed',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'buttonSize',
|
||||
label: 'Button Size',
|
||||
type: 'select',
|
||||
options: ['default', 'small', 'xsmall']
|
||||
options: ['default', 'small', 'xsmall'],
|
||||
},
|
||||
{
|
||||
name: 'label',
|
||||
label: 'Button Text',
|
||||
type: 'text'
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
label: 'Disabled',
|
||||
type: 'boolean'
|
||||
}
|
||||
type: 'boolean',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `buttonStyle` | `'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'danger' \| 'default' \| 'link' \| 'dashed'` | `'default'` | Button style |
|
||||
| `buttonSize` | `'default' \| 'small' \| 'xsmall'` | `'default'` | Button size |
|
||||
| `disabled` | `boolean` | `false` | Whether the button is disabled |
|
||||
| `cta` | `boolean` | `false` | Whether the button is a call-to-action button |
|
||||
| `tooltip` | `ReactNode` | - | Tooltip content |
|
||||
| `placement` | `TooltipProps['placement']` | - | Tooltip placement |
|
||||
| `onClick` | `function` | - | Callback when button is clicked |
|
||||
| `href` | `string` | - | Turns button into an anchor link |
|
||||
| `target` | `string` | - | Target attribute for anchor links |
|
||||
| Prop | Type | Default | Description |
|
||||
| ------------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------- |
|
||||
| `buttonStyle` | `'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'danger' \| 'default' \| 'link' \| 'dashed'` | `'default'` | Button style |
|
||||
| `buttonSize` | `'default' \| 'small' \| 'xsmall'` | `'default'` | Button size |
|
||||
| `disabled` | `boolean` | `false` | Whether the button is disabled |
|
||||
| `cta` | `boolean` | `false` | Whether the button is a call-to-action button |
|
||||
| `tooltip` | `ReactNode` | - | Tooltip content |
|
||||
| `placement` | `TooltipProps['placement']` | - | Tooltip placement |
|
||||
| `onClick` | `function` | - | Callback when button is clicked |
|
||||
| `href` | `string` | - | Turns button into an anchor link |
|
||||
| `target` | `string` | - | Target attribute for anchor links |
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -105,10 +122,7 @@ import Button from 'src/components/Button';
|
||||
|
||||
function MyComponent() {
|
||||
return (
|
||||
<Button
|
||||
buttonStyle="primary"
|
||||
onClick={() => console.log('Button clicked')}
|
||||
>
|
||||
<Button buttonStyle="primary" onClick={() => console.log('Button clicked')}>
|
||||
Click Me
|
||||
</Button>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user