Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use storySort method in storybook-root

Best JavaScript code snippet using storybook-root

index.js

Source:index.js

1/*2 * Copyright 2020 Google LLC3 *4 * Licensed under the Apache License, Version 2.0 (the "License");5 * you may not use this file except in compliance with the License.6 * You may obtain a copy of the License at7 *8 *     https://www.apache.org/licenses/LICENSE-2.09 *10 * Unless required by applicable law or agreed to in writing, software11 * distributed under the License is distributed on an "AS IS" BASIS,12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.13 * See the License for the specific language governing permissions and14 * limitations under the License.15 */16/**17 * External dependencies18 */19import styled, { css } from 'styled-components';20import PropTypes from 'prop-types';21import { useCallback } from 'react';22import { getRelativeDisplayDate } from '@web-stories-wp/date';23import { __, sprintf } from '@web-stories-wp/i18n';24import {25  Headline,26  Icons,27  Text,28  THEME_CONSTANTS,29  themeHelpers,30} from '@web-stories-wp/design-system';31/**32 * Internal dependencies33 */34import {35  StoriesPropType,36  RenameStoryPropType,37  StoryMenuPropType,38} from '../../../../../types';39import {40  Table,41  TableAuthorHeaderCell,42  TableBody,43  TableCell,44  TableDateHeaderCell,45  StickyTableHeader,46  TablePreviewCell,47  TablePreviewHeaderCell,48  TableRow,49  TableStatusCell,50  TableStatusHeaderCell,51  TableTitleHeaderCell,52  StoryMenu,53  MoreVerticalButton,54  InlineInputForm,55} from '../../../../../components';56import {57  ORDER_BY_SORT,58  SORT_DIRECTION,59  STORY_SORT_OPTIONS,60  STORY_STATUS,61  STORY_PREVIEW_WIDTH,62  VIEWPORT_BREAKPOINT,63} from '../../../../../constants';64import { generateStoryMenu } from '../../../../../components/popoverMenu/story-menu-generator';65import { titleFormatted } from '../../../../../utils';66const { focusableOutlineCSS } = themeHelpers;67const ListView = styled.div`68  width: 100%;69`;70const PreviewImage = styled.div`71  display: inline-block;72  background: ${({ theme }) => theme.colors.gradient.placeholder};73  width: ${STORY_PREVIEW_WIDTH[VIEWPORT_BREAKPOINT.THUMBNAIL]}px;74  height: ${STORY_PREVIEW_WIDTH[VIEWPORT_BREAKPOINT.THUMBNAIL] / (3 / 4)}px;75  object-fit: contain;76  border-radius: ${({ theme }) => theme.borders.radius.small};77`;78const ArrowIcon = styled.div`79  width: 32px;80  height: 100%;81  display: inline-grid;82  color: ${({ theme }) => theme.colors.fg.primary};83  vertical-align: middle;84  svg {85    visibility: ${({ active }) => (active ? 'visible' : 'hidden')};86    transition: transform 0.15s;87    ${({ asc }) =>88      asc &&89      css`90        transform: rotate(180deg);91      `};92  }93`;94const EmptyIconSpace = styled.div`95  height: 32px;96  width: 32px;97`;98const ArrowIconWithTitle = styled(ArrowIcon)`99  display: ${({ active }) => !active && 'none'};100  position: absolute;101  top: 16px;102  @media ${({ theme }) => theme.breakpoint.mobile} {103    margin-left: 4px;104  }105`;106const HeavyTitle = styled(Text)`107  font-weight: 700;108`;109const SelectableTitle = styled(HeavyTitle).attrs({ tabIndex: 0 })`110  color: ${({ theme }) => theme.colors.fg.linkNormal};111  cursor: pointer;112  ${({ theme }) =>113    focusableOutlineCSS(theme.colors.border.focus, theme.colors.bg.secondary)};114`;115const StyledTableRow = styled(TableRow)`116  &:hover ${MoreVerticalButton}, &:focus-within ${MoreVerticalButton} {117    opacity: 1;118  }119`;120const TitleTableCellContainer = styled.div`121  display: flex;122  align-items: center;123  justify-content: flex-start;124  ${MoreVerticalButton} {125    margin: 10px auto;126  }127  &:hover ${MoreVerticalButton}, &:active ${MoreVerticalButton} {128    opacity: 1;129  }130`;131const toggleSortLookup = {132  [SORT_DIRECTION.DESC]: SORT_DIRECTION.ASC,133  [SORT_DIRECTION.ASC]: SORT_DIRECTION.DESC,134};135function onFocusSelectAll(e) {136  window.getSelection().selectAllChildren(e.target);137}138function onBlurDeselectAll() {139  window.getSelection().removeAllRanges();140}141export default function StoryListView({142  handleSortChange,143  handleSortDirectionChange,144  hideStoryList,145  renameStory,146  sortDirection,147  stories,148  storyMenu,149  storySort,150  storyStatus,151}) {152  const onSortTitleSelected = useCallback(153    (newStorySort) => {154      if (newStorySort !== storySort) {155        handleSortChange(newStorySort);156        handleSortDirectionChange(ORDER_BY_SORT[newStorySort]);157      } else {158        handleSortDirectionChange(toggleSortLookup[sortDirection]);159      }160    },161    [handleSortDirectionChange, handleSortChange, storySort, sortDirection]162  );163  const onKeyDownSort = useCallback(164    ({ key }, sortBy) => {165      if (key === 'Enter') {166        onSortTitleSelected(sortBy);167      }168    },169    [onSortTitleSelected]170  );171  return (172    <ListView data-testid="story-list-view">173      <Table aria-label={__('List view of created stories', 'web-stories')}>174        <StickyTableHeader>175          <TableRow>176            <TablePreviewHeaderCell177              onClick={() => onSortTitleSelected(STORY_SORT_OPTIONS.NAME)}178              onKeyDown={(e) => onKeyDownSort(e, STORY_SORT_OPTIONS.NAME)}179            >180              <SelectableTitle181                aria-label={__(182                  'Title, select to sort table by story title',183                  'web-stories'184                )}185                forwardedAs="span"186                size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}187                isBold188              >189                {__('Title', 'web-stories')}190              </SelectableTitle>191            </TablePreviewHeaderCell>192            <TableTitleHeaderCell193              onClick={() => onSortTitleSelected(STORY_SORT_OPTIONS.NAME)}194              onKeyDown={(e) => onKeyDownSort(e, STORY_SORT_OPTIONS.NAME)}195            >196              <SelectableTitle197                aria-hidden198                active={storySort === STORY_SORT_OPTIONS.NAME}199                forwardedAs="span"200                size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}201                isBold202              >203                {__('Title', 'web-stories')}204              </SelectableTitle>205              <ArrowIcon206                active={storySort === STORY_SORT_OPTIONS.NAME}207                asc={sortDirection === SORT_DIRECTION.ASC}208              >209                {<Icons.ArrowDown />}210              </ArrowIcon>211            </TableTitleHeaderCell>212            <TableAuthorHeaderCell>213              <SelectableTitle214                aria-label={__(215                  'Author, select to sort table by story author',216                  'web-stories'217                )}218                onClick={() =>219                  onSortTitleSelected(STORY_SORT_OPTIONS.CREATED_BY)220                }221                onKeyDown={(e) =>222                  onKeyDownSort(e, STORY_SORT_OPTIONS.CREATED_BY)223                }224                active={storySort === STORY_SORT_OPTIONS.CREATED_BY}225                forwardedAs="span"226                size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}227                isBold228              >229                {__('Author', 'web-stories')}230              </SelectableTitle>231              <ArrowIconWithTitle232                aria-hidden233                active={storySort === STORY_SORT_OPTIONS.CREATED_BY}234                asc={sortDirection === SORT_DIRECTION.ASC}235              >236                {storySort === STORY_SORT_OPTIONS.CREATED_BY ? (237                  <Icons.ArrowDown />238                ) : (239                  <EmptyIconSpace />240                )}241              </ArrowIconWithTitle>242            </TableAuthorHeaderCell>243            <TableDateHeaderCell>244              <SelectableTitle245                aria-label={__(246                  'Creation date, select to sort table by date story was created',247                  'web-stories'248                )}249                onClick={() =>250                  onSortTitleSelected(STORY_SORT_OPTIONS.DATE_CREATED)251                }252                onKeyDown={(e) =>253                  onKeyDownSort(e, STORY_SORT_OPTIONS.DATE_CREATED)254                }255                active={storySort === STORY_SORT_OPTIONS.DATE_CREATED}256                forwardedAs="span"257                size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}258                isBold259              >260                {__('Date Created', 'web-stories')}261              </SelectableTitle>262              <ArrowIconWithTitle263                aria-hidden264                active={storySort === STORY_SORT_OPTIONS.DATE_CREATED}265                asc={sortDirection === SORT_DIRECTION.ASC}266              >267                <Icons.ArrowDown />268              </ArrowIconWithTitle>269            </TableDateHeaderCell>270            <TableDateHeaderCell>271              <SelectableTitle272                aria-label={__(273                  'Modification date, select to sort table by date story was last modified',274                  'web-stories'275                )}276                onClick={() =>277                  onSortTitleSelected(STORY_SORT_OPTIONS.LAST_MODIFIED)278                }279                onKeyDown={(e) =>280                  onKeyDownSort(e, STORY_SORT_OPTIONS.LAST_MODIFIED)281                }282                active={storySort === STORY_SORT_OPTIONS.LAST_MODIFIED}283                forwardedAs="span"284                size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}285                isBold286              >287                {__('Last Modified', 'web-stories')}288              </SelectableTitle>289              <ArrowIconWithTitle290                aria-hidden291                active={storySort === STORY_SORT_OPTIONS.LAST_MODIFIED}292                asc={sortDirection === SORT_DIRECTION.ASC}293              >294                <Icons.ArrowDown />295              </ArrowIconWithTitle>296            </TableDateHeaderCell>297            {storyStatus !== STORY_STATUS.DRAFT && (298              <TableStatusHeaderCell>299                <HeavyTitle300                  forwardedAs="span"301                  size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}302                >303                  {__('Publish State', 'web-stories')}304                </HeavyTitle>305              </TableStatusHeaderCell>306            )}307          </TableRow>308        </StickyTableHeader>309        <TableBody>310          {!hideStoryList &&311            stories.map((story) => (312              <StyledTableRow313                key={`story-${story.id}`}314                data-testid={`story-list-item-${story.id}`}315              >316                <TablePreviewCell>317                  <PreviewImage318                    {...(story.featuredMediaUrl319                      ? {320                          src: story.featuredMediaUrl,321                          alt: sprintf(322                            /* translators: %s: Story title. */323                            __('%s Poster image', 'web-stories'),324                            story.title.length > 0325                              ? story.title326                              : __('(no title)', 'web-stories')327                          ),328                          as: 'img',329                        }330                      : { as: 'div' })}331                  />332                </TablePreviewCell>333                <TableCell>334                  <TitleTableCellContainer>335                    {renameStory.id === story.id ? (336                      <InlineInputForm337                        onEditComplete={(newTitle) =>338                          renameStory.handleOnRenameStory(story, newTitle)339                        }340                        onEditCancel={renameStory.handleCancelRename}341                        value={story.title}342                        id={story.id}343                        label={__('Rename story', 'web-stories')}344                      />345                    ) : (346                      <>347                        <Headline348                          tabIndex={0}349                          onFocus={onFocusSelectAll}350                          onBlur={onBlurDeselectAll}351                          size={352                            THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.XXX_SMALL353                          }354                          as="h4"355                        >356                          {titleFormatted(story.title)}357                        </Headline>358                        <StoryMenu359                          onMoreButtonSelected={storyMenu.handleMenuToggle}360                          contextMenuId={storyMenu.contextMenuId}361                          storyId={story.id}362                          menuItems={generateStoryMenu({363                            menuItemActions: storyMenu.menuItemActions,364                            menuItems: storyMenu.menuItems,365                            story,366                          })}367                          verticalAlign="center"368                        />369                      </>370                    )}371                  </TitleTableCellContainer>372                </TableCell>373                <TableCell>374                  <Text375                    as="span"376                    size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}377                  >378                    {story.author || 'â'}379                  </Text>380                </TableCell>381                <TableCell>382                  <Text383                    as="span"384                    size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}385                  >386                    {getRelativeDisplayDate(story.created_gmt)}387                  </Text>388                </TableCell>389                <TableCell>390                  <Text391                    as="span"392                    size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}393                  >394                    {getRelativeDisplayDate(story.modified_gmt)}395                  </Text>396                </TableCell>397                {storyStatus !== STORY_STATUS.DRAFT && (398                  <TableStatusCell>399                    <Text400                      as="span"401                      size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}402                    >403                      {story.status === STORY_STATUS.PUBLISH &&404                        __('Published', 'web-stories')}405                      {story.status === STORY_STATUS.FUTURE &&406                        __('Scheduled', 'web-stories')}407                      {story.status === STORY_STATUS.DRAFT &&408                        __('Draft', 'web-stories')}409                      {story.status === STORY_STATUS.PRIVATE &&410                        __('Private', 'web-stories')}411                    </Text>412                  </TableStatusCell>413                )}414              </StyledTableRow>415            ))}416        </TableBody>417      </Table>418    </ListView>419  );420}421StoryListView.propTypes = {422  handleSortChange: PropTypes.func.isRequired,423  handleSortDirectionChange: PropTypes.func.isRequired,424  hideStoryList: PropTypes.bool,425  renameStory: RenameStoryPropType,426  sortDirection: PropTypes.string.isRequired,427  storyMenu: StoryMenuPropType.isRequired,428  storySort: PropTypes.string.isRequired,429  storyStatus: PropTypes.oneOf(Object.values(STORY_STATUS)),430  stories: StoriesPropType,...

index.test.js

Source:index.test.js

...9    const bParams = getParams({10      path: "path1/subPath2",11      storyName: "story2",12    });13    expect(storySort([])(aParams, bParams)).toBe(1);14  });15  it("should sort paths alphabetically by placing path1 after path2", () => {16    const aParams = getParams({17      path: "path1/subPath2",18      storyName: "story2",19    });20    const bParams = getParams({21      path: "path2/subPath1",22      storyName: "story1",23    });24    expect(storySort([])(aParams, bParams)).toBe(-1);25  });26  it("should sort 'customPath' before 'anotherPath' respecting order array", () => {27    const aParams = getParams({28      path: "customPath/subPath2",29      storyName: "story2",30    });31    const bParams = getParams({32      path: "anotherPath/subPath1",33      storyName: "story1",34    });35    expect(storySort(["customPath"])(aParams, bParams)).toBe(-1);36  });37  it("should sort 'customPath' before any other path respecting order array", () => {38    const aParams = getParams({39      path: "customPath/subPath2",40      storyName: "story2",41    });42    const bParams = getParams({43      path: "anotherPath/subPath1",44      storyName: "story1",45    });46    expect(storySort(["customPath", "*"])(aParams, bParams)).toBe(-1);47  });48  it("should sort 'anotherPath' after any other path respecting order array", () => {49    const aParams = getParams({50      path: "customPath/subPath2",51      storyName: "story2",52    });53    const bParams = getParams({54      path: "anotherPath/subPath1",55      storyName: "story1",56    });57    expect(storySort(["*", "anotherPath"])(aParams, bParams)).toBe(-1);58  });59  it("should sort subPaths alphabetically by keeping subPath1 before subPath2", () => {60    const aParams = getParams({ path: "path/subPath2", storyName: "story1" });61    const bParams = getParams({ path: "path/subPath1", storyName: "story2" });62    expect(storySort([])(aParams, bParams)).toBe(1);63  });64  it("should sort subPaths alphabetically by placing path1 after path2", () => {65    const aParams = getParams({ path: "path/subPath1", storyName: "story2" });66    const bParams = getParams({ path: "path/subPath2", storyName: "story1" });67    expect(storySort([])(aParams, bParams)).toBe(-1);68  });69  it("should sort 'customSubPath' before 'anotherSubPath' respecting order array", () => {70    const aParams = getParams({71      path: "path/customSubPath",72      storyName: "story2",73    });74    const bParams = getParams({75      path: "path/anotherSubPath",76      storyName: "story1",77    });78    expect(storySort(["*", ["customSubPath"]])(aParams, bParams)).toBe(-1);79  });80  it("should sort 'customSubPath' before 'anotherSubPath' under 'customPath' respecting order array", () => {81    const aParams = getParams({82      path: "customPath/customSubPath",83      storyName: "story2",84    });85    const bParams = getParams({86      path: "customPath/anotherSubPath",87      storyName: "story1",88    });89    expect(storySort(["customPath", ["customSubPath"]])(aParams, bParams)).toBe(90      -191    );92  });93  it("should sort 'customSubPath' and 'anotherSubPath' alphabetically as they are not under 'customPath' respecting order array", () => {94    const aParams = getParams({95      path: "path/customSubPath",96      storyName: "story1",97    });98    const bParams = getParams({99      path: "path/anotherSubPath",100      storyName: "story2",101    });102    expect(storySort(["customPath", ["customSubPath"]])(aParams, bParams)).toBe(103      1104    );105  });106  it("should sort 'customSubPath' before any other subPath respecting order array", () => {107    const aParams = getParams({108      path: "path/anotherSubPath",109      storyName: "story2",110    });111    const bParams = getParams({112      path: "path/customSubPath",113      storyName: "story1",114    });115    expect(storySort(["*", ["customSubPath", "*"]])(aParams, bParams)).toBe(1);116  });117  it("should sort 'anotherSubPath' after any other subPath respecting order array", () => {118    const aParams = getParams({119      path: "path/customSubPath",120      storyName: "story2",121    });122    const bParams = getParams({123      path: "path/anotherSubPath",124      storyName: "story1",125    });126    expect(storySort(["*", ["*", "anotherSubPath"]])(aParams, bParams)).toBe(127      -1128    );129  });130  it("should sort 'customSubPath' before 'anotherSubPath' prioritizing path", () => {131    const aParams = getParams({132      path: "path/customSubPath",133      storyName: "story2",134    });135    const bParams = getParams({136      path: "path/anotherSubPath",137      storyName: "story1",138    });139    expect(140      storySort([141        "*",142        ["customSubPath", "anotherSubPath"],143        "path",144        ["anotherSubPath", "customSubPath"],145      ])(aParams, bParams)146    ).toBe(1);147  });148  it("should sort stories alphabetically by keeping story1 before story2", () => {149    const aParams = getParams({ path: "path/subPath", storyName: "story2" });150    const bParams = getParams({ path: "path/subPath", storyName: "story1" });151    expect(storySort([])(aParams, bParams)).toBe(1);152  });153  it("should sort stories alphabetically by placing story1 after story2", () => {154    const aParams = getParams({ path: "path/subPath", storyName: "story1" });155    const bParams = getParams({ path: "path/subPath", storyName: "story2" });156    expect(storySort([])(aParams, bParams)).toBe(-1);157  });158  it("should sort 'customStory' before 'anotherStory' respecting order array", () => {159    const aParams = getParams({160      path: "path/subPath",161      storyName: "customStory",162    });163    const bParams = getParams({164      path: "path/subPath",165      storyName: "anotherStory",166    });167    expect(storySort(["*", ["*", ["customStory"]]])(aParams, bParams)).toBe(-1);168  });169  it("should sort 'customStory' before any other story respecting order array", () => {170    const aParams = getParams({171      path: "path/subPath",172      storyName: "anotherStory",173    });174    const bParams = getParams({175      path: "path/subPath",176      storyName: "customStory",177    });178    expect(179      storySort(["*", ["*", ["customStory", "*"]]])(aParams, bParams)180    ).toBe(1);181  });182  it("should sort 'anotherStory' after any other story respecting order array", () => {183    const aParams = getParams({184      path: "path/subPath",185      storyName: "customStory",186    });187    const bParams = getParams({188      path: "path/subPath",189      storyName: "anotherStory",190    });191    expect(192      storySort(["*", ["*", ["*", "anotherStory"]]])(aParams, bParams)193    ).toBe(-1);194  });195  it("should sort 'customStory' before any other story prioritizing subPath", () => {196    const aParams = getParams({197      path: "path/subPath",198      storyName: "anotherStory",199    });200    const bParams = getParams({201      path: "path/subPath",202      storyName: "customStory",203    });204    expect(205      storySort(["*", ["*", ["anotherStory"], "subPath", ["customStory"]]])(206        aParams,207        bParams208      )209    ).toBe(1);210  });...

getStorySortParameter.test.ts

Source:getStorySortParameter.test.ts

1import dedent from 'ts-dedent';2import { getStorySortParameter } from './getStorySortParameter';3describe('getStorySortParameter', () => {4  describe('supported', () => {5    it('no parameters', () => {6      expect(7        getStorySortParameter(dedent`8          export const decorators = [];9        `)10      ).toBeUndefined();11    });12    it('no storySort parameter', () => {13      expect(14        getStorySortParameter(dedent`15          export const parameters = {16            layout: 'fullscreen',17          };18        `)19      ).toBeUndefined();20    });21    it('with wildcards', () => {22      expect(23        getStorySortParameter(dedent`24          export const parameters = {25            options: {26              storySort: [27                "Intro",28                "Pages",29                ["Home", "Login", "Admin"],30                "Components",31                "*",32                "WIP",    33              ]34            }35          };36        `)37      ).toMatchInlineSnapshot(`38        Array [39          "Intro",40          "Pages",41          Array [42            "Home",43            "Login",44            "Admin",45          ],46          "Components",47          "*",48          "WIP",49        ]50      `);51    });52    it('arrow function', () => {53      expect(54        getStorySortParameter(dedent`55          export const parameters = {56            options: {57              storySort: (a, b) =>58                a[1].kind === b[1].kind59                  ? 060                  : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),61            },62          };63        `)64      ).toMatchInlineSnapshot(`[Function]`);65    });66    it('function', () => {67      expect(68        getStorySortParameter(dedent`69          export const parameters = {70            options: {71              storySort: function sortStories(a, b) {72                return a[1].kind === b[1].kind73                  ? 074                  : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });75              },76            },77          };78        `)79      ).toMatchInlineSnapshot(`[Function]`);80    });81    it('empty sort', () => {82      expect(83        getStorySortParameter(dedent`84          export const parameters = {85            options: {86              storySort: {87                method: "",88                order: [],89                locales: "",90              },91            },92          };93        `)94      ).toMatchInlineSnapshot(`95        Object {96          "locales": "",97          "method": "",98          "order": Array [],99        }100      `);101    });102    it('parameters typescript', () => {103      expect(104        getStorySortParameter(dedent`105          export const parameters = {106            options: {107              storySort: {108                method: "",109                order: [],110                locales: "",111              },112            },113          } as Parameters;114        `)115      ).toMatchInlineSnapshot(`116        Object {117          "locales": "",118          "method": "",119          "order": Array [],120        }121      `);122    });123  });124  describe('unsupported', () => {125    it('invalid parameters', () => {126      expect(() =>127        getStorySortParameter(dedent`128          export const parameters = [];129        `)130      ).toThrowErrorMatchingInlineSnapshot(`131        "Unexpected 'parameters'. Parameter 'options.storySort' should be defined inline e.g.:132        export const parameters = {133          options: {134            storySort: <array | object | function>135          }136        }"137      `);138    });139    it('parameters var', () => {140      expect(141        getStorySortParameter(dedent`142          const parameters = {143            options: {144              storySort: {145                method: "",146                order: [],147                locales: "",148              },149            },150          };151          export { parameters };152      `)153      ).toBeUndefined();154    });155    it('options var', () => {156      expect(() =>157        getStorySortParameter(dedent`158          const options = {159            storySort: {160              method: "",161              order: [],162              locales: "",163            },164          };165          export const parameters = {166            options,167          };168      `)169      ).toThrowErrorMatchingInlineSnapshot(`170        "Unexpected 'options'. Parameter 'options.storySort' should be defined inline e.g.:171        export const parameters = {172          options: {173            storySort: <array | object | function>174          }175        }"176      `);177    });178    it('storySort var', () => {179      expect(() =>180        getStorySortParameter(dedent`181          const storySort = {182            method: "",183            order: [],184            locales: "",185          };186          export const parameters = {187            options: {188              storySort,189            },190          };191      `)192      ).toThrowErrorMatchingInlineSnapshot(`193        "Unexpected 'storySort'. Parameter 'options.storySort' should be defined inline e.g.:194        export const parameters = {195          options: {196            storySort: <array | object | function>197          }198        }"199      `);200    });201  });...

Using AI Code Generation

1import { configure, addDecorator } from '@storybook/react';2import { withInfo } from '@storybook/addon-info';3import { withKnobs } from '@storybook/addon-knobs';4import { withA11y } from '@storybook/addon-a11y';5import { withTests } from '@storybook/addon-jest';6import { withConsole } from '@storybook/addon-console';7import { withOptions } from '@storybook/addon-options';8import { withBackgrounds } from '@storybook/addon-backgrounds';9import results from '../.jest-test-results.json';10addDecorator(withInfo);11addDecorator(withKnobs);12addDecorator(withA11y);13addDecorator((storyFn, context) => withConsole()(storyFn)(context));14addDecorator(15  withTests({16  })17);18addDecorator(19  withOptions({

Using AI Code Generation

1import { configure } from '@storybook/react';2import { storySort } from './storybook-root';3const req = require.context('../src', true, /\.stories\.js$/);4function loadStories() {5  req.keys().forEach(filename => req(filename));6}7configure(loadStories, module, { storySort });8export const storySort = (a, b) => {9  const aKind = a[1].kind;10  const bKind = b[1].kind;11  const aStory = a[1].story;12  const bStory = b[1].story;13  const aKindSplit = aKind.split('/');14  const bKindSplit = bKind.split('/');15  if (aKindSplit[0] === bKindSplit[0]) {16    if (aKindSplit[1] === bKindSplit[1]) {17      return aStory > bStory ? 1 : -1;18    }19    return aKindSplit[1] > bKindSplit[1] ? 1 : -1;20  }21  return aKindSplit[0] > bKindSplit[0] ? 1 : -1;22};23import { configure } from '@storybook/react';24import { storySort } from '../storybook-root';25const req = require.context('../src', true, /\.stories\.js$/);26function loadStories() {27  req.keys().forEach(filename => req(filename));28}29configure(loadStories, module, { storySort });

Using AI Code Generation

1import { configure } from "@storybook/react";2import { setOptions } from "@storybook/addon-options";3import { setDefaults } from "@storybook/addon-info";4import { addDecorator } from "@storybook/react";5import { withInfo } from "@storybook/addon-info";6import { withKnobs } from "@storybook/addon-knobs";7import { withOptions } from "@storybook/addon-options";8import { withA11y } from "@storybook/addon-a11y";9import { withConsole } from "@storybook/addon-console";10import { withTests } from "@storybook/addon-jest";11import results from "../.jest-test-results.json";12import { withInfo } from "@storybook/addon-info";13import { withOptions } from "@storybook/addon-options";14addDecorator(15  withInfo({16    styles: {17      infoBody: {18      },19      infoStory: {20      },21      infoContent: {22      },23      source: {24      },25      header: {26      },27      propTableHead: {28      }29    }30  })31);32addDecorator(33  withOptions({

Using AI Code Generation

1import { configure } from '@storybook/react';2import { storySort } from './storybook-root';3const req = require.context('../src', true, /.stories.js$/);4function loadStories() {5  req.keys().forEach(filename => req(filename));6}7configure(loadStories, module, storySort);8import { configure } from '@storybook/react';9import { storySort } from './storybook-root';10const req = require.context('../src', true, /.stories.js$/);11function loadStories() {12  req.keys().forEach(filename => req(filename));13}14configure(loadStories, module, storySort);15import { configure } from '@storybook/react';16import { storySort } from './storybook-root';17const req = require.context('../src', true, /.stories.js$/);18function loadStories() {19  req.keys().forEach(filename => req(filename));20}21configure(loadStories, module, storySort);22import { configure } from '@storybook/react';23import { storySort } from './storybook-root';24const req = require.context('../src', true, /.stories.js$/);25function loadStories() {26  req.keys().forEach(filename => req(filename));27}28configure(loadStories, module, storySort);29import { configure } from '@storybook/react';30import { storySort } from './storybook-root';31const req = require.context('../src', true, /.stories.js$/);32function loadStories() {33  req.keys().forEach(filename => req(filename));34}35configure(loadStories, module, storySort);36import { configure } from '@storybook/react';37import { storySort } from './storybook-root';38const req = require.context('../src', true, /.stories.js$/);39function loadStories()

Using AI Code Generation

1import { configure, addParameters } from '@storybook/react';2import { storySort } from './storybook-root';3addParameters({4  options: {5  },6});7function loadStories() {8  const req = require.context('../src', true, /\.stories\.js$/);9  req.keys().forEach(filename => req(filename));10}11configure(loadStories, module);12import { getStorybookUI, configure } from '@storybook/react-native';13import { withKnobs } from '@storybook/addon-knobs';14import { withPerformance } from 'storybook-addon-performance';15import { withA11y } from '@storybook/addon-a11y';16import { addDecorator } from '@storybook/react';17import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';18import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';19import { withViewport } from '@storybook/addon-viewport';20import { withConsole } from '@storybook/addon-console';21import { withInfo } from '@storybook/addon-info';22import { withTests } from '@storybook/addon-jest';23import { withRedux } from '@dump247/storybook-state';24import results from '../jest-test-results.json';25import './rn-addons';26addDecorator(withKnobs);27addDecorator(withPerformance);28addDecorator(withA11y);29addDecorator(withBackgrounds);30addDecorator(withViewport);31addDecorator(withConsole);32addDecorator(withInfo);33addDecorator(withTests({ results }));34addDecorator(withRedux);35const req = require.context('../src', true, /\.stories\.js$/);36function loadStories() {37  req.keys().forEach(filename => req(filename));38}39configure(loadStories, module);40const StorybookUIRoot = getStorybookUI({});41export default StorybookUIRoot;42import { addons } from '@storybook/addons';43import { themes } from '@storybook/theming';44import { withTests } from '@storybook/addon-jest';45import { withPerformance } from 'storybook-addon-performance';46import { withA11y } from '@storybook/addon-a11y';47import { withKnobs } from '@storybook/addon-knobs';48import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';49import { INITIAL_VIEWPORTS } from '@storybook/add

Using AI Code Generation

1import { configure } from '@storybook/react';2import { setOptions } from '@storybook/addon-options';3import { storySort } from './storybook-root';4const req = require.context('../src', true, /.stories.js$/);5function loadStories() {6  req.keys().forEach(filename => req(filename));7}8setOptions({9});10configure(loadStories, module);11import { sortStories } from '@storybook/addon-storysort';12export const storySort = (a, b) => {13  const sort = sortStories(a, b);14  return sort;15};16    at Array.sort (native)17    at Array.sort (native)

Using AI Code Generation

1import { configure } from '@storybook/react';2configure(require.context('../src', true, /\.stories\.js$/), module);3configure(require.context('../src', true, /\.stories\.js$/), module, {4  storySort: (a, b) => {5    const storyA = a[1].kind;6    const storyB = b[1].kind;7    return storyA.localeCompare(storyB);8  },9});10I have a question about this. I have a storybook setup in my project, and I have a few stories that are imported from a different project. I don’t want those stories to be sorted alphabetically, but I want the stories in my project to be sorted alphabetically. Is there a way to do this?11I am also trying to do something like this. I have a storybook setup in my project, and I have a few stories that are imported from a different project. I want those stories to be sorted alphabetically, but I want the stories in my project to be sorted alphabetically. Is there a way to do this?12I am also trying to do something like this. I have a storybook setup in my project, and I have a few stories that are imported from a different project. I want those stories to be sorted alphabetically, but I want the stories in my project to be sorted alphabetically. Is there a way to do this?13I’m having the same problem as @julien. I have a storybook setup in my project, and I have a few stories that are imported from a different project. I want those stories to be sorted alphabetically, but I want the stories in my project to be sorted alphabetically. Is there a way to do this?

Using AI Code Generation

1import { storiesOf } from "@storybook/react";2import { storySort } from "../storybook-root";3storiesOf("My Component", module)4  .add("First story", () => <div>First story</div>)5  .add("Second story", () => <div>Second story</div>);6import { configure } from "@storybook/react";7import { setOptions } from "@storybook/addon-options";8setOptions({

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.