feat(addon-controls): support query parameters

addons/controls/src/components/ControlsPanel.tsx

@@ -1,9 +1,20 @@
-import React, { FC } from 'react';
-import { ArgsTable, NoControlsWarning } from '@storybook/components';
+import React, { FC, useCallback, useEffect } from 'react';
+import copy from 'copy-to-clipboard';
+import { ActionBar, ArgsTable, NoControlsWarning } from '@storybook/components';
 import { useArgs, useArgTypes, useParameter } from '@storybook/api';
+import { getQueryParams } from '@storybook/client-api';
 
 import { PARAM_KEY } from '../constants';
 
+const controlsValuesFromUrl: Record<string, string> = Object.entries(getQueryParams())
+  .filter((key) => {
+    return key[0]?.includes('control-');
+  })
+  .reduce((acc, [key, value]) => {
+    const argName = key.replace('control-', '');
+    return { ...acc, [argName]: value };
+  }, {});
+
 interface ControlsParameters {
   expanded?: boolean;
   hideNoControlsWarning?: boolean;
@@ -18,15 +29,36 @@ export const ControlsPanel: FC = () => {
     {}
   );
   const hasControls = Object.values(rows).filter((argType) => !!argType?.control).length > 0;
+
+  useEffect(() => {
+    if (Object.keys(controlsValuesFromUrl).length > 0) {
+      updateArgs(controlsValuesFromUrl);
+    }
+  }, []);
+
+  const copyArgs = useCallback(() => {
+    // const { location } = window.document;
+    // const query = qs.parse(location.search, { ignoreQueryPrefix: true });
+
+    Object.entries(args).forEach(([name, arg]) => {
+      console.log({ name, arg });
+      // query[`control-${name}`] = getKnobControl(knob.type).serialize(knob.value);
+    });
+    // copy(`${location.origin + location.pathname}?${qs.stringify(query, { encode: false })}`);
+  }, [args]);
+
+  const isControlsEnabled = hasControls && isArgsStory;
+
   return (
     <>
-      {(hasControls && isArgsStory) || hideNoControlsWarning ? null : <NoControlsWarning />}
+      {isControlsEnabled || hideNoControlsWarning ? null : <NoControlsWarning />}
       <ArgsTable
         {...{
           compact: !expanded && hasControls,
           rows,
           args,
           updateArgs,
+          copyArgs,
           resetArgs,
           inAddonPanel: true,
         }}

lib/components/src/blocks/ArgsTable/ArgsTable.tsx

@@ -181,7 +181,7 @@ export const TableWrapper = styled.table<{ compact?: boolean; inAddonPanel?: boo
   })
 );
 
-const ResetButton = styled.button(({ theme }) => ({
+const UtilityButton = styled.button(({ theme }) => ({
   border: 0,
   borderRadius: '3em',
   cursor: 'pointer',
@@ -221,6 +221,12 @@ const ControlHeadingWrapper = styled.span({
   justifyContent: 'space-between',
 });
 
+const ControlButtons = styled.span({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gap: '12px',
+});
+
 export enum ArgsTableError {
   NO_COMPONENT = 'No component found.',
   ARGS_UNSUPPORTED = 'Args unsupported. See Args documentation for your framework.',
@@ -229,6 +235,7 @@ export enum ArgsTableError {
 export interface ArgsTableRowProps {
   rows: ArgTypes;
   args?: Args;
+  copyArgs?: () => void;
   updateArgs?: (args: Args) => void;
   resetArgs?: (argNames?: string[]) => void;
   compact?: boolean;
@@ -302,6 +309,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     rows,
     args,
     updateArgs,
+    copyArgs,
     resetArgs,
     compact,
     inAddonPanel,
@@ -343,11 +351,18 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
               <th>
                 <ControlHeadingWrapper>
                   Control{' '}
-                  {resetArgs && (
-                    <ResetButton onClick={() => resetArgs()} title="Reset controls">
-                      <Icons icon="sync" aria-hidden />
-                    </ResetButton>
-                  )}
+                  <ControlButtons>
+                    {copyArgs && (
+                      <UtilityButton onClick={() => copyArgs()} title="Copy controls in url">
+                        <Icons icon="share" aria-hidden />
+                      </UtilityButton>
+                    )}
+                    {resetArgs && (
+                      <UtilityButton onClick={() => resetArgs()} title="Reset controls">
+                        <Icons icon="sync" aria-hidden />
+                      </UtilityButton>
+                    )}
+                  </ControlButtons>
                 </ControlHeadingWrapper>
               </th>
             ) : null}