decorators for other wrappers

src/addon.ts

@@ -1,7 +1,15 @@
+export interface AmpParameters {
+  extensions?: {name: string; version: string}[];
+  experiments?: string[];
+}
+
 export const AddonName = 'storybook/amp';
-export const PanelName = AddonName + '/panel';
+export const PanelName = `${AddonName}/panel`;
+
 export const Events = {
-  UpdateConfig: AddonName + '/update_config',
-  AskConfig: AddonName + '/ask_config',
+  UpdateDocumentType: `${AddonName}/update_document_type`,
+  UpdateConfig: `${AddonName}/update_config`,
+  AskConfig: `${AddonName}/ask_config`,
 };
+
 export const ParameterName = 'amp';

src/index.ts

@@ -1,13 +1,27 @@
 import {makeDecorator} from '@storybook/addons';
 
 import {ParameterName} from './addon';
-import PreactDecorator from './register/components/PreactDecorator';
+import {AmphtmlWrapper, BentoWrapper, PlainWrapper} from './register/wrappers';
 
 export const withAmp = makeDecorator({
   name: 'withAmp',
   parameterName: ParameterName,
   skipIfNoParametersOrOptions: false,
-  wrapper: PreactDecorator, // TODO: Implement React and Vue.js deocrators
+  wrapper: AmphtmlWrapper,
+});
+
+export const withBento = makeDecorator({
+  name: 'withBento',
+  parameterName: ParameterName,
+  skipIfNoParametersOrOptions: false,
+  wrapper: BentoWrapper,
+});
+
+export const withIframe = makeDecorator({
+  name: 'withIframe',
+  parameterName: ParameterName,
+  skipIfNoParametersOrOptions: false,
+  wrapper: PlainWrapper,
 });
 
 if (module && module.hot && module.hot.decline) {

src/register/components/Wrapper.tsx → src/register/components/ConfigPanel.tsx

@@ -15,7 +15,7 @@ import {SourceSelect} from './SourceSelect';
 import {ScrollArea, Form} from '@storybook/components';
 import {useParameter} from '@storybook/api';
 
-import {Events, ParameterName} from '../../addon';
+import {Events} from '../../addon';
 import {
   Config,
   SOURCE_BASE_URL,
@@ -53,8 +53,13 @@ const HorizontalFormFields = styled.div({
   },
 });
 
-export const Wrapper: FunctionComponent<Props> = ({active, api, channel}) => {
+export const ConfigPanel: FunctionComponent<Props> = ({
+  active,
+  api,
+  channel,
+}) => {
   const [config, setConfig] = useState<Config>(getPersistedConfig);
+  const [documentType, setDocumentType] = useState();
   const configRef = useRef(config);
   configRef.current = config;
   const ampBaseUrlOptions = useParameter<string[]>('ampBaseUrlOptions', []);
@@ -75,10 +80,12 @@ export const Wrapper: FunctionComponent<Props> = ({active, api, channel}) => {
 
     channel.on(STORY_CHANGED, onStoryChanged);
     channel.on(Events.AskConfig, onStoryChanged);
+    channel.on(Events.UpdateDocumentType, setDocumentType);
 
     return () => {
       channel.removeListener(STORY_CHANGED, onStoryChanged);
       channel.removeListener(Events.AskConfig, onStoryChanged);
+      channel.removeListener(Events.UpdateDocumentType, setDocumentType);
     };
   }, []);
 
@@ -126,44 +133,30 @@ export const Wrapper: FunctionComponent<Props> = ({active, api, channel}) => {
               />
             </Form.Field>
           </HorizontalFormFields>
-          <Form.Field key={'binary'} label={'Binary'}>
-            <Form.Select
-              value={config?.binary}
-              name={'binary'}
-              onChange={(e) => {
-                updateConfig({...config, binary: e.target.value});
-              }}
-              size="flex"
-            >
-              <option key={'no-modules'} value={'no-modules'}>
-                {'v0.js (nomodule)'}
-              </option>
-              <option key={'modules'} value={'modules'}>
-                {'v0.mjs (type="module")'}
-              </option>
-            </Form.Select>
-          </Form.Field>
-          <Form.Field key={'mode'} label={'Mode'}>
-            <Form.Select
-              value={config?.mode}
-              name={'mode'}
-              onChange={(e) => {
-                updateConfig({...config, mode: e.target.value});
-              }}
-              size="flex"
-            >
-              <option key={'ampdoc'} value={'ampdoc'}>
-                {'AMP'}
-              </option>
-              <option key={'bento'} value={'bento'}>
-                {'Bento'}
-              </option>
-            </Form.Select>
-          </Form.Field>
+          {/* BentoWrapper uses nomodule/module at the same time */}
+          {documentType !== 'bento' && (
+            <Form.Field key={'binary'} label={'Binary'}>
+              <Form.Select
+                value={config?.binary}
+                name={'binary'}
+                onChange={(e) => {
+                  updateConfig({...config, binary: e.target.value});
+                }}
+                size="flex"
+              >
+                <option key={'nomodule'} value={'nomodule'}>
+                  {'v0.js (nomodule)'}
+                </option>
+                <option key={'module'} value={'module'}>
+                  {'v0.mjs (type="module")'}
+                </option>
+              </Form.Select>
+            </Form.Field>
+          )}
         </Form>
       </PanelWrapper>
     </Fragment>
   );
 };
 
-export default Wrapper;
+export default ConfigPanel;

src/register/index.tsx

@@ -4,14 +4,14 @@ import {jsx} from '@storybook/theming';
 
 import {AddonName, PanelName} from '../addon';
 
-import {Wrapper} from './components/Wrapper';
+import {ConfigPanel} from './components/ConfigPanel';
 
 addons.register(AddonName, (api) => {
   addons.addPanel(PanelName, {
     title: 'AMP',
     render({active = false, key}) {
       return (
-        <Wrapper
+        <ConfigPanel
           key={key}
           channel={addons.getChannel()}
           api={api}