How to use storySort method in storybook-root

Best JavaScript code snippet using storybook-root

index.js

Source:index.js Github

copy

Full Screen

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,...

Full Screen

Full Screen

index.test.js

Source:index.test.js Github

copy

Full Screen

...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 });...

Full Screen

Full Screen

getStorySortParameter.test.ts

Source:getStorySortParameter.test.ts Github

copy

Full Screen

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 });...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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({

Full Screen

Using AI Code Generation

copy

Full Screen

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 });

Full Screen

Using AI Code Generation

copy

Full Screen

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({

Full Screen

Using AI Code Generation

copy

Full Screen

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()

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Using AI Code Generation

copy

Full Screen

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?

Full Screen

Using AI Code Generation

copy

Full Screen

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({

Full Screen

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful