Merge pull request #1452 from GSA/ng17-sb8

Update storybook to v8
GSA · May 16, 2024 · 389fc1e · 389fc1e
2 parents 10f6360 + c077687
commit 389fc1e
Show file tree

Hide file tree

Showing 64 changed files with 7,084 additions and 14,393 deletions.
diff --git a/.storybook/decorators/stackblitz-link/index.js b/.storybook/decorators/stackblitz-link/index.js
@@ -1,4 +1,4 @@
-import { makeDecorator } from "@storybook/addons";
+import { makeDecorator } from '@storybook/preview-api';
 export const stackblitzLink = makeDecorator({
   name: 'stackblitzLink',
   parameterName: 'stackblitzLink',
@@ -16,4 +16,4 @@ export const stackblitzLink = makeDecorator({
     // return the modified story string
     return story;
   }
-});
+});
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -25,4 +25,42 @@ export const parameters = {
 
 export const decorators = [
   stackblitzLink
-];
+];
+
+const preview = {
+  parameters: {
+    options: {
+      storySort: (a, b) =>
+        {
+          const aBeforeB = -1;
+          const bBeforeA = 1;
+          let toReturn = 0;
+          const introName = 'Introduction';
+          const configName = 'Configurable';
+
+          if(a.title === b.title){
+            if(a.name === introName || b.name === introName){
+              if(a.name === introName){
+                toReturn = aBeforeB
+              } else if(b.name === introName){
+                toReturn = bBeforeA;
+              }
+            } else if(a.name === configName || b.name === configName){
+              if(a.name === configName){
+                toReturn = aBeforeB
+              } else if(b.name === configName){
+                toReturn = bBeforeA;
+              }
+            } else {
+              toReturn = a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
+            }
+          } else {
+            toReturn = a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
+          }
+          return toReturn;
+        }
+    },
+  },
+};
+
+export default preview;
diff --git a/.storybook/source-code-addon/manager.js b/.storybook/source-code-addon/manager.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { AddonPanel, Placeholder } from '@storybook/components';
-import { useParameter, addons, types } from '@storybook/api';
+import { useParameter, addons, types } from '@storybook/manager-api';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { themes } from '@storybook/theming';
 import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -15,7 +15,8 @@ addons.register('my/panel', () => {
   addons.add('my-panel-addon/panel', {
     title: 'View Code',
     type: types.PANEL,
-    render: ({ active, key }) => {
+    paramKey: 'sdsCodePreview',
+    render: ({ active }) => {
       const preview = useParameter('preview', null);
       const [selectedTab, setSelectedTab] = useState(null);
 
@@ -24,7 +25,7 @@ addons.register('my/panel', () => {
       };
 
       return (
-        <AddonPanel key={key} active={active}>
+        <AddonPanel active={active}>
           {preview && preview.length > 0 ? (
             <div>
               {preview.map((item, index) => (

diff --git a/documentation.json b/documentation.json
diff --git a/libs/documentation/src/lib/storybook/actions/actions.stories.ts b/libs/documentation/src/lib/storybook/actions/actions.stories.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ActionMenuModel, SdsActionsMenuComponent, SdsActionsMenuModule, SdsMenuModule } from '@gsa-sam/components';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ActionMenuModel, SdsActionsMenuModule, SdsMenuModule } from '@gsa-sam/components';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { generateConfig, generateStackblitzLink } from 'libs/documentation/src/sandbox/sandbox-utils';
 import { ActionsIntroductionModule } from './actions-introduction/actions-introduction.module';
 import { ActionsLabelModule } from './actions-label/actions-label.module';
@@ -15,20 +15,21 @@ const disable = {
 };
 export default {
   title: 'Components/Actions Menu',
-  component: SdsActionsMenuComponent,
   decorators: [
     moduleMetadata({
       imports: [
         CommonModule,
         SdsActionsMenuModule,
-        BrowserAnimationsModule,
         SdsMenuModule,
         ActionsSizeModule,
         ActionsLabelModule,
         ActionsModelTriggerModule,
         ActionsIntroductionModule,
       ],
     }),
+    applicationConfig({
+      providers: [provideAnimations()],
+    }),
   ],
   argTypes: {
     actionModes: disable,
@@ -37,16 +38,12 @@ export default {
     getDisabled: disable,
     ngOnInit: disable,
     size: {
-      control: {
-        options: ['', 'sm'],
-        type: 'select',
-      },
+      options: ['', 'sm'],
+      control: 'select',
     },
     type: {
-      control: {
-        options: ['plain', 'primary'],
-        type: 'select',
-      },
+      options: ['plain', 'primary'],
+      control: 'select',
       description: '',
       table: {
         category: 'ActionMenuModel/trigger',
@@ -71,7 +68,7 @@ export default {
       },
     },
     actions: {
-      control: 'array',
+      control: 'object',
       table: {
         category: 'ActionMenuModel/actions',
       },
@@ -94,7 +91,7 @@ const actionsMenuModalFunction = (type, shadow, actions, label) => {
   };
   return toReturn;
 };
-const Template = ({ type, shadow, actions, size, label, ...rest }) => {
+export const Configurable = ({ type, shadow, actions, size, label, ...rest }) => {
   const menu = actionsMenuModalFunction(type, shadow, actions, label);
   return {
     template: `
@@ -112,7 +109,6 @@ const Template = ({ type, shadow, actions, size, label, ...rest }) => {
     },
   };
 };
-export const Configurable = Template.bind({});
 Configurable.args = {
   model: {},
   actions: [
@@ -122,11 +118,11 @@ Configurable.args = {
   ],
 };
 Configurable.parameters = {
-  preview: { disable: true },
   actions: { disable: true },
+  sdsCodePreview: { disable: true },
 };
 
-export const Size: Story = (args) => ({
+export const Size: StoryObj = (args) => ({
   template: '<sds-actions-size></sds-actions-size>',
   props: args,
 });
@@ -140,7 +136,7 @@ Size.parameters = {
   stackblitzLink: generateStackblitzLink('actions', 'size'),
 };
 
-export const Label: Story = (args) => ({
+export const Label: StoryObj = (args) => ({
   template: '<sds-actions-label></sds-actions-label>',
   props: args,
 });
@@ -154,7 +150,7 @@ Label.parameters = {
   stackblitzLink: generateStackblitzLink('actions', 'label'),
 };
 
-export const ModelTrigger: Story = (args) => ({
+export const ModelTrigger: StoryObj = (args) => ({
   template: '<sds-actions-model-trigger></sds-actions-model-trigger>',
   props: args,
 });
@@ -172,10 +168,12 @@ ModelTrigger.parameters = {
   stackblitzLink: generateStackblitzLink('actions', 'model-trigger'),
 };
 
-export const Introduction: Story = (args) => ({
+export const Introduction: StoryObj = (args) => ({
   template: '<sds-actions-introduction></sds-actions-introduction>',
   props: args,
 });
-Introduction.parameters = { options: { showPanel: false } };
-
-export const __namedExportsOrder = ['Introduction', 'Configurable', 'Label', 'ModelTrigger', 'Size'];
+Introduction.parameters = {
+  controls: { disable: true },
+  actions: { disable: true },
+  sdsCodePreview: { disable: true },
+};
diff --git a/libs/documentation/src/lib/storybook/autocomplete/autocomplete.stories.ts b/libs/documentation/src/lib/storybook/autocomplete/autocomplete.stories.ts
@@ -5,7 +5,7 @@ import {
   SdsAutocompleteModule,
   SelectionMode as SDSSelectionMode,
 } from '@gsa-sam/components';
-import { moduleMetadata, Meta, Story } from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj } from '@storybook/angular';
 import { generateConfig, generateStackblitzLink } from 'libs/documentation/src/sandbox/sandbox-utils';
 import { AutocompleteCheckboxModule } from './autocomplete-checkbox/autocomplete-checkbox.module';
 import { AutocompleteConfigurableModule } from './autocomplete-configurable/autocomplete-configurable.module';
@@ -239,7 +239,7 @@ const autocompleteSettingsFunction = (
   return base;
 };
 
-const Template: Story<SDSAutocompletelConfiguration> = (args) => {
+export const Configurable = (args) => {
   const {
     primaryKeyField,
     id,
@@ -299,8 +299,6 @@ const Template: Story<SDSAutocompletelConfiguration> = (args) => {
     // props: args
   };
 };
-
-export const Configurable = Template.bind({});
 Configurable.args = {
   /**
      Test
@@ -327,11 +325,11 @@ Configurable.args = {
   disabled: false,
 };
 Configurable.parameters = {
-  preview: { disable: true },
+  sdsCodePreview: { disable: true },
   controls: { expanded: true },
 };
 
-export const SelectionMode: Story = (args) => ({
+export const SelectionMode: StoryObj = (args) => ({
   template: `<sds-autocomplete-selection-mode-demo></sds-autocomplete-selection-mode-demo>`,
   props: {
     ...args,
@@ -351,7 +349,7 @@ SelectionMode.parameters = {
   stackblitzLink: generateStackblitzLink('autocomplete', 'selection-mode'),
 };
 
-export const Grouping: Story = (args) => ({
+export const Grouping: StoryObj = (args) => ({
   template: `<sds-autocomplete-grouping-demo></sds-autocomplete-grouping-demo>`,
   props: {
     ...args,
@@ -371,7 +369,7 @@ Grouping.parameters = {
   stackblitzLink: generateStackblitzLink('autocomplete', 'grouping'),
 };
 
-export const FreeText: Story = (args) => ({
+export const FreeText: StoryObj = (args) => ({
   template: `<sds-autocomplete-free-text-demo></sds-autocomplete-free-text-demo>`,
   props: {
     ...args,
@@ -391,7 +389,7 @@ FreeText.parameters = {
   stackblitzLink: generateStackblitzLink('autocomplete', 'free-text'),
 };
 
-export const CheckBox: Story = (args) => ({
+export const CheckBox: StoryObj = (args) => ({
   template: `<sds-autocomplete-checkbox-demo></sds-autocomplete-checkbox-demo>`,
   props: {
     ...args,
@@ -411,25 +409,12 @@ CheckBox.parameters = {
   stackblitzLink: generateStackblitzLink('autocomplete', 'checkbox'),
 };
 
-export const Introduction: Story = (args) => ({
+export const Introduction: StoryObj = (args) => ({
   template: '<sds-autocomplete-introduction></sds-autocomplete-introduction>',
   props: args,
 });
 Introduction.parameters = {
-  options: { showPanel: false },
-  controls: {
-    disable: true,
-    hideNoControlsWarning: true,
-  },
+  controls: { disable: true },
   actions: { disable: true },
-  preview: { disable: true },
+  sdsCodePreview: { disable: true },
 };
-
-export const __namedExportsOrder = [
-  'Introduction',
-  'Configurable',
-  'CheckBox',
-  'FreeText',
-  'Grouping',
-  'SelectionMode',
-];
diff --git a/libs/documentation/src/lib/storybook/button-group/button-group.stories.ts b/libs/documentation/src/lib/storybook/button-group/button-group.stories.ts
@@ -5,7 +5,7 @@ import {
   SdsButtonGroupModule,
   SdsButtonGroupOptionComponent,
 } from '@gsa-sam/sam-material-extensions';
-import { moduleMetadata, Meta, Story } from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj } from '@storybook/angular';
 import { generateConfig, generateStackblitzLink } from 'libs/documentation/src/sandbox/sandbox-utils';
 import { ButtonGroupCheckedModule } from './button-group-checked/button-group-checked.module';
 import { ButtonGroupIntroductionModule } from './button-group-introduction/button-group-introduction.module';
@@ -48,26 +48,26 @@ export default {
   },
 } as Meta;
 
-const Template: Story<SdsButtonGroupComponent> = (args) => ({
+export const Configurable: StoryObj = (args) => ({
   template: `
   <sds-button-group class="sds-button-group" [ngClass]="[extraClasses]" [mode]="mode" (change)="buttonGroupChanged({source: 'originalEmitter: MatButtonToggle', value: $event.value})">
     <sds-button-group-option *ngFor="let optionText of optionTexts" value="{{optionText}}">{{optionText}}</sds-button-group-option>
   </sds-button-group>
   `,
-  props: args,
+  props: {
+    ...args,
+  },
 });
-
-export const Configurable = Template.bind({});
 Configurable.args = {
   extraClasses: 'sds-button-group--secondary',
   optionTexts: ['Reports', 'Subscriptions', 'History'],
   mode: 'checkbox',
 };
 Configurable.parameters = {
-  preview: { disable: true },
+  sdsCodePreview: { disable: true },
 };
 
-export const Modes: Story = (args) => ({
+export const Modes: StoryObj = (args) => ({
   template: `<sds-button-group-modes></sds-button-group-modes>`,
   props: args,
 });
@@ -85,7 +85,7 @@ Modes.parameters = {
   stackblitzLink: generateStackblitzLink('button-group', 'modes'),
 };
 
-export const Checked: Story = (args) => ({
+export const Checked: StoryObj = (args) => ({
   template: `<sds-button-group-checked></sds-button-group-checked>`,
   props: {
     ...args,
@@ -105,18 +105,12 @@ Checked.parameters = {
   stackblitzLink: generateStackblitzLink('button-group', 'checked'),
 };
 
-export const Introduction: Story = (args) => ({
+export const Introduction: StoryObj = (args) => ({
   template: '<sds-button-group-introduction></sds-button-group-introduction>',
   props: args,
 });
 Introduction.parameters = {
-  options: { showPanel: false },
-  controls: {
-    disable: true,
-    hideNoControlsWarning: true,
-  },
+  controls: { disable: true },
   actions: { disable: true },
-  preview: { disable: true },
+  sdsCodePreview: { disable: true },
 };
-
-export const __namedExportsOrder = ['Introduction', 'Configurable', 'Checked', 'Modes'];