feat: adding AntdThemeProvider to storybook config (#29795)

superset-frontend/.storybook/preview.jsx

@@ -18,6 +18,7 @@
  */
 import { withJsx } from '@mihkeleidast/storybook-addon-source';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import { AntdThemeProvider } from '../src/components/AntdThemeProvider';
 import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
@@ -35,10 +36,10 @@ const store = createStore(
 
 const themeDecorator = Story => (
   <ThemeProvider theme={supersetTheme}>
-    <>
+    <AntdThemeProvider>
       <GlobalStyles />
       <Story />
-    </>
+    </AntdThemeProvider>
   </ThemeProvider>
 );
 

superset-frontend/src/components/Badge/Badge.stories.tsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
 import Badge, { BadgeProps } from '.';
 
 export default {
@@ -59,11 +58,7 @@ const SIZES = {
   defaultValue: undefined,
 };
 
-export const InteractiveBadge = (args: BadgeProps) => (
+export const InteractiveBadge = (args: BadgeProps) => <Badge {...args} />;
-  <AntdThemeProvider>
-    <Badge {...args} />
-  </AntdThemeProvider>
-);
 
 InteractiveBadge.args = {
   count: undefined,
@@ -120,16 +115,14 @@ export const BadgeGallery = () => (
     {SIZES.options.map(size => (
       <div key={size} style={{ marginBottom: 40 }}>
         <h4>{size}</h4>
-        <AntdThemeProvider>
+        {COLORS.options.map(color => (
-          {COLORS.options.map(color => (
+          <Badge
-            <Badge
+            count={9}
-              count={9}
+            size={size}
-              size={size}
+            key={`${color}_${size}`}
-              key={`${color}_${size}`}
+            style={{ marginRight: '15px' }}
-              style={{ marginRight: '15px' }}
+          />
-            />
+        ))}
-          ))}
-        </AntdThemeProvider>
       </div>
     ))}
   </>

superset-frontend/src/components/Card/Card.stories.tsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
 import Card, { CardProps } from '.';
 
 export default {
@@ -24,11 +23,7 @@ export default {
   component: Card,
 };
 
-export const InteractiveCard = (args: CardProps) => (
+export const InteractiveCard = (args: CardProps) => <Card {...args} />;
-  <AntdThemeProvider>
-    <Card {...args} />
-  </AntdThemeProvider>
-);
 
 InteractiveCard.args = {
   padded: true,

superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
 import ProgressBar, { ProgressBarProps } from '.';
 
 export default {
@@ -25,21 +24,15 @@ export default {
 };
 
 export const InteractiveProgressBar = (args: ProgressBarProps) => (
-  <AntdThemeProvider>
+  <ProgressBar {...args} type="line" />
-    <ProgressBar {...args} type="line" />
-  </AntdThemeProvider>
 );
 
 export const InteractiveProgressCircle = (args: ProgressBarProps) => (
-  <AntdThemeProvider>
+  <ProgressBar {...args} type="circle" />
-    <ProgressBar {...args} type="circle" />
-  </AntdThemeProvider>
 );
 
 export const InteractiveProgressDashboard = (args: ProgressBarProps) => (
-  <AntdThemeProvider>
+  <ProgressBar {...args} type="dashboard" />
-    <ProgressBar {...args} type="dashboard" />
-  </AntdThemeProvider>
 );
 
 const commonArgs = {

superset-frontend/src/components/Tags/Tag.stories.tsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
 import TagType from 'src/types/TagType';
 import { Tag } from '.';
 
@@ -24,11 +23,7 @@ export default {
   title: 'Tags',
   component: Tag,
 };
-export const InteractiveTag = (args: TagType) => (
+export const InteractiveTag = (args: TagType) => <Tag {...args} />;
-  <AntdThemeProvider>
-    <Tag {...args} />
-  </AntdThemeProvider>
-);
 
 InteractiveTag.args = {
   editable: false,

superset-frontend/src/components/Tags/TagsList.stories.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 import TagType from 'src/types/TagType';
-import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
 import { TagsList } from '.';
 import { TagsListProps } from './TagsList';
 
@@ -31,9 +30,7 @@ export const InteractiveTagsList = ({
   editable,
   maxTags,
 }: TagsListProps) => (
-  <AntdThemeProvider>
+  <TagsList tags={tags} editable={editable} maxTags={maxTags} />
-    <TagsList tags={tags} editable={editable} maxTags={maxTags} />
-  </AntdThemeProvider>
 );
 
 const tags: TagType[] = [