From e8bcad1f0dd0745584e93e77dc8d14054ee3a818 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Fri, 2 Jun 2023 14:39:54 +0100 Subject: [PATCH 1/7] init nested stories --- .../NestingExample/ChatMessage.stories.tsx | 22 +++ .../ChatMessageBubble.stories.tsx | 23 +++ .../ChatMessageMessageInput.stories.tsx | 16 ++ .../ChatMessageReactions.stories.tsx | 22 +++ .../NestingExample/StoryList.stories.tsx | 72 ++++++++ packages/react-native/package.json | 1 + .../StoryListView/StoryListView.test.ts | 166 ++++++++++++++++++ .../StoryListView/getNestedStories.ts | 59 +++++++ yarn.lock | 94 ++++++++++ 9 files changed, 475 insertions(+) create mode 100644 examples/expo-example/components/NestingExample/ChatMessage.stories.tsx create mode 100644 examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx create mode 100644 examples/expo-example/components/NestingExample/ChatMessageMessageInput.stories.tsx create mode 100644 examples/expo-example/components/NestingExample/ChatMessageReactions.stories.tsx create mode 100644 examples/expo-example/components/NestingExample/StoryList.stories.tsx create mode 100644 packages/react-native/src/preview/components/StoryListView/StoryListView.test.ts create mode 100644 packages/react-native/src/preview/components/StoryListView/getNestedStories.ts diff --git a/examples/expo-example/components/NestingExample/ChatMessage.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessage.stories.tsx new file mode 100644 index 0000000000..f7d52e9d75 --- /dev/null +++ b/examples/expo-example/components/NestingExample/ChatMessage.stories.tsx @@ -0,0 +1,22 @@ +import type { ComponentMeta, ComponentStoryObj } from '@storybook/react-native'; +import { Text } from 'react-native'; +import React from 'react'; + +const MyComponent = ({ text }) => {text}; + +export default { + title: 'Chat/Message', + component: MyComponent, +} as ComponentMeta; + +export const MessageFirst: ComponentStoryObj = { + args: { + text: 'Hello', + }, +}; + +export const MessageSecond: ComponentStoryObj = { + args: { + text: 'Message two', + }, +}; diff --git a/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx new file mode 100644 index 0000000000..bede1d4e2c --- /dev/null +++ b/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx @@ -0,0 +1,23 @@ +import type { ComponentMeta, ComponentStoryObj } from '@storybook/react-native'; +import { Text } from 'react-native'; +import React from 'react'; + +const MyComponent = ({ text }) => {text}; + +export default { + title: 'Chat/Message/bubble', + component: MyComponent, +} as ComponentMeta; + +export const First: ComponentStoryObj = { + args: { + text: 'First', + }, +}; + +export const Second: ComponentStoryObj = { + storyName: 'Second Story', + args: { + text: 'Second', + }, +}; diff --git a/examples/expo-example/components/NestingExample/ChatMessageMessageInput.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageMessageInput.stories.tsx new file mode 100644 index 0000000000..5f55361998 --- /dev/null +++ b/examples/expo-example/components/NestingExample/ChatMessageMessageInput.stories.tsx @@ -0,0 +1,16 @@ +import type { ComponentMeta, ComponentStoryObj } from '@storybook/react-native'; +import { Text } from 'react-native'; +import React from 'react'; + +const MyComponent = ({ text }) => {text}; + +export default { + title: 'Chat/MessageInput', + component: MyComponent, +} as ComponentMeta; + +export const Basic: ComponentStoryObj = { + args: { + text: 'Hello', + }, +}; diff --git a/examples/expo-example/components/NestingExample/ChatMessageReactions.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageReactions.stories.tsx new file mode 100644 index 0000000000..bdf96ec80b --- /dev/null +++ b/examples/expo-example/components/NestingExample/ChatMessageReactions.stories.tsx @@ -0,0 +1,22 @@ +import type { ComponentMeta, ComponentStoryObj } from '@storybook/react-native'; +import { Text } from 'react-native'; +import React from 'react'; + +const MyComponent = ({ text }) => {text}; + +export default { + title: 'Chat/Message/Reactions', + component: MyComponent, +} as ComponentMeta; + +export const MessageOne: ComponentStoryObj = { + args: { + text: 'Hello', + }, +}; + +export const MessageTwo: ComponentStoryObj = { + args: { + text: 'Message two', + }, +}; diff --git a/examples/expo-example/components/NestingExample/StoryList.stories.tsx b/examples/expo-example/components/NestingExample/StoryList.stories.tsx new file mode 100644 index 0000000000..aafcea49c6 --- /dev/null +++ b/examples/expo-example/components/NestingExample/StoryList.stories.tsx @@ -0,0 +1,72 @@ +import { ComponentMeta, ComponentStoryObj } from '@storybook/react'; +import StoryListView from '@storybook/react-native/dist/preview/components/StoryListView/StoryListView'; +// import StoryListView from './StoryListView'; + +export default { + title: 'StoryListView', + component: StoryListView, +} as ComponentMeta; + +export const Basic: ComponentStoryObj = { + args: { + storyIndex: { + stories: { + 'chat-message--message-first': { + id: 'chat-message--message-first', + importPath: './components/NestingExample/ChatMessage.stories.tsx', + name: 'Message First', + title: 'Chat/Message', + }, + 'chat-message--message-second': { + id: 'chat-message--message-second', + importPath: './components/NestingExample/ChatMessage.stories.tsx', + name: 'Message Second', + title: 'Chat/Message', + }, + 'chat-message-bubble--first': { + id: 'chat-message-bubble--first', + importPath: './components/NestingExample/ChatMessageBubble.stories.tsx', + name: 'First', + title: 'Chat/Message/bubble', + }, + 'chat-message-bubble--second': { + id: 'chat-message-bubble--second', + importPath: './components/NestingExample/ChatMessageBubble.stories.tsx', + name: 'Second Story', + title: 'Chat/Message/bubble', + }, + 'chat-message-reactions--message-one': { + id: 'chat-message-reactions--message-one', + importPath: './components/NestingExample/ChatMessageReactions.stories.tsx', + name: 'Message One', + title: 'Chat/Message/Reactions', + }, + 'chat-message-reactions--message-two': { + id: 'chat-message-reactions--message-two', + importPath: './components/NestingExample/ChatMessageReactions.stories.tsx', + name: 'Message Two', + title: 'Chat/Message/Reactions', + }, + 'chat-messageinput--basic': { + id: 'chat-messageinput--basic', + importPath: './components/NestingExample/ChatMessageMessageInput.stories.tsx', + name: 'Basic', + title: 'Chat/MessageInput', + }, + 'storylistview--basic': { + id: 'storylistview--basic', + importPath: './components/NestingExample/StoryList.stories.tsx', + name: 'Basic', + title: 'StoryListView', + }, + 'text-control--basic': { + id: 'text-control--basic', + importPath: './components/ControlExamples/Text/Text.stories.tsx', + name: 'Basic', + title: 'Text control', + }, + }, + v: 3, + }, + }, +}; diff --git a/packages/react-native/package.json b/packages/react-native/package.json index c070ec962c..f4f8abafdd 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -72,6 +72,7 @@ }, "devDependencies": { "@types/react": "~18.0.27", + "@types/jest": "^29.4.3", "babel-jest": "^29.4.3", "jest": "^29.4.3", "react-test-renderer": "18.2.0" diff --git a/packages/react-native/src/preview/components/StoryListView/StoryListView.test.ts b/packages/react-native/src/preview/components/StoryListView/StoryListView.test.ts new file mode 100644 index 0000000000..c4e533339b --- /dev/null +++ b/packages/react-native/src/preview/components/StoryListView/StoryListView.test.ts @@ -0,0 +1,166 @@ +import { StoryIndex } from '@storybook/client-api'; +import { StoryGroup, getNestedStories } from './getStories'; + +const storyIndex: StoryIndex = { + stories: { + 'chat-message--message-first': { + id: 'chat-message--message-first', + importPath: './components/NestingExample/ChatMessage.stories.tsx', + name: 'Message First', + title: 'Chat/Message', + }, + 'chat-message--message-second': { + id: 'chat-message--message-second', + importPath: './components/NestingExample/ChatMessage.stories.tsx', + name: 'Message Second', + title: 'Chat/Message', + }, + 'chat-message-bubble--first': { + id: 'chat-message-bubble--first', + importPath: './components/NestingExample/ChatMessageBubble.stories.tsx', + name: 'First', + title: 'Chat/Message/bubble', + }, + 'chat-message-bubble--second': { + id: 'chat-message-bubble--second', + importPath: './components/NestingExample/ChatMessageBubble.stories.tsx', + name: 'Second Story', + title: 'Chat/Message/bubble', + }, + 'chat-message-reactions--message-one': { + id: 'chat-message-reactions--message-one', + importPath: './components/NestingExample/ChatMessageReactions.stories.tsx', + name: 'Message One', + title: 'Chat/Message/Reactions', + }, + 'chat-message-reactions--message-two': { + id: 'chat-message-reactions--message-two', + importPath: './components/NestingExample/ChatMessageReactions.stories.tsx', + name: 'Message Two', + title: 'Chat/Message/Reactions', + }, + 'chat-messageinput--basic': { + id: 'chat-messageinput--basic', + importPath: './components/NestingExample/ChatMessageMessageInput.stories.tsx', + name: 'Basic', + title: 'Chat/MessageInput', + }, + 'storylistview--basic': { + id: 'storylistview--basic', + importPath: './components/NestingExample/StoryList.stories.tsx', + name: 'Basic', + title: 'StoryListView', + }, + 'text-control--basic': { + id: 'text-control--basic', + importPath: './components/ControlExamples/Text/Text.stories.tsx', + name: 'Basic', + title: 'Text control', + }, + }, + v: 3, +}; + +const output: StoryGroup[] = [ + { + name: 'Chat', + stories: [], + children: [ + { + name: 'Message', + stories: [ + { + name: 'Message First', + title: 'Chat/Message', + id: 'chat-message--message-first', + importPath: './components/NestingExample/ChatMessage.stories.tsx', + }, + { + name: 'Message Second', + title: 'Chat/Message', + id: 'chat-message--message-second', + importPath: './components/NestingExample/ChatMessage.stories.tsx', + }, + ], + children: [ + { + name: 'bubble', + children: [], + stories: [ + { + name: 'First', + title: 'Chat/Message/bubble', + id: 'chat-message-bubble--first', + importPath: './components/NestingExample/ChatMessageBubble.stories.tsx', + }, + { + name: 'Second Story', + title: 'Chat/Message/bubble', + id: 'chat-message-bubble--second', + importPath: './components/NestingExample/ChatMessageBubble.stories.tsx', + }, + ], + }, + { + name: 'Reactions', + children: [], + stories: [ + { + name: 'Message One', + title: 'Chat/Message/Reactions', + id: 'chat-message-reactions--message-one', + importPath: './components/NestingExample/ChatMessageReactions.stories.tsx', + }, + { + name: 'Message Two', + title: 'Chat/Message/Reactions', + id: 'chat-message-reactions--message-two', + importPath: './components/NestingExample/ChatMessageReactions.stories.tsx', + }, + ], + }, + ], + }, + { + name: 'MessageInput', + children: [], + stories: [ + { + name: 'Basic', + title: 'Chat/MessageInput', + id: 'chat-messageinput--basic', + importPath: './components/NestingExample/ChatMessageMessageInput.stories.tsx', + }, + ], + }, + ], + }, + { + name: 'StoryListView', + stories: [ + { + name: 'Basic', + title: 'StoryListView', + id: 'storylistview--basic', + importPath: './components/NestingExample/StoryList.stories.tsx', + }, + ], + children: [], + }, + { + name: 'Text control', + stories: [ + { + name: 'Basic', + title: 'Text control', + id: 'text-control--basic', + importPath: './components/ControlExamples/Text/Text.stories.tsx', + }, + ], + children: [], + }, +]; + +test('story index to grouped list', () => { + expect(getNestedStories(storyIndex)).toEqual(output); +}); diff --git a/packages/react-native/src/preview/components/StoryListView/getNestedStories.ts b/packages/react-native/src/preview/components/StoryListView/getNestedStories.ts new file mode 100644 index 0000000000..d6c2221725 --- /dev/null +++ b/packages/react-native/src/preview/components/StoryListView/getNestedStories.ts @@ -0,0 +1,59 @@ +import { StoryIndex, StoryIndexEntry } from '@storybook/client-api'; + +export interface StoryGroup { + name: string; + children: StoryGroup[]; + stories: StoryIndexEntry[]; +} + +// recursive funciton that transforms storyIndex to be StoryGroup[] +export function getNestedStories(storyIndex: StoryIndex) { + const stories = Object.values(storyIndex.stories); + + const group: StoryGroup[] = []; + + stories.forEach((story) => { + const nameParts = story.title.split('/'); + formGroup(nameParts, story, group); + }); + + return group; +} + +function formGroup(nameParts: string[], story: StoryIndexEntry, group: StoryGroup[]) { + if (nameParts.length === 1) { + const current = group.find(({ name }) => name === nameParts[0]); + if (current) { + current.stories.push(story); + } else { + group.push({ + name: nameParts[0], + children: [], + stories: [story], + }); + } + return; + } + + const newParts = nameParts.slice(1); + + const currentListPart = group.find(({ name }) => name === nameParts[0]); + + if (!currentListPart) { + const toPush = { + name: nameParts[0], + children: [], + stories: [], + }; + + group.push(toPush); + + return formGroup(newParts, story, toPush.children); + } else if (!currentListPart.children) { + currentListPart.children = []; + } + + const newGroup = currentListPart.children; + + return formGroup(newParts, story, newGroup); +} diff --git a/yarn.lock b/yarn.lock index 6893c71ea9..def3432fa1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1807,6 +1807,13 @@ dependencies: jest-get-type "^29.4.3" +"@jest/expect-utils@^29.5.0": + version "29.5.0" + resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.5.0.tgz#f74fad6b6e20f924582dc8ecbf2cb800fe43a036" + integrity sha512-fmKzsidoXQT2KwnrwE0SQq3uj8Z763vzR8LnLBwC2qYWEFpjX8daRsk6rHUM1QvNlEW/UJXNXm59ztmJJWs2Mg== + dependencies: + jest-get-type "^29.4.3" + "@jest/expect@^29.4.3": version "29.4.3" resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.4.3.tgz#d31a28492e45a6bcd0f204a81f783fe717045c6e" @@ -1979,6 +1986,18 @@ "@types/yargs" "^17.0.8" chalk "^4.0.0" +"@jest/types@^29.5.0": + version "29.5.0" + resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.5.0.tgz#f59ef9b031ced83047c67032700d8c807d6e1593" + integrity sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog== + dependencies: + "@jest/schemas" "^29.4.3" + "@types/istanbul-lib-coverage" "^2.0.0" + "@types/istanbul-reports" "^3.0.0" + "@types/node" "*" + "@types/yargs" "^17.0.8" + chalk "^4.0.0" + "@jridgewell/gen-mapping@^0.1.0": version "0.1.1" resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996" @@ -3974,6 +3993,14 @@ dependencies: "@types/istanbul-lib-report" "*" +"@types/jest@^29.4.3": + version "29.5.2" + resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.2.tgz#86b4afc86e3a8f3005b297ed8a72494f89e6395b" + integrity sha512-mSoZVJF5YzGVCk+FsDxzDuH7s+SCkzrgKZzf0Z0T2WudhBUPoF6ktoTPC4R0ZoCPCV5xUvuU6ias5NvxcBcMMg== + dependencies: + expect "^29.0.0" + pretty-format "^29.0.0" + "@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": version "7.0.11" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" @@ -7941,6 +7968,17 @@ expand-brackets@^2.1.4: snapdragon "^0.8.1" to-regex "^3.0.1" +expect@^29.0.0: + version "29.5.0" + resolved "https://registry.yarnpkg.com/expect/-/expect-29.5.0.tgz#68c0509156cb2a0adb8865d413b137eeaae682f7" + integrity sha512-yM7xqUrCO2JdpFo4XpM82t+PJBFybdqoQuJLDGeDX2ij8NZzqRHyu3Hp188/JX7SWqud+7t4MUdvcgGBICMHZg== + dependencies: + "@jest/expect-utils" "^29.5.0" + jest-get-type "^29.4.3" + jest-matcher-utils "^29.5.0" + jest-message-util "^29.5.0" + jest-util "^29.5.0" + expect@^29.4.3: version "29.4.3" resolved "https://registry.yarnpkg.com/expect/-/expect-29.4.3.tgz#5e47757316df744fe3b8926c3ae8a3ebdafff7fe" @@ -10383,6 +10421,16 @@ jest-diff@^29.4.3: jest-get-type "^29.4.3" pretty-format "^29.4.3" +jest-diff@^29.5.0: + version "29.5.0" + resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.5.0.tgz#e0d83a58eb5451dcc1fa61b1c3ee4e8f5a290d63" + integrity sha512-LtxijLLZBduXnHSniy0WMdaHjmQnt3g5sa16W4p0HqukYTTsyTW3GD1q41TyGl5YFXj/5B2U6dlh5FM1LIMgxw== + dependencies: + chalk "^4.0.0" + diff-sequences "^29.4.3" + jest-get-type "^29.4.3" + pretty-format "^29.5.0" + jest-docblock@^29.4.3: version "29.4.3" resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-29.4.3.tgz#90505aa89514a1c7dceeac1123df79e414636ea8" @@ -10481,6 +10529,16 @@ jest-matcher-utils@^29.4.3: jest-get-type "^29.4.3" pretty-format "^29.4.3" +jest-matcher-utils@^29.5.0: + version "29.5.0" + resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.5.0.tgz#d957af7f8c0692c5453666705621ad4abc2c59c5" + integrity sha512-lecRtgm/rjIK0CQ7LPQwzCs2VwW6WAahA55YBuI+xqmhm7LAaxokSB8C97yJeYyT+HvQkH741StzpU41wohhWw== + dependencies: + chalk "^4.0.0" + jest-diff "^29.5.0" + jest-get-type "^29.4.3" + pretty-format "^29.5.0" + jest-message-util@^29.4.3: version "29.4.3" resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.4.3.tgz#65b5280c0fdc9419503b49d4f48d4999d481cb5b" @@ -10496,6 +10554,21 @@ jest-message-util@^29.4.3: slash "^3.0.0" stack-utils "^2.0.3" +jest-message-util@^29.5.0: + version "29.5.0" + resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.5.0.tgz#1f776cac3aca332ab8dd2e3b41625435085c900e" + integrity sha512-Kijeg9Dag6CKtIDA7O21zNTACqD5MD/8HfIV8pdD94vFyFuer52SigdC3IQMhab3vACxXMiFk+yMHNdbqtyTGA== + dependencies: + "@babel/code-frame" "^7.12.13" + "@jest/types" "^29.5.0" + "@types/stack-utils" "^2.0.0" + chalk "^4.0.0" + graceful-fs "^4.2.9" + micromatch "^4.0.4" + pretty-format "^29.5.0" + slash "^3.0.0" + stack-utils "^2.0.3" + jest-mock@^29.4.3: version "29.4.3" resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.4.3.tgz#23d84a20a74cdfff0510fdbeefb841ed57b0fe7e" @@ -10685,6 +10758,18 @@ jest-util@^29.4.3: graceful-fs "^4.2.9" picomatch "^2.2.3" +jest-util@^29.5.0: + version "29.5.0" + resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.5.0.tgz#24a4d3d92fc39ce90425311b23c27a6e0ef16b8f" + integrity sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ== + dependencies: + "@jest/types" "^29.5.0" + "@types/node" "*" + chalk "^4.0.0" + ci-info "^3.2.0" + graceful-fs "^4.2.9" + picomatch "^2.2.3" + jest-validate@^26.5.2: version "26.6.2" resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.6.2.tgz#23d380971587150467342911c3d7b4ac57ab20ec" @@ -13873,6 +13958,15 @@ pretty-format@^26.5.2, pretty-format@^26.6.2: ansi-styles "^4.0.0" react-is "^17.0.1" +pretty-format@^29.0.0, pretty-format@^29.5.0: + version "29.5.0" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.5.0.tgz#283134e74f70e2e3e7229336de0e4fce94ccde5a" + integrity sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw== + dependencies: + "@jest/schemas" "^29.4.3" + ansi-styles "^5.0.0" + react-is "^18.0.0" + pretty-hrtime@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" From 3153cc022f21de20ef4981bf9a3cb9e6912f4a4a Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sat, 3 Jun 2023 14:55:50 +0100 Subject: [PATCH 2/7] render nested stories --- .eslintignore | 3 +- .eslintrc.js | 5 +- .../NestingExample/StoryList.stories.tsx | 1 - packages/react-native/package.json | 3 + packages/react-native/src/hooks.tsx | 25 +- .../StoryListView/StoryListView.tsx | 217 +++++++++--------- ...tView.test.ts => getNestedStories.test.ts} | 77 ++++++- .../StoryListView/getNestedStories.ts | 36 ++- 8 files changed, 249 insertions(+), 118 deletions(-) rename packages/react-native/src/preview/components/StoryListView/{StoryListView.test.ts => getNestedStories.test.ts} (70%) diff --git a/.eslintignore b/.eslintignore index 6791c4fd40..8a2b2137a8 100644 --- a/.eslintignore +++ b/.eslintignore @@ -14,8 +14,7 @@ built-storybooks .yarn !.remarkrc.js !.babelrc.js -!.eslintrc.js -!.eslintrc-markdown.js +.eslintrc.js !.jest.config.js !.storybook examples/expo-example/metro.config.js diff --git a/.eslintrc.js b/.eslintrc.js index 6d81fb0192..4a0010ccc6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,7 @@ module.exports = { root: true, extends: '@react-native', - - // overrides: [...conf.overrides, { files: ['*.ts', '*.tsx'], rules: { 'no-undef': 'off' } }], + rules: { + 'react-native/no-inline-styles': 'off', + }, }; diff --git a/examples/expo-example/components/NestingExample/StoryList.stories.tsx b/examples/expo-example/components/NestingExample/StoryList.stories.tsx index aafcea49c6..96c0e400e2 100644 --- a/examples/expo-example/components/NestingExample/StoryList.stories.tsx +++ b/examples/expo-example/components/NestingExample/StoryList.stories.tsx @@ -1,6 +1,5 @@ import { ComponentMeta, ComponentStoryObj } from '@storybook/react'; import StoryListView from '@storybook/react-native/dist/preview/components/StoryListView/StoryListView'; -// import StoryListView from './StoryListView'; export default { title: 'StoryListView', diff --git a/packages/react-native/package.json b/packages/react-native/package.json index f4f8abafdd..493a4a21d7 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -38,6 +38,9 @@ "test": "jest" }, "jest": { + "modulePathIgnorePatterns": [ + "dist/" + ], "moduleFileExtensions": [ "ts", "tsx", diff --git a/packages/react-native/src/hooks.tsx b/packages/react-native/src/hooks.tsx index a9066bc0b6..2c74bd993b 100644 --- a/packages/react-native/src/hooks.tsx +++ b/packages/react-native/src/hooks.tsx @@ -5,6 +5,7 @@ import { useTheme as useEmotionTheme } from 'emotion-theming'; import type { Theme } from './preview/components/Shared/theme'; import type { ReactNativeFramework } from './types/types-6.0'; +import { StoryIndexEntry } from '@storybook/client-api'; const storyContextAtom = atom(null as StoryContext | null); @@ -41,11 +42,31 @@ export function useIsStorySelected(storyId: string) { } /** - * Hook that indicates if `title` is the currently selected story section. + * Hook that indicates if story kind (title) is the currently selected story section. */ export function useIsStorySectionSelected(title: string) { return useAtomValue( - useMemo(() => atom((get) => get(storyContextAtom)?.title === title), [title]) + useMemo( + () => + atom((get) => { + const contextTitle = get(storyContextAtom)?.title; + return contextTitle === title || contextTitle?.startsWith(`${title}/`); + }), + [title] + ) + ); +} + +export function useIsChildSelected(entries: StoryIndexEntry[]) { + return useAtomValue( + useMemo( + () => + atom((get) => { + const contextId = get(storyContextAtom)?.id; + return !!entries.find(({ id }) => id === contextId); + }), + [entries] + ) ); } diff --git a/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx b/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx index 3fdfc9763a..9bc9d2f4dd 100644 --- a/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx +++ b/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx @@ -1,12 +1,18 @@ import styled from '@emotion/native'; -import { addons, StoryKind } from '@storybook/addons'; -import { StoryIndex, StoryIndexEntry } from '@storybook/client-api'; +import { addons } from '@storybook/addons'; +import { StoryIndex } from '@storybook/client-api'; import Events from '@storybook/core-events'; import React, { useMemo, useState } from 'react'; -import { SectionList, SectionListRenderItem, StyleSheet, TextInputProps } from 'react-native'; +import { FlatList, ListRenderItem, StyleSheet, TextInputProps, View } from 'react-native'; +import { + useIsChildSelected, + useIsStorySectionSelected, + useIsStorySelected, + useTheme, +} from '../../../hooks'; import { Icon } from '../Shared/icons'; import { Box } from '../Shared/layout'; -import { useIsStorySelected, useIsStorySectionSelected, useTheme } from '../../../hooks'; +import { StoryGroup, filterNestedStories, getNestedStories } from './getNestedStories'; const SectionHeaderText = styled.Text<{ selected: boolean }>(({ theme }) => ({ fontSize: theme.storyList.fontSize, @@ -52,6 +58,7 @@ const SearchBar = (props: TextInputProps) => { return ( + ({ + ({ selected, theme, childSelected }) => ({ marginTop: theme.storyList.sectionSpacing, paddingHorizontal: theme.storyList.headerPaddingHorizontal, paddingVertical: theme.storyList.headerPaddingVertical, backgroundColor: selected ? theme.storyList.sectionActiveBackgroundColor : undefined, borderTopLeftRadius: theme.storyList.sectionBorderRadius, borderTopRightRadius: theme.storyList.sectionBorderRadius, + borderBottomLeftRadius: + selected && !childSelected ? theme.storyList.sectionBorderRadius : undefined, + borderBottomRightRadius: + selected && !childSelected ? theme.storyList.sectionBorderRadius : undefined, }) ); interface SectionProps { - title: string; + name: string; onPress: () => void; + isChildSelected: boolean; } -const SectionHeader = React.memo(({ title, onPress }: SectionProps) => { - const selected = useIsStorySectionSelected(title); +const SectionHeader = React.memo(({ name, onPress, isChildSelected }: SectionProps) => { + const selected = useIsStorySectionSelected(name) || isChildSelected; return ( - + - {title} + + {name} ); }); @@ -102,6 +121,7 @@ interface ListItemProps { storyId: string; title: string; kind: string; + isSiblingSelected: boolean; onPress: () => void; isLastItem: boolean; } @@ -128,75 +148,91 @@ const ItemTouchable = styled.TouchableOpacity<{ }) ); -const ListItem = React.memo( - ({ storyId, kind, title, isLastItem, onPress }: ListItemProps) => { - const selected = useIsStorySelected(storyId); - - const sectionSelected = useIsStorySectionSelected(kind); - - return ( - - - {title} - - ); - }, - (prevProps, nextProps) => prevProps.storyId === nextProps.storyId -); +const ListItem = ({ + storyId, + kind, + title, + isLastItem, + onPress, + isSiblingSelected, +}: ListItemProps) => { + const selected = useIsStorySelected(storyId); + + const sectionSelected = useIsStorySectionSelected(kind) || isSiblingSelected; + + return ( + + + + {title} + + ); +}; interface Props { storyIndex: StoryIndex; } -interface DataItem { - title: StoryKind; - data: StoryIndexEntry[]; -} - -const getStories = (storyIndex: StoryIndex): DataItem[] => { - if (!storyIndex) { - return []; - } - - const groupedStories = Object.values(storyIndex.stories).reduce((acc, story) => { - acc[story.title] = { - title: story.title, - data: (acc[story.title]?.data ?? []).concat(story), - }; - - return acc; - }, {} as Record); - - return Object.values(groupedStories); -}; - const styles = StyleSheet.create({ sectionList: { flex: 1 }, sectionListContentContainer: { paddingBottom: 6 }, }); -function keyExtractor(item: any, index) { - return item.id + index; +function keyExtractor(item: StoryGroup, index) { + return item.name + index; } +const RenderItem = ({ + item, + changeStory, +}: { + item: StoryGroup; + changeStory: (id: string) => void; +}) => { + const isChildSelected = useIsChildSelected(item.stories); + + return ( + <> + (item.stories[0] ? changeStory(item.stories[0].id) : null)} + /> + + {item.stories?.map((story, idx) => ( + changeStory(story.id)} + /> + ))} + + {item.children?.map((child, idx) => ( + + + + ))} + + ); +}; + const StoryListView = ({ storyIndex }: Props) => { - const originalData = useMemo(() => getStories(storyIndex), [storyIndex]); + const originalData = useMemo(() => getNestedStories(storyIndex), [storyIndex]); - const [data, setData] = useState(originalData); + const [data, setData] = useState(originalData); const theme = useTheme(); @@ -209,25 +245,7 @@ const StoryListView = ({ storyIndex }: Props) => { return; } - const checkValue = (value: string) => value.toLowerCase().includes(query.toLowerCase()); - - const filteredData = originalData.reduce((acc, story) => { - const hasTitle = checkValue(story.title); - - const hasKind = story.data.some((ref) => checkValue(ref.name)); - - if (hasTitle || hasKind) { - acc.push({ - ...story, - // in case the query matches component's title, all of its stories will be shown - data: !hasTitle ? story.data.filter((ref) => checkValue(ref.name)) : story.data, - }); - } - - return acc; - }, []); - - setData(filteredData); + setData(filterNestedStories(originalData, query)); }; const changeStory = (storyId: string) => { @@ -236,27 +254,9 @@ const StoryListView = ({ storyIndex }: Props) => { channel.emit(Events.SET_CURRENT_STORY, { storyId }); }; - const renderItem: SectionListRenderItem = React.useCallback( - ({ item, index, section }) => { - return ( - changeStory(item.id)} - /> - ); - }, - [] - ); - - const renderSectionHeader = React.useCallback( - ({ section: { title, data: sectionData } }) => ( - changeStory(sectionData[0].id)} /> - ), - [] - ); + const renderItem: ListRenderItem = React.useCallback(({ item }) => { + return ; + }, []); return ( @@ -265,7 +265,8 @@ const StoryListView = ({ storyIndex }: Props) => { onChangeText={handleChangeSearchText} placeholder="Find by name" /> - { ]} testID="Storybook.ListView" renderItem={renderItem} - renderSectionHeader={renderSectionHeader} keyExtractor={keyExtractor} - sections={data} - stickySectionHeadersEnabled={false} + data={data} /> ); diff --git a/packages/react-native/src/preview/components/StoryListView/StoryListView.test.ts b/packages/react-native/src/preview/components/StoryListView/getNestedStories.test.ts similarity index 70% rename from packages/react-native/src/preview/components/StoryListView/StoryListView.test.ts rename to packages/react-native/src/preview/components/StoryListView/getNestedStories.test.ts index c4e533339b..c6047610c0 100644 --- a/packages/react-native/src/preview/components/StoryListView/StoryListView.test.ts +++ b/packages/react-native/src/preview/components/StoryListView/getNestedStories.test.ts @@ -1,5 +1,5 @@ import { StoryIndex } from '@storybook/client-api'; -import { StoryGroup, getNestedStories } from './getStories'; +import { StoryGroup, filterNestedStories, getNestedStories } from './getNestedStories'; const storyIndex: StoryIndex = { stories: { @@ -64,10 +64,12 @@ const storyIndex: StoryIndex = { const output: StoryGroup[] = [ { name: 'Chat', + title: 'Chat', stories: [], children: [ { name: 'Message', + title: 'Chat/Message', stories: [ { name: 'Message First', @@ -86,6 +88,7 @@ const output: StoryGroup[] = [ { name: 'bubble', children: [], + title: 'Chat/Message/bubble', stories: [ { name: 'First', @@ -103,6 +106,7 @@ const output: StoryGroup[] = [ }, { name: 'Reactions', + title: 'Chat/Message/bubble', children: [], stories: [ { @@ -123,6 +127,7 @@ const output: StoryGroup[] = [ }, { name: 'MessageInput', + title: 'Chat/MessageInput', children: [], stories: [ { @@ -137,6 +142,7 @@ const output: StoryGroup[] = [ }, { name: 'StoryListView', + title: 'StoryListView', stories: [ { name: 'Basic', @@ -148,6 +154,7 @@ const output: StoryGroup[] = [ children: [], }, { + title: 'Text control', name: 'Text control', stories: [ { @@ -164,3 +171,71 @@ const output: StoryGroup[] = [ test('story index to grouped list', () => { expect(getNestedStories(storyIndex)).toEqual(output); }); + +test('filter nested stories', () => { + expect(filterNestedStories(output, 'bubble')).toEqual([ + { + title: 'Chat', + name: 'Chat', + stories: [], + children: [ + { + title: 'Chat/Message', + name: 'Message', + stories: [], + children: [ + { + title: 'Chat/Message/bubble', + name: 'bubble', + children: [], + stories: [ + { + name: 'First', + title: 'Chat/Message/bubble', + id: 'chat-message-bubble--first', + importPath: './components/NestingExample/ChatMessageBubble.stories.tsx', + }, + { + name: 'Second Story', + title: 'Chat/Message/bubble', + id: 'chat-message-bubble--second', + importPath: './components/NestingExample/ChatMessageBubble.stories.tsx', + }, + ], + }, + ], + }, + ], + }, + ]); + + expect(filterNestedStories(output, 'one')).toEqual([ + { + name: 'Chat', + title: 'Chat', + stories: [], + children: [ + { + title: 'Chat/Message', + name: 'Message', + stories: [], + children: [ + { + name: 'Reactions', + title: 'Chat/Message/Reactions', + children: [], + stories: [ + { + name: 'Message One', + title: 'Chat/Message/Reactions', + id: 'chat-message-reactions--message-one', + importPath: './components/NestingExample/ChatMessageReactions.stories.tsx', + }, + ], + }, + ], + }, + ], + }, + ]); +}); diff --git a/packages/react-native/src/preview/components/StoryListView/getNestedStories.ts b/packages/react-native/src/preview/components/StoryListView/getNestedStories.ts index d6c2221725..2362a785cd 100644 --- a/packages/react-native/src/preview/components/StoryListView/getNestedStories.ts +++ b/packages/react-native/src/preview/components/StoryListView/getNestedStories.ts @@ -2,6 +2,7 @@ import { StoryIndex, StoryIndexEntry } from '@storybook/client-api'; export interface StoryGroup { name: string; + title: string; children: StoryGroup[]; stories: StoryIndexEntry[]; } @@ -27,6 +28,7 @@ function formGroup(nameParts: string[], story: StoryIndexEntry, group: StoryGrou current.stories.push(story); } else { group.push({ + title: story.title, name: nameParts[0], children: [], stories: [story], @@ -40,8 +42,9 @@ function formGroup(nameParts: string[], story: StoryIndexEntry, group: StoryGrou const currentListPart = group.find(({ name }) => name === nameParts[0]); if (!currentListPart) { - const toPush = { + const toPush: StoryGroup = { name: nameParts[0], + title: story.title, children: [], stories: [], }; @@ -57,3 +60,34 @@ function formGroup(nameParts: string[], story: StoryIndexEntry, group: StoryGrou return formGroup(newParts, story, newGroup); } + +export const filterNestedStories = (stories: StoryGroup[], filter: string) => { + const filteredStories: StoryGroup[] = []; + + stories.forEach((story) => { + const filtered = filterStoryGroup(story, filter); + if (filtered) { + filteredStories.push(filtered); + } + }); + + return filteredStories; +}; + +const filterStoryGroup = (story: StoryGroup, filter: string) => { + const filteredStories = story.stories.filter( + (item) => + item.title.toLowerCase().includes(filter.toLowerCase()) || + item.name.toLowerCase().includes(filter.toLowerCase()) + ); + + const filteredChildren = filterNestedStories(story.children, filter); + + if (filteredStories.length || filteredChildren.length) { + return { + ...story, + children: filteredChildren, + stories: filteredStories, + }; + } +}; From ffd101c812c733c47c641222c718c150f251b9e2 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sun, 18 Jun 2023 19:04:09 +0100 Subject: [PATCH 3/7] update rn --- .../.storybook/{Storybook.tsx => index.tsx} | 0 examples/expo-example/App.tsx | 2 +- examples/expo-example/package.json | 2 +- yarn.lock | 484 ++++++++++-------- 4 files changed, 275 insertions(+), 213 deletions(-) rename examples/expo-example/.storybook/{Storybook.tsx => index.tsx} (100%) diff --git a/examples/expo-example/.storybook/Storybook.tsx b/examples/expo-example/.storybook/index.tsx similarity index 100% rename from examples/expo-example/.storybook/Storybook.tsx rename to examples/expo-example/.storybook/index.tsx diff --git a/examples/expo-example/App.tsx b/examples/expo-example/App.tsx index d64ddb1845..e752b20208 100644 --- a/examples/expo-example/App.tsx +++ b/examples/expo-example/App.tsx @@ -1 +1 @@ -export { default } from './.storybook/Storybook'; +export { default } from './.storybook'; diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json index 03915b3704..d3cc38a970 100644 --- a/examples/expo-example/package.json +++ b/examples/expo-example/package.json @@ -39,7 +39,7 @@ "expo": "^48.0.4", "react": "18.2.0", "react-dom": "18.2.0", - "react-native": "0.71.3", + "react-native": "0.71.8", "react-native-safe-area-context": "4.5.0", "react-native-web": "~0.18.10" }, diff --git a/yarn.lock b/yarn.lock index 2092fdff94..425b53f64a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2696,13 +2696,13 @@ dependencies: serve-static "^1.13.1" -"@react-native-community/cli-doctor@^10.1.1": - version "10.2.0" - resolved "https://registry.yarnpkg.com/@react-native-community/cli-doctor/-/cli-doctor-10.2.0.tgz#6050030eea9200ce3c35de360cf8455e126b4d45" - integrity sha512-yLxJazUmNSPslHxeeev0gLvsK0nQan8BmGWbtqPz2WwbIbD89vbytC7G96OxiQXr46iWEWAwEJiTTdgA7jlA5Q== +"@react-native-community/cli-doctor@^10.2.2": + version "10.2.5" + resolved "https://registry.yarnpkg.com/@react-native-community/cli-doctor/-/cli-doctor-10.2.5.tgz#e5e28c66c2373f05a94b296a8ec637f8df736707" + integrity sha512-1YbzXvsldBmSw1MmBsXB74bKiHXKNCjlb2ByLgkfTiarpSvETYam3g5vex0N+qc0Cdkzkq+8NznE744LFhnUpw== dependencies: "@react-native-community/cli-config" "^10.1.1" - "@react-native-community/cli-platform-ios" "^10.2.0" + "@react-native-community/cli-platform-ios" "^10.2.5" "@react-native-community/cli-tools" "^10.1.1" chalk "^4.1.2" command-exists "^1.2.8" @@ -2718,7 +2718,7 @@ sudo-prompt "^9.0.0" wcwidth "^1.0.1" -"@react-native-community/cli-hermes@^10.1.3": +"@react-native-community/cli-hermes@^10.2.0": version "10.2.0" resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-10.2.0.tgz#cc252f435b149f74260bc918ce22fdf58033a87e" integrity sha512-urfmvNeR8IiO/Sd92UU3xPO+/qI2lwCWQnxOkWaU/i2EITFekE47MD6MZrfVulRVYRi5cuaFqKZO/ccOdOB/vQ== @@ -2729,18 +2729,7 @@ hermes-profile-transformer "^0.0.6" ip "^1.1.5" -"@react-native-community/cli-platform-android@10.1.3": - version "10.1.3" - resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-10.1.3.tgz#8380799cd4d3f9a0ca568b0f5b4ae9e462ce3669" - integrity sha512-8YZEpBL6yd9l4CIoFcLOgrV8x2GDujdqrdWrNsNERDAbsiFwqAQvfjyyb57GAZVuEPEJCoqUlGlMCwOh3XQb9A== - dependencies: - "@react-native-community/cli-tools" "^10.1.1" - chalk "^4.1.2" - execa "^1.0.0" - glob "^7.1.3" - logkitty "^0.7.1" - -"@react-native-community/cli-platform-android@^10.2.0": +"@react-native-community/cli-platform-android@10.2.0", "@react-native-community/cli-platform-android@^10.2.0": version "10.2.0" resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-10.2.0.tgz#0bc689270a5f1d9aaf9e723181d43ca4dbfffdef" integrity sha512-CBenYwGxwFdObZTn1lgxWtMGA5ms2G/ALQhkS+XTAD7KHDrCxFF9yT/fnAjFZKM6vX/1TqGI1RflruXih3kAhw== @@ -2751,21 +2740,22 @@ glob "^7.1.3" logkitty "^0.7.1" -"@react-native-community/cli-platform-ios@10.1.1": - version "10.1.1" - resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-10.1.1.tgz#39ed6810117d8e7330d3aa4d85818fb6ae358785" - integrity sha512-EB9/L8j1LqrqyfJtLRixU+d8FIP6Pr83rEgUgXgya/u8wk3h/bvX70w+Ff2skwjdPLr5dLUQ/n5KFX4r3bsNmA== +"@react-native-community/cli-platform-ios@10.2.1": + version "10.2.1" + resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-10.2.1.tgz#2e6bd2cb6d48cbb8720d7b7265bb1bab80745f72" + integrity sha512-hz4zu4Y6eyj7D0lnZx8Mf2c2si8y+zh/zUTgCTaPPLzQD8jSZNNBtUUiA1cARm2razpe8marCZ1QbTMAGbf3mg== dependencies: "@react-native-community/cli-tools" "^10.1.1" chalk "^4.1.2" execa "^1.0.0" + fast-xml-parser "^4.0.12" glob "^7.1.3" ora "^5.4.1" -"@react-native-community/cli-platform-ios@^10.2.0": - version "10.2.0" - resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-10.2.0.tgz#be21c0e3bbf17358d540cc23e5556bf679f6322e" - integrity sha512-hIPK3iL/mL+0ChXmQ9uqqzNOKA48H+TAzg+hrxQLll/6dNMxDeK9/wZpktcsh8w+CyhqzKqVernGcQs7tPeKGw== +"@react-native-community/cli-platform-ios@^10.2.5": + version "10.2.5" + resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-10.2.5.tgz#7888c74b83099885bf9e6d52170c6e663ad971ee" + integrity sha512-hq+FZZuSBK9z82GLQfzdNDl8vbFx5UlwCLFCuTtNCROgBoapFtVZQKRP2QBftYNrQZ0dLAb01gkwxagHsQCFyg== dependencies: "@react-native-community/cli-tools" "^10.1.1" chalk "^4.1.2" @@ -2774,21 +2764,21 @@ glob "^7.1.3" ora "^5.4.1" -"@react-native-community/cli-plugin-metro@^10.1.1": - version "10.2.0" - resolved "https://registry.yarnpkg.com/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-10.2.0.tgz#83cabbc04c80f7e94f88ed998b72c7d572c6f094" - integrity sha512-9eiJrKYuauEDkQLCrjJUh7tS9T0oaMQqVUSSSuyDG6du7HQcfaR4mSf21wK75jvhKiwcQLpsFmMdctAb+0v+Cg== +"@react-native-community/cli-plugin-metro@^10.2.2": + version "10.2.3" + resolved "https://registry.yarnpkg.com/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-10.2.3.tgz#419e0155a50951c3329818fba51cb5021a7294f1" + integrity sha512-jHi2oDuTePmW4NEyVT8JEGNlIYcnFXCSV2ZMp4rnDrUk4TzzyvS3IMvDlESEmG8Kry8rvP0KSUx/hTpy37Sbkw== dependencies: "@react-native-community/cli-server-api" "^10.1.1" "@react-native-community/cli-tools" "^10.1.1" chalk "^4.1.2" execa "^1.0.0" - metro "0.73.8" - metro-config "0.73.8" - metro-core "0.73.8" - metro-react-native-babel-transformer "0.73.8" - metro-resolver "0.73.8" - metro-runtime "0.73.8" + metro "0.73.10" + metro-config "0.73.10" + metro-core "0.73.10" + metro-react-native-babel-transformer "0.73.10" + metro-resolver "0.73.10" + metro-runtime "0.73.10" readline "^1.3.0" "@react-native-community/cli-server-api@^10.1.1": @@ -2828,17 +2818,17 @@ dependencies: joi "^17.2.1" -"@react-native-community/cli@10.1.3": - version "10.1.3" - resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-10.1.3.tgz#ad610c46da9fc7c717272024ec757dc646726506" - integrity sha512-kzh6bYLGN1q1q0IiczKSP1LTrovFeVzppYRTKohPI9VdyZwp7b5JOgaQMB/Ijtwm3MxBDrZgV9AveH/eUmUcKQ== +"@react-native-community/cli@10.2.2": + version "10.2.2" + resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-10.2.2.tgz#3fa438ba7f19f83e07bc337765fc1cabdcf2cac2" + integrity sha512-aZVcVIqj+OG6CrliR/Yn8wHxrvyzbFBY9cj7n0MvRw/P54QUru2nNqUTSSbqv0Qaa297yHJbe6kFDojDMSTM8Q== dependencies: "@react-native-community/cli-clean" "^10.1.1" "@react-native-community/cli-config" "^10.1.1" "@react-native-community/cli-debugger-ui" "^10.0.0" - "@react-native-community/cli-doctor" "^10.1.1" - "@react-native-community/cli-hermes" "^10.1.3" - "@react-native-community/cli-plugin-metro" "^10.1.1" + "@react-native-community/cli-doctor" "^10.2.2" + "@react-native-community/cli-hermes" "^10.2.0" + "@react-native-community/cli-plugin-metro" "^10.2.2" "@react-native-community/cli-server-api" "^10.1.1" "@react-native-community/cli-tools" "^10.1.1" "@react-native-community/cli-types" "^10.0.0" @@ -3974,6 +3964,11 @@ resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35" integrity sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg== +"@types/is-function@^1.0.0": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.1.tgz#2d024eace950c836d9e3335a66b97960ae41d022" + integrity sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q== + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1": version "2.0.4" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44" @@ -9966,6 +9961,11 @@ is-fullwidth-code-point@^3.0.0: resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== +is-function@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08" + integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ== + is-generator-fn@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118" @@ -10092,7 +10092,7 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4: dependencies: isobject "^3.0.1" -is-regex@^1.0.4, is-regex@^1.1.4: +is-regex@^1.0.4, is-regex@^1.1.2, is-regex@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958" integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg== @@ -10259,6 +10259,11 @@ isobject@^3.0.0, isobject@^3.0.1: resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg== +isobject@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0" + integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA== + isomorphic-unfetch@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz#87341d5f4f7b63843d468438128cb087b7c3e98f" @@ -10907,6 +10912,11 @@ jsc-android@^250231.0.0: resolved "https://registry.yarnpkg.com/jsc-android/-/jsc-android-250231.0.0.tgz#91720f8df382a108872fa4b3f558f33ba5e95262" integrity sha512-rS46PvsjYmdmuz1OAWXY/1kCYG7pnf1TBqeTiOJr1iDz7s5DLxxC9n/ZMknLDxzYzNVfI7R95MH10emSSG1Wuw== +jsc-safe-url@^0.2.2: + version "0.2.4" + resolved "https://registry.yarnpkg.com/jsc-safe-url/-/jsc-safe-url-0.2.4.tgz#141c14fbb43791e88d5dc64e85a374575a83477a" + integrity sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q== + jscodeshift@^0.13.1: version "0.13.1" resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.13.1.tgz#69bfe51e54c831296380585c6d9e733512aecdef" @@ -11714,63 +11724,63 @@ methods@~1.1.2: resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w== -metro-babel-transformer@0.73.7: - version "0.73.7" - resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.73.7.tgz#561ffa0336eb6d7d112e7128e957114c729fdb71" - integrity sha512-s7UVkwovGTEXYEQrv5hcmSBbFJ9s9lhCRNMScn4Itgj3UMdqRr9lU8DXKEFlJ7osgRxN6n5+eXqcvhE4B1H1VQ== +metro-babel-transformer@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.73.10.tgz#b27732fa3869f397246ee8ecf03b64622ab738c1" + integrity sha512-Yv2myTSnpzt/lTyurLvqYbBkytvUJcLHN8XD3t7W6rGiLTQPzmf1zypHQLphvcAXtCWBOXFtH7KLOSi2/qMg+A== dependencies: "@babel/core" "^7.20.0" hermes-parser "0.8.0" - metro-source-map "0.73.7" + metro-source-map "0.73.10" nullthrows "^1.1.1" -metro-babel-transformer@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.73.8.tgz#521374cb9234ba126f3f8d63588db5901308b4ed" - integrity sha512-GO6H/W2RjZ0/gm1pIvdO9EP34s3XN6kzoeyxqmfqKfYhJmYZf1SzXbyiIHyMbJNwJVrsKuHqu32+GopTlKscWw== +metro-babel-transformer@0.73.9: + version "0.73.9" + resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.73.9.tgz#bec8aaaf1bbdc2e469fde586fde455f8b2a83073" + integrity sha512-DlYwg9wwYIZTHtic7dyD4BP0SDftoltZ3clma76nHu43blMWsCnrImHeHsAVne3XsQ+RJaSRxhN5nkG2VyVHwA== dependencies: "@babel/core" "^7.20.0" hermes-parser "0.8.0" - metro-source-map "0.73.8" + metro-source-map "0.73.9" nullthrows "^1.1.1" -metro-cache-key@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-cache-key/-/metro-cache-key-0.73.8.tgz#afc9f63454edbd9d207544445a66e8a4e119462d" - integrity sha512-VzFGu4kJGIkLjyDgVoM2ZxIHlMdCZWMqVIux9N+EeyMVMvGXTiXW8eGROgxzDhVjyR58IjfMsYpRCKz5dR+2ew== +metro-cache-key@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-cache-key/-/metro-cache-key-0.73.10.tgz#8d63591187d295b62a80aed64a87864b1e9d67a2" + integrity sha512-JMVDl/EREDiUW//cIcUzRjKSwE2AFxVWk47cFBer+KA4ohXIG2CQPEquT56hOw1Y1s6gKNxxs1OlAOEsubrFjw== -metro-cache@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.73.8.tgz#85e2d7f7c7c74d1f942b7ecd168f7aceb987d883" - integrity sha512-/uFbTIw813Rvb8kSAIHvax9gWl41dtgjY2SpJLNIBLdQ6oFZ3CVo3ahZIiEZOrCeHl9xfGn5tmvNb8CEFa/Q5w== +metro-cache@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.73.10.tgz#02e9cb7c1e42aab5268d2ecce35ad8f2c08891de" + integrity sha512-wPGlQZpdVlM404m7MxJqJ+hTReDr5epvfPbt2LerUAHY9RN99w61FeeAe25BMZBwgUgDtAsfGlJ51MBHg8MAqw== dependencies: - metro-core "0.73.8" + metro-core "0.73.10" rimraf "^3.0.2" -metro-config@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.73.8.tgz#8f6c22c94528919635c6688ed8d2ad8a10c70b27" - integrity sha512-sAYq+llL6ZAfro64U99ske8HcKKswxX4wIZbll9niBKG7TkWm7tfMY1jO687XEmE4683rHncZeBRav9pLngIzg== +metro-config@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.73.10.tgz#a9ec3d0a1290369e3f46c467a4c4f6dd43acc223" + integrity sha512-wIlybd1Z9I8K2KcStTiJxTB7OK529dxFgogNpKCTU/3DxkgAASqSkgXnZP6kVyqjh5EOWAKFe5U6IPic7kXDdQ== dependencies: cosmiconfig "^5.0.5" jest-validate "^26.5.2" - metro "0.73.8" - metro-cache "0.73.8" - metro-core "0.73.8" - metro-runtime "0.73.8" + metro "0.73.10" + metro-cache "0.73.10" + metro-core "0.73.10" + metro-runtime "0.73.10" -metro-core@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.73.8.tgz#a31ba7d7bfe3f4c2ac2c7a2493aa4229ecad701e" - integrity sha512-Aew4dthbZf8bRRjlYGL3cnai3+LKYTf6mc7YS2xLQRWtgGZ1b/H8nQtBvXZpfRYFcS84UeEQ10vwIf5eR3qPdQ== +metro-core@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.73.10.tgz#feb3c228aa8c0dde71d8e4cef614cc3a1dc3bbd7" + integrity sha512-5uYkajIxKyL6W45iz/ftNnYPe1l92CvF2QJeon1CHsMXkEiOJxEjo41l+iSnO/YodBGrmMCyupSO4wOQGUc0lw== dependencies: lodash.throttle "^4.1.1" - metro-resolver "0.73.8" + metro-resolver "0.73.10" -metro-file-map@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-file-map/-/metro-file-map-0.73.8.tgz#88d666e7764e1b0adf5fd634d91e97e3135d2db7" - integrity sha512-CM552hUO9om02jJdLszOCIDADKNaaeVz8CjYXItndvgr5jmFlQYAR+UMvaDzeT8oYdAV1DXAljma2CS2UBymPg== +metro-file-map@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-file-map/-/metro-file-map-0.73.10.tgz#55bd906fb7c1bef8e1a31df4b29a3ef4b49f0b5a" + integrity sha512-XOMWAybeaXyD6zmVZPnoCCL2oO3rp4ta76oUlqWP0skBzhFxVtkE/UtDwApEMUY361JeBBago647gnKiARs+1g== dependencies: abort-controller "^3.0.0" anymatch "^3.0.3" @@ -11788,35 +11798,79 @@ metro-file-map@0.73.8: optionalDependencies: fsevents "^2.3.2" -metro-hermes-compiler@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-hermes-compiler/-/metro-hermes-compiler-0.73.8.tgz#c522e2c97afc8bdc249755d88146a75720bc2498" - integrity sha512-2d7t+TEoQLk+jyXgBykmAtPPJK2B46DB3qUYIMKDFDDaKzCljrojyVuGgQq6SM1f95fe6HDAQ3K9ihTjeB90yw== +metro-hermes-compiler@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-hermes-compiler/-/metro-hermes-compiler-0.73.10.tgz#4525a7835c803a5d0b3b05c6619202e2273d630f" + integrity sha512-rTRWEzkVrwtQLiYkOXhSdsKkIObnL+Jqo+IXHI7VEK2aSLWRAbtGNqECBs44kbOUypDYTFFE+WLtoqvUWqYkWg== -metro-inspector-proxy@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-inspector-proxy/-/metro-inspector-proxy-0.73.8.tgz#67d5aadfc33fe97f61c716eb168db4bd5d0e3c96" - integrity sha512-F0QxwDTox0TDeXVRN7ZmI7BknBjPDVKQ1ZeKznFBiMa0SXiD1kzoksfpDbZ6hTEKrhVM9Ep0YQmC7avwZouOnA== +metro-inspector-proxy@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-inspector-proxy/-/metro-inspector-proxy-0.73.10.tgz#752fed2ab88199c9dcc3369c3d59da6c5b954a51" + integrity sha512-CEEvocYc5xCCZBtGSIggMCiRiXTrnBbh8pmjKQqm9TtJZALeOGyt5pXUaEkKGnhrXETrexsg6yIbsQHhEvVfvQ== dependencies: connect "^3.6.5" debug "^2.2.0" ws "^7.5.1" yargs "^17.5.1" -metro-minify-terser@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-minify-terser/-/metro-minify-terser-0.73.8.tgz#a0fe857d6aaf99cba3a2aef59ee06ac409682c6b" - integrity sha512-pnagyXAoMPhihWrHRIWqCxrP6EJ8Hfugv5RXBb6HbOANmwajn2uQuzeu18+dXaN1yPoDCMCgpg/UA4ibFN5jtQ== +metro-minify-terser@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-minify-terser/-/metro-minify-terser-0.73.10.tgz#557eab3a512b90b7779350ff5d25a215c4dbe61f" + integrity sha512-uG7TSKQ/i0p9kM1qXrwbmY3v+6BrMItsOcEXcSP8Z+68bb+t9HeVK0T/hIfUu1v1PEnonhkhfzVsaP8QyTd5lQ== dependencies: terser "^5.15.0" -metro-minify-uglify@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-minify-uglify/-/metro-minify-uglify-0.73.8.tgz#b2e2430014c340479db4fc393a2ea4c5bad75ecd" - integrity sha512-9wZqKfraVfmtMXdOzRyan+6r1woQXqqa4KeXfVh7+Mxl+5+J0Lmw6EvTrWawsaOEpvpn32q9MfoHC1d8plDJwA== +metro-minify-uglify@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-minify-uglify/-/metro-minify-uglify-0.73.10.tgz#4de79056d502479733854c90f2075374353ea154" + integrity sha512-eocnSeJKnLz/UoYntVFhCJffED7SLSgbCHgNvI6ju6hFb6EFHGJT9OLbkJWeXaWBWD3Zw5mYLS8GGqGn/CHZPA== dependencies: uglify-es "^3.1.9" +metro-react-native-babel-preset@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.73.10.tgz#304b24bb391537d2c987732cc0a9774be227d3f6" + integrity sha512-1/dnH4EHwFb2RKEKx34vVDpUS3urt2WEeR8FYim+ogqALg4sTpG7yeQPxWpbgKATezt4rNfqAANpIyH19MS4BQ== + dependencies: + "@babel/core" "^7.20.0" + "@babel/plugin-proposal-async-generator-functions" "^7.0.0" + "@babel/plugin-proposal-class-properties" "^7.0.0" + "@babel/plugin-proposal-export-default-from" "^7.0.0" + "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0" + "@babel/plugin-proposal-object-rest-spread" "^7.0.0" + "@babel/plugin-proposal-optional-catch-binding" "^7.0.0" + "@babel/plugin-proposal-optional-chaining" "^7.0.0" + "@babel/plugin-syntax-dynamic-import" "^7.0.0" + "@babel/plugin-syntax-export-default-from" "^7.0.0" + "@babel/plugin-syntax-flow" "^7.18.0" + "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0" + "@babel/plugin-syntax-optional-chaining" "^7.0.0" + "@babel/plugin-transform-arrow-functions" "^7.0.0" + "@babel/plugin-transform-async-to-generator" "^7.0.0" + "@babel/plugin-transform-block-scoping" "^7.0.0" + "@babel/plugin-transform-classes" "^7.0.0" + "@babel/plugin-transform-computed-properties" "^7.0.0" + "@babel/plugin-transform-destructuring" "^7.0.0" + "@babel/plugin-transform-flow-strip-types" "^7.0.0" + "@babel/plugin-transform-function-name" "^7.0.0" + "@babel/plugin-transform-literals" "^7.0.0" + "@babel/plugin-transform-modules-commonjs" "^7.0.0" + "@babel/plugin-transform-named-capturing-groups-regex" "^7.0.0" + "@babel/plugin-transform-parameters" "^7.0.0" + "@babel/plugin-transform-react-display-name" "^7.0.0" + "@babel/plugin-transform-react-jsx" "^7.0.0" + "@babel/plugin-transform-react-jsx-self" "^7.0.0" + "@babel/plugin-transform-react-jsx-source" "^7.0.0" + "@babel/plugin-transform-runtime" "^7.0.0" + "@babel/plugin-transform-shorthand-properties" "^7.0.0" + "@babel/plugin-transform-spread" "^7.0.0" + "@babel/plugin-transform-sticky-regex" "^7.0.0" + "@babel/plugin-transform-template-literals" "^7.0.0" + "@babel/plugin-transform-typescript" "^7.5.0" + "@babel/plugin-transform-unicode-regex" "^7.0.0" + "@babel/template" "^7.0.0" + react-refresh "^0.4.0" + metro-react-native-babel-preset@0.73.7: version "0.73.7" resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.73.7.tgz#78e1ce448aa9a5cf3651c0ebe73cb225465211b4" @@ -11861,10 +11915,10 @@ metro-react-native-babel-preset@0.73.7: "@babel/template" "^7.0.0" react-refresh "^0.4.0" -metro-react-native-babel-preset@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.73.8.tgz#04908f264f5d99c944ae20b5b11f659431328431" - integrity sha512-spNrcQJTbQntEIqJnCA6yL4S+dzV9fXCk7U+Rm7yJasZ4o4Frn7jP23isu7FlZIp1Azx1+6SbP7SgQM+IP5JgQ== +metro-react-native-babel-preset@0.73.9: + version "0.73.9" + resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.73.9.tgz#ef54637dd20f025197beb49e71309a9c539e73e2" + integrity sha512-AoD7v132iYDV4K78yN2OLgTPwtAKn0XlD2pOhzyBxiI8PeXzozhbKyPV7zUOJUPETj+pcEVfuYj5ZN/8+bhbCw== dependencies: "@babel/core" "^7.20.0" "@babel/plugin-proposal-async-generator-functions" "^7.0.0" @@ -11905,111 +11959,111 @@ metro-react-native-babel-preset@0.73.8: "@babel/template" "^7.0.0" react-refresh "^0.4.0" -metro-react-native-babel-transformer@0.73.7: - version "0.73.7" - resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.73.7.tgz#a92055fd564cd403255cc34f925c5e99ce457565" - integrity sha512-73HW8betjX+VPm3iqsMBe8F/F2Tt+hONO6YJwcF7FonTqQYW1oTz0dOp0dClZGfHUXxpJBz6Vuo7J6TpdzDD+w== +metro-react-native-babel-transformer@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.73.10.tgz#4e20a9ce131b873cda0b5a44d3eb4002134a64b8" + integrity sha512-4G/upwqKdmKEjmsNa92/NEgsOxUWOygBVs+FXWfXWKgybrmcjh3NoqdRYrROo9ZRA/sB9Y/ZXKVkWOGKHtGzgg== dependencies: "@babel/core" "^7.20.0" babel-preset-fbjs "^3.4.0" hermes-parser "0.8.0" - metro-babel-transformer "0.73.7" - metro-react-native-babel-preset "0.73.7" - metro-source-map "0.73.7" + metro-babel-transformer "0.73.10" + metro-react-native-babel-preset "0.73.10" + metro-source-map "0.73.10" nullthrows "^1.1.1" -metro-react-native-babel-transformer@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.73.8.tgz#cbcd4b243216878431dc4311ce46f02a928e3991" - integrity sha512-oH/LCCJPauteAE28c0KJAiSrkV+1VJbU0PwA9UwaWnle+qevs/clpKQ8LrIr33YbBj4CiI1kFoVRuNRt5h4NFg== +metro-react-native-babel-transformer@0.73.9: + version "0.73.9" + resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.73.9.tgz#4f4f0cfa5119bab8b53e722fabaf90687d0cbff0" + integrity sha512-DSdrEHuQ22ixY7DyipyKkIcqhOJrt5s6h6X7BYJCP9AMUfXOwLe2biY3BcgJz5GOXv8/Akry4vTCvQscVS1otQ== dependencies: "@babel/core" "^7.20.0" babel-preset-fbjs "^3.4.0" hermes-parser "0.8.0" - metro-babel-transformer "0.73.8" - metro-react-native-babel-preset "0.73.8" - metro-source-map "0.73.8" + metro-babel-transformer "0.73.9" + metro-react-native-babel-preset "0.73.9" + metro-source-map "0.73.9" nullthrows "^1.1.1" -metro-resolver@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.73.8.tgz#65cc158575d130363296f66a33257c7971228640" - integrity sha512-GiBWont7/OgAftkkj2TiEp+Gf1PYZUk8xV4MbtnQjIKyy3MlGY3GbpMQ1BHih9GUQqlF0n9jsUlC2K5P0almXQ== +metro-resolver@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.73.10.tgz#c39a3bd8d33e5d78cb256110d29707d8d49ed0be" + integrity sha512-HeXbs+0wjakaaVQ5BI7eT7uqxlZTc9rnyw6cdBWWMgUWB++KpoI0Ge7Hi6eQAOoVAzXC3m26mPFYLejpzTWjng== dependencies: absolute-path "^0.0.0" -metro-runtime@0.73.7: - version "0.73.7" - resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.73.7.tgz#9f3a7f3ff668c1a87370650e32b47d8f6329fd1e" - integrity sha512-2fxRGrF8FyrwwHY0TCitdUljzutfW6CWEpdvPilfrs8p0PI5X8xOWg8ficeYtw+DldHtHIAL2phT59PqzHTyVA== +metro-runtime@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.73.10.tgz#c3de19d17e75ffe1a145778d99422e7ffc208768" + integrity sha512-EpVKm4eN0Fgx2PEWpJ5NiMArV8zVoOin866jIIvzFLpmkZz1UEqgjf2JAfUJnjgv3fjSV3JqeGG2vZCaGQBTow== dependencies: "@babel/runtime" "^7.0.0" react-refresh "^0.4.0" -metro-runtime@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.73.8.tgz#dadae7c154fbbde24390cf7f7e7d934a2768cd18" - integrity sha512-M+Bg9M4EN5AEpJ8NkiUsawD75ifYvYfHi05w6QzHXaqOrsTeaRbbeLuOGCYxU2f/tPg17wQV97/rqUQzs9qEtA== +metro-runtime@0.73.9: + version "0.73.9" + resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.73.9.tgz#0b24c0b066b8629ee855a6e5035b65061fef60d5" + integrity sha512-d5Hs83FpKB9r8q8Vb95+fa6ESpwysmPr4lL1I2rM2qXAFiO7OAPT9Bc23WmXgidkBtD0uUFdB2lG+H1ATz8rZg== dependencies: "@babel/runtime" "^7.0.0" react-refresh "^0.4.0" -metro-source-map@0.73.7: - version "0.73.7" - resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.73.7.tgz#8e9f850a72d60ea7ace05b984f981c8ec843e7a0" - integrity sha512-gbC/lfUN52TtQhEsTTA+987MaFUpQlufuCI05blLGLosDcFCsARikHsxa65Gtslm/rG2MqvFLiPA5hviONNv9g== +metro-source-map@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.73.10.tgz#28e09a28f1a2f7a4f8d0845b845cbed74e2f48f9" + integrity sha512-NAGv14701p/YaFZ76KzyPkacBw/QlEJF1f8elfs23N1tC33YyKLDKvPAzFJiYqjdcFvuuuDCA8JCXd2TgLxNPw== dependencies: "@babel/traverse" "^7.20.0" "@babel/types" "^7.20.0" invariant "^2.2.4" - metro-symbolicate "0.73.7" + metro-symbolicate "0.73.10" nullthrows "^1.1.1" - ob1 "0.73.7" + ob1 "0.73.10" source-map "^0.5.6" vlq "^1.0.0" -metro-source-map@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.73.8.tgz#5134174e3d43de26ad331b95f637944c6547d441" - integrity sha512-wozFXuBYMAy7b8BCYwC+qoXsvayVJBHWtSTlSLva99t+CoUSG9JO9kg1umzbOz28YYPxKmvb/wbnLMkHdas2cA== +metro-source-map@0.73.9: + version "0.73.9" + resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.73.9.tgz#89ca41f6346aeb12f7f23496fa363e520adafebe" + integrity sha512-l4VZKzdqafipriETYR6lsrwtavCF1+CMhCOY9XbyWeTrpGSNgJQgdeJpttzEZTHQQTLR0csQo0nD1ef3zEP6IQ== dependencies: "@babel/traverse" "^7.20.0" "@babel/types" "^7.20.0" invariant "^2.2.4" - metro-symbolicate "0.73.8" + metro-symbolicate "0.73.9" nullthrows "^1.1.1" - ob1 "0.73.8" + ob1 "0.73.9" source-map "^0.5.6" vlq "^1.0.0" -metro-symbolicate@0.73.7: - version "0.73.7" - resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.73.7.tgz#40e4cda81f8030b86afe391b5e686a0b06822b0a" - integrity sha512-571ThWmX5o8yGNzoXjlcdhmXqpByHU/bSZtWKhtgV2TyIAzYCYt4hawJAS5+/qDazUvjHdm8BbdqFUheM0EKNQ== +metro-symbolicate@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.73.10.tgz#7853a9a8fbfd615a5c9db698fffc685441ac880f" + integrity sha512-PmCe3TOe1c/NVwMlB+B17me951kfkB3Wve5RqJn+ErPAj93od1nxicp6OJe7JT4QBRnpUP8p9tw2sHKqceIzkA== dependencies: invariant "^2.2.4" - metro-source-map "0.73.7" + metro-source-map "0.73.10" nullthrows "^1.1.1" source-map "^0.5.6" through2 "^2.0.1" vlq "^1.0.0" -metro-symbolicate@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.73.8.tgz#96920f607bce484283d822ee5fe18d932f69c03d" - integrity sha512-xkBAcceYYp0GGdCCuMzkCF1ejHsd0lYlbKBkjSRgM0Nlj80VapPaSwumYoAvSaDxcbkvS7/sCjURGp5DsSFgRQ== +metro-symbolicate@0.73.9: + version "0.73.9" + resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.73.9.tgz#cb452299a36e5b86b2826e7426d51221635c48bf" + integrity sha512-4TUOwxRHHqbEHxRqRJ3wZY5TA8xq7AHMtXrXcjegMH9FscgYztsrIG9aNBUBS+VLB6g1qc6BYbfIgoAnLjCDyw== dependencies: invariant "^2.2.4" - metro-source-map "0.73.8" + metro-source-map "0.73.9" nullthrows "^1.1.1" source-map "^0.5.6" through2 "^2.0.1" vlq "^1.0.0" -metro-transform-plugins@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-transform-plugins/-/metro-transform-plugins-0.73.8.tgz#07be7fd94a448ea1b245ab02ce7d277d757f9a32" - integrity sha512-IxjlnB5eA49M0WfvPEzvRikK3Rr6bECUUfcZt/rWpSphq/mttgyLYcHQ+VTZZl0zHolC3cTLwgoDod4IIJBn1A== +metro-transform-plugins@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-transform-plugins/-/metro-transform-plugins-0.73.10.tgz#1b762330cbbedb6c18438edc3d76b063c88882af" + integrity sha512-D4AgD3Vsrac+4YksaPmxs/0ocT67bvwTkFSIgWWeDvWwIG0U1iHzTS9f8Bvb4PITnXryDoFtjI6OWF7uOpGxpA== dependencies: "@babel/core" "^7.20.0" "@babel/generator" "^7.20.0" @@ -12017,29 +12071,29 @@ metro-transform-plugins@0.73.8: "@babel/traverse" "^7.20.0" nullthrows "^1.1.1" -metro-transform-worker@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro-transform-worker/-/metro-transform-worker-0.73.8.tgz#701a006c2b4d93f1bb24802f3f2834c963153db9" - integrity sha512-B8kR6lmcvyG4UFSF2QDfr/eEnWJvg0ZadooF8Dg6m/3JSm9OAqfSoC0YrWqAuvtWImNDnbeKWN7/+ns44Hv6tg== +metro-transform-worker@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro-transform-worker/-/metro-transform-worker-0.73.10.tgz#bb401dbd7b10a6fe443a5f7970cba38425efece0" + integrity sha512-IySvVubudFxahxOljWtP0QIMMpgUrCP0bW16cz2Enof0PdumwmR7uU3dTbNq6S+XTzuMHR+076aIe4VhPAWsIQ== dependencies: "@babel/core" "^7.20.0" "@babel/generator" "^7.20.0" "@babel/parser" "^7.20.0" "@babel/types" "^7.20.0" babel-preset-fbjs "^3.4.0" - metro "0.73.8" - metro-babel-transformer "0.73.8" - metro-cache "0.73.8" - metro-cache-key "0.73.8" - metro-hermes-compiler "0.73.8" - metro-source-map "0.73.8" - metro-transform-plugins "0.73.8" + metro "0.73.10" + metro-babel-transformer "0.73.10" + metro-cache "0.73.10" + metro-cache-key "0.73.10" + metro-hermes-compiler "0.73.10" + metro-source-map "0.73.10" + metro-transform-plugins "0.73.10" nullthrows "^1.1.1" -metro@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/metro/-/metro-0.73.8.tgz#25f014e4064eb34a4833c316e0a9094528061a8c" - integrity sha512-2EMJME9w5x7Uzn+DnQ4hzWr33u/aASaOBGdpf4lxbrlk6/vl4UBfX1sru6KU535qc/0Z1BMt4Vq9qsP3ZGFmWg== +metro@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/metro/-/metro-0.73.10.tgz#d9a0efb1e403e3aee5cf5140e0a96a7220c23901" + integrity sha512-J2gBhNHFtc/Z48ysF0B/bfTwUwaRDLjNv7egfhQCc+934dpXcjJG2KZFeuybF+CvA9vo4QUi56G2U+RSAJ5tsA== dependencies: "@babel/code-frame" "^7.0.0" "@babel/core" "^7.20.0" @@ -12062,24 +12116,25 @@ metro@0.73.8: image-size "^0.6.0" invariant "^2.2.4" jest-worker "^27.2.0" + jsc-safe-url "^0.2.2" lodash.throttle "^4.1.1" - metro-babel-transformer "0.73.8" - metro-cache "0.73.8" - metro-cache-key "0.73.8" - metro-config "0.73.8" - metro-core "0.73.8" - metro-file-map "0.73.8" - metro-hermes-compiler "0.73.8" - metro-inspector-proxy "0.73.8" - metro-minify-terser "0.73.8" - metro-minify-uglify "0.73.8" - metro-react-native-babel-preset "0.73.8" - metro-resolver "0.73.8" - metro-runtime "0.73.8" - metro-source-map "0.73.8" - metro-symbolicate "0.73.8" - metro-transform-plugins "0.73.8" - metro-transform-worker "0.73.8" + metro-babel-transformer "0.73.10" + metro-cache "0.73.10" + metro-cache-key "0.73.10" + metro-config "0.73.10" + metro-core "0.73.10" + metro-file-map "0.73.10" + metro-hermes-compiler "0.73.10" + metro-inspector-proxy "0.73.10" + metro-minify-terser "0.73.10" + metro-minify-uglify "0.73.10" + metro-react-native-babel-preset "0.73.10" + metro-resolver "0.73.10" + metro-runtime "0.73.10" + metro-source-map "0.73.10" + metro-symbolicate "0.73.10" + metro-transform-plugins "0.73.10" + metro-transform-worker "0.73.10" mime-types "^2.1.27" node-fetch "^2.2.0" nullthrows "^1.1.1" @@ -12979,15 +13034,15 @@ nx@15.9.2, "nx@>=15.5.2 < 16": "@nrwl/nx-win32-arm64-msvc" "15.9.2" "@nrwl/nx-win32-x64-msvc" "15.9.2" -ob1@0.73.7: - version "0.73.7" - resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.73.7.tgz#14c9b6ddc26cf99144f59eb542d7ae956e6b3192" - integrity sha512-DfelfvR843KADhSUATGGhuepVMRcf5VQX+6MQLy5AW0BKDLlO7Usj6YZeAAZP7P86QwsoTxB0RXCFiA7t6S1IQ== +ob1@0.73.10: + version "0.73.10" + resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.73.10.tgz#bf0a2e8922bb8687ddca82327c5cf209414a1bd4" + integrity sha512-aO6EYC+QRRCkZxVJhCWhLKgVjhNuD6Gu1riGjxrIm89CqLsmKgxzYDDEsktmKsoDeRdWGQM5EdMzXDl5xcVfsw== -ob1@0.73.8: - version "0.73.8" - resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.73.8.tgz#c569f1a15ce2d04da6fd70293ad44b5a93b11978" - integrity sha512-1F7j+jzD+edS6ohQP7Vg5f3yiIk5i3x1uLrNIHOmLHWzWK1t3zrDpjnoXghccdVlsU+UjbyURnDynm4p0GgXeA== +ob1@0.73.9: + version "0.73.9" + resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.73.9.tgz#d5677a0dd3e2f16ad84231278d79424436c38c59" + integrity sha512-kHOzCOFXmAM26fy7V/YuXNKne2TyRiXbFAvPBIbuedJCZZWQZHLdPzMeXJI4Egt6IcfDttRzN3jQ90wOwq1iNw== object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" @@ -14373,10 +14428,10 @@ react-native-codegen@^0.71.5: jscodeshift "^0.13.1" nullthrows "^1.1.1" -react-native-gradle-plugin@^0.71.15: - version "0.71.15" - resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.15.tgz#9e6b506f30729fe8eb086981702f4e3c891d2b13" - integrity sha512-7S3pAuPaQJlhax6EZ4JMsDNpj05TfuzX9gPgWLrFfAIWIFLuJ6aDQYAZy2TEI9QJALPoWrj8LWaqP/DGYh14pw== +react-native-gradle-plugin@^0.71.18: + version "0.71.19" + resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz#3379e28341fcd189bc1f4691cefc84c1a4d7d232" + integrity sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ== react-native-modal-datetime-picker@^14.0.0: version "14.0.1" @@ -14415,15 +14470,15 @@ react-native-web@~0.18.10: postcss-value-parser "^4.2.0" styleq "^0.1.2" -react-native@0.71.3: - version "0.71.3" - resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.71.3.tgz#0faab799c49e61ba12df9e6525c3ac7d595d673c" - integrity sha512-RYJXCcQGa4NTfKiPgl92eRDUuQ6JGDnHqFEzRwJSqEx9lWvlvRRIebstJfurzPDKLQWQrvITR7aI7e09E25mLw== +react-native@0.71.8: + version "0.71.8" + resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.71.8.tgz#4314145341c49448cf7465b93ced52a433a5e191" + integrity sha512-ftMAuhpgTkbHU9brrqsEyxcNrpYvXKeATY+if22Nfhhg1zW+6wn95w9otwTnA3xHkljPCbng8mUhmmERjGEl7g== dependencies: "@jest/create-cache-key-function" "^29.2.1" - "@react-native-community/cli" "10.1.3" - "@react-native-community/cli-platform-android" "10.1.3" - "@react-native-community/cli-platform-ios" "10.1.1" + "@react-native-community/cli" "10.2.2" + "@react-native-community/cli-platform-android" "10.2.0" + "@react-native-community/cli-platform-ios" "10.2.1" "@react-native/assets" "1.0.0" "@react-native/normalize-color" "2.1.0" "@react-native/polyfills" "2.0.0" @@ -14436,16 +14491,16 @@ react-native@0.71.3: jest-environment-node "^29.2.1" jsc-android "^250231.0.0" memoize-one "^5.0.0" - metro-react-native-babel-transformer "0.73.7" - metro-runtime "0.73.7" - metro-source-map "0.73.7" + metro-react-native-babel-transformer "0.73.9" + metro-runtime "0.73.9" + metro-source-map "0.73.9" mkdirp "^0.5.1" nullthrows "^1.1.1" pretty-format "^26.5.2" promise "^8.3.0" react-devtools-core "^4.26.1" react-native-codegen "^0.71.5" - react-native-gradle-plugin "^0.71.15" + react-native-gradle-plugin "^0.71.18" react-refresh "^0.4.0" react-shallow-renderer "^16.15.0" regenerator-runtime "^0.13.2" @@ -16071,11 +16126,18 @@ tar@^6.0.2, tar@^6.0.5, tar@^6.1.11, tar@^6.1.2: mkdirp "^1.0.3" yallist "^4.0.0" -telejson@^6.0.8, telejson@^7.0.4: - version "7.0.4" - resolved "https://registry.yarnpkg.com/telejson/-/telejson-7.0.4.tgz#2e88c0af9566b4f687622ed490588312b2bec186" - integrity sha512-J4QEuCnYGXAI9KSN7RXK0a0cOW2ONpjc4IQbInGZ6c3stvplLAYyZjTnScrRd8deXVjNCFV1wXcLC7SObDuQYA== +telejson@^6.0.8: + version "6.0.8" + resolved "https://registry.yarnpkg.com/telejson/-/telejson-6.0.8.tgz#1c432db7e7a9212c1fbd941c3e5174ec385148f7" + integrity sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg== dependencies: + "@types/is-function" "^1.0.0" + global "^4.4.0" + is-function "^1.0.2" + is-regex "^1.1.2" + is-symbol "^1.0.3" + isobject "^4.0.0" + lodash "^4.17.21" memoizerific "^1.11.3" temp-dir@1.0.0, temp-dir@^1.0.0: From 5498e9ed0cfd205ad8987685efd8cca3089479ca Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sun, 18 Jun 2023 19:58:48 +0100 Subject: [PATCH 4/7] vscode config --- .gitignore | 2 -- .vscode/settings.json | 3 +++ yarn.lock | 32 +++++--------------------------- 3 files changed, 8 insertions(+), 29 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.gitignore b/.gitignore index 07aa4008cf..09fd94db3f 100644 --- a/.gitignore +++ b/.gitignore @@ -2,8 +2,6 @@ node_modules *.log .idea *.iml -.vscode/* -!.vscode/launch.json *.sw* npm-shrinkwrap.json dist diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..25fa6215fd --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/yarn.lock b/yarn.lock index 425b53f64a..ef5c9342fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3964,11 +3964,6 @@ resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35" integrity sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg== -"@types/is-function@^1.0.0": - version "1.0.1" - resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.1.tgz#2d024eace950c836d9e3335a66b97960ae41d022" - integrity sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q== - "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1": version "2.0.4" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44" @@ -9961,11 +9956,6 @@ is-fullwidth-code-point@^3.0.0: resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== -is-function@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08" - integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ== - is-generator-fn@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118" @@ -10092,7 +10082,7 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4: dependencies: isobject "^3.0.1" -is-regex@^1.0.4, is-regex@^1.1.2, is-regex@^1.1.4: +is-regex@^1.0.4, is-regex@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958" integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg== @@ -10259,11 +10249,6 @@ isobject@^3.0.0, isobject@^3.0.1: resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg== -isobject@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0" - integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA== - isomorphic-unfetch@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz#87341d5f4f7b63843d468438128cb087b7c3e98f" @@ -16126,18 +16111,11 @@ tar@^6.0.2, tar@^6.0.5, tar@^6.1.11, tar@^6.1.2: mkdirp "^1.0.3" yallist "^4.0.0" -telejson@^6.0.8: - version "6.0.8" - resolved "https://registry.yarnpkg.com/telejson/-/telejson-6.0.8.tgz#1c432db7e7a9212c1fbd941c3e5174ec385148f7" - integrity sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg== +telejson@^6.0.8, telejson@^7.0.4: + version "7.1.0" + resolved "https://registry.yarnpkg.com/telejson/-/telejson-7.1.0.tgz#1ef7a0dd57eeb52cde933126f61bcc296c170f52" + integrity sha512-jFJO4P5gPebZAERPkJsqMAQ0IMA1Hi0AoSfxpnUaV6j6R2SZqlpkbS20U6dEUtA3RUYt2Ak/mTlkQzHH9Rv/hA== dependencies: - "@types/is-function" "^1.0.0" - global "^4.4.0" - is-function "^1.0.2" - is-regex "^1.1.2" - is-symbol "^1.0.3" - isobject "^4.0.0" - lodash "^4.17.21" memoizerific "^1.11.3" temp-dir@1.0.0, temp-dir@^1.0.0: From cfbd4694cc9783c39b7306f8b5826a0f587a3e48 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sun, 18 Jun 2023 20:29:05 +0100 Subject: [PATCH 5/7] minimise stories --- .../StoryListView/StoryListView.tsx | 57 ++++++++++++------- .../StoryListView/getNestedStories.ts | 10 ++++ 2 files changed, 48 insertions(+), 19 deletions(-) diff --git a/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx b/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx index 9bc9d2f4dd..75f7a8c7cb 100644 --- a/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx +++ b/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx @@ -12,7 +12,12 @@ import { } from '../../../hooks'; import { Icon } from '../Shared/icons'; import { Box } from '../Shared/layout'; -import { StoryGroup, filterNestedStories, getNestedStories } from './getNestedStories'; +import { + StoryGroup, + filterNestedStories, + getNestedStories, + findFirstChildStory, +} from './getNestedStories'; const SectionHeaderText = styled.Text<{ selected: boolean }>(({ theme }) => ({ fontSize: theme.storyList.fontSize, @@ -200,31 +205,45 @@ const RenderItem = ({ }) => { const isChildSelected = useIsChildSelected(item.stories); + const firstChild = findFirstChildStory(item); + + const firstChildSelected = useIsStorySelected(firstChild?.id); + + const [showChildren, setShowChildren] = useState(true); + return ( <> (item.stories[0] ? changeStory(item.stories[0].id) : null)} + onPress={() => { + if (firstChildSelected) { + setShowChildren(!showChildren); + } else if (firstChild) { + changeStory(firstChild.id); + } + }} /> - {item.stories?.map((story, idx) => ( - changeStory(story.id)} - /> - ))} - - {item.children?.map((child, idx) => ( - - - - ))} + {showChildren && + item.stories?.map((story, idx) => ( + changeStory(story.id)} + /> + ))} + + {showChildren && + item.children?.map((child, idx) => ( + + + + ))} ); }; diff --git a/packages/react-native/src/preview/components/StoryListView/getNestedStories.ts b/packages/react-native/src/preview/components/StoryListView/getNestedStories.ts index 2362a785cd..ddf0e17acb 100644 --- a/packages/react-native/src/preview/components/StoryListView/getNestedStories.ts +++ b/packages/react-native/src/preview/components/StoryListView/getNestedStories.ts @@ -91,3 +91,13 @@ const filterStoryGroup = (story: StoryGroup, filter: string) => { }; } }; + +export const findFirstChildStory = (story: StoryGroup): StoryIndexEntry | undefined => { + if (story.stories.length) { + return story.stories[0]; + } + + if (story.children.length) { + return findFirstChildStory(story.children[0]); + } +}; From 853376970821011fa13b16136f55821882674356 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sun, 18 Jun 2023 20:41:29 +0100 Subject: [PATCH 6/7] fix tests --- .../components/StoryListView/getNestedStories.test.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-native/src/preview/components/StoryListView/getNestedStories.test.ts b/packages/react-native/src/preview/components/StoryListView/getNestedStories.test.ts index c6047610c0..a1412147a8 100644 --- a/packages/react-native/src/preview/components/StoryListView/getNestedStories.test.ts +++ b/packages/react-native/src/preview/components/StoryListView/getNestedStories.test.ts @@ -64,7 +64,7 @@ const storyIndex: StoryIndex = { const output: StoryGroup[] = [ { name: 'Chat', - title: 'Chat', + title: 'Chat/Message', stories: [], children: [ { @@ -106,7 +106,7 @@ const output: StoryGroup[] = [ }, { name: 'Reactions', - title: 'Chat/Message/bubble', + title: 'Chat/Message/Reactions', children: [], stories: [ { @@ -175,7 +175,7 @@ test('story index to grouped list', () => { test('filter nested stories', () => { expect(filterNestedStories(output, 'bubble')).toEqual([ { - title: 'Chat', + title: 'Chat/Message', name: 'Chat', stories: [], children: [ @@ -212,7 +212,7 @@ test('filter nested stories', () => { expect(filterNestedStories(output, 'one')).toEqual([ { name: 'Chat', - title: 'Chat', + title: 'Chat/Message', stories: [], children: [ { From ac1f75381aaa6ed15c502ac0a3c387126b86eee8 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Thu, 13 Jul 2023 19:47:54 +0100 Subject: [PATCH 7/7] add folder icon and chevron thing --- .../BackgroundExample/Background.stories.tsx | 2 +- .../BackgroundCsf.stories.tsx | 2 +- .../ControlExamples/Array/Array.stories.tsx | 2 +- .../Boolean/Boolean.stories.tsx | 2 +- .../ControlExamples/Color/Color.stories.tsx | 2 +- .../ControlExample/ControlExample.stories.tsx | 2 +- .../ControlExamples/Date/Date.stories.tsx | 2 +- .../ControlExamples/Object/Object.stories.tsx | 2 +- .../ControlExamples/Radio/Radio.stories.tsx | 2 +- .../SelectWithNumber.stories.tsx | 2 +- .../ControlExamples/Select/Select.stories.tsx | 2 +- .../ControlExamples/Text/Text.stories.tsx | 2 +- .../NestingExample/ChatMessage.stories.tsx | 2 +- .../ChatMessageBubble.stories.tsx | 2 +- .../ChatMessageBubbleAgain.stories.tsx | 24 +++++++ .../ChatMessageMessageInput.stories.tsx | 2 +- .../ChatMessageReactions.stories.tsx | 2 +- .../SafeAreaInside.stories.tsx | 2 +- .../SafeAreaOutside.stories.tsx | 2 +- .../SafeAreaExample/UsableArea.stories.tsx | 2 +- .../src/preview/components/Shared/icons.tsx | 3 + .../StoryListView/StoryListView.tsx | 67 +++++++++++++------ 22 files changed, 91 insertions(+), 41 deletions(-) create mode 100644 examples/expo-example/components/NestingExample/ChatMessageBubbleAgain.stories.tsx diff --git a/examples/expo-example/components/BackgroundExample/Background.stories.tsx b/examples/expo-example/components/BackgroundExample/Background.stories.tsx index c9deaf12b6..6acf447078 100644 --- a/examples/expo-example/components/BackgroundExample/Background.stories.tsx +++ b/examples/expo-example/components/BackgroundExample/Background.stories.tsx @@ -6,7 +6,7 @@ import { Text } from 'react-native'; // Remember to also include '@storybook/addon-ondevice-backgrounds' in your addons config: see /examples/expo-example/.storybook/main.js addDecorator(withBackgrounds); -storiesOf('Background StoriesOf', module) +storiesOf('BackgroundExample/Background StoriesOf', module) .addParameters({ backgrounds: { default: 'warm', diff --git a/examples/expo-example/components/BackgroundExample/BackgroundCsf.stories.tsx b/examples/expo-example/components/BackgroundExample/BackgroundCsf.stories.tsx index 1aa8a2d210..2d4c8a8ca9 100644 --- a/examples/expo-example/components/BackgroundExample/BackgroundCsf.stories.tsx +++ b/examples/expo-example/components/BackgroundExample/BackgroundCsf.stories.tsx @@ -12,7 +12,7 @@ const styles = StyleSheet.create({ }); const BackgroundMeta: ComponentMeta = { - title: 'Background CSF', + title: 'BackgroundExample/Background CSF', component: Background, decorators: [withBackgrounds], parameters: { diff --git a/examples/expo-example/components/ControlExamples/Array/Array.stories.tsx b/examples/expo-example/components/ControlExamples/Array/Array.stories.tsx index 45511f8c22..221bbcadd3 100644 --- a/examples/expo-example/components/ControlExamples/Array/Array.stories.tsx +++ b/examples/expo-example/components/ControlExamples/Array/Array.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react-native'; import { Array } from './Array'; const ArrayMeta: ComponentMeta = { - title: 'Array control', + title: 'ControlExamples/Array control', component: Array, args: { list: ['a', 'b', 'c'], diff --git a/examples/expo-example/components/ControlExamples/Boolean/Boolean.stories.tsx b/examples/expo-example/components/ControlExamples/Boolean/Boolean.stories.tsx index b509697146..b8af1f01c0 100644 --- a/examples/expo-example/components/ControlExamples/Boolean/Boolean.stories.tsx +++ b/examples/expo-example/components/ControlExamples/Boolean/Boolean.stories.tsx @@ -2,7 +2,7 @@ import { ComponentMeta, ComponentStoryObj } from '@storybook/react-native'; import { Switch } from './Boolean'; const BooleanExample: ComponentMeta = { - title: 'Boolean Control', + title: 'ControlExamples/Boolean Control', component: Switch, }; diff --git a/examples/expo-example/components/ControlExamples/Color/Color.stories.tsx b/examples/expo-example/components/ControlExamples/Color/Color.stories.tsx index e98d1dfb81..b1d5c1fe1e 100644 --- a/examples/expo-example/components/ControlExamples/Color/Color.stories.tsx +++ b/examples/expo-example/components/ControlExamples/Color/Color.stories.tsx @@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react-native'; import { Color } from './Color'; const ColorMeta: ComponentMeta = { - title: 'Color control', + title: 'ControlExamples/Color control', parameters: { notes: '- test' }, argTypes: { color: { diff --git a/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx b/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx index 88014f6c85..705b0ee1d0 100644 --- a/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx +++ b/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx @@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react-native'; import { ControlExample } from './ControlExample'; export default { - title: 'Control Example', + title: 'ControlExamples/Control Example', component: ControlExample, args: { name: 'Storyteller', diff --git a/examples/expo-example/components/ControlExamples/Date/Date.stories.tsx b/examples/expo-example/components/ControlExamples/Date/Date.stories.tsx index a7932b6d90..f782269155 100644 --- a/examples/expo-example/components/ControlExamples/Date/Date.stories.tsx +++ b/examples/expo-example/components/ControlExamples/Date/Date.stories.tsx @@ -5,7 +5,7 @@ import { DateString } from './Date'; const date = new Date(1983, 1, 25); const DateMeta: ComponentMeta = { - title: 'Date', + title: 'ControlExamples/Date', component: DateString, args: { date: date }, argTypes: { date: { control: { type: 'date' } } }, diff --git a/examples/expo-example/components/ControlExamples/Object/Object.stories.tsx b/examples/expo-example/components/ControlExamples/Object/Object.stories.tsx index 93fd208b6a..a948ad2c33 100644 --- a/examples/expo-example/components/ControlExamples/Object/Object.stories.tsx +++ b/examples/expo-example/components/ControlExamples/Object/Object.stories.tsx @@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react-native'; import { Movie } from './Object'; const ObjectMeta: ComponentMeta = { - title: 'Object control', + title: 'ControlExamples/Object control', component: Movie, args: { filmInfo: { diff --git a/examples/expo-example/components/ControlExamples/Radio/Radio.stories.tsx b/examples/expo-example/components/ControlExamples/Radio/Radio.stories.tsx index 9173eb8a51..23dcfc1504 100644 --- a/examples/expo-example/components/ControlExamples/Radio/Radio.stories.tsx +++ b/examples/expo-example/components/ControlExamples/Radio/Radio.stories.tsx @@ -5,7 +5,7 @@ import { Radio } from './Radio'; const radio_stations = ['104.8MHz', '909 kHz', '90FM']; const RadioMeta: ComponentMeta = { - title: 'Radio control', + title: 'ControlExamples/Radio control', component: Radio, args: { selection: radio_stations[0], diff --git a/examples/expo-example/components/ControlExamples/Reproductions/SelectWithNumber.stories.tsx b/examples/expo-example/components/ControlExamples/Reproductions/SelectWithNumber.stories.tsx index 12f67c5c35..764aa658e3 100644 --- a/examples/expo-example/components/ControlExamples/Reproductions/SelectWithNumber.stories.tsx +++ b/examples/expo-example/components/ControlExamples/Reproductions/SelectWithNumber.stories.tsx @@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStoryObj } from '@storybook/react'; import { MyButton } from './SelectWithNumber'; export default { - title: 'SelectWithNumber', + title: 'ControlExamples/SelectWithNumber', component: MyButton, } as ComponentMeta; diff --git a/examples/expo-example/components/ControlExamples/Select/Select.stories.tsx b/examples/expo-example/components/ControlExamples/Select/Select.stories.tsx index a2e1016024..c295d739f5 100644 --- a/examples/expo-example/components/ControlExamples/Select/Select.stories.tsx +++ b/examples/expo-example/components/ControlExamples/Select/Select.stories.tsx @@ -5,7 +5,7 @@ import { SelectExample } from './Select'; const arrows = { ArrowUp: '⬆', ArrowDown: '⬇', ArrowLeft: '⬅️', ArrowRight: '➡️' }; const SelectExampleMeta: ComponentMeta = { - title: 'Select control', + title: 'ControlExamples/Select control', component: SelectExample, argTypes: { arrow: { diff --git a/examples/expo-example/components/ControlExamples/Text/Text.stories.tsx b/examples/expo-example/components/ControlExamples/Text/Text.stories.tsx index f8dbcb4a0f..987f2cbf6b 100644 --- a/examples/expo-example/components/ControlExamples/Text/Text.stories.tsx +++ b/examples/expo-example/components/ControlExamples/Text/Text.stories.tsx @@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react-native'; import { Heading } from './Text'; const TextMeta: ComponentMeta = { - title: 'Text control', + title: 'ControlExamples/Text control', component: Heading, args: { text: 'Hello world!' }, }; diff --git a/examples/expo-example/components/NestingExample/ChatMessage.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessage.stories.tsx index f7d52e9d75..173317cf46 100644 --- a/examples/expo-example/components/NestingExample/ChatMessage.stories.tsx +++ b/examples/expo-example/components/NestingExample/ChatMessage.stories.tsx @@ -5,7 +5,7 @@ import React from 'react'; const MyComponent = ({ text }) => {text}; export default { - title: 'Chat/Message', + title: 'NestingExample/Message', component: MyComponent, } as ComponentMeta; diff --git a/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx index bede1d4e2c..762b8080b0 100644 --- a/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx +++ b/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx @@ -5,7 +5,7 @@ import React from 'react'; const MyComponent = ({ text }) => {text}; export default { - title: 'Chat/Message/bubble', + title: 'NestingExample/Message/bubble', component: MyComponent, } as ComponentMeta; diff --git a/examples/expo-example/components/NestingExample/ChatMessageBubbleAgain.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageBubbleAgain.stories.tsx new file mode 100644 index 0000000000..9c6e426dcd --- /dev/null +++ b/examples/expo-example/components/NestingExample/ChatMessageBubbleAgain.stories.tsx @@ -0,0 +1,24 @@ +import type { ComponentMeta, ComponentStoryObj } from '@storybook/react-native'; +import { Text } from 'react-native'; +import React from 'react'; + +const MyComponent = ({ text }) => {text}; + +export default { + title: + 'NestingExample/Message/bubble/a very long name for a title that just keeps going and going', + component: MyComponent, +} as ComponentMeta; + +export const First: ComponentStoryObj = { + args: { + text: 'First', + }, +}; + +export const Second: ComponentStoryObj = { + storyName: 'Second Story', + args: { + text: 'Second', + }, +}; diff --git a/examples/expo-example/components/NestingExample/ChatMessageMessageInput.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageMessageInput.stories.tsx index 5f55361998..9d9ec53ed7 100644 --- a/examples/expo-example/components/NestingExample/ChatMessageMessageInput.stories.tsx +++ b/examples/expo-example/components/NestingExample/ChatMessageMessageInput.stories.tsx @@ -5,7 +5,7 @@ import React from 'react'; const MyComponent = ({ text }) => {text}; export default { - title: 'Chat/MessageInput', + title: 'NestingExample/MessageInput', component: MyComponent, } as ComponentMeta; diff --git a/examples/expo-example/components/NestingExample/ChatMessageReactions.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageReactions.stories.tsx index bdf96ec80b..643ec3a339 100644 --- a/examples/expo-example/components/NestingExample/ChatMessageReactions.stories.tsx +++ b/examples/expo-example/components/NestingExample/ChatMessageReactions.stories.tsx @@ -5,7 +5,7 @@ import React from 'react'; const MyComponent = ({ text }) => {text}; export default { - title: 'Chat/Message/Reactions', + title: 'NestingExample/Message/Reactions', component: MyComponent, } as ComponentMeta; diff --git a/examples/expo-example/components/SafeAreaExample/SafeAreaInside.stories.tsx b/examples/expo-example/components/SafeAreaExample/SafeAreaInside.stories.tsx index 60209e3985..c356b6ca66 100644 --- a/examples/expo-example/components/SafeAreaExample/SafeAreaInside.stories.tsx +++ b/examples/expo-example/components/SafeAreaExample/SafeAreaInside.stories.tsx @@ -4,7 +4,7 @@ import { AButton } from './AButton'; import { ScrollView } from 'react-native'; const SafeAreaInsideMeta: ComponentMeta = { - title: 'SafeArea Inside', + title: 'SafeAreaExamples/SafeArea Inside', component: AButton, argTypes: { onPress: { action: 'pressed the button' }, diff --git a/examples/expo-example/components/SafeAreaExample/SafeAreaOutside.stories.tsx b/examples/expo-example/components/SafeAreaExample/SafeAreaOutside.stories.tsx index 0fd0d88485..0884a099ea 100644 --- a/examples/expo-example/components/SafeAreaExample/SafeAreaOutside.stories.tsx +++ b/examples/expo-example/components/SafeAreaExample/SafeAreaOutside.stories.tsx @@ -4,7 +4,7 @@ import { AButton } from './AButton'; import { ScrollView } from 'react-native'; const SafeAreaOutsideMeta: ComponentMeta = { - title: 'SafeArea Outside', + title: 'SafeAreaExamples/SafeArea Outside', component: AButton, parameters: { noSafeArea: true }, argTypes: { diff --git a/examples/expo-example/components/SafeAreaExample/UsableArea.stories.tsx b/examples/expo-example/components/SafeAreaExample/UsableArea.stories.tsx index 09bd7cb0aa..7a825fa71f 100644 --- a/examples/expo-example/components/SafeAreaExample/UsableArea.stories.tsx +++ b/examples/expo-example/components/SafeAreaExample/UsableArea.stories.tsx @@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react-native'; import { View, StyleSheet, Text } from 'react-native'; const UsableAreaMeta: ComponentMeta = { - title: 'Usable Area', + title: 'SafeAreaExamples/Usable Area', }; export default UsableAreaMeta; diff --git a/packages/react-native/src/preview/components/Shared/icons.tsx b/packages/react-native/src/preview/components/Shared/icons.tsx index 744ebd6c37..6f7efc55dd 100644 --- a/packages/react-native/src/preview/components/Shared/icons.tsx +++ b/packages/react-native/src/preview/components/Shared/icons.tsx @@ -27,6 +27,9 @@ const iconSources = { 'layout-split-inverse': { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEaSURBVHgB7ZntDYJADIaLcQBGYARHgAl0I0YQJ8BNdAPZ4BzBDWov8ENrkYuJtJA+SUO4D/K+1yaQAuA4jmMaRCwpjhQB5+NG0VIU8Cu0OR+EaxM15GM6szHxdLlQ7MAGHUWVZdmDT2xGNtRgR3wkaqmliY8MYF93AWwSs3B9HZAyUINdDnxAMmCpdDh7PiCVEIJhqITeNG9g4bgBbdyANm5AGzegzeINbKcW8Ff33Ex92ngJaeMGtHED2rgBbdZv4FtbzwKSgTu7V2uz0OHxPlCXsqlhzdWgkQXsm8uBaWlTNpZChzgIp/EXBuElyu38IvUhDdqjkbSus70+LKwoTqBP1CCKT4KyUVCcsf/tMxcB+zIuwXEcxzRPpfGo9y3IYogAAAAASUVORK5CYII=', }, + folder: { + uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHTSURBVGiB7Zk7LwRRGIbf7wwRRIJGlDSEpdmI6Fw6lRWZXiJ0lkZUsn8A2dD5B0MhkS1UepGIXZu4hsKlJASxyZyjoJAx4uzutztjc57yXN58T+Z8M5kZoEKg2R4nSpL6IdCQ72YlhQLh3LLc/dUj+7YUBepC8ciWYshxidSy+1a/tHYx+s6QlzeCKcdSihZEzWtqfsCpZcrMCy6RTwgj8knsBCHDKwIEJsPVI36cKOCGK4ygnkHYbcpkNxJISO98lc+eR4Au9eJVG4DmXyY7CejUrvRPCFCIPUQifTjG1I9ZnyuynTyeiOlEx3udDkixB6CVo1RdXCHb19P21fexonokmbZPIeQQgPuiKssTS1K3d6zoZg9Choh+tATLXSuZtk8tSwyC1B1HXiH4NXtBrByNn8V7nWFIMcmVCVJzAGp0lrKJAF/HDFjkyotHtmagKcL/QAwIIxI2jEjYMCJhw4iEDSMSNoxI2DAiYcOIhI2KEfF71W2c7XGiZa/EDwVLd6mfyCApccBYTlmomKNlRAJFymvv0P8TIRzediHjHRYAMgBK9Y+EkxygUpBybHPTdr2TBADT0Z06K/ek9UUvKFpk9Usia+eCrsNgMBgMBkM5+ADkCHptw04GlAAAAABJRU5ErkJggg==', + }, }; export type IconName = keyof typeof iconSources; diff --git a/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx b/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx index 75f7a8c7cb..ffef456b8f 100644 --- a/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx +++ b/packages/react-native/src/preview/components/StoryListView/StoryListView.tsx @@ -3,7 +3,7 @@ import { addons } from '@storybook/addons'; import { StoryIndex } from '@storybook/client-api'; import Events from '@storybook/core-events'; import React, { useMemo, useState } from 'react'; -import { FlatList, ListRenderItem, StyleSheet, TextInputProps, View } from 'react-native'; +import { FlatList, ListRenderItem, StyleSheet, Text, TextInputProps, View } from 'react-native'; import { useIsChildSelected, useIsStorySectionSelected, @@ -23,6 +23,7 @@ const SectionHeaderText = styled.Text<{ selected: boolean }>(({ theme }) => ({ fontSize: theme.storyList.fontSize, color: theme.storyList.headerTextColor, fontWeight: theme.storyList.headerFontWeight, + flexShrink: 1, })); const StoryNameText = styled.Text<{ selected: boolean }>(({ selected, theme }) => ({ @@ -102,25 +103,42 @@ interface SectionProps { name: string; onPress: () => void; isChildSelected: boolean; + icon: 'grid' | 'folder'; + expanded: boolean; } -const SectionHeader = React.memo(({ name, onPress, isChildSelected }: SectionProps) => { - const selected = useIsStorySectionSelected(name) || isChildSelected; - - return ( - - - - {name} - - ); -}); +const SectionHeader = React.memo( + ({ name, onPress, isChildSelected, icon = 'grid', expanded }: SectionProps) => { + const selected = useIsStorySectionSelected(name) || isChildSelected; + + return ( + + + {'➤'} + + + + + + {name} + + + ); + } +); interface ListItemProps { storyId: string; @@ -209,7 +227,7 @@ const RenderItem = ({ const firstChildSelected = useIsStorySelected(firstChild?.id); - const [showChildren, setShowChildren] = useState(true); + const [showChildren, setShowChildren] = useState(false); return ( <> @@ -217,12 +235,17 @@ const RenderItem = ({ name={item.name} isChildSelected={isChildSelected} onPress={() => { - if (firstChildSelected) { - setShowChildren(!showChildren); - } else if (firstChild) { + if (firstChildSelected && showChildren) { + setShowChildren(false); + } else if (!showChildren && firstChild) { + setShowChildren(true); + changeStory(firstChild.id); + } else if (showChildren && !firstChildSelected && firstChild) { changeStory(firstChild.id); } }} + icon={item.children.length ? 'folder' : 'grid'} + expanded={showChildren} /> {showChildren &&