This is an automated email from the ASF dual-hosted git repository. rusackas pushed a commit to branch developer_portal in repository https://gitbox.apache.org/repos/asf/superset.git
commit cc0d72712035b1f4fbd6be39791e5087d3dde634 Author: Evan Rusackas <[email protected]> AuthorDate: Tue Apr 1 09:29:44 2025 -0600 Getting warmer... --- docs/components/test.mdx | 17 +++++ docs/components/ui-components/button.mdx | 81 ++++++++++++++++---- docs/docusaurus.config.ts | 7 ++ docs/src/components/StorybookWrapper.jsx | 122 +++++++++++++++++++++++++++++++ docs/src/webpack.extend.ts | 75 ++++++++++++------- 5 files changed, 264 insertions(+), 38 deletions(-) diff --git a/docs/components/test.mdx b/docs/components/test.mdx new file mode 100644 index 0000000000..5d45c22561 --- /dev/null +++ b/docs/components/test.mdx @@ -0,0 +1,17 @@ +--- +title: Test +--- + +import { StoryExample } from '../src/components/StorybookWrapper'; + +# Test + +This is a test using our custom StorybookWrapper component. + +<StoryExample + component={() => ( + <div style={{ padding: '10px', background: '#f0f0f0', borderRadius: '4px' }}> + This is a simple example component + </div> + )} +/> diff --git a/docs/components/ui-components/button.mdx b/docs/components/ui-components/button.mdx index 5736d63180..4212f8693d 100644 --- a/docs/components/ui-components/button.mdx +++ b/docs/components/ui-components/button.mdx @@ -3,29 +3,69 @@ title: Button Component sidebar_position: 1 --- -import { Meta, Story, Canvas, Controls } from '@storybook/blocks'; +import { StoryExample, StoryWithControls } from '../../src/components/StorybookWrapper'; import Button from '../../../superset-frontend/src/components/Button'; -import * as ButtonStories from '../../../superset-frontend/src/components/Button/Button.stories'; # Button Component The Button component is a fundamental UI element used throughout Superset for user interactions. -<Meta of={ButtonStories} /> - ## Basic Usage The default button with primary styling: -<Canvas> - <Story of={ButtonStories.ButtonGallery} /> -</Canvas> +<StoryExample + component={() => ( + <Button buttonStyle="primary" onClick={() => console.log('Clicked!')}> + Click Me + </Button> + )} +/> ## Interactive Example -<Canvas> - <Story of={ButtonStories.InteractiveButton} /> -</Canvas> +<StoryWithControls + component={({ buttonStyle, buttonSize, label, disabled }) => ( + <Button + buttonStyle={buttonStyle} + buttonSize={buttonSize} + disabled={disabled} + onClick={() => console.log('Clicked!')} + > + {label} + </Button> + )} + props={{ + buttonStyle: 'primary', + buttonSize: 'default', + label: 'Click Me', + disabled: false + }} + controls={[ + { + name: 'buttonStyle', + label: 'Button Style', + type: 'select', + options: ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'default', 'link', 'dashed'] + }, + { + name: 'buttonSize', + label: 'Button Size', + type: 'select', + options: ['default', 'small', 'xsmall'] + }, + { + name: 'label', + label: 'Button Text', + type: 'text' + }, + { + name: 'disabled', + label: 'Disabled', + type: 'boolean' + } + ]} +/> ## Props @@ -41,9 +81,24 @@ The default button with primary styling: | `href` | `string` | - | Turns button into an anchor link | | `target` | `string` | - | Target attribute for anchor links | -## Examples +## Usage + +```jsx +import Button from 'src/components/Button'; + +function MyComponent() { + return ( + <Button + buttonStyle="primary" + onClick={() => console.log('Button clicked')} + > + Click Me + </Button> + ); +} +``` -### Button Styles +## Button Styles Superset provides a variety of button styles for different purposes: @@ -56,7 +111,7 @@ Superset provides a variety of button styles for different purposes: - **Link**: Used for navigation - **Dashed**: Used for adding new items or features -### Button Sizes +## Button Sizes Buttons come in three sizes: diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index caf239a318..e90b80e2ee 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -206,6 +206,13 @@ const config: Config = { remarkPlugins: [require('remark-import-partial')], // Enable MDX v2 docItemComponent: '@theme/DocItem', + includeCurrentVersion: true, + versions: { + current: { + label: 'Next', + path: 'next', + }, + }, }, ], ], diff --git a/docs/src/components/StorybookWrapper.jsx b/docs/src/components/StorybookWrapper.jsx new file mode 100644 index 0000000000..51a25775d2 --- /dev/null +++ b/docs/src/components/StorybookWrapper.jsx @@ -0,0 +1,122 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you 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 React from 'react'; +import { + supersetTheme, + ThemeProvider, +} from '../../../superset-frontend/packages/superset-ui-core/lib'; + +// A simple component to display a story example +export function StoryExample({ component: Component, props = {} }) { + return ( + <ThemeProvider theme={supersetTheme}> + <div + className="storybook-example" + style={{ + border: '1px solid #e8e8e8', + borderRadius: '4px', + padding: '20px', + marginBottom: '20px', + }} + > + {Component && <Component {...props} />} + </div> + </ThemeProvider> + ); +} + +// A simple component to display a story with controls +export function StoryWithControls({ + component: Component, + props = {}, + controls = [], +}) { + const [stateProps, setStateProps] = React.useState(props); + + const updateProp = (key, value) => { + setStateProps(prev => ({ + ...prev, + [key]: value, + })); + }; + + return ( + <div className="storybook-with-controls"> + <div + className="storybook-example" + style={{ + border: '1px solid #e8e8e8', + borderRadius: '4px', + padding: '20px', + marginBottom: '20px', + }} + > + {Component && <Component {...stateProps} />} + </div> + + {controls.length > 0 && ( + <div + className="storybook-controls" + style={{ + border: '1px solid #e8e8e8', + borderRadius: '4px', + padding: '20px', + marginBottom: '20px', + }} + > + <h4>Controls</h4> + {controls.map(control => ( + <div key={control.name} style={{ marginBottom: '10px' }}> + <label style={{ display: 'block', marginBottom: '5px' }}> + {control.label || control.name}: + </label> + {control.type === 'select' ? ( + <select + value={stateProps[control.name]} + onChange={e => updateProp(control.name, e.target.value)} + style={{ width: '100%', padding: '5px' }} + > + {control.options.map(option => ( + <option key={option} value={option}> + {option} + </option> + ))} + </select> + ) : control.type === 'boolean' ? ( + <input + type="checkbox" + checked={stateProps[control.name]} + onChange={e => updateProp(control.name, e.target.checked)} + /> + ) : ( + <input + type="text" + value={stateProps[control.name]} + onChange={e => updateProp(control.name, e.target.value)} + style={{ width: '100%', padding: '5px' }} + /> + )} + </div> + ))} + </div> + )} + </div> + ); +} diff --git a/docs/src/webpack.extend.ts b/docs/src/webpack.extend.ts index 0ded6089bd..20061d38ea 100644 --- a/docs/src/webpack.extend.ts +++ b/docs/src/webpack.extend.ts @@ -36,39 +36,64 @@ export default function webpackExtendPlugin(): Plugin<void> { __dirname, '../../superset-frontend/node_modules/@superset-ui/core', ), - 'storybook/internal/components': require.resolve( - '@storybook/components', + // Add proper Storybook aliases + '@storybook/blocks': path.resolve( + __dirname, + '../node_modules/@storybook/blocks', ), - 'storybook/internal/theming': require.resolve('@storybook/theming'), - 'storybook/internal/client-logger': require.resolve( - '@storybook/client-logger', + '@storybook/components': path.resolve( + __dirname, + '../node_modules/@storybook/components', ), - 'storybook/internal/csf': require.resolve('@storybook/csf'), - 'storybook/internal/preview-api': require.resolve( - '@storybook/preview-api', + '@storybook/theming': path.resolve( + __dirname, + '../node_modules/@storybook/theming', ), - 'storybook/internal/docs-tools': require.resolve( - '@storybook/docs-tools', + '@storybook/client-logger': path.resolve( + __dirname, + '../node_modules/@storybook/client-logger', ), - 'storybook/internal/core-events': require.resolve( - '@storybook/core-events', + '@storybook/core-events': path.resolve( + __dirname, + '../node_modules/@storybook/core-events', ), - 'storybook/internal/channels': require.resolve( - '@storybook/channels', + // Add internal Storybook aliases + 'storybook/internal/components': path.resolve( + __dirname, + '../node_modules/@storybook/components', + ), + 'storybook/internal/theming': path.resolve( + __dirname, + '../node_modules/@storybook/theming', + ), + 'storybook/internal/client-logger': path.resolve( + __dirname, + '../node_modules/@storybook/client-logger', + ), + 'storybook/internal/csf': path.resolve( + __dirname, + '../node_modules/@storybook/csf', + ), + 'storybook/internal/preview-api': path.resolve( + __dirname, + '../node_modules/@storybook/preview-api', + ), + 'storybook/internal/docs-tools': path.resolve( + __dirname, + '../node_modules/@storybook/docs-tools', + ), + 'storybook/internal/core-events': path.resolve( + __dirname, + '../node_modules/@storybook/core-events', + ), + 'storybook/internal/channels': path.resolve( + __dirname, + '../node_modules/@storybook/channels', ), }, }, - module: { - rules: [ - { - test: /\.tsx?$/, - use: 'ts-loader', - // Only process files from superset-frontend, not our own TypeScript files - include: [path.resolve(__dirname, '../../superset-frontend')], - exclude: [/node_modules/, path.resolve(__dirname, '../src')], - }, - ], - }, + // We're removing the ts-loader rule that was processing superset-frontend files + // This will prevent TypeScript errors from files outside the docs directory }; }, };
