feat: add shared troubleshooting listing components

dist/index.d.mts

@@ -100,6 +100,78 @@ interface InputProps {
 }
 declare const Input: ({ value, onChange, placeholder, Icon }: InputProps) => react_jsx_runtime.JSX.Element;
 
+type TagColor = 'Default' | 'Selected' | 'New' | 'Gray' | 'Blue' | 'Green' | 'Deprecation' | 'Backlog' | 'Fixed' | 'Closed' | 'Scheduled' | 'No_Fix';
+type TagProps = {
+    sx?: SxStyleProp;
+    children: React.ReactNode;
+    color?: TagColor;
+    onClick?: () => void;
+};
+declare const Tag: ({ sx, children, color, onClick }: TagProps) => react_jsx_runtime.JSX.Element;
+
+type FilterOption = {
+    id: string;
+    name: string;
+};
+type FilterGroup = {
+    name: string;
+    options: FilterOption[];
+};
+type ListingFilterLabels = {
+    button?: string;
+    modalTitle?: string;
+    remove?: string;
+    apply?: string;
+};
+type ListingFilterSelection = {
+    tag: string[];
+    checklist: string[];
+};
+
+type ListingFilterProps = {
+    tagFilter?: FilterGroup | string[];
+    tagFilterName?: string;
+    checkBoxFilter?: FilterGroup | string[];
+    checkBoxFilters?: FilterGroup[];
+    filterName?: string;
+    selectedCheckboxes?: string[];
+    selectedTags?: string[];
+    onApply: (filters: ListingFilterSelection) => void;
+    labels?: ListingFilterLabels;
+    buttonSx?: SxStyleProp;
+    centeredTagOptions?: boolean;
+};
+declare const ListingFilter: ({ tagFilter, tagFilterName, checkBoxFilter, checkBoxFilters, filterName, onApply, selectedCheckboxes, selectedTags, labels, buttonSx, centeredTagOptions, }: ListingFilterProps) => react_jsx_runtime.JSX.Element;
+
+type TroubleshootingItem = {
+    slug: string;
+    title: string;
+    description?: string;
+    tags?: string[];
+    domainFilters?: string[];
+    symptomFilters?: string[];
+};
+type TroubleshootingFilterState = {
+    search: string;
+    domainFilters: string[];
+    symptomFilters: string[];
+};
+
+type TroubleshootingCardVariant = 'devportal' | 'helpcenter';
+type TroubleshootingCardProps = TroubleshootingItem & {
+    href?: string;
+    basePath?: string;
+    variant?: TroubleshootingCardVariant;
+};
+declare const TroubleshootingCard: ({ title, description, slug, tags, domainFilters, symptomFilters, href, basePath, variant, }: TroubleshootingCardProps) => react_jsx_runtime.JSX.Element;
+
+declare function filterTroubleshootingItems<T extends TroubleshootingItem>(items: T[], { search, domainFilters, symptomFilters }: TroubleshootingFilterState): T[];
+
+declare function collectTroubleshootingFilterOptions<T extends Pick<TroubleshootingItem, 'domainFilters' | 'symptomFilters'>>(items: T[]): {
+    domainFilters: string[];
+    symptomFilters: string[];
+};
+
 declare const getDaysElapsed: (date: Date) => number;
 
 interface Props extends Partial<ContextType> {
@@ -301,4 +373,4 @@ declare const LikeIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
 declare const LikeSelectedIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
 
-export { APIGuidesIcon, APIReferenceIcon, AddedIcon, AnnouncementIcon, AppDevelopmentIcon, ArrowLeftIcon, ArrowRightIcon, CaretIcon, ChatGPTIcon, CheckboxIcon, ClaudeIcon, CloseFilterIcon, CloseIcon, CommunityIcon, CookieBar, CopilotIcon, CopyIcon, CopyLinkButton, DeprecatedIcon, DeveloperPortalIcon, DocumentationUpdatesIcon, EditIcon, EmailIcon, ExpandedResultsIcon, FAQIcon, FacebookCircleIcon, FacebookIcon, FeedbackSection, FilterIcon, FixedIcon, GearTroubleshootingIcon, GeminiIcon, GithubIcon, GraphIcon, GridIcon, HamburgerMenu, HelpCenterIcon, ImprovedIcon, InfoIcon, Input, IgIcon as InstagramIcon, type Item, KnownIssueIcon as KnownIssuesIcon, LibraryContext, LibraryContextProvider, LikeIcon, LikeSelectedIcon, LinkIcon, LinkedinCircleIcon, LinkedinIcon, LongArrowIcon, MarkdownRenderer, MegaphoneIcon, MenuIcon, NewIcon, PaperIcon, ReleaseNotesIcon, RemovedIcon, ResizeIcon, Search, createAlgoliaClient as SearchConfig, SearchIcon, SearchInput, ShareButton, ShareIcon, SideBarToggleIcon, Sidebar, StartHereIcon, StorefrontDevelopmentIcon, TableOfContents, TrashcanIcon, TroubleshootingIcon, TutorialsIcon, TwitterCircleIcon, TwitterIcon, VTEXDevPortalIcon, VTEXHelpCenterIcon, VTEXIOAppsIcon, VTEXLogoFooter, WarningIcon, YoutubeIcon, getDaysElapsed };
+export { APIGuidesIcon, APIReferenceIcon, AddedIcon, AnnouncementIcon, AppDevelopmentIcon, ArrowLeftIcon, ArrowRightIcon, CaretIcon, ChatGPTIcon, CheckboxIcon, ClaudeIcon, CloseFilterIcon, CloseIcon, CommunityIcon, CookieBar, CopilotIcon, CopyIcon, CopyLinkButton, DeprecatedIcon, DeveloperPortalIcon, DocumentationUpdatesIcon, EditIcon, EmailIcon, ExpandedResultsIcon, FAQIcon, FacebookCircleIcon, FacebookIcon, FeedbackSection, ListingFilter as Filter, type FilterGroup, FilterIcon, type FilterOption, FixedIcon, GearTroubleshootingIcon, GeminiIcon, GithubIcon, GraphIcon, GridIcon, HamburgerMenu, HelpCenterIcon, ImprovedIcon, InfoIcon, Input, IgIcon as InstagramIcon, type Item, KnownIssueIcon as KnownIssuesIcon, LibraryContext, LibraryContextProvider, LikeIcon, LikeSelectedIcon, LinkIcon, LinkedinCircleIcon, LinkedinIcon, ListingFilter, type ListingFilterLabels, type ListingFilterProps, type ListingFilterSelection, LongArrowIcon, MarkdownRenderer, MegaphoneIcon, MenuIcon, NewIcon, PaperIcon, ReleaseNotesIcon, RemovedIcon, ResizeIcon, Search, createAlgoliaClient as SearchConfig, SearchIcon, SearchInput, ShareButton, ShareIcon, SideBarToggleIcon, Sidebar, StartHereIcon, StorefrontDevelopmentIcon, TableOfContents, Tag, type TagColor, type TagProps, TrashcanIcon, TroubleshootingCard, type TroubleshootingCardProps, type TroubleshootingCardVariant, type TroubleshootingFilterState, TroubleshootingIcon, type TroubleshootingItem, TutorialsIcon, TwitterCircleIcon, TwitterIcon, VTEXDevPortalIcon, VTEXHelpCenterIcon, VTEXIOAppsIcon, VTEXLogoFooter, WarningIcon, YoutubeIcon, collectTroubleshootingFilterOptions, filterTroubleshootingItems, getDaysElapsed };