Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Draft: Adding searchable tags to page config #1146

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Draft: Adding searchable tags to page config #1146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion gallery/src/GalleryNav/GalleryNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,8 @@ function GalleryNav() {
[openTreeViews, setOpenTreeViews] = useState(initialOpenTreeViews),
isFiltering = !!filter,
filteredConfig: PageConfig = isFiltering ? pipe<[PageConfig], PageConfig, PageConfig>(
map<PageConfig, PageConfig>(pickBy<PageMapping>((_, pageName) => matchesFilter(filter, pageName))),
map<PageConfig, PageConfig>(pickBy<PageMapping>((pageInfo, pageName) =>
matchesFilter(filter, pageName, pageInfo.tags))),
pickBy(complement(isEmpty))
)(pageConfig) : pageConfig,
filteredCategories = pipe<[PageConfig], [string, PageMapping][], ReactNode[]>(
Expand Down
18 changes: 13 additions & 5 deletions gallery/src/filterUtil.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* the terms of the Eclipse Public License 2.0 which accompanies this
* distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
*/
import { reduce, head, tail, toLower, isEmpty, splitAt, drop, join } from 'ramda';
import {reduce, head, tail, toLower, isEmpty, splitAt, drop, join, map} from 'ramda';
import React, { ReactNode } from 'react';

/**
Expand Down Expand Up @@ -67,14 +67,22 @@ export function markByFilter(filter: string | undefined, text: string): ReactNod
/**
* @return true if the pageName contains every character present in the filter in the same order, case insensitive
*/
export function matchesFilter(filter: string, pageName: string) {
export function matchesFilter(filter: string, pageName: string, tags: string[] = []): boolean {
const matchesPageName = isStringIncludedInSecondStringCaseInsensitive(filter, pageName);
const matchesAnyTags: boolean = map((tag: string) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ramda has an any function that would be simpler than the map/reduce here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I figured it had something but struggled to figure it out, I'll poke at that

return isStringIncludedInSecondStringCaseInsensitive(filter, tag);
}, tags).reduce((acc, val) => acc || val, false);

return matchesPageName || matchesAnyTags;
}

function isStringIncludedInSecondStringCaseInsensitive(search: string, fullValue: string): boolean {
const unmatchedFilterChars = reduce(
(remainingFilter, pageNameChar) =>
head(remainingFilter) === pageNameChar ? tail(remainingFilter) : remainingFilter,
Array.from(toLower(filter)),
Array.from(toLower(pageName))
Array.from(toLower(search)),
Array.from(toLower(fullValue))
);

return isEmpty(unmatchedFilterChars);
}

8 changes: 4 additions & 4 deletions gallery/src/pageConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,9 +161,9 @@ import DarkModeMixinPage from './styles/DarkMode/DarkModeMixinPage';

const pageConfig: PageConfig = {
'Alerts and Indicators': {
'Alert': { content: NxAlertComponentsPage, type: 'react' },
'Stateful Alert': { content: NxStatefulAlertComponentsPage, type: 'react' },
'Counter': { content: NxCounterPage, type: 'html' },
'Alert': { content: NxAlertComponentsPage, type: 'react', tags: ['NxAlert'] },
'Stateful Alert': { content: NxStatefulAlertComponentsPage, type: 'react', tags: ['NxStatefulAlert'] },
'Counter': { content: NxCounterPage, type: 'html', tags: ['NxCounter'] },
'Load Error': { content: NxLoadErrorPage, type: 'react' },
'Load Wrapper': { content: NxLoadWrapperPage, type: 'react' },
'Loading Spinner': { content: NxLoadingSpinnerPage, type: 'react' },
Expand Down Expand Up @@ -282,7 +282,7 @@ const pageConfig: PageConfig = {
'Code': { content: NxCodePage, type: 'html' },
'Font Awesome Icon': { content: NxFontAwesomeIconPage, type: 'react' },
'H*': { content: NxHPage, type: 'html' },
'P': { content: NxPPage, type: 'html' },
'P': { content: NxPPage, type: 'html', tags: ['NxP'] },
'Pre': { content: NxPrePage, type: 'html' }
},
'HTML Variants': {
Expand Down
2 changes: 2 additions & 0 deletions gallery/src/pageConfigTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ export type PageType = typeof PAGE_TYPES[number];
export interface PageContentDescription {
content: ComponentType;
type: PageType;

tags?: string []
}

export type PageConfig = Record<string, PageMapping>;
Expand Down