@redocly/theme 0.10.0 → 0.11.0

package/src/components/Tiles/ThinTile.tsx

@@ -0,0 +1,134 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { Flex } from '@theme/ui/Flex';
+import { TileText } from '@theme/components/Tiles/TileText';
+import { TileHeader } from '@theme/components/Tiles/TileHeader';
+import type { TextAlign, TileProps } from '@theme/components/Tiles/types';
+
+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/components/Tiles/WideTile.tsx

@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import type { TileProps } from '@theme/components/Tiles/types';
+import { Link } from '@portal/Link';
+import { TileText } from '@theme/components/Tiles/TileText';
+import { TileHeader } from '@theme/components/Tiles/TileHeader';
+
+// 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/components/Tiles/index.ts

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

package/src/components/Tiles/types.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'react';
+
+export 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;
+}

package/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from '@theme/components/Tooltip/Tooltip';

package/src/components/Typography/CompactTypography.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+import { Typography } from '@theme/components/Typography/Typography';
+
+export const CompactTypography = styled(Typography).attrs(() => ({
+  mt: '0em',
+  mb: '0em',
+  'data-component-name': 'Typography/CompactTypography',
+}))``;

package/src/components/Typography/index.ts

@@ -0,0 +1,7 @@
+export * from '@theme/components/Typography/H1';
+export * from '@theme/components/Typography/H2';
+export * from '@theme/components/Typography/H3';
+export * from '@theme/components/Typography/Emphasis';
+export * from '@theme/components/Typography/SectionHeader';
+export * from '@theme/components/Typography/Typography';
+export * from '@theme/components/Typography/CompactTypography';

package/src/components/index.ts

@@ -0,0 +1,28 @@
+export * from './Button';
+export * from './CopyButton';
+export * from './EditPageButton';
+export * from './JsonViewer';
+export * from './Typography';
+export * from './SidebarLogo';
+export * from './CodeBlock';
+export * from './SamplesPanelControls';
+export * from './Tooltip';
+export * from './SourceCode';
+export * from './Panel';
+export * from './Feedback';
+export * from './OperationBadge';
+export * from './TableOfContent';
+export * from './Profile';
+export * from './ColorModeSwitcher';
+export * from './Sidebar';
+export * from './Markdown';
+export * from './OpenAPIDocs';
+export * from './SidebarActions';
+export * from './Filter';
+export * from './Tags';
+export * from './CodeSample';
+export * from './Tabs';
+export * from './Menu';
+export * from './Separator';
+export * from './Cards';
+export * from './Tiles';

package/src/hooks/useThemeConfig.ts

@@ -1 +1,10 @@
-export { useThemeConfig } from '@portal/hooks';
+import { createContext, useContext } from 'react';
+
+import type { ThemeUIConfig } from '@theme';
+
+export const ThemeConfigContext = createContext<ThemeUIConfig>({} as ThemeUIConfig);
+
+export function useThemeConfig<T extends Record<string, unknown>>(): T &
+  NonNullable<ThemeUIConfig> {
+  return (useContext(ThemeConfigContext) as T & NonNullable<ThemeUIConfig>) || {};
+}

package/src/icons/ExternalIcon/ExternalIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+// TODO use with "Sidebar/ExternalIcon"
+const Icon = ({
+  className,
+  dataComponentName,
+}: {
+  className?: string;
+  dataComponentName?: string;
+}): JSX.Element => (
+  <span data-component-name={dataComponentName}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      x="0px"
+      y="0px"
+      viewBox="0 0 100 125"
+      enableBackground="new 0 0 100 100"
+      className={className}
+    >
+      <path d="M-408.167-318.5" />
+      <line
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="0.25"
+        strokeMiterlimit="10"
+        x1="57.5"
+        y1="11.75"
+        x2="57.5"
+        y2="17.5"
+      />
+      <path d="M98.57,4.784c-0.024-0.113-0.047-0.223-0.074-0.334c-0.035-0.117-0.075-0.231-0.117-0.346 c-0.023-0.062-0.037-0.125-0.064-0.187c-0.016-0.032-0.03-0.06-0.049-0.092c-0.048-0.119-0.107-0.227-0.17-0.336 c-0.05-0.089-0.095-0.179-0.152-0.265c-0.062-0.1-0.139-0.195-0.209-0.292C97.67,2.85,97.611,2.77,97.545,2.69 c-0.081-0.092-0.172-0.178-0.258-0.262c-0.07-0.068-0.139-0.139-0.212-0.202c-0.093-0.083-0.196-0.158-0.3-0.232 c-0.08-0.058-0.152-0.114-0.236-0.163c-0.104-0.069-0.219-0.128-0.329-0.186c-0.091-0.046-0.175-0.093-0.262-0.132 c-0.044-0.019-0.081-0.043-0.121-0.061c-0.074-0.03-0.154-0.046-0.234-0.072c-0.095-0.033-0.19-0.065-0.288-0.092 c-0.123-0.034-0.246-0.059-0.369-0.083c-0.096-0.019-0.188-0.036-0.289-0.046c-0.131-0.018-0.263-0.022-0.393-0.028 c-0.064-0.002-0.12-0.012-0.186-0.012L63.77,1.305c-2.535,0.017-4.566,2.078-4.554,4.605c0.019,2.525,2.084,4.563,4.604,4.546 l19.258-0.121l-29.79,30.162c-1.112,1.126-1.526,2.678-1.233,4.118c0.174,0.863,0.596,1.691,1.272,2.357 c0.897,0.888,2.073,1.325,3.245,1.32c1.17-0.007,2.337-0.459,3.227-1.361l0.002-0.001l29.787-30.158l0.121,19.255 c0.014,2.523,2.07,4.564,4.602,4.545c1.268-0.005,2.408-0.526,3.233-1.357c0.817-0.834,1.325-1.98,1.317-3.242L98.675,5.665 c0-0.063-0.016-0.124-0.016-0.189c-0.009-0.123-0.015-0.25-0.032-0.375C98.616,4.992,98.592,4.89,98.57,4.784z" />
+      <path d="M6.542,83.279c0,5.717,4.635,10.354,10.354,10.354l55.616,0.065c5.719,0,10.354-4.636,10.354-10.354l-0.091-40.782h6.135 v40.849c0,9.014-7.307,16.319-16.319,16.319l-56.36-0.066c-8.597,0-15.564-6.969-15.564-15.562L0.585,27.821 c0-9.014,7.306-16.32,16.32-16.32l41.138-0.084v6.142L16.98,17.535c-5.718,0-10.354,4.635-10.354,10.354L6.542,83.279z" />
+    </svg>
+  </span>
+);
+
+export const ExternalIcon = styled(Icon)`
+  width: 10px;
+  height: 10px;
+  margin-left: 5px;
+  fill: var(--sidebar-group-item-chevron-color);
+`;

package/src/icons/ExternalIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/ExternalIcon/ExternalIcon';

package/src/icons/index.ts

@@ -3,3 +3,4 @@ export * from '@theme/icons/AlertIcon';
 export * from '@theme/icons/ArrowIcon';
 export * from '@theme/icons/ColorModeIcon';
 export * from '@theme/icons/AnchorIcon';
+export * from '@theme/icons/ExternalIcon';

package/src/index.ts

@@ -1,27 +1,9 @@
-export * from './Button';
-export * from './CopyButton';
-export * from './EditPageButton';
-export * from './JsonViewer';
-export * from './Typography';
-export * from './SidebarLogo';
-export * from './CodeBlock';
-export * from './SamplesPanelControls';
-export * from './Tooltip';
-export * from './SourceCode';
-export * from './Panel';
+export * from './components';
+export * from './layouts';
 export * from './icons';
-export * from './Feedback';
 export * from './hooks';
 export * from './utils';
 export * from './globalStyle';
-export * from './OperationBadge';
-export * from './TableOfContent';
-export * from './Profile';
-export * from './ColorModeSwitcher';
-export * from './Sidebar';
 export * from './types/config';
 export * from './config';
-export * from './Pages';
-export * from './Markdown';
-export * from './ReferenceDocs';
-export * from './SidebarActions';
+export * from './ui';

package/src/layouts/Forbidden.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from '@theme';
+
+export function Forbidden(): JSX.Element {
+  return (
+    <Wrapper data-component-name="Pages/Forbidden">
+      <Header>403</Header>
+      <Description>Access forbidden</Description>
+      <HomeButton color="primary" size="large" to="/">
+        Open Homepage
+      </HomeButton>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin: 25px auto;
+  font-family: var(--page-403-font-family);
+  text-align: center;
+`;
+
+const Header = styled.div`
+  color: var(--page-403-header-text-color);
+  margin: var(--page-403-header-margin);
+  font-size: var(--page-403-header-font-size);
+  line-height: var(--page-403-header-line-height);
+  font-weight: var(--page-403-header-font-weight);
+`;
+
+const Description = styled.div`
+  color: var(--page-403-description-text-color);
+  margin: var(--page-403-description-margin);
+  font-size: var(--page-403-description-font-size);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+
+const HomeButton = styled(Button)`
+  margin-top: var(--page-403-button-margin);
+`;

package/src/layouts/NotFound.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Button } from '@theme/components/Button';
+
+export function NotFound(): JSX.Element {
+  return (
+    <Wrapper data-component-name="Pages/NotFound">
+      <Header>404</Header>
+      <Description>It looks like you&apos;re lost</Description>
+      <HomeButton color="primary" size="large" to="/">
+        Open Homepage
+      </HomeButton>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin: 25px auto;
+  font-family: var(--page-404-font-family);
+  text-align: center;
+`;
+
+const Header = styled.div`
+  color: var(--page-404-header-text-color);
+  margin: var(--page-404-header-margin);
+  font-size: var(--page-404-header-font-size);
+  line-height: var(--page-404-header-line-height);
+  font-weight: var(--page-404-header-font-weight);
+`;
+
+const Description = styled.div`
+  color: var(--page-404-description-text-color);
+  margin: var(--page-404-description-margin);
+  font-size: var(--page-404-description-font-size);
+  line-height: var(--page-404-description-line-height);
+  font-weight: var(--page-404-description-font-weight);
+`;
+
+const HomeButton = styled(Button)`
+  margin-top: var(--page-404-button-margin);
+`;

package/src/layouts/RootLayout.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Navbar } from '@theme/components/Navbar';
+import { Footer } from '@theme/components/Footer';
+
+interface LayoutConfig {
+  children: React.ReactNode;
+}
+
+const Wrapper = styled.div``;
+
+export function RootLayout({ children }: LayoutConfig): JSX.Element {
+  return (
+    <Wrapper data-component-name="Layout/RootLayout">
+      <Navbar />
+      {children}
+      <Footer />
+    </Wrapper>
+  );
+}

package/src/layouts/index.ts

@@ -0,0 +1,4 @@
+export * from '@theme/layouts/RootLayout';
+export * from '@theme/layouts/PageLayout';
+export * from '@theme/layouts/NotFound';
+export * from '@theme/layouts/Forbidden';

package/src/mocks/Profile/useProfileProps.tsx

@@ -0,0 +1,12 @@
+export function useProfileProps(): any {
+  return {
+    loginUrl: 'https://login.redoc.ly',
+    userData: {
+      isAuthenticated: true,
+      name: 'test-name',
+      picture: 'picture',
+    },
+    hasDeveloperOnboarding: true,
+    handleLogout: () => {},
+  };
+}

package/src/mocks/Sidebar/getMenuType.ts

@@ -0,0 +1,6 @@
+import { MenuType } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function getMenuType(_props: any) {
+  return MenuType.Separator;
+}

package/src/mocks/Sidebar/types.ts

@@ -0,0 +1,15 @@
+export type SidebarNavItem = any;
+
+export type ItemState = any;
+
+export enum MenuType {
+  Separator = 'separator',
+  DrillDown = 'drilldown',
+  Group = 'group',
+  Operation = 'operation',
+}
+
+export type MenuItemProps = any;
+
+export type ActionsProps = any;
+export type AccessStatus = any;

package/src/mocks/Sidebar/useDrilldown.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useDrilldown(_props: any) {
+  return {
+    Drilldown: ({ children }: any) => <div>{children}</div>,
+    handleBack: () => {},
+    handleExpand: () => {},
+    isExpanded: false,
+    prevActiveItem: 'prevActiveItem',
+  };
+}

package/src/mocks/Sidebar/useMenuGroup.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useMenuGroup(_item: any) {
+  return {
+    MenuGroup: ({ children }: any) => <div>{children}</div>,
+    handleGroupClick: () => {},
+    isExpanded: false,
+  };
+}

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

@@ -0,0 +1,17 @@
+export const DEFAULT_THEME_NAME = '@redocly/theme';
+export const USER_THEME_ALIAS = '@theme';
+export const REDOCLY_TEAMS_RBAC = 'redocly::teams-rbac';
+export type REQUIRED_OIDC_SCOPES =  string[];
+export type DEFAULT_COOKIE_EXPIRATION = number;
+export enum FEEDBACK_TYPES {
+  RATING = 'rating',
+  SENTIMENT = 'sentiment',
+  COMMENT = 'comment',
+}
+export const DEV_LOGIN_SLUG = '/login/';
+export enum ExternalRoutes {
+  AUTH0_PASS = '/auth/auth0-pass',
+}
+export enum FsErrors {
+  NotExist = 'ENOENT',
+}

package/src/types/portal/src/shared/types/activeItem.ts

@@ -0,0 +1 @@
+export type ActiveItem<T> = T & { active: boolean };