less deps (#234)

Arize-ai · Sep 13, 2024 · a4ddb71 · a4ddb71
1 parent 1d45515
commit a4ddb71
Show file tree

Hide file tree

Showing 42 changed files with 125 additions and 1,630 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,11 +1,6 @@
 module.exports = {
   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-a11y',
-    'storybook-addon-designs',
-  ],
+  addons: [],
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
     check: true, // type-check stories during Storybook build

diff --git a/package.json b/package.json
@@ -71,12 +71,6 @@
     "@emotion/babel-plugin": "^11.10.5",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@size-limit/preset-small-lib": "^8.1.0",
-    "@storybook/addon-a11y": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/addon-measure": "^6.5.10",
-    "@storybook/addons": "^6.5.15",
     "@storybook/react": "^6.5.15",
     "@types/react": "18",
     "@types/react-dom": "18",
@@ -97,7 +91,6 @@
     "react-hook-form": "^7.27.1",
     "react-is": "^18.2.0",
     "size-limit": "^8.1.0",
-    "storybook-addon-designs": "^6.3.1",
     "ts-dedent": "^2.2.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",

diff --git a/stories/Accordion.stories.tsx b/stories/Accordion.stories.tsx
@@ -1,28 +1,21 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
+
 import {
   Accordion,
   AccordionProps,
   AccordionItem,
   Card,
   Counter,
 } from '../src';
-import { withDesign } from 'storybook-addon-designs';
 import InfoTip from './components/InfoTip';
-import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 import { ThemeSplitView } from './components/ThemeSplitView';
 
 const meta: Meta = {
   title: 'Accordion',
   component: Accordion,
-  decorators: [withDesign],
   parameters: {
     controls: { expanded: true },
-    design: {
-      type: 'figma',
-      url:
-        'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=243%3A0',
-    },
   },
 };
 

diff --git a/stories/ActionMenu.stories.tsx b/stories/ActionMenu.stories.tsx
@@ -1,22 +1,15 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { css } from '@emotion/react';
 import { Meta, Story } from '@storybook/react';
-import { withDesign } from 'storybook-addon-designs';
-import {
-  Provider,
-  DropdownProps,
-  ActionMenu,
-  Item,
-  Heading,
-  Section,
-} from '../src';
+
+import { DropdownProps, ActionMenu, Item, Heading, Section } from '../src';
 import { AlertTriangleFilled, Icon, PlusCircleOutline } from '../src/icon';
 import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 
 const meta: Meta = {
   title: 'ActionMenu',
   component: ActionMenu,
-  decorators: [withDesign],
+
   argTypes: {
     children: {
       control: {

diff --git a/stories/ActionTooltip.stories.tsx b/stories/ActionTooltip.stories.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import { Meta, Story } from '@storybook/react';
-import { withDesign } from 'storybook-addon-designs';
+
 import {
   ActionButton,
   TooltipTrigger,
-  Provider,
   TooltipTriggerProps,
   ActionTooltip,
   Placement,
@@ -26,7 +25,6 @@ const placements: Placement[] = [
 const meta: Meta = {
   title: 'ActionTooltip',
   component: TooltipTrigger,
-  decorators: [withDesign],
   argTypes: {
     placement: {
       control: {
@@ -37,11 +35,6 @@ const meta: Meta = {
   },
   parameters: {
     controls: { expanded: true },
-    design: {
-      type: 'figma',
-      url:
-        'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=1030%3A1',
-    },
   },
 };
 

diff --git a/stories/Alert.stories.tsx b/stories/Alert.stories.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import { css } from '@emotion/react';
 import { Meta, Story } from '@storybook/react';
 import { Alert, AlertProps } from '../src/alert';
 import { Button } from '../src/button';
-import { ThemeToggleWrap } from './components/ThemeToggleWrap';
-import { ThemeSplitView } from './components/ThemeSplitView';
 import { Flex } from '../src';
+import { ThemeSplitView } from './components/ThemeSplitView';
 const meta: Meta = {
   title: 'Alert',
   component: Alert,
@@ -18,11 +16,6 @@ const meta: Meta = {
   },
   parameters: {
     controls: { expanded: true },
-    design: {
-      type: 'figma',
-      url:
-        'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=309%3A0',
-    },
   },
 };
 

diff --git a/stories/Breadcrumbs.stories.tsx b/stories/Breadcrumbs.stories.tsx
@@ -1,15 +1,13 @@
 import React from 'react';
-import { css } from '@emotion/react';
-import { Meta, Story } from '@storybook/react';
-import { ThemeToggleWrap } from './components/ThemeToggleWrap';
+import { Meta } from '@storybook/react';
 
-import { Breadcrumbs, Item, Provider } from '../src';
-import { withDesign } from 'storybook-addon-designs';
+import { Breadcrumbs, Item } from '../src';
+import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 
 const meta: Meta = {
   title: 'Breadcrumbs (Beta)',
   component: Breadcrumbs,
-  decorators: [withDesign],
+
   argTypes: {
     children: {
       control: {
@@ -19,10 +17,6 @@ const meta: Meta = {
   },
   parameters: {
     controls: { expanded: true },
-    design: {
-      type: 'figma',
-      url: '',
-    },
   },
 };
 

diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import { Meta, Story } from '@storybook/react';
+
 import { ButtonToolbar } from '../src/button';
 import { Button, ButtonProps } from '../src/button';
 import { CheckmarkCircleOutline, Icon, PlusCircleOutline } from '../src/icon';
-import { withDesign } from 'storybook-addon-designs';
 import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 import { ThemeSplitView } from './components/ThemeSplitView';
 
@@ -14,7 +14,7 @@ const checkmarkIcon = <Icon svg={<CheckmarkCircleOutline />} />;
 const meta: Meta = {
   title: 'Button',
   component: Button,
-  decorators: [withDesign],
+
   argTypes: {
     children: {
       control: {
@@ -24,11 +24,6 @@ const meta: Meta = {
   },
   parameters: {
     controls: { expanded: true },
-    design: {
-      type: 'figma',
-      url:
-        'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=0%3A1',
-    },
   },
 };
 

diff --git a/stories/ButtonGroup.stories.tsx b/stories/ButtonGroup.stories.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import { css } from '@emotion/react';
 import { Meta } from '@storybook/react';
-import { ButtonGroup, Button, ActionMenu, Provider, Item, Flex } from '../src';
+
+import { ButtonGroup, Button, ActionMenu, Item, Flex } from '../src';
 import {
   Icon,
   Icons,
   PlusCircleOutline,
   MinusCircleOutline,
 } from '../src/icon';
-import { withDesign } from 'storybook-addon-designs';
 import { ThemeSplitView } from './components/ThemeSplitView';
 import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 
@@ -18,7 +17,7 @@ const minusIcon = <Icon svg={<MinusCircleOutline />} />;
 const meta: Meta = {
   title: 'ButtonGroup',
   component: ButtonGroup,
-  decorators: [withDesign],
+
   argTypes: {
     children: {
       control: {
@@ -28,11 +27,6 @@ const meta: Meta = {
   },
   parameters: {
     controls: { expanded: true },
-    design: {
-      type: 'figma',
-      url:
-        'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=0%3A1',
-    },
   },
 };
 

diff --git a/stories/Card.stories.tsx b/stories/Card.stories.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import { Meta, Story } from '@storybook/react';
-import { withDesign } from 'storybook-addon-designs';
+
 import { Card, CardProps, TabbedCard } from '../src/card';
 import { Tabs } from '../src/tabs';
 import { Button } from '../src/button';
-import InfoTip from './components/InfoTip';
 import { Counter, Flex, Heading, Provider, View } from '../src';
+import InfoTip from './components/InfoTip';
 import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 
 const { TabPane } = Tabs;
 
 const meta: Meta = {
   title: 'Card',
   component: Card,
-  decorators: [withDesign],
+
   argTypes: {
     children: {
       control: {
@@ -24,11 +24,6 @@ const meta: Meta = {
   },
   parameters: {
     controls: { expanded: true },
-    design: {
-      type: 'figma',
-      url:
-        'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=3%3A371',
-    },
   },
 };
 

diff --git a/stories/Colors.stories.tsx b/stories/Colors.stories.tsx
@@ -1,21 +1,20 @@
 import React, { CSSProperties } from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { css } from '@emotion/react';
 import {
   theme,
   designationColors,
   colorPalette,
   Text,
   Heading,
-  Provider,
   TooltipTrigger,
   Tooltip,
   TriggerWrap,
 } from '../src';
-import { Meta, Story } from '@storybook/react';
 // @ts-ignore
-import { withDesign } from 'storybook-addon-designs';
 import { colorValue } from '../src/utils';
 import { globalColors } from './constants';
-import { css } from '@emotion/react';
 import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 
 const listStyle: CSSProperties = {
@@ -165,14 +164,8 @@ function Colors() {
 const meta: Meta = {
   title: 'Colors',
   component: Colors,
-  decorators: [withDesign],
-  parameters: {
-    design: {
-      type: 'figma',
-      url:
-        'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=2%3A1499',
-    },
-  },
+
+  parameters: {},
 };
 
 export default meta;

diff --git a/stories/ContextualHelp.stories.tsx b/stories/ContextualHelp.stories.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-import { withDesign } from 'storybook-addon-designs';
+import React from 'react';
+import { Meta } from '@storybook/react';
+
+import { css } from '@emotion/react';
 import {
   Form,
-  Provider,
   Placement,
   ContextualHelp,
   Text,
@@ -13,7 +13,6 @@ import {
   TextField,
 } from '../src';
 
-import css from '@emotion/css';
 import { ThemeToggleWrap } from './components/ThemeToggleWrap';
 
 const placements: Placement[] = [
@@ -32,7 +31,7 @@ const placements: Placement[] = [
 const meta: Meta = {
   title: 'ContextualHelp',
   component: ContextualHelp,
-  decorators: [withDesign],
+
   argTypes: {
     placement: {
       control: {
@@ -43,11 +42,6 @@ const meta: Meta = {
   },
   parameters: {
     controls: { expanded: true },
-    design: {
-      type: 'figma',
-      url:
-        'https://www.figma.com/file/5mMInYH9JdJY389s8iBVQm/Component-Library?node-id=503%3A0',
-    },
   },
 };
 

diff --git a/stories/Counter.stories.tsx b/stories/Counter.stories.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import { Meta, Story } from '@storybook/react';
-import { withDesign } from 'storybook-addon-designs';
+
 import { LabelGroup, Label, LabelProps } from '../src/label';
 import { Counter, Provider } from '../src';
 
 const meta: Meta = {
   title: 'Counter',
   component: Counter,
-  decorators: [withDesign],
+
   argTypes: {
     children: {
       control: {