@redocly/theme 0.10.0 → 0.11.0

package/src/types/portal/src/shared/constants.d.ts

@@ -1,46 +0,0 @@
-export declare const RUNTIME_RESOURCES_DIR = 'runtime';
-export declare const REDOC_OVERVIEW_ITEM_ID = 'overview';
-export declare const DEFAULT_THEME_NAME = '@redocly/theme';
-export declare const CUSTOM_MARKDOC_OPTIONS_PATH = 'markdoc';
-export declare const CUSTOM_MARKDOC_TAGS_PATH = 'tags';
-export declare const USER_THEME_ALIAS = '@theme';
-export declare const PUBLIC_ASSETS_FOLDER = '/assets';
-export declare const PUBLIC_STATIC_FOLDER = '/static';
-export declare const PERMISSION_PROP_NAME = 'redocly::permission';
-export declare const DEFAULT_PLACEHOLDER_PERMISSION = 'redocly:default-permission';
-export declare const REQUIRED_OIDC_SCOPES: string[];
-export declare const DEFAULT_COOKIE_EXPIRATION: number;
-export declare const DEFAULT_AUTHENTICATED_ROLE = 'AuthenticatedUser';
-export declare const DEFAULT_AUTHENTICATED_PERMISSION = 'redocly:authenticated-user';
-export declare const SEARCH_LIMIT = 50;
-export declare enum FEEDBACK_TYPES {
-  RATING = 'rating',
-  SENTIMENT = 'sentiment',
-  COMMENT = 'comment',
-}
-export declare enum ServerRoutes {
-  EJECT_COMPONENT = '/eject-component/:componentName',
-  SHARED_PAGE_DATA = '/page-data/shared/*',
-  PAGE_DATA = '/page-data/*',
-  APP_DATA = '/app-data.json',
-  SEARCH_DATA = '/search-data.json',
-  SEARCH_INDEX = '/search-index.json',
-  AUTHORIZATION = '/authorize',
-  OIDC_CALLBACK = '/_auth/oidc',
-  SAML_CALLBACK = '/_auth/saml2',
-  BASIC_AUTH = '/_auth/basic',
-  REDOCLY_CALLBACK = '/_auth/redocly',
-  REDOCLY_LOGIN_CALLBACK = '/_auth/redocly/redocly-login',
-  SEARCH = '/_search',
-  LOGOUT = '/logout',
-  LOGIN = '/login',
-  IDP_LOGIN = '/_auth/idp-login',
-}
-export declare const DEV_LOGIN_SLUG = '/login/';
-export declare enum ExternalRoutes {
-  AUTH0_PASS = '/auth/auth0-pass',
-}
-export declare enum FsErrors {
-  NotExist = 'ENOENT',
-}
-export declare const INTERNALLY_IGNORED_FILES: string[];

package/src/types/portal/src/shared/types/catalog.d.ts

@@ -1,55 +0,0 @@
-import type { NavItem } from './nav';
-
-export type FilteredCatalog = {
-  groups: { title: string; items: CatalogItem[] }[];
-  filters: ResolvedFilter[];
-  filterTerm: string;
-  setFilterTerm: (term: string) => void;
-};
-
-export type Filter = {
-  type?: 'select' | 'checkboxes';
-  title: string;
-  property: string;
-  parentFilter?: string;
-  missingCategoryName?: string;
-  options?: string[];
-};
-
-export type CatalogConfig = {
-  slug: string;
-  filters: Filter[];
-  groupByFirstFilter: boolean;
-  items: NavItem[];
-  requiredPermission?: string;
-  separateVersions?: boolean;
-  title?: string;
-  description?: string;
-};
-
-export type CatalogThemeConfig = {
-  catalog: Record<string, CatalogConfig>;
-};
-
-export type ResolvedFilter = Omit<Filter, 'options'> & {
-  options: {
-    value: string;
-    count: number;
-  }[];
-  filteredOptions: {
-    value: string;
-    count: number;
-  }[];
-  toggleOption: (option: string) => void;
-  selectOption: (option: string) => void;
-  parentUsed: boolean;
-  selectedOptions: Set<string>;
-};
-
-export type CatalogItem = {
-  title: string;
-  link: string;
-  description?: string;
-  image?: string;
-  [k: string]: unknown;
-};

package/src/types/portal/src/shared/types/feedback.d.ts

@@ -1,8 +0,0 @@
-import type { FEEDBACK_TYPES } from '../constants';
-
-import type { RatingProps, SentimentProps, CommentProps } from '@theme/Feedback';
-
-export declare type FeedbackProps = {
-  type: FEEDBACK_TYPES;
-  settings: (RatingProps | SentimentProps | CommentProps)['settings'];
-}

package/src/types/portal/src/shared/types/markdown.d.ts

@@ -1,5 +0,0 @@
-export declare type MdHeading = {
-  id: string;
-  value: string;
-  depth: number;
-};

package/src/types/portal/src/shared/types/nav.d.ts

@@ -1,158 +0,0 @@
-/// <reference types="react" />
-import type { PERMISSION_PROP_NAME } from '../constants';
-export declare type ResolvedNavLinkItem = {
-  type: 'link';
-  link: string;
-  label: string;
-  items?: ResolvedNavItem[];
-  external?: boolean;
-  target?: '_self' | '_blank';
-  version?: string;
-  isDefault?: boolean;
-  versionFolderId?: string;
-  httpVerb?: string;
-  separatorLine?: boolean;
-  routeSlug?: string;
-  active?: boolean;
-  [PERMISSION_PROP_NAME]?: string;
-};
-export declare type ResolvedNavGroupItem = {
-  type: 'group';
-  link?: string;
-  label?: string;
-  items?: ResolvedNavItem[];
-  external?: never;
-  target?: never;
-  expanded?: string;
-  version?: string;
-  isDefault?: boolean;
-  versionFolderId?: string;
-  menuStyle?: MenuStyle;
-  separatorLine?: boolean;
-  routeSlug?: string;
-  active?: boolean;
-  [PERMISSION_PROP_NAME]?: string;
-};
-export declare type ResolvedNavItem =
-  | ResolvedNavLinkItem
-  | ResolvedNavGroupItem
-  | {
-      type: 'separator';
-      label?: string;
-      version?: string;
-      isDefault?: boolean;
-      versionFolderId?: string;
-      separatorLine?: boolean;
-      link?: undefined;
-      items?: ResolvedNavItem[];
-      [PERMISSION_PROP_NAME]?: string;
-    }
-  | {
-      type: 'error';
-      version?: string;
-      isDefault?: boolean;
-      versionFolderId?: string;
-      label: string;
-      link?: undefined;
-      items?: ResolvedNavItem[];
-      [PERMISSION_PROP_NAME]?: string;
-    };
-export declare type ResolvedNavItemWithLink = (ResolvedNavLinkItem | ResolvedNavGroupItem) & {
-  link: string;
-};
-export declare type ResolvedSidebar = ResolvedNavItem[];
-export interface PageProps {
-  seo?: {
-    title?: string;
-  };
-  frontmatter?: Omit<PageProps, 'frontmatter'> & {
-    settings?: any;
-  };
-  disableAutoScroll?: boolean;
-  lastModified?: string | null;
-  [k: string]: any;
-}
-export interface PageStaticData {
-  props?: PageProps;
-  [k: string]: unknown;
-}
-export declare type UserData = {
-  isAuthenticated: boolean;
-  name: string;
-  picture: string;
-};
-export interface PageData {
-  templateId: string;
-  sharedDataIds: Record<string, string>;
-  props: PageProps;
-  versions?: Version[];
-  userData: UserData;
-}
-export interface CachedPageData extends PageData {
-  Template: React.ComponentType<{
-    pageProps: PageProps;
-  }>;
-}
-export interface ResolvedPageData extends CachedPageData {
-  sharedData: Record<string, unknown>;
-  nextPage?: any;
-  prevPage?: any;
-}
-export declare enum MenuStyle {
-  Drilldown = 'drilldown',
-}
-export declare type NavItem = {
-  page?: string;
-  directory?: string;
-  group?: string;
-  label?: string;
-  href?: never;
-  items?: NavItem[];
-  separator?: string;
-  separatorLine?: boolean;
-  version?: string;
-  menuStyle?: MenuStyle;
-  external?: boolean;
-  expanded?: boolean | 'always';
-};
-export declare type RawNavItem = string | NavItem;
-export interface LogoConfig {
-  image?: string;
-  altText?: string;
-  link?: string;
-  favicon?: string;
-}
-export declare type Version = {
-  version: string;
-  label: string;
-  link: string;
-  default: boolean;
-  active: boolean;
-  notExists?: boolean;
-  folderId: string;
-};
-export declare type VersionConfigItem = {
-  version: string;
-  name?: string;
-};
-export declare type VersionsConfigType = {
-  versions: VersionConfigItem[];
-  default?: string;
-};
-export declare type VersionedFolderConfig = {
-  versionedFiles: Map<string, Set<string>>;
-  defaultVersion?: string;
-  versions: VersionConfigItem[];
-  hasVersionsConfig?: boolean;
-};
-export declare type NavGroup = ResolvedNavItem[] | undefined | string | boolean | number;
-export declare type NavGroupRecord = Record<string, NavGroup>;
-export declare type ResolvedConfigLinks = NavGroup | NavGroupRecord;
-export declare type RawNavConfigItem =
-  | RawNavItem
-  | RawNavItem[]
-  | string
-  | undefined
-  | boolean
-  | number;
-export declare type RawNavConfig = RawNavConfigItem | Record<string, RawNavConfigItem>;

package/src/ui/Tiles/ThinTile.tsx

@@ -1,153 +0,0 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-
-import type { CSSProperties } from 'react';
-
-import { Link } from '@portal/Link';
-import { Flex } from '@theme/ui/Flex';
-import { TileText } from '@theme/ui/Tiles/TileText';
-import { TileHeader } from '@theme/ui/Tiles/TileHeader';
-
-type TextAlign = 'left' | 'right' | 'center' | 'justify';
-
-export interface TileProps {
-  header?: string;
-  icon?: string;
-  children?: string;
-  to?: string;
-  target?: string;
-  headerAlign?: TextAlign;
-  textAlign?: TextAlign;
-  bgColor?: string;
-  bgImage?: string;
-  color?: string;
-  className?: string;
-  style?: CSSProperties;
-  maxWidth?: string;
-}
-
-const ThinTileWrapper = styled(Link)<{ bgColor?: string; bgImage?: string }>`
-  display: flex;
-  flex-direction: column;
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
-  box-sizing: border-box;
-  transition: box-shadow 0.25s ease;
-  padding: 24px;
-  margin-bottom: 20px;
-  text-decoration: none;
-  width: 100%;
-  background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
-  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
-  background-repeat: no-repeat;
-
-  :hover {
-    box-shadow: 0 10px 100px 0 rgba(35, 35, 35, 0.2);
-  }
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    width: calc(50% - 20px);
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    width: 250px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.large} {
-    width: 280px;
-  }
-
-  &.external-url {
-    :after {
-      display: none;
-    }
-  }
-`;
-
-const ThinTileIcon = styled.img`
-  width: 90px;
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    width: 80px;
-  }
-`;
-
-const ThinTileHeader = styled(TileHeader)<{ align?: TextAlign }>`
-  font-size: 24px;
-  text-align: ${({ align }) => align || 'center'};
-`;
-
-const ThinTileText = styled(TileText)<{ icon?: string; align?: TextAlign }>`
-  font-size: 18px;
-  line-height: 1.5;
-  flex-shrink: 0;
-  min-height: 3em;
-  text-align: ${({ align }) => align || 'center'};
-  ${({ icon }) =>
-    icon
-      ? `
-    display: -webkit-box;
-    -webkit-line-clamp: 8;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    line-clamp: 8;
-  `
-      : ''};
-  ${({ theme }) => theme.mediaQueries.small} {
-    min-height: 6em;
-  }
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    min-height: 4.5em;
-  }
-`;
-
-export class ThinTile extends Component<TileProps> {
-  render(): JSX.Element {
-    const { header, icon, children, to, target, headerAlign, textAlign, color, className, style } =
-      this.props;
-
-    const Wrapper = to
-      ? ThinTileWrapper
-      : (ThinTileWrapper.withComponent('div') as typeof ThinTileWrapper);
-
-    return (
-      <Wrapper
-        to={to}
-        target={target}
-        color={color}
-        className={className}
-        style={style}
-        data-component-name="ui/Tiles/ThinTile"
-      >
-        {(icon || header) && (
-          <Flex flexDirection="column">
-            {icon && (
-              <Flex
-                flexShrink={0}
-                height={{ xs: 'auto', small: '100px', medium: '110px' }}
-                alignItems="center"
-                justifyContent="center"
-                mb="25px"
-              >
-                <ThinTileIcon src={icon} />
-              </Flex>
-            )}
-            {header && (
-              <ThinTileHeader align={headerAlign} color={color} data-cy={`Thin-${header}`}>
-                {header}
-              </ThinTileHeader>
-            )}
-          </Flex>
-        )}
-        {children && (
-          <ThinTileText icon={icon} align={textAlign} color={color}>
-            {children}
-          </ThinTileText>
-        )}
-      </Wrapper>
-    );
-  }
-}

package/src/ui/Tiles/WideTile.tsx

@@ -1,138 +0,0 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-
-import { Link } from '@portal/Link';
-import { TileText } from '@theme/ui/Tiles/TileText';
-import { TileHeader } from '@theme/ui/Tiles/TileHeader';
-import type { TileProps } from '@theme/ui';
-
-// prettier-ignore
-const WideTileWrapper = styled(Link)<{
-  disableArrow?: boolean;
-  withIcon: boolean;
-  bgColor?: string;
-  bgImage?: string;
-  color?: string;
-  maxWidth?: string;
-}>`
-  display: inline-flex;
-  flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
-  background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
-  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
-  background-repeat: no-repeat;
-  padding: 24px;
-  padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
-  margin-bottom: 32px;
-  box-sizing: border-box;
-  position: relative;
-  text-decoration: none;
-  width: 100%;
-  transition: box-shadow 0.25s ease;
-  :hover {
-    box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.2);
-  }
-  :before {
-    content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
-    display: inline-block;
-    width: 9px;
-    min-height: 18px;
-    background-size: 9px 18px;
-    background-repeat: no-repeat;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 30px;
-  }
-  &.external-url::after {
-    content: none;
-  }
-  
-  ${({ theme }) => theme.mediaQueries.medium} {
-    width: calc(50% - 2em);
-    padding: 32px;
-    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
-    flex-direction: row;
-    max-width: ${({ maxWidth }) => maxWidth};
-  }
-`;
-
-const WideTileHeader = styled(TileHeader)<{ align?: string }>`
-  font-size: 24px;
-  text-align: ${({ align }) => align || 'left'};
-`;
-const WideTileText = styled(TileText)<{ align?: string }>`
-  font-size: 18px;
-  text-align: ${({ align }) => align || 'left'};
-`;
-
-const WideTileIcon = styled.div`
-  margin-bottom: 24px;
-  flex-shrink: 0;
-  width: 70px;
-  img {
-    display: block;
-    height: auto;
-    max-width: 100%;
-  }
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    margin-right: 24px;
-    margin-bottom: 0;
-  }
-`;
-
-export class WideTile extends Component<TileProps & { disableArrow?: boolean }> {
-  render(): JSX.Element {
-    const {
-      to,
-      header,
-      children,
-      target,
-      disableArrow,
-      textAlign,
-      headerAlign,
-      icon,
-      bgColor,
-      bgImage,
-      color,
-      className,
-      style,
-      maxWidth,
-    } = this.props;
-    return (
-      <WideTileWrapper
-        to={to}
-        target={target}
-        disableArrow={disableArrow}
-        withIcon={!!icon}
-        bgColor={bgColor}
-        bgImage={bgImage}
-        color={color}
-        className={className}
-        style={style}
-        maxWidth={maxWidth}
-        data-component-name="ui/Tiles/WideTile"
-      >
-        {icon && (
-          <WideTileIcon>
-            <img src={icon} alt="" />
-          </WideTileIcon>
-        )}
-        <div>
-          {header && (
-            <WideTileHeader align={textAlign} color={color} data-cy={`Wide-${header}`}>
-              {header}
-            </WideTileHeader>
-          )}
-          {children && (
-            <WideTileText align={headerAlign} color={color}>
-              {children}
-            </WideTileText>
-          )}
-        </div>
-      </WideTileWrapper>
-    );
-  }
-}

package/src/ui/Tiles/index.ts

@@ -1,4 +0,0 @@
-export * from '@theme/ui/Tiles/ThinTile';
-export * from '@theme/ui/Tiles/TileHeader';
-export * from '@theme/ui/Tiles/TileText';
-export * from '@theme/ui/Tiles/WideTile';