@redocly/theme 0.70.0-next.9 → 0.70.1

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import styled from 'styled-components';
+import * as Sampler from 'openapi-sampler';
+
+import type { CatalogEntityConfig } from '@redocly/config';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
+
+import { useThemeHooks, useCatalogEntitySchema } from '@redocly/theme/core/hooks';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
+import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
+import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
+
+export type CatalogEntitySchemaProps = {
+  entity: BffCatalogEntity;
+  relatedEntity: BffCatalogRelatedEntity | null;
+  catalogConfig: CatalogEntityConfig;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  RedocSchema: React.ComponentType<any>;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  StoreProvider: React.ComponentType<any>;
+  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
+};
+
+export function CatalogEntitySchema({
+  entity,
+  relatedEntity,
+  RedocSchema,
+  StoreProvider,
+  GraphqlTypeRenderer,
+}: CatalogEntitySchemaProps) {
+  const { useTranslate, useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
+  const { translate } = useTranslate();
+  const { definition, parsedSchema, rawSchema } = useCatalogEntitySchema({ entity, relatedEntity });
+  const isGraphql = entity.metadata?.specType === 'graphql';
+  const graphqlSDL = entity?.metadata?.sdl;
+
+  return (
+    <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntitySchema">
+      <HeaderWrapper>
+        <Heading>{translate('catalog.entity.schema.title')}</Heading>
+        {!isGraphql && (
+          <CopyButton
+            data={rawSchema}
+            buttonText="Copy Schema"
+            type="compound"
+            variant="secondary"
+            iconPosition="right"
+            size="medium"
+            onCopyClick={() =>
+              telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage([
+                {
+                  ...getBaseDataAttributes('catalogEntitiesCopyDataSchemaId', 'button'),
+                  entityId: entity.id,
+                  entityKey: entity.key,
+                  entityType: entity.type,
+                },
+              ])
+            }
+          ></CopyButton>
+        )}
+      </HeaderWrapper>
+      <SplitViewWrapper>
+        <SchemaContentWrapper>
+          {isGraphql && graphqlSDL && GraphqlTypeRenderer ? (
+            <GraphqlTypeRenderer sdl={graphqlSDL} typeName={entity.title} />
+          ) : (
+            <StoreProvider definition={definition}>
+              <RedocSchema schema={parsedSchema} />
+            </StoreProvider>
+          )}
+        </SchemaContentWrapper>
+
+        {!isGraphql && (
+          <SchemaSampleWrapper>
+            <JsonViewer data={Sampler.sample({ ...parsedSchema })} expandLevel={3} />
+          </SchemaSampleWrapper>
+        )}
+      </SplitViewWrapper>
+    </MetadataWrapper>
+  );
+}
+
+const MetadataWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius-xl);
+  background-color: var(--catalog-metadata-bg-color);
+  margin-bottom: var(--spacing-lg);
+`;
+
+const SchemaContentWrapper = styled.div`
+  flex: 1;
+  & > div > div {
+    padding-left: 0;
+    padding-top: 0;
+  }
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+`;
+
+const Heading = styled.h2`
+  font-size: var(--catalog-metadata-heading-size);
+  line-height: var(--line-height-lg);
+  margin: 0;
+`;
+
+const SplitViewWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-base);
+`;
+
+const SchemaSampleWrapper = styled.div`
+  flex: 1;
+  position: sticky;
+  top: calc(var(--navbar-offset) + var(--spacing-md));
+  align-self: flex-start;
+  padding-top: var(--spacing-sm);
+`;

package/src/components/Catalog/CatalogEntity/ShowMoreButton.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+
+export type ShowMoreButtonProps = {
+  onClick: () => void;
+  children: React.ReactNode;
+  className?: string;
+  isExpanded?: boolean;
+};
+
+export function ShowMoreButton({
+  onClick,
+  children,
+  className,
+  isExpanded = false,
+}: ShowMoreButtonProps): React.ReactElement {
+  return (
+    <BaseShowMoreButton type="button" onClick={onClick} className={className}>
+      {children}
+      <ChevronIcon $isExpanded={isExpanded} />
+    </BaseShowMoreButton>
+  );
+}
+
+const BaseShowMoreButton = styled.button`
+  all: unset;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  gap: var(--catalog-show-more-button-gap);
+  color: var(--catalog-show-more-button-color);
+  padding: 0;
+  margin-top: var(--spacing-unit);
+
+  &:hover {
+    color: var(--catalog-show-more-button-color-hover);
+  }
+`;
+
+const ChevronIcon = styled(ChevronDownIcon)<{ $isExpanded: boolean }>`
+  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
+  transition: transform 0.2s ease;
+`;

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -0,0 +1,87 @@
+import type { JSX } from 'react';
+import React from 'react';
+
+import type { UiAccessibleConfig } from '@redocly/config';
+
+import type { EntityType } from '@redocly/theme/core/types';
+import { CodeIcon } from '@redocly/theme/icons/CodeIcon/CodeIcon';
+import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
+import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
+import { UserIcon } from '@redocly/theme/icons/UserIcon/UserIcon';
+import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon';
+import { HierarchyIcon } from '@redocly/theme/icons/HierarchyIcon/HierarchyIcon';
+import { Image } from '@redocly/theme/components/Image/Image';
+import { PREDEFINED_ENTITY_TYPES, useThemeConfig } from '@redocly/theme/core';
+import { NoteIcon } from '@redocly/theme/icons/NoteIcon/NoteIcon';
+import { CubeIcon } from '@redocly/theme/icons/CubeIcon/CubeIcon';
+
+export type CatalogEntityIconProps = {
+  entityType: string;
+  defaultColor?: boolean;
+  forceColor?: string;
+  entitiesCatalogConfig?: UiAccessibleConfig['entitiesCatalog'];
+};
+
+const getIconColor = (entityType: EntityType) => `var(--catalog-entity-icon-color-${entityType})`;
+
+const getEntityIcon = ({
+  entityType,
+  defaultColor,
+  forceColor,
+  entitiesCatalogConfig,
+}: CatalogEntityIconProps) => {
+  if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+    const iconColor =
+      forceColor ??
+      (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType as EntityType));
+
+    const entityIconMap: Record<EntityType, JSX.Element> = {
+      service: <CodeIcon color={iconColor} />,
+      domain: <GraphIcon color={iconColor} />,
+      team: <PeopleIcon color={iconColor} />,
+      user: <UserIcon color={iconColor} />,
+      'api-description': <NoteIcon color={iconColor} />,
+      'data-schema': <HierarchyIcon color={iconColor} />,
+      'api-operation': <MoleculesIcon color={iconColor} />,
+    };
+
+    return entityIconMap[entityType as EntityType];
+  }
+
+  const iconConfig = entitiesCatalogConfig?.entityTypes?.[entityType]?.icon;
+
+  if (iconConfig?.src || iconConfig?.srcSet) {
+    return (
+      <Image
+        src={iconConfig?.src}
+        srcSet={iconConfig?.srcSet}
+        alt={`${entityType} icon`}
+        width="16"
+        height="16"
+      />
+    );
+  }
+
+  return <CubeIcon color="var(--catalog-entity-icon-color)" />;
+};
+
+export function CatalogEntityIcon({
+  entityType,
+  defaultColor = false,
+  forceColor,
+}: CatalogEntityIconProps): JSX.Element {
+  const themeConfig = useThemeConfig();
+
+  const icon = getEntityIcon({
+    entityType,
+    defaultColor,
+    forceColor,
+    entitiesCatalogConfig: themeConfig.entitiesCatalog,
+  });
+
+  if (!icon) {
+    throw new Error(`Unhandled entity type: ${entityType}`);
+  }
+
+  return icon;
+}

package/src/components/Catalog/CatalogEntityTypeIcon.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { PREDEFINED_ENTITY_TYPES } from '@redocly/theme/core';
+
+export type CatalogEntityTypeIconProps = {
+  entityType: string;
+  defaultColors?: boolean;
+  size?: 'large' | 'medium';
+};
+
+export function CatalogEntityTypeIcon({
+  entityType,
+  defaultColors = false,
+  size = 'medium',
+}: CatalogEntityTypeIconProps) {
+  return (
+    <IconContainer
+      data-component-name="Catalog/CatalogEntityTypeIcon"
+      $entityType={entityType}
+      $defaultColors={defaultColors}
+      $size={size}
+    >
+      <CatalogEntityIcon entityType={entityType} defaultColor={false} />
+    </IconContainer>
+  );
+}
+
+const IconContainer = styled.div<{
+  $entityType: string;
+  $defaultColors: boolean;
+  $size: 'large' | 'medium';
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ $size }) =>
+    $size === 'large'
+      ? 'var(--catalog-table-icon-width-large)'
+      : 'var(--catalog-table-icon-width-medium)'};
+  height: ${({ $size }) =>
+    $size === 'large'
+      ? 'var(--catalog-table-icon-height-large)'
+      : 'var(--catalog-table-icon-height-medium)'};
+  border-radius: var(--catalog-table-icon-border-radius);
+  background-color: ${({ $defaultColors, $entityType }) => {
+    if ($defaultColors) {
+      return 'var(--catalog-entity-bg-color)';
+    }
+    if (PREDEFINED_ENTITY_TYPES.includes($entityType)) {
+      return `var(--catalog-entity-bg-color-${$entityType})`;
+    }
+    return 'var(--catalog-entity-bg-color-custom)';
+  }};
+  flex-shrink: 0;
+  border: 1px solid
+    ${({ $defaultColors, $entityType }) => {
+      if ($defaultColors) {
+        return 'var(--catalog-entity-border-color)';
+      }
+      if (PREDEFINED_ENTITY_TYPES.includes($entityType)) {
+        return `var(--catalog-entity-border-color-${$entityType})`;
+      }
+      return 'var(--catalog-entity-border-color-custom)';
+    }};
+`;

package/src/components/Catalog/CatalogEntityTypeTag.tsx

@@ -0,0 +1,58 @@
+import type { JSX } from 'react';
+import React from 'react';
+import styled from 'styled-components';
+
+import type { EntityType } from '@redocly/theme/core/types';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { PREDEFINED_ENTITY_TYPES } from '@redocly/theme/core';
+
+export type CatalogEntityTypeTagProps = {
+  entityType: string;
+};
+
+const entityTagColorMap: Record<EntityType, string> = {
+  service: 'blue',
+  domain: 'grass',
+  team: 'purple',
+  user: 'yellow',
+  'api-description': 'sky',
+  'data-schema': 'carrot',
+  'api-operation': 'raspberry',
+};
+
+export const getEntityTagColor = (type: EntityType): string => {
+  const color = entityTagColorMap[type];
+
+  if (!color) {
+    throw new Error(`Unhandled entity type: ${type}`);
+  }
+
+  return color;
+};
+
+export function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps): JSX.Element {
+  return (
+    <EntityTypeTagWrapper
+      $entityType={entityType as EntityType}
+      data-component-name="Catalog/CatalogEntityTypeTag"
+    >
+      <CatalogHighlight>{entityType}</CatalogHighlight>
+    </EntityTypeTagWrapper>
+  );
+}
+
+const EntityTypeTagWrapper = styled(Tag)<{ $entityType: EntityType }>`
+  font-size: var(--font-size-base);
+  background-color: transparent;
+  text-transform: none;
+  border: 1px solid
+    ${({ $entityType }) =>
+      !PREDEFINED_ENTITY_TYPES.includes($entityType)
+        ? 'var(--catalog-entity-border-color-custom)'
+        : `var(--catalog-entity-border-color-${$entityType})`};
+  color: ${({ $entityType }) =>
+    !PREDEFINED_ENTITY_TYPES.includes($entityType)
+      ? 'var(--catalog-entity-icon-color-custom)'
+      : `var(--catalog-entity-icon-color-${$entityType})`};
+`;

package/src/components/Catalog/CatalogFilter/CatalogFilter.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { FilterProps, FilterTypes } from '@redocly/theme/core/types';
+
+import { CatalogFilterSelect } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterSelect';
+import { CatalogFilterCheckboxes } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterCheckboxes';
+import { CatalogFilterDateRange } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterDateRange';
+
+const filterComponents = {
+  select: CatalogFilterSelect,
+  'date-range': CatalogFilterDateRange,
+  checkboxes: CatalogFilterCheckboxes,
+} as const;
+
+export type CatalogFilterProps = FilterProps & {
+  className?: string;
+};
+
+export function CatalogFilter({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+  className,
+}: CatalogFilterProps): JSX.Element | null {
+  if (!filter.parentUsed) return null;
+
+  const filteredOptions = filter.filteredOptions || filter.options;
+  if (!filteredOptions || filteredOptions.length === 0) {
+    return null;
+  }
+
+  const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
+
+  return (
+    <CatalogFilterGroup
+      className={className}
+      data-component-name="Catalog/CatalogFilter"
+      key={filter.property + filter.title}
+    >
+      <FilterComponent
+        filter={filter}
+        filterValuesCasing={filterValuesCasing}
+        showCounter={showCounter}
+      />
+    </CatalogFilterGroup>
+  );
+}
+
+const CatalogFilterGroup = styled.div`
+  padding: var(--filter-group-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-group-gap);
+  border-bottom: 1px solid var(--catalog-table-border-color);
+
+  &:first-child {
+    border-top: 1px solid var(--catalog-table-border-color);
+  }
+`;

package/src/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.tsx

@@ -0,0 +1,190 @@
+import React, { useState, useMemo } from 'react';
+import styled from 'styled-components';
+import { findAll } from 'highlight-words-core';
+
+import type { JSX } from 'react';
+import type { FilterProps } from '@redocly/theme/core/types';
+
+import { FilterOptions } from '@redocly/theme/components/Filter/FilterOptions';
+import { FilterOption } from '@redocly/theme/components/Filter/FilterOption';
+import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOptionLabel';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CheckboxIcon } from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { changeTextCasing, getBaseDataAttributes } from '@redocly/theme/core/utils';
+import { Accordion } from '@redocly/theme/components/Accordion/Accordion';
+
+export type CatalogFilterCheckboxesProps = FilterProps & {
+  className?: string;
+};
+
+export function CatalogFilterCheckboxes({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+  className,
+}: CatalogFilterCheckboxesProps): JSX.Element {
+  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { translate } = useTranslate();
+  const telemetry = useTelemetry();
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const filteredOptions = useMemo(() => {
+    const options = filter.filteredOptions || filter.options;
+    if (!searchTerm.trim()) return options;
+
+    const lowerSearchTerm = searchTerm.toLowerCase();
+    return options.filter(({ value }) => {
+      const translatedValue = changeTextCasing(translate(value), filterValuesCasing);
+      if (!translatedValue) return false;
+      return translatedValue.toLowerCase().includes(lowerSearchTerm);
+    });
+  }, [searchTerm, filter.filteredOptions, filter.options, translate, filterValuesCasing]);
+
+  const selectedCount = useMemo(() => {
+    if (filter.selectedOptions instanceof Set) {
+      return filter.selectedOptions.size;
+    }
+    return 0;
+  }, [filter.selectedOptions]);
+
+  const highlightText = (text: string): JSX.Element => {
+    if (!searchTerm.trim()) {
+      return <>{text}</>;
+    }
+
+    const chunks = findAll({
+      searchWords: [searchTerm],
+      textToHighlight: text,
+    });
+
+    return (
+      <>
+        {chunks.map((chunk, idx) => {
+          const { end, highlight, start } = chunk;
+          const chunkText = text.substr(start, end - start);
+          if (highlight) {
+            return <HighlightedText key={idx}>{chunkText}</HighlightedText>;
+          } else {
+            return <span key={idx}>{chunkText}</span>;
+          }
+        })}
+      </>
+    );
+  };
+
+  const headerContent = (
+    <AccordionHeaderContent>
+      <span>{translate(filter.titleTranslationKey, filter.title)}</span>
+      {selectedCount > 0 && <CounterTag borderless>{selectedCount}</CounterTag>}
+    </AccordionHeaderContent>
+  );
+
+  return (
+    <AccordionWrapper
+      className={className}
+      $hasSelection={selectedCount > 0 && !isExpanded}
+      data-component-name="Catalog/CatalogFilterCheckboxes"
+    >
+      <Accordion expanded={isExpanded} header={headerContent} onToggle={setIsExpanded}>
+        <FilterSearchWrapper>
+          <FilterInput value={searchTerm} onChange={setSearchTerm} />
+        </FilterSearchWrapper>
+        <FilterOptions>
+          {filteredOptions.map(({ value, count }) => {
+            const id = 'filter--' + filter.property + '--' + value;
+            const checked =
+              filter.selectedOptions instanceof Set
+                ? filter.selectedOptions.has(value) ||
+                  filter.selectedOptions.has(value?.toLowerCase())
+                : false;
+            return (
+              <FilterCheckboxOption key={id}>
+                <CheckboxIcon checked={checked} />
+                <FilterOptionLabel data-translation-key={value}>
+                  <FilterCheckboxInput
+                    checked={checked}
+                    onChange={() => {
+                      filter.toggleOption(value);
+                      telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                        {
+                          ...getBaseDataAttributes('catalogEntitiesFilterCheckboxId', 'checkbox'),
+                          category: filter.property,
+                          value: value,
+                        },
+                      ]);
+                    }}
+                  />
+                  {highlightText(changeTextCasing(translate(value), filterValuesCasing) || '')}
+                </FilterOptionLabel>
+                {showCounter && <CounterTag borderless>{count}</CounterTag>}
+              </FilterCheckboxOption>
+            );
+          })}
+        </FilterOptions>
+      </Accordion>
+    </AccordionWrapper>
+  );
+}
+
+const AccordionWrapper = styled.div<{ $hasSelection: boolean }>`
+  position: relative;
+  border-right: 4px solid transparent;
+
+  ${({ $hasSelection }) =>
+    $hasSelection &&
+    `
+    border-right-color: var(--color-blueberry-6);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      right: -4px;
+      width: 4px;
+      height: 1px;
+      background-color: var(--color-blueberry-6);
+      z-index: 1;
+    }
+  `}
+`;
+
+const AccordionHeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`;
+
+const HighlightedText = styled.span`
+  background-color: var(--catalog-highlight-bg-color);
+  color: var(--catalog-highlight-text-color);
+`;
+
+const FilterCheckboxOption = styled(FilterOption)`
+  padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+
+const FilterCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+`;
+
+const FilterSearchWrapper = styled.div`
+  padding-bottom: var(--spacing-xs);
+`;