@redocly/theme 0.58.0-next.0 → 0.58.0-next.1

package/src/components/Catalog/variables.ts

@@ -13,7 +13,7 @@ export const catalog = css`
   --catalog-filter-padding-vertical-mobile: 0;
   --catalog-filter-padding-horizontal-mobile: var(--spacing-base);
 
-  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
+  --catalog-heading-margin: 0 0 var(--spacing-sm) 0;
   --catalog-sidebar-width: 285px;
 
   /**

package/src/components/Filter/FilterContent.tsx

@@ -15,7 +15,9 @@ export type FilterContentProps = {
   setFilterTerm: (value: string) => void;
   filters: ResolvedFilter[];
   filterTerm: string;
-  filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
+  filterValuesCasing?:
+    | NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing']
+    | ((str: string) => string);
   hideSearch?: boolean;
   showCounter?: boolean;
 };

package/src/core/constants/catalog.ts

@@ -58,6 +58,34 @@ export const reverseRelationMap: Record<EntityRelationType, EntityRelationType>
   triggeredBy: 'triggers',
 } as const;
 
+export const relationTypeMap: Record<EntityRelationType, string> = {
+  partOf: 'Part of',
+  hasParts: 'Has parts',
+  creates: 'Creates',
+  createdBy: 'Created by',
+  owns: 'Owns',
+  ownedBy: 'Owned by',
+  implements: 'Implements',
+  implementedBy: 'Implemented by',
+  dependsOn: 'Depends on',
+  dependencyOf: 'Dependency of',
+  uses: 'Uses',
+  usedBy: 'Used by',
+  produces: 'Produces',
+  consumes: 'Consumes',
+  linksTo: 'Links to',
+  supersedes: 'Supersedes',
+  supersededBy: 'Superseded by',
+  compatibleWith: 'Compatible with',
+  extends: 'Extends',
+  extendedBy: 'Extended by',
+  relatesTo: 'Relates to',
+  hasMember: 'Has member',
+  memberOf: 'Member of',
+  triggers: 'Triggers',
+  triggeredBy: 'Triggered by',
+};
+
 export enum GraphHandleType {
   Target = 'target',
   Source = 'source',

package/src/core/hooks/catalog/useCatalogEntitySchema.ts

@@ -0,0 +1,46 @@
+import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
+
+type CatalogEntitySchemaProps = {
+  entity: BffCatalogEntity;
+  relatedEntity: BffCatalogRelatedEntity | null;
+};
+
+export function useCatalogEntitySchema({ entity, relatedEntity }: CatalogEntitySchemaProps) {
+  const { schema } = entity.metadata || {};
+
+  let parsedSchema;
+
+  try {
+    parsedSchema = JSON.parse(schema);
+  } catch (error) {
+    parsedSchema = undefined;
+  }
+
+  let parsedApiDefinition: any | undefined;
+
+  try {
+    parsedApiDefinition = relatedEntity?.metadata?.schema
+      ? JSON.parse(relatedEntity.metadata.schema)
+      : undefined;
+  } catch (err) {
+    parsedApiDefinition = undefined;
+  }
+
+  const definition: any =
+    !parsedApiDefinition || relatedEntity?.metadata?.specType !== 'openapi'
+      ? {
+          openapi: '3.0.0',
+          info: { version: '1', description: 'test', title: 'test' },
+          paths: {},
+          components: {
+            schemas: {},
+          },
+        }
+      : parsedApiDefinition;
+
+  return {
+    definition,
+    parsedSchema,
+    rawSchema: schema,
+  };
+}

package/src/core/types/catalog.ts

@@ -38,6 +38,12 @@ export type UseCatalogSearchResponse = {
   setSearchQuery: (query: string) => void;
 };
 
+export type UseCatalogFilterResponse = {
+  filters: ResolvedFilter[];
+  filterQuery: string;
+  setFilterQuery: (filterQuery: string) => void;
+};
+
 export type FilteredCatalog = {
   groups: { title: string; items: CatalogItem[] }[];
   filters: ResolvedFilter[];
@@ -160,6 +166,7 @@ export type BffCatalogEntity = {
     slack?: {
       channels?: Array<{
         name: string;
+        url?: string;
       }>;
     };
   };
@@ -195,3 +202,5 @@ export type Page = {
 };
 
 export type EntityRelationType = (typeof ENTITY_RELATION_TYPES)[number];
+
+export type ListType = 'default' | 'team' | 'api-operation' | 'data-schema';

package/src/core/types/filter.ts

@@ -3,7 +3,9 @@ import type { RedoclyConfig } from '@redocly/config';
 
 export type FilterProps = {
   filter: ResolvedFilter & { selectedOptions: any };
-  filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
+  filterValuesCasing?:
+    | NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing']
+    | ((str: string) => string);
   showCounter?: boolean;
 };
 

package/src/core/utils/change-text-casing.ts

@@ -1,6 +1,13 @@
 type Casing = 'original' | 'lowercase' | 'uppercase' | 'sentence';
 
-export function changeTextCasing(str: string, casing: Casing = 'original') {
+export function changeTextCasing(
+  str: string,
+  casing: Casing | ((str: string) => string) = 'original',
+) {
+  if (casing instanceof Function) {
+    return casing(str);
+  }
+
   if (casing === 'original' || !str) return str;
 
   if (casing === 'lowercase') {

package/src/ext/configure.ts

@@ -20,6 +20,7 @@ export type ConfigureRequestValues = {
   cookie?: Record<string, string>;
   security?: SecurityDetails;
   envVariables?: Record<string, string>;
+  serverVariables?: Record<string, string>;
 };
 
 export type ConfigureServerRequestValues = {
@@ -80,6 +81,9 @@ export function configure(_context: ContextProps): Configure {
   //   envVariables: {
   //     customLocation: 'prod'
   //   },
+  //   serverVariables: {
+  //     version: 'v1',
+  //   },
   // };
 
   // const { servers } = _context;
@@ -88,7 +92,7 @@ export function configure(_context: ContextProps): Configure {
   // for (const server of servers) {
   //   if (server.url === 'https://dev.api.fake-museum-example.com') {
   //     serverRequestValues[server.url] = exampleDevRequestValues;
-  //   } else if (server.url === 'https://api.fake-museum-example.com') {
+  //   } else if (server.url === 'https://api.fake-museum-example.com/{version}') {
   //     serverRequestValues[server.url] = exampleProdRequestValues;
   //   } else {
   //     serverRequestValues[server.url] = exampleDefaultRequestValues;

package/src/ext/useConfigureReplay.ts

@@ -0,0 +1,83 @@
+import { useEffect, useState, useCallback } from 'react';
+
+import type {
+  ConfigureRequestValues,
+  ConfigureServerRequestValues,
+} from '@redocly/theme/ext/configure';
+import type { UserClaims, OpenAPIServer } from '@redocly/theme/core/types';
+
+type ContextProps = {
+  operation: {
+    name: string;
+    path: string;
+    operationId: string;
+    href: string;
+    method: string;
+  };
+  servers: OpenAPIServer[];
+  userClaims: UserClaims;
+};
+
+async function getReplayConfiguration(
+  _context: ContextProps,
+): Promise<ConfigureRequestValues | ConfigureServerRequestValues | null> {
+  // Customize this function to fetch replay configuration from your API endpoint
+  // STEP 1: Uncomment the fetch code below and update the URL to your API endpoint
+
+  // try {
+  //   const response = await fetch(`/api/replay-config/${_context.operation.operationId}`, {
+  //     method: 'GET',
+  //     headers: {
+  //       'Content-Type': 'application/json',
+  //     },
+  //   });
+
+  //   if (!response.ok) {
+  //     throw new Error(`HTTP error! status: ${response.status}`);
+  //   }
+
+  //   const { token } = await response.json();
+  //
+  //   return {
+  //     security: {
+  //       token: {
+  //         access_token: token,
+  //       }
+  //     }
+  //   };
+  // } catch (error) {
+  //   console.warn('Failed to fetch replay configuration:', error);
+  //   throw error;
+  // }
+
+  // STEP 2: Remove this return null statement once you've implemented the fetch above
+  return null;
+}
+
+export function useConfigureReplay(context: ContextProps, isOpened: boolean) {
+  const [config, setConfig] = useState<
+    ConfigureRequestValues | ConfigureServerRequestValues | null
+  >();
+
+  const refresh = useCallback(async () => {
+    try {
+      const result = await getReplayConfiguration(context);
+      setConfig(result);
+    } catch (error) {
+      console.warn(
+        'Failed to configure replay for operation:',
+        context.operation.operationId,
+        error,
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (isOpened) {
+      refresh();
+    }
+  }, [isOpened, refresh]);
+
+  return { config, refresh };
+}

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty.d.ts

@@ -1,6 +0,0 @@
-import { JSX } from 'react';
-import { BffCatalogEntity } from '../../../../core/types';
-export type ApiDescriptionPropertyProps = {
-    entity: BffCatalogEntity;
-};
-export declare function ApiDescriptionProperty({ entity }: ApiDescriptionPropertyProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty.js

@@ -1,32 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ApiDescriptionProperty = ApiDescriptionProperty;
-const react_1 = __importDefault(require("react"));
-const react_router_dom_1 = require("react-router-dom");
-const styled_components_1 = __importDefault(require("styled-components"));
-const theme_1 = require("../../../../index.js");
-const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
-function ApiDescriptionProperty({ entity }) {
-    var _a;
-    const { useTranslate } = (0, theme_1.useThemeHooks)();
-    const { translate } = useTranslate();
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const pathPrefix = (0, theme_1.getPathPrefix)();
-    const descriptionFile = (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.descriptionFile;
-    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty" },
-        react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(theme_1.DocumentIcon, null),
-                translate('catalog.entity.properties.apiDescription.title')), content: react_1.default.createElement(theme_1.Tag, { textTransform: "none" },
-                react_1.default.createElement(DescriptionFile, null, descriptionFile)), onClick: () => {
-                navigate(`${pathPrefix}/${descriptionFile}`);
-            } })));
-}
-const DescriptionFile = styled_components_1.default.span `
-  word-break: break-all;
-  overflow-wrap: break-word;
-  white-space: normal;
-`;
-//# sourceMappingURL=ApiDescriptionProperty.js.map

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty.tsx

@@ -1,46 +0,0 @@
-import React, { JSX } from 'react';
-import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
-
-import { BffCatalogEntity } from '@redocly/theme/core/types';
-import { DocumentIcon, getPathPrefix, Tag, useThemeHooks } from '@redocly/theme';
-import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
-
-export type ApiDescriptionPropertyProps = {
-  entity: BffCatalogEntity;
-};
-
-export function ApiDescriptionProperty({ entity }: ApiDescriptionPropertyProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-  const navigate = useNavigate();
-  const pathPrefix = getPathPrefix();
-  const descriptionFile = entity.metadata?.descriptionFile;
-
-  return (
-    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty">
-      <CatalogEntityPropertyCard
-        header={
-          <>
-            <DocumentIcon />
-            {translate('catalog.entity.properties.apiDescription.title')}
-          </>
-        }
-        content={
-          <Tag textTransform="none">
-            <DescriptionFile>{descriptionFile}</DescriptionFile>
-          </Tag>
-        }
-        onClick={() => {
-          navigate(`${pathPrefix}/${descriptionFile}`);
-        }}
-      />
-    </div>
-  );
-}
-
-const DescriptionFile = styled.span`
-  word-break: break-all;
-  overflow-wrap: break-word;
-  white-space: normal;
-`;