@redocly/theme 0.7.4 → 0.8.0

package/src/Catalog/Catalog.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ResolvedNavItem } from '@redocly/theme/src/types/portal';
+
+import type { CatalogConfig } from '@theme/types/portal/src/shared/types/catalog';
+import { usePageSharedData } from '@portal/hooks/index.js';
+import { H2 } from '@theme/Typography/H2';
+import { H3 } from '@theme/Typography/H3';
+import { Button } from '@theme/Button/Button';
+import { HighlightContext } from '@theme/ui/Highlight';
+import { CatalogCard } from '@theme/Catalog/CatalogCard';
+import { Filter } from '@theme/Catalog/Filter';
+import { useCatalog } from '@portal/hooks/index';
+
+export default function Catalog(props: {
+  pageProps: {
+    catalogId: string;
+    catalogConfig: CatalogConfig;
+  };
+}) {
+  const { catalogConfig } = props.pageProps;
+  const items = usePageSharedData('catalog') as ResolvedNavItem[];
+
+  const { filterTerm, setFilterTerm, groups, filters } = useCatalog(items, catalogConfig);
+  const [isFilterPanelFocused, setIsFilterPanelFocused] = React.useState(false);
+
+  return (
+    <HighlightContext.Provider value={[filterTerm]}>
+      <CatalogPageWrapper>
+        <CatalogPageSidebar isActiveInMobileMode={isFilterPanelFocused}>
+          <StyledInput
+            placeholder="Filter..."
+            value={filterTerm}
+            onFocus={() => setIsFilterPanelFocused(true)}
+            onChange={(e) => setFilterTerm(e.target.value)}
+          />
+          {filters.map((filter, idx) => (
+            <Filter filter={filter} key={filter.property + '-' + idx} />
+          ))}
+          <MobileStickyApplyFilters>
+            <Button color="secondary" onClick={() => setIsFilterPanelFocused(false)}>
+              Apply filters
+            </Button>
+          </MobileStickyApplyFilters>
+        </CatalogPageSidebar>
+        <CatalogPageContent>
+          {catalogConfig.title ? <CatalogTitle> {catalogConfig.title} </CatalogTitle> : null}
+          {catalogConfig.description ? (
+            <CatalogDescription> {catalogConfig.description} </CatalogDescription>
+          ) : null}
+          {groups.map((group) => (
+            <React.Fragment key={group.title}>
+              <H3>
+                {group.title} ({group.items.length})
+              </H3>
+              <CatalogCards>
+                {group.items.map((item) => (
+                  <CatalogCard item={item} key={item.link} />
+                ))}
+              </CatalogCards>
+            </React.Fragment>
+          ))}
+        </CatalogPageContent>
+      </CatalogPageWrapper>
+    </HighlightContext.Provider>
+  );
+}
+
+const MobileStickyApplyFilters = styled.div`
+  position: fixed;
+  display: none;
+  background-color: var(--sidebar-background-color);
+  bottom: 0;
+  padding: 16px 30px;
+  left: 0px;
+  right: 0px;
+
+  ${Button} {
+    width: 100%;
+    margin: 0;
+  }
+`;
+
+const CatalogPageSidebar = styled.aside<{ isActiveInMobileMode?: boolean }>`
+  width: var(--sidebar-width);
+  border-right: 1px solid var(--sidebar-border-color);
+  padding: 20px 30px;
+  position: sticky;
+  top: var(--navbar-height);
+  height: calc(100vh - var(--navbar-height));
+  overflow: auto;
+
+  @media screen and (max-width: 767px) {
+    transition: height 0.2s ease-in-out;
+    width: 100%;
+    ${({ isActiveInMobileMode }) =>
+      isActiveInMobileMode ? 'padding-bottom: 66px;' : 'height: 76px;'};
+    background-color: var(--sidebar-background-color);
+    border-bottom: 1px solid var(--sidebar-border-color);
+    z-index: 100;
+
+    ${MobileStickyApplyFilters} {
+      display: ${({ isActiveInMobileMode }) => (isActiveInMobileMode ? 'block' : 'none')};
+    }
+  }
+`;
+
+const CatalogPageContent = styled.main`
+  flex: 1;
+  padding: 32px;
+`;
+
+const CatalogCards = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 32px;
+`;
+
+const CatalogTitle = styled(H2)`
+  && {
+    margin: 0;
+  }
+`;
+
+const CatalogDescription = styled.p`
+  margin: 16px 0 32px 0;
+  font-size: 16px;
+  color: var(--text-color-secondary);
+`;
+
+const CatalogPageWrapper = styled.div`
+  --sidebar-width: var(--catalog-sidebar-width, 300px);
+
+  display: flex;
+  flex-direction: row;
+
+  font-weight: var(--font-weight-regular);
+  padding: 0;
+
+  color: var(--text-color);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+
+  hr {
+    border: 0;
+    width: calc(100% + 48px);
+    margin: auto -24px 0 -24px;
+    border-top: 1px solid var(--border-color);
+  }
+  a:not([role='button']) {
+    text-decoration: none;
+    color: var(--link-text-color);
+    font-weight: var(--link-font-weight);
+  }
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+  }
+`;
+
+// TODO: merge this input with the input from reference docs
+// the on in ref docs is dark, needs separate variables most likely
+const StyledInput = styled.input`
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  min-width: 200px;
+  outline-color: var(--color-primary-500);
+  width: 100%;
+
+  outline: none;
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  color: var(--text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+
+  &::placeholder {
+    opacity: 0.6;
+    color: var(--text-color);
+  }
+
+  &:hover {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+  }
+
+  &:focus {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--input-background-color);
+  }
+`;

package/src/Catalog/CatalogCard.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import type { CatalogItem } from '@theme/types/portal/src/shared/types/catalog';
+import { Link } from '@portal/Link';
+import { Highlight } from '@theme/ui/Highlight';
+import { Tags } from '@theme/Catalog/Tags';
+
+export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
+  return (
+    <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
+      <StyledCard>
+        <CardTitle>
+          <Highlight>{item.title}</Highlight>
+        </CardTitle>
+        {/* <div>{item.image}</div> */}
+        <CardDescription>
+          <Highlight>{item.description ?? ''}</Highlight>
+        </CardDescription>
+        {item.tags ? <Tags tags={item.tags as string[]} /> : null}
+        <hr />
+        <CardFooter>View documentation</CardFooter>
+      </StyledCard>
+    </Link>
+  );
+}
+
+const StyledCard = styled.div`
+  min-height: 268px;
+  height: 100%;
+  box-shadow: var(--box-shadow);
+
+  display: flex;
+  flex-direction: column;
+
+  color: var(--text-color);
+  background-color: var(--thin-tile-background-color);
+  border-radius: 4px;
+
+  border: 1px solid var(--border-color);
+  box-shadow: 0px 0px 10px 0px rgba(35, 35, 35, 0.05);
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    /* box-shadow: 0px 12px 30px 0px rgba(35, 35, 35, 0.2); */
+    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+    border: 1px solid var(--border-color);
+    transform: translateY(-2px);
+  }
+
+  border-radius: 8px;
+  width: 100%;
+  padding: 24px 24px 0;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+`;
+
+const CardTitle = styled.h4`
+  line-height: 26px;
+  letter-spacing: 0.8px;
+  font-size: 20px;
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  margin-bottom: 16px;
+`;
+
+const CardDescription = styled.div`
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--line-height);
+  letter-spacing: 0px;
+  font-size: 16px;
+  color: var(--text-color-secondary);
+  text-align: inherit;
+  font-weight: 400;
+`;
+
+const CardFooter = styled.div`
+  height: 46px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
+
+  a:hover & {
+    text-decoration: var(--link-hover-text-decoration);
+    color: var(--link-hover-text-color);
+  }
+`;

package/src/Catalog/Filter.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
+import { Checkbox } from '@theme/ui/Checkbox';
+
+export function Filter({ filter }: { filter: ResolvedFilter }) {
+  if (!filter.parentUsed) return null;
+  return (
+    <FilterGroup key={filter.property + filter.title}>
+      <FilterTitle>{filter.title} filter</FilterTitle>
+      {filter.type === 'select' ? (
+        <StyledSelect
+          onChange={(e) => filter.selectOption(e.target.value)}
+          value={filter.selectedOptions.values().next()?.value || ''}
+        >
+          <option key="none" value="">
+            All
+          </option>
+          {filter.filteredOptions.map((value: any) => (
+            <option key={value.value} value={value.value}>
+              {value.value} ({value.count})
+            </option>
+          ))}
+        </StyledSelect>
+      ) : (
+        filter.filteredOptions.map((value: any) => {
+          const id = 'filter--' + filter.property + '--' + slug(value.value);
+          return (
+            <FilterValue key={id}>
+              <Checkbox
+                type="checkbox"
+                id={id}
+                checked={filter.selectedOptions.has(value.value)}
+                onChange={() => filter.toggleOption(value.value)}
+              />
+              <label htmlFor={id}>
+                {value.value} ({value.count})
+              </label>
+            </FilterValue>
+          );
+        })
+      )}
+    </FilterGroup>
+  );
+}
+
+const FilterGroup = styled.div`
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-color);
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+`;
+
+const FilterTitle = styled.h4`
+  font-size: 18px;
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  margin-bottom: 16px;
+`;
+
+const FilterValue = styled.label`
+  display: block;
+  cursor: pointer;
+  font-size: 16px;
+  margin: 8px 0;
+
+  input {
+    cursor: pointer;
+  }
+`;
+
+const StyledSelect = styled.select`
+  border: 1px solid rgba(0, 0, 0, 0.23);
+
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  color: var(--text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+
+  min-width: 200px;
+  outline-color: var(--color-primary-500);
+  transition: outline 0.25s ease;
+  display: inline-block;
+  text-align: left;
+  appearance: none;
+
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 1em;
+  width: 100%;
+`;
+
+// TODO: import from portal
+function slug(str: string): string {
+  return str.replace(/\s/g, '-').toLowerCase();
+}

package/src/Catalog/Tags.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Highlight } from '@theme/ui/Highlight';
+
+export function Tags({ tags }: { tags: string[] }) {
+  return (
+    <TagsWrapper>
+      {tags.map((tag) => (
+        <Tag key={tag} className={'tag-' + slug(tag)}>
+          <Highlight>{tag}</Highlight>
+        </Tag>
+      ))}
+    </TagsWrapper>
+  );
+}
+
+const TagsWrapper = styled.div`
+  margin-top: 16px;
+`;
+
+const Tag = styled.div`
+  display: inline-block;
+  background-color: #d3f4ef;
+  color: #000;
+  padding: 2px 5px;
+  border-radius: var(--border-radius);
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 0.8em;
+`;
+
+// TODO: import from portal
+function slug(str: string): string {
+  return str.replace(/\s/g, '-').toLowerCase();
+}

package/src/Feedback/ReportDialog.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Comment } from '@theme/Feedback/Comment';
+import type { ReportDialogProps } from '@theme/Feedback';
+import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
+
+export const ReportDialog = ({
+  location,
+  settings,
+  onSubmit,
+  onCancel,
+}: ReportDialogProps): JSX.Element => {
+  const { label } = settings;
+  const { submitFeedback } = useSubmitFeedback();
+
+  return (
+    <Wrapper className="modal">
+      <Comment
+        settings={{ label, onCancel }}
+        onSubmit={(value) => {
+          submitFeedback('problem', { ...value, location });
+          onSubmit();
+        }}
+      />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--modal-overlay-background-color);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    background: var(--modal-background-color);
+    box-shadow: var(--modal-box-shadow);
+    padding: 15px;
+    margin: 15px;
+    max-width: 500px;
+    max-height: 300px;
+  }
+`;

package/src/Feedback/index.ts

@@ -2,4 +2,6 @@ export { Rating } from '@theme/Feedback/Rating';
 export { Sentiment } from '@theme/Feedback/Sentiment';
 export { Comment } from '@theme/Feedback/Comment';
 export { Reasons } from '@theme/Feedback/Reasons';
+export { ReportDialog } from '@theme/Feedback/ReportDialog';
+export { useReportDialog } from '@theme/Feedback/useReportDialog';
 export * from './types';

package/src/Feedback/types.ts

@@ -56,9 +56,11 @@ export type ReasonsProps = {
   };
 };
 
-export type ProblemProps = {
-  onSubmit: (value: string, location: string) => void; // TODO: maybe we don't need location here
-  settings?: {
+export type ReportDialogProps = {
+  location: string;
+  onSubmit: () => void;
+  onCancel: () => void;
+  settings: {
     label?: string;
   };
 };

package/src/Feedback/useReportDialog.ts

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+import type { ReportDialogProps } from '@theme/Feedback/types';
+
+type ReportSettings = {
+  hide?: boolean;
+  label?: string;
+  tooltipText?: string;
+};
+
+export function useReportDialog(reportSettings: ReportSettings): Record<string, any> {
+  const [isReportDialogShown, setIsReportDialogShown] = useState(false);
+  const isReportButtonShown = reportSettings.hide === false; // TODO: report temporary disabled by default
+
+  const showReportDialog = () => {
+    setIsReportDialogShown(true);
+  };
+  const hideReportDialog = () => {
+    setIsReportDialogShown(false);
+  };
+  const reportButtonProps = {
+    onClick: showReportDialog,
+    title: reportSettings.tooltipText || 'Report a problem',
+  };
+  const reportDialogProps: Partial<ReportDialogProps> = {
+    settings: {
+      label: reportSettings.label || 'What is wrong with a code?',
+    },
+    onSubmit: hideReportDialog,
+    onCancel: hideReportDialog,
+  };
+
+  return { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps };
+}

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -3,9 +3,7 @@ import styled, { css } from 'styled-components';
 
 import { ClipboardService } from '@theme/utils/ClipboardService';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-import { Comment } from '@theme/Feedback';
-import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
-import { useReportDialog } from '@theme/hooks/useReportDialog';
+import { ReportDialog, useReportDialog } from '@theme/Feedback';
 
 export type CodeSampleProps = {
   language: string;
@@ -15,16 +13,16 @@ export type CodeSampleProps = {
 
 export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
-  const { codeSnippet: { copy = {}, report = { hide: true } } = {} } = useThemeConfig(); // TODO: report temporary disabled
-  const { submitFeedback } = useSubmitFeedback();
+  const { codeSnippet: { copy = {}, report = {} } = {} } = useThemeConfig();
 
   const [isCopied, setIsCopied] = useState(false);
-  const [isDialogShown, showDialog, hideDialog] = useReportDialog(false);
+  const { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps } =
+    useReportDialog(report);
 
   const copyCode = (code: string) => {
     ClipboardService.copyCustom(code);
     setIsCopied(true);
-    setTimeout(() => setIsCopied(false), copy.toasterDuration || 1000);
+    setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
   };
 
   return (
@@ -44,28 +42,9 @@ export function CodeSample({ rawContent, highlighted, language }: CodeSampleProp
           </>
         )}
 
-        {!report.hide && (
-          <Button onClick={() => showDialog()} title={report.tooltipText || 'Report a problem'}>
-            Report
-          </Button>
-        )}
+        {isReportButtonShown && <Button {...reportButtonProps}>Report</Button>}
 
-        {isDialogShown && (
-          <ReportDialog id="modal">
-            <Comment
-              settings={{
-                label: report.label || 'What is wrong with a code?',
-                onCancel: () => {
-                  hideDialog();
-                },
-              }}
-              onSubmit={(value) => {
-                submitFeedback('problem', { ...value, location: rawContent });
-                hideDialog();
-              }}
-            />
-          </ReportDialog>
-        )}
+        {isReportDialogShown && <ReportDialog {...reportDialogProps} location={rawContent} />}
       </CodeSampleButtonContainer>
       <pre className={langClassName}>
         <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
@@ -242,25 +221,3 @@ const Wrapper = styled.div`
     ${darkStyleTokens};
   }
 `;
-
-const ReportDialog = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: var(--modal-overlay-background-color);
-  z-index: 10000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & > * {
-    background: var(--modal-background-color);
-    box-shadow: var(--modal-box-shadow);
-    padding: 15px;
-    margin: 15px;
-    max-width: 500px;
-    max-height: 300px;
-  }
-`;

package/src/Sidebar/ArrowBack.tsx

@@ -7,7 +7,7 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 12 10"
-      width="12px"
+      width="10px"
       height="10px"
       className={className}
     >
@@ -19,7 +19,7 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
 
 export const ArrowBack = styled(Arrow)`
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/src/Sidebar/MenuGroup.tsx

@@ -62,7 +62,7 @@ const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
   overflow: hidden;
   ${(props) =>
     props.isExpanded
-      ? `max-height: 9999px;
+      ? `max-height: 99999px;
         transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;`
       : `max-height: 0px;
 	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};

package/src/Sidebar/Sidebar.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 interface SidebarProps {
+  isNavbar: boolean;
   opened?: boolean;
   animate?: boolean;
 }
@@ -18,13 +19,16 @@ export const Sidebar = styled.aside.attrs(() => ({
   font-size: var(--sidebar-item-font-size);
   font-family: var(--sidebar-item-font-family);
   color: var(--sidebar-item-text-color);
-  top: var(--navbar-height);
-  height: calc(100vh - var(--navbar-height));
   display: flex;
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
 
+  ${({ isNavbar }) => `
+    top: ${isNavbar ? 'var(--navbar-height)' : '0'};
+    height: calc(100vh ${isNavbar ? '- var(--navbar-height)' : ''});
+  `};
+
   ${({ opened, animate }) => `
     opacity: ${opened ? '1' : '0'};
     pointer-events: ${opened ? 'auto' : 'none'};