From 4271a38c3b6ed57792de77e63e7096493fc9354b Mon Sep 17 00:00:00 2001 From: tusharwebd Date: Thu, 1 Feb 2024 23:21:31 +0530 Subject: [PATCH 1/5] [Bug Fix] Mobile view should not hint at keyboard shortcut in search bar. This commit resolves issue: 25816 (mobile view should not hint at keyboard shortcut). --- .../manager/src/components/sidebar/Search.tsx | 20 +++++++++++++--- scripts/tsconfig.json | 23 +++++++++++++++---- yarn.lock | 21 +++++++++++++++++ 3 files changed, 56 insertions(+), 8 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 525337b8b2aa..e04b736d4247 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -5,7 +5,7 @@ import Downshift from 'downshift'; import type { FuseOptions } from 'fuse.js'; import Fuse from 'fuse.js'; import { global } from '@storybook/global'; -import React, { useMemo, useRef, useState, useCallback } from 'react'; +import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react'; import { CloseIcon, SearchIcon } from '@storybook/icons'; import { DEFAULT_REF_ID } from './Sidebar'; import type { @@ -175,6 +175,20 @@ export const Search = React.memo<{ [api, inputRef, showAllComponents, DEFAULT_REF_ID] ); + const useCheckMobileScreen = () => { + const [width, setWidth] = useState(window.innerWidth); + const handleWindowSizeChange = () => { + setWidth(window.innerWidth); + } + useEffect(() => { + window.addEventListener('resize', handleWindowSizeChange); + return () => { + window.removeEventListener('resize', handleWindowSizeChange); + } + }, []); + return (width <= 768); + } + const list: SearchItem[] = useMemo(() => { return dataset.entries.reduce((acc, [refId, { index, status }]) => { const groupStatus = getGroupStatus(index || {}, status); @@ -288,7 +302,7 @@ export const Search = React.memo<{ }, [inputRef, selectStory, showAllComponents] ); - + const isMobile = useCheckMobileScreen(); return ( initialInputValue={initialQuery} @@ -359,7 +373,7 @@ export const Search = React.memo<{ {/* @ts-expect-error (TODO) */} - {enableShortcuts && !isOpen && ( + {!isMobile && enableShortcuts && !isOpen && ( {searchShortcut === '⌘ K' ? ( <> diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json index 77c8d8e2da1b..e07f7bb4a60f 100644 --- a/scripts/tsconfig.json +++ b/scripts/tsconfig.json @@ -13,8 +13,13 @@ "esModuleInterop": true, "isolatedModules": true, "strictBindCallApply": true, - "lib": ["dom", "es2023"], - "types": ["node"], + "lib": [ + "dom", + "es2023" + ], + "types": [ + "node" + ], "strict": true, "strictNullChecks": false, "forceConsistentCasingInFileNames": true, @@ -24,6 +29,14 @@ "noFallthroughCasesInSwitch": true, "resolveJsonModule": true }, - "exclude": ["dist", "**/dist", "node_modules", "**/node_modules"], - "include": ["./**/*", "./.eslintrc.js"] -} + "exclude": [ + "dist", + "**/dist", + "node_modules", + "**/node_modules" + ], + "include": [ + "./**/*", + "./.eslintrc.js" + ] +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 14231d72f18e..55fcc018a277 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8,5 +8,26 @@ __metadata: "@storybook/root@workspace:.": version: 0.0.0-use.local resolution: "@storybook/root@workspace:." + dependencies: + react-device-detect: "npm:^2.2.3" languageName: unknown linkType: soft + +"react-device-detect@npm:^2.2.3": + version: 2.2.3 + resolution: "react-device-detect@npm:2.2.3" + dependencies: + ua-parser-js: "npm:^1.0.33" + peerDependencies: + react: ">= 0.14.0" + react-dom: ">= 0.14.0" + checksum: 7152e2b216b3bb6fd75c7859d3441b89658695c629a13c5d374f076756705650be585d5c4dc19d9d34908ef1b61f19b52f1055d74dd7104b77d1b6f897ee09e0 + languageName: node + linkType: hard + +"ua-parser-js@npm:^1.0.33": + version: 1.0.37 + resolution: "ua-parser-js@npm:1.0.37" + checksum: 56508f2428ebac64382c4d41da14189e5013e3e2a5f5918aff4bee3ba77df1f4eaad6f81f90c24999f1cf12cc1596764684497fec07e0ff5182ce9a323a8c05b + languageName: node + linkType: hard From 1ce9e1bcfef8e1c8bb63aff1ed3f6efe75a8a6e2 Mon Sep 17 00:00:00 2001 From: tusharwebd Date: Mon, 5 Feb 2024 22:37:54 +0530 Subject: [PATCH 2/5] Remove keyboard shortcut hint in search bar on mobile viewports --- .../manager/src/components/sidebar/Search.tsx | 18 +++------------ yarn.lock | 23 +------------------ 2 files changed, 4 insertions(+), 37 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index e04b736d4247..a8913e4ca25c 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -20,6 +20,7 @@ import { isSearchResult, isExpandType } from './types'; import { scrollIntoView, searchItem } from '../../utils/tree'; import { getGroupStatus, getHighestStatus } from '../../utils/status'; +import { useLayout } from '../layout/LayoutProvider'; const { document } = global; @@ -175,20 +176,6 @@ export const Search = React.memo<{ [api, inputRef, showAllComponents, DEFAULT_REF_ID] ); - const useCheckMobileScreen = () => { - const [width, setWidth] = useState(window.innerWidth); - const handleWindowSizeChange = () => { - setWidth(window.innerWidth); - } - useEffect(() => { - window.addEventListener('resize', handleWindowSizeChange); - return () => { - window.removeEventListener('resize', handleWindowSizeChange); - } - }, []); - return (width <= 768); - } - const list: SearchItem[] = useMemo(() => { return dataset.entries.reduce((acc, [refId, { index, status }]) => { const groupStatus = getGroupStatus(index || {}, status); @@ -302,7 +289,8 @@ export const Search = React.memo<{ }, [inputRef, selectStory, showAllComponents] ); - const isMobile = useCheckMobileScreen(); + const { isMobile } = useLayout(); + return ( initialInputValue={initialQuery} diff --git a/yarn.lock b/yarn.lock index 55fcc018a277..41331a2f1000 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8,26 +8,5 @@ __metadata: "@storybook/root@workspace:.": version: 0.0.0-use.local resolution: "@storybook/root@workspace:." - dependencies: - react-device-detect: "npm:^2.2.3" languageName: unknown - linkType: soft - -"react-device-detect@npm:^2.2.3": - version: 2.2.3 - resolution: "react-device-detect@npm:2.2.3" - dependencies: - ua-parser-js: "npm:^1.0.33" - peerDependencies: - react: ">= 0.14.0" - react-dom: ">= 0.14.0" - checksum: 7152e2b216b3bb6fd75c7859d3441b89658695c629a13c5d374f076756705650be585d5c4dc19d9d34908ef1b61f19b52f1055d74dd7104b77d1b6f897ee09e0 - languageName: node - linkType: hard - -"ua-parser-js@npm:^1.0.33": - version: 1.0.37 - resolution: "ua-parser-js@npm:1.0.37" - checksum: 56508f2428ebac64382c4d41da14189e5013e3e2a5f5918aff4bee3ba77df1f4eaad6f81f90c24999f1cf12cc1596764684497fec07e0ff5182ce9a323a8c05b - languageName: node - linkType: hard + linkType: soft \ No newline at end of file From 22c13a7f90f249e7fb53305eaeb4af61f38ebd05 Mon Sep 17 00:00:00 2001 From: tusharwebd <65904813+tusharwebd@users.noreply.github.com> Date: Mon, 5 Feb 2024 22:48:13 +0530 Subject: [PATCH 3/5] Remove unused import for useEffect hook --- code/ui/manager/src/components/sidebar/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index a8913e4ca25c..cbbecc8264a6 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -5,7 +5,7 @@ import Downshift from 'downshift'; import type { FuseOptions } from 'fuse.js'; import Fuse from 'fuse.js'; import { global } from '@storybook/global'; -import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react'; +import React, { useMemo, useRef, useState, useCallback } from 'react'; import { CloseIcon, SearchIcon } from '@storybook/icons'; import { DEFAULT_REF_ID } from './Sidebar'; import type { From 68e5ec79391deb5549de4ee680c102f8c905be34 Mon Sep 17 00:00:00 2001 From: tusharwebd <65904813+tusharwebd@users.noreply.github.com> Date: Mon, 5 Feb 2024 22:49:58 +0530 Subject: [PATCH 4/5] Add new line at end of file in yarn.lock to avoid any parsing issues --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 41331a2f1000..14231d72f18e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9,4 +9,4 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/root@workspace:." languageName: unknown - linkType: soft \ No newline at end of file + linkType: soft From 4b342ac5e6e08fd9ce06370933f73b3c1ca6831d Mon Sep 17 00:00:00 2001 From: tusharwebd <65904813+tusharwebd@users.noreply.github.com> Date: Mon, 5 Feb 2024 22:56:00 +0530 Subject: [PATCH 5/5] Update tsconfig.json to remove unnecessary linting changes --- scripts/tsconfig.json | 23 +++++------------------ 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json index e07f7bb4a60f..77c8d8e2da1b 100644 --- a/scripts/tsconfig.json +++ b/scripts/tsconfig.json @@ -13,13 +13,8 @@ "esModuleInterop": true, "isolatedModules": true, "strictBindCallApply": true, - "lib": [ - "dom", - "es2023" - ], - "types": [ - "node" - ], + "lib": ["dom", "es2023"], + "types": ["node"], "strict": true, "strictNullChecks": false, "forceConsistentCasingInFileNames": true, @@ -29,14 +24,6 @@ "noFallthroughCasesInSwitch": true, "resolveJsonModule": true }, - "exclude": [ - "dist", - "**/dist", - "node_modules", - "**/node_modules" - ], - "include": [ - "./**/*", - "./.eslintrc.js" - ] -} \ No newline at end of file + "exclude": ["dist", "**/dist", "node_modules", "**/node_modules"], + "include": ["./**/*", "./.eslintrc.js"] +}