Controls: Tune up sorting

addons/controls/src/ControlsPanel.tsx

@@ -1,10 +1,11 @@
 import React, { FC } from 'react';
 import { useArgs, useArgTypes, useParameter } from '@storybook/api';
-import { ArgsTable, NoControlsWarning } from '@storybook/components';
+import { ArgsTable, NoControlsWarning, SortType } from '@storybook/components';
 
 import { PARAM_KEY } from './constants';
 
 interface ControlsParameters {
+  sort?: SortType;
   expanded?: boolean;
   hideNoControlsWarning?: boolean;
 }
@@ -13,7 +14,7 @@ export const ControlsPanel: FC = () => {
   const [args, updateArgs, resetArgs] = useArgs();
   const rows = useArgTypes();
   const isArgsStory = useParameter<boolean>('__isArgsStory', false);
-  const { expanded, hideNoControlsWarning = false } = useParameter<ControlsParameters>(
+  const { expanded, sort, hideNoControlsWarning = false } = useParameter<ControlsParameters>(
     PARAM_KEY,
     {}
   );
@@ -32,6 +33,7 @@ export const ControlsPanel: FC = () => {
           updateArgs,
           resetArgs,
           inAddonPanel: true,
+          sort,
         }}
       />
     </>

addons/docs/src/blocks/ArgsTable.tsx

@@ -6,6 +6,7 @@ import {
   ArgsTableProps as PureArgsTableProps,
   ArgsTableError,
   ArgTypes,
+  SortType,
   TabbedArgsTable,
 } from '@storybook/components';
 import { Args } from '@storybook/addons';
@@ -22,6 +23,7 @@ import { lookupStoryId } from './Story';
 interface BaseProps {
   include?: PropDescriptor;
   exclude?: PropDescriptor;
+  sort?: SortType;
 }
 
 type OfProps = BaseProps & {
@@ -111,11 +113,13 @@ const addComponentTabs = (
   components: Record<string, Component>,
   context: DocsContextProps,
   include?: PropDescriptor,
-  exclude?: PropDescriptor
+  exclude?: PropDescriptor,
+  sort?: SortType
 ) => ({
   ...tabs,
   ...mapValues(components, (comp) => ({
     rows: extractComponentArgTypes(comp, context, include, exclude),
+    sort,
   })),
 });
 
@@ -199,14 +203,17 @@ export const ComponentsTable: FC<ComponentsProps> = (props) => {
 
 export const ArgsTable: FC<ArgsTableProps> = (props) => {
   const context = useContext(DocsContext);
-  const { parameters: { subcomponents } = {} } = context;
+  const { parameters: { subcomponents, controls } = {} } = context;
 
-  const { include, exclude, components } = props as ComponentsProps;
+  const { include, exclude, components, sort: sortProp } = props as ComponentsProps;
   const { story } = props as StoryProps;
 
+  const sort = sortProp || controls?.sort;
+  console.log('preparing', { sort });
+
   const main = getComponent(props, context);
   if (story) {
-    return <StoryTable {...(props as StoryProps)} component={main} subcomponents={subcomponents} />;
+    return <StoryTable {...(props as StoryProps)} component={main} {...{ subcomponents, sort }} />;
   }
 
   if (!components && !subcomponents) {
@@ -220,14 +227,15 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   }
 
   if (components) {
-    return <ComponentsTable {...(props as ComponentsProps)} components={components} />;
+    return <ComponentsTable {...(props as ComponentsProps)} {...{ components, sort }} />;
   }
 
   const mainLabel = getComponentName(main);
   return (
     <ComponentsTable
       {...(props as ComponentsProps)}
       components={{ [mainLabel]: main, ...subcomponents }}
+      sort={sort}
     />
   );
 };

examples/official-storybook/stories/controls-sort.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Button from '../components/TsButton';
+
+export default {
+  title: 'Addons/Controls-Sort',
+  argTypes: {
+    x: { type: { required: true } },
+    y: { type: { required: true }, table: { category: 'foo' } },
+    z: {},
+    a: { type: { required: true } },
+    b: { table: { category: 'foo' } },
+    c: {},
+  },
+  args: {
+    x: 'x',
+    y: 'y',
+    z: 'z',
+    a: 'a',
+    b: 'b',
+    c: 'c',
+  },
+  parameters: { chromatic: { disable: true } },
+};
+
+const Template = (args: any) => <div>{args && <pre>{JSON.stringify(args, null, 2)}</pre>}</div>;
+
+export const None = Template.bind({});
+None.parameters = { controls: { sort: 'none' } };
+
+export const Alpha = Template.bind({});
+Alpha.parameters = { controls: { sort: 'alpha' } };
+
+export const RequiredFirst = Template.bind({});
+RequiredFirst.parameters = { controls: { sort: 'requiredFirst' } };

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

@@ -226,8 +226,15 @@ export enum ArgsTableError {
   ARGS_UNSUPPORTED = 'Args unsupported. See Args documentation for your framework.',
 }
 
-type SortType = 'ascending' | 'descending' | 'requiredFirst';
-
+export type SortType = 'alpha' | 'requiredFirst' | 'none';
+type SortFn = (a: ArgType, b: ArgType) => number;
+
+const sortFns: Record<SortType, SortFn | null> = {
+  alpha: (a: ArgType, b: ArgType) => a.name.localeCompare(b.name),
+  requiredFirst: (a: ArgType, b: ArgType) =>
+    Number(!!b.type?.required) - Number(!!a.type?.required) || a.name.localeCompare(b.name),
+  none: undefined,
+};
 export interface ArgsTableRowProps {
   rows: ArgTypes;
   args?: Args;
@@ -283,20 +290,10 @@ const groupRows = (rows: ArgType, sort: SortType) => {
   });
 
   // apply sort
-  const sortFn = (a: ArgType, b: ArgType) => {
-    const sortFns: Record<SortType, () => number> = {
-      ascending: () => a.name.localeCompare(b.name),
-      descending: () => b.name.localeCompare(a.name),
-      requiredFirst: () => {
-        return (
-          Number(!!b.type?.required) - Number(!!a.type?.required) || a.name.localeCompare(b.name)
-        );
-      },
-    };
-    return sortFns[sort]();
-  };
+  const sortFn = sortFns[sort];
 
   const sortSubsection = (record: Record<string, Subsection>) => {
+    if (!sortFn) return record;
     return Object.keys(record).reduce<Record<string, Subsection>>(
       (acc, cur) => ({
         ...acc,
@@ -349,7 +346,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     compact,
     inAddonPanel,
     initialExpandedArgs,
-    sort = 'ascending',
+    sort = 'requiredFirst',
   } = props as ArgsTableRowProps;
 
   const groups = groupRows(