Revert "Merge pull request #23635 from storybookjs/charles-update-con…

…trols-addon"

This reverts commit 0005430, reversing
changes made to a70dcab.

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -31,10 +31,6 @@ const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
 const storybookPaths: Record<string, string> = {
-  // this is a temporary hack to get webpack to alias this correctly
-  [`@storybook/components/experimental`]: `${getAbsolutePath(
-    `@storybook/components`
-  )}/dist/experimental`,
   ...[
     // these packages are not pre-bundled because of react dependencies
     'components',

code/ui/blocks/src/components/ArgsTable/ArgControl.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useCallback, useState, useEffect } from 'react';
 
-import { Link } from '@storybook/components/experimental';
+import { Link } from '@storybook/components';
 import {
   BooleanControl,
   ColorControl,

code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx

@@ -5,8 +5,7 @@ import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { includeConditionalArg } from '@storybook/csf';
 import { once } from '@storybook/client-logger';
-import { IconButton, Icons, ResetWrapper } from '@storybook/components';
-import { Link } from '@storybook/components/experimental';
+import { IconButton, Icons, ResetWrapper, Link } from '@storybook/components';
 
 import { ArgRow } from './ArgRow';
 import { SectionRow } from './SectionRow';

code/ui/blocks/src/components/ArgsTable/Empty.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import { styled } from '@storybook/theming';
-import { Link } from '@storybook/components/experimental';
+import { Icons, Link } from '@storybook/components';
 
 interface EmptyProps {
   inAddonPanel?: boolean;
@@ -85,8 +85,8 @@ export const Empty: FC<EmptyProps> = ({ inAddonPanel }) => {
       <Links>
         {inAddonPanel && (
           <>
-            <Link href="https://youtu.be/0gOfS6K0x0E" target="_blank" icon="Video" withArrow>
-              Watch 5m video
+            <Link href="https://youtu.be/0gOfS6K0x0E" target="_blank" withArrow>
+              <Icons icon="video" /> Watch 5m video
             </Link>
             <Divider />
             <Link

code/ui/components/package.json

@@ -52,7 +52,7 @@
         "dist/html.d.ts"
       ],
       "experimental": [
-        "dist/experimental.d.ts"
+        "dist/experimantal.d.ts"
       ]
     }
   },
@@ -105,7 +105,7 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/experimental.ts"
+      "./src/experimantal.ts"
     ],
     "platform": "neutral"
   },

code/ui/components/src/experimental.ts

@@ -8,9 +8,3 @@
  */
 
 export { Button } from './new/Button/Button';
-export { Input } from './new/Input/Input';
-export { Select } from './new/Select/Select';
-export { Link } from './new/Link/Link';
-export { Icon } from './new/Icon/Icon';
-export { IconButton } from './new/IconButton/IconButton';
-export { Toolbar } from './new/Toolbar/Toolbar';

code/ui/components/src/new/Button/Button.tsx

@@ -3,7 +3,6 @@ import { styled } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';
 import type { Icons } from '@storybook/icons';
 import type { PropsOf } from '../utils/types';
-import { Icon } from '../Icon/Icon';
 
 interface ButtonProps<T extends React.ElementType = React.ElementType> {
   children: string;
@@ -23,11 +22,8 @@ export const Button: {
   displayName?: string;
 } = forwardRef(
   ({ as, children, icon, ...props }: ButtonProps, ref: React.Ref<HTMLButtonElement>) => {
-    const LocalIcon = Icon[icon];
-
     return (
       <StyledButton as={as} ref={ref} {...props}>
-        {icon && <LocalIcon />}
         {children}
       </StyledButton>
     );

code/ui/components/src/new/Select/SelectItem.tsx

@@ -1,20 +1,25 @@
 import * as RadixSelect from '@radix-ui/react-select';
 import React, { forwardRef } from 'react';
 import { styled } from '@storybook/theming';
-import { Icon } from '@storybook/components/experimental';
 
 interface SelectItemProps {
   children: React.ReactNode;
   value: string;
 }
 
+const FakeIcon = styled.div(({ theme }) => ({
+  width: 12,
+  height: 12,
+  backgroundColor: theme.color.mediumdark,
+}));
+
 export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
   ({ children, ...props }, forwardedRef) => {
     return (
       <StyledItem {...props} ref={forwardedRef}>
         <RadixSelect.ItemText>{children}</RadixSelect.ItemText>
         <StyledItemIndicator className="SelectItemIndicator">
-          <Icon.FaceHappy />
+          <FakeIcon />
         </StyledItemIndicator>
       </StyledItem>
     );

code/ui/manager/src/globals/exports.ts

@@ -114,15 +114,6 @@ export default {
     'resetComponents',
     'withReset',
   ],
-  '@storybook/components/experimental': [
-    'Button',
-    'Icon',
-    'IconButton',
-    'Input',
-    'Link',
-    'Select',
-    'Toolbar',
-  ],
   '@storybook/channels': [
     'Channel',
     'PostMessageTransport',

code/ui/manager/src/globals/runtime.ts

@@ -2,7 +2,6 @@ import * as REACT from 'react';
 import * as REACTDOM from 'react-dom';
 
 import * as STORYBOOKCOMPONENTS from '@storybook/components';
-import * as STORYBOOKCOMPONENTSEXPERIMENTAL from '@storybook/components/experimental';
 import * as STORYBOOKCHANNELS from '@storybook/channels';
 import * as STORYBOOKEVENTS from '@storybook/core-events';
 import * as STORYBOOKROUTER from '@storybook/router';
@@ -17,7 +16,6 @@ export const values: Required<Record<keyof typeof Keys, any>> = {
   react: REACT as any,
   'react-dom': REACTDOM,
   '@storybook/components': STORYBOOKCOMPONENTS,
-  '@storybook/components/experimental': STORYBOOKCOMPONENTSEXPERIMENTAL,
   '@storybook/channels': STORYBOOKCHANNELS,
   '@storybook/core-events': STORYBOOKEVENTS,
   '@storybook/router': STORYBOOKROUTER,

code/ui/manager/src/globals/types.ts

@@ -5,7 +5,6 @@ export enum Keys {
   'react' = '__REACT__',
   'react-dom' = '__REACTDOM__',
   '@storybook/components' = '__STORYBOOKCOMPONENTS__',
-  '@storybook/components/experimental' = '__STORYBOOKCOMPONENTSEXPERIMENTAL__',
   '@storybook/channels' = '__STORYBOOKCHANNELS__',
   '@storybook/core-events' = '__STORYBOOKCOREEVENTS__',
   '@storybook/router' = '__STORYBOOKROUTER__',

scripts/verdaccio.yaml

@@ -31,10 +31,6 @@ packages:
     access: $all
     publish: $all
     proxy: npmjs
-  '@storybook/icons':
-    access: $all
-    publish: $all
-    proxy: npmjs
   '@storybook/global':
     access: $all
     publish: $all