@redocly/theme 0.1.2 → 0.1.3

package/src/JsonViewer/index.ts

@@ -0,0 +1 @@
+export * from './JsonViewer';

package/src/JsonViewer/styled.ts

@@ -0,0 +1,103 @@
+import { css } from 'styled-components';
+
+export const jsonStyles = css`
+  .redoc-json code > .collapser {
+    display: none;
+    pointer-events: none;
+  }
+
+  contain: content;
+  overflow-x: auto;
+  padding: 10px;
+  border-radius: var(--global-border-radius);
+  background-color: var(--samples-panel-controls-background-color);
+  color: var(--color-content-inverse);
+  font-size: var(--code-font-size);
+  font-family: var(--code-font-family);
+  white-space: var(--code-wrap, pre);
+
+  .callback-function {
+    color: gray;
+  }
+
+  .collapser:after {
+    content: '-';
+    cursor: pointer;
+  }
+
+  .collapsed > .collapser:after {
+    content: '+';
+    cursor: pointer;
+  }
+
+  .ellipsis:after {
+    content: ' … ';
+  }
+
+  .collapsible {
+    margin-left: 2ch;
+  }
+
+  .hoverable {
+    padding: 1px 2px;
+  }
+
+  .hovered {
+    background-color: rgba(235, 238, 249, 1);
+  }
+
+  .collapser {
+    background-color: transparent;
+    border: 0;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    top: 4px;
+    left: -1.5em;
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
+    padding: 2px;
+    font-family: var(--code-font-family);
+    font-size: var(--code-font-size);
+    &:focus {
+      outline: #fff dotted 1px;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0 0 0 26px;
+  }
+
+  li {
+    position: relative;
+    display: block;
+  }
+
+  .hoverable {
+    display: inline-block;
+  }
+
+  .selected {
+    outline-width: 1px;
+    outline-style: dotted;
+  }
+
+  .collapsed > .collapsible {
+    display: none;
+  }
+
+  .ellipsis {
+    display: none;
+  }
+
+  .collapsed > .ellipsis {
+    display: inherit;
+  }
+`;

package/src/Logo/Logo.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+
+export interface LogoConfig {
+  image?: string;
+  altText?: string;
+  link?: string;
+  favicon?: string;
+}
+
+export function Logo({ logo }: { logo: LogoConfig }): JSX.Element | null {
+  const img = <NavLogo src={logo.image} alt={logo.altText} data-component-name="Logo/Logo" />;
+  return logo?.image ? logo.link ? <Link to={logo.link}>{img}</Link> : img : null;
+}
+
+const NavLogo = styled.img`
+  max-width: var(--logo-max-width);
+  max-height: var(--logo-max-height);
+  height: var(--logo-height);
+  margin: var(--logo-margin);
+`;

package/src/Navbar/Navbar.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Navbar from './Navbar';
+import NavbarMenu from './NavbarMenu';
+
+import { Logo } from '@theme/Logo/Logo';
+
+export default {
+  title: 'Navbar',
+  component: Navbar,
+  // argTypes: {
+  //   size: {
+  //     control: 'radio',
+  //     options: ['small', 'medium', 'large', 'xlarge'],
+  //   },
+  //   color: {
+  //     control: 'radio',
+  //     options: ['primary', 'secondary', 'default'],
+  //   },
+  // },
+} as ComponentMeta<typeof Navbar>;
+
+const Template: ComponentStory<typeof Navbar> = (args) => <Navbar {...args}>Click</Navbar>;
+
+export const Main = Template.bind({});
+Main.args = {
+  logo: <Logo logo={{ link: '/test/', image: 'https://picsum.photos/400/100' }} />,
+  menu: (
+    <NavbarMenu
+      menuItems={[
+        { type: 'link', link: 'https://google.com', label: 'Google' },
+        { type: 'link', link: '/test/', label: 'Test' },
+      ]}
+    />
+  ),
+  search: <span> search </span>,
+};

package/src/Navbar/Navbar.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+
+// import { mediaQueries } from '@portal/media-css';
+
+interface NavbarProps {
+  menu: React.ReactNode;
+  logo: React.ReactNode;
+  search: React.ReactNode;
+}
+
+export default function Navbar({ menu, logo, search }: NavbarProps): JSX.Element {
+  return (
+    <NavbarContainer data-component-name="Navbar/Navbar">
+      {logo}
+      {menu}
+      {search}
+    </NavbarContainer>
+  );
+}
+
+export const NavbarContainer = styled.nav`
+  height: var(--navbar-height);
+  box-sizing: border-box;
+  display: flex;
+  color: var(--navbar-color-text);
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+
+  font-size: 0.875rem;
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  padding: 1.25rem;
+  padding: 10px var(--sidebar-margin-left);
+  background: var(--navbar-color-background);
+  font-family: var(--font-family-h);
+`;
+
+// ${mediaQueries.medium} {
+//   padding: 10px var(--sidebar-margin-left);
+// }
+
+// ${mediaQueries.medium} {
+//   font-size: 1rem;
+// }
+
+// ${mediaQueries.print} {
+//   background: transparent;
+//   display: none;
+
+//   > :not(a, img) {
+//     display: none !important;
+//   }
+//   img {
+//     padding: 0;
+//     margin: 0;
+//   }
+// }

package/src/Navbar/NavbarItem.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
+
+import { Link } from '@portal/Link';
+import { withPathPrefix } from '@portal/utils';
+
+export enum MenuStyle {
+  Drilldown = 'drilldown',
+}
+
+export type ResolvedNavLinkItem = {
+  type: 'link';
+  link: string;
+  label: string;
+  items?: ResolvedNavItem[];
+  external?: boolean;
+  version?: string;
+  default?: string;
+  httpVerb?: string; // TODO: make a separate type of item
+  separatorLine?: boolean;
+  active?: boolean;
+};
+
+export type ResolvedNavGroupItem = {
+  type: 'group';
+  link?: string;
+  label: string;
+  items: ResolvedNavItem[];
+  version?: string;
+  default?: string;
+  menuStyle?: MenuStyle;
+  separatorLine?: boolean;
+  active?: boolean;
+};
+
+export type ResolvedNavItem =
+  | ResolvedNavLinkItem
+  | ResolvedNavGroupItem
+  | {
+      type: 'separator';
+      label?: string;
+      separatorLine?: boolean;
+    }
+  | {
+      type: 'error';
+      label: string;
+    };
+
+interface NavbarItemProps {
+  navItem: ResolvedNavLinkItem;
+}
+
+export default function NavbarItem({ navItem }: NavbarItemProps): JSX.Element {
+  const { pathname } = useLocation();
+  const isActive = pathname === withPathPrefix(navItem.link);
+
+  return (
+    <NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem">
+      <NavLink to={navItem.link} active={isActive}>
+        <NavLabel>{navItem.label}</NavLabel>
+      </NavLink>
+    </NavMenuItem>
+  );
+}
+
+const NavMenuItem = styled.li<{ active?: boolean }>`
+  display: inline-block;
+  padding: 20px calc(var(--sidebar-padding-horizontal) * 2);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  margin-left: var(--navbar-item-margin-horizontal);
+  margin-right: var(--navbar-item-margin-horizontal);
+  border-radius: var(--navbar-item-border-radius);
+  font-weight: var(--navbar-item-font-weight);
+  background: ${({ active }) => (active ? 'var(--navbar-item-active-background-color)' : 'none')};
+`;
+
+const NavLink = styled(Link)`
+  color: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-color-text)'};
+  text-decoration: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
+`;
+
+const NavLabel = styled.span`
+  cursor: pointer;
+  vertical-align: middle;
+`;

package/src/Navbar/NavbarMenu.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import NavbarItem from '@theme/Navbar/NavbarItem';
+
+export default function NavbarMenu({ menuItems }: { menuItems: any[] }): JSX.Element | null {
+  if (!menuItems || !menuItems.length) {
+    return null;
+  }
+
+  return (
+    <NavItemsContainer data-component-name="Navbar/NavbarMenu">
+      {menuItems.map((navItem, index) => {
+        return <NavbarItem key={index} data-cy={navItem.label} navItem={navItem} />;
+      })}
+    </NavItemsContainer>
+  );
+}
+
+const NavItemsContainer = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+`;
+
+// ${mediaQueries.small} {
+//   display: block;
+// }

package/src/Panel/CodePanel.stories.tsx

@@ -0,0 +1,27 @@
+import React, { JSXElementConstructor } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { CodePanel } from './CodePanel';
+import { PanelComponentProps } from './PanelComponent';
+
+export default {
+  title: 'Components/Panels/CodePanel',
+  component: CodePanel,
+} as ComponentMeta<typeof CodePanel>;
+
+// TODO: find the way to avoid using JSXElementConstructor<PanelComponentProps> and fix types for ComponentStory<typeof CodePanel>
+const Template: ComponentStory<JSXElementConstructor<PanelComponentProps>> = (args) => (
+  <CodePanel {...args}>Code Panel body</CodePanel>
+);
+
+export const Collapsed = Template.bind({});
+Collapsed.args = {
+  header: 'Code Panel header',
+  expanded: false,
+};
+
+export const Expanded = Template.bind({});
+Expanded.args = {
+  header: 'Code Panel header',
+  expanded: true,
+};

package/src/Panel/CodePanel.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+import { ShelfIcon } from '../icons/ShelfIcon';
+
+import { Panel } from './Panel';
+import { PanelHeader } from './PanelHeader';
+import { DarkHeader } from './DarkHeader';
+import { PanelBody } from './PanelBody';
+import { PanelHeaderTitle } from './PanelHeaderTitle';
+
+export const CodePanel = styled(Panel)`
+  > ${PanelHeader} {
+    ${DarkHeader};
+    min-height: 50px;
+    ${ShelfIcon} {
+      fill: var(--color-content-inverse);
+      position: relative;
+    }
+    ${PanelHeaderTitle} {
+      color: var(--color-content-inverse);
+    }
+  }
+
+  && {
+    ${PanelBody} {
+      padding: 10px 20px 20px;
+      background-color: var(--samples-panel-background-color);
+      color: var(--color-content-inverse);
+    }
+  }
+`;

package/src/Panel/ContentPanel.stories.tsx

@@ -0,0 +1,27 @@
+import React, { JSXElementConstructor } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { ContentPanel } from './ContentPanel';
+import { PanelComponentProps } from './PanelComponent';
+
+export default {
+  title: 'Components/Panels/ContentPanel',
+  component: ContentPanel,
+} as ComponentMeta<typeof ContentPanel>;
+
+// TODO: find the way to avoid using JSXElementConstructor<PanelComponentProps> and fix types for ComponentStory<typeof CodePanel>
+const Template: ComponentStory<JSXElementConstructor<PanelComponentProps>> = (args) => (
+  <ContentPanel {...args}>Content Panel Body</ContentPanel>
+);
+
+export const Collapsed = Template.bind({});
+Collapsed.args = {
+  header: 'Content Panel Header',
+  expanded: false,
+};
+
+export const Expanded = Template.bind({});
+Expanded.args = {
+  header: 'Content Panel Header',
+  expanded: true,
+};

package/src/Panel/ContentPanel.ts

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+import { ShelfIcon } from '../icons/ShelfIcon';
+
+import { PanelHeaderTitle } from './PanelHeaderTitle';
+import { Panel } from './Panel';
+import { PanelBody } from './PanelBody';
+import { PanelHeader } from './PanelHeader';
+
+export const ContentPanel = styled(Panel)`
+  border: 1px solid var(--global-border-color);
+
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+
+  > ${PanelHeader} {
+    padding: calc(var(--spacing-unit) * 4);
+    font-size: 18px;
+    font-weight: var(--font-weight-bold);
+    background-color: var(--panels-background-color);
+
+    ${PanelHeaderTitle} {
+      color: var(--color-content);
+    }
+
+    ${ShelfIcon} {
+      fill: var(--color-content);
+    }
+  }
+
+  > ${PanelBody} {
+    padding: calc(var(--spacing-unit) * 4);
+  }
+
+  > ${PanelHeader} + ${PanelBody} {
+    padding-top: 1px; /* to prevent border overflow */
+  }
+`;

package/src/Panel/DarkHeader.ts

@@ -0,0 +1,8 @@
+import { css } from 'styled-components';
+
+export const DarkHeader = css`
+  padding: 10px 20px;
+  line-height: 30px;
+  z-index: 0;
+  background-color: var(--samples-panel-controls-background-color);
+`;

package/src/Panel/Panel.stories.tsx

@@ -0,0 +1,58 @@
+import React, { JSXElementConstructor } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+
+import { Panel } from './Panel';
+import { PanelHeaderProps } from './PanelHeader';
+import { PanelComponentProps } from './PanelComponent';
+
+export default {
+  title: 'Components/Panels/Panel (base)',
+  component: Panel,
+} as ComponentMeta<typeof Panel>;
+
+const Template: ComponentStory<JSXElementConstructor<PanelComponentProps>> = (args) => (
+  <Panel {...args}>Panel body</Panel>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  header: 'Panel header',
+};
+
+export const Collapsed = Template.bind({});
+Collapsed.args = {
+  header: 'Panel header (click me)',
+  expanded: false,
+};
+
+export const Expanded = Template.bind({});
+Expanded.args = {
+  header: 'Panel header (click me)',
+  expanded: true,
+};
+
+export const HeaderAsFunction = Template.bind({});
+HeaderAsFunction.args = {
+  header: (props: PanelHeaderProps) => <div>Custom Header component: {JSON.stringify(props)}</div>,
+};
+
+export const HeaderAsComponent = Template.bind({});
+HeaderAsComponent.args = {
+  header: <i>Header component</i>,
+};
+
+export const WithoutHeader = Template.bind({});
+WithoutHeader.args = {};
+
+// TODO: change to normal name after fixing problem with stories order!
+export const WithDemoAnimation = Template.bind({});
+WithDemoAnimation.args = {
+  expanded: false,
+  header: 'Panel header',
+};
+WithDemoAnimation.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  await userEvent.click(canvas.getByTestId('panel-header'));
+};

package/src/Panel/Panel.ts

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+import { PanelBody } from './PanelBody';
+import { PanelComponent } from './PanelComponent';
+import { PanelHeader } from './PanelHeader';
+
+export const Panel = styled(PanelComponent)`
+  border-radius: var(--panels-border-radius);
+
+  ${PanelHeader} + ${PanelBody} {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 10px;
+  }
+`;

package/src/Panel/PanelBody.ts

@@ -0,0 +1,30 @@
+import styled, { keyframes, css } from 'styled-components';
+
+const showPanel = keyframes`
+  0% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+`;
+
+const showPanelAnimation = css`
+  animation: ${showPanel} 0.2s;
+`;
+
+interface PanelBodyProps {
+  animate?: boolean;
+  hidden?: boolean;
+}
+
+export const PanelBody = styled.div<PanelBodyProps>`
+  ${({ animate }) => animate && showPanelAnimation};
+  ${({ hidden }) => hidden && 'visibility: hidden'};
+
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  background-color: var(--panels-background-color);
+`;

package/src/Panel/PanelComponent.tsx

@@ -0,0 +1,73 @@
+import React, {
+  BaseSyntheticEvent,
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
+import styled from 'styled-components';
+
+import { ShelfIcon } from '../icons';
+
+import { PanelBody } from './PanelBody';
+import { PanelHeader, PanelHeaderProps } from './PanelHeader';
+import { PanelHeaderTitle } from './PanelHeaderTitle';
+
+export interface PanelComponentProps {
+  expanded?: boolean;
+  className?: string;
+  header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
+  onToggle?: (expanded: boolean) => void;
+}
+
+export function PanelComponent({
+  expanded = true,
+  header,
+  className,
+  children,
+  onToggle,
+}: PropsWithChildren<PanelComponentProps>): JSX.Element {
+  const [isExpanded, setExpanded] = useState(expanded);
+  const [animate, setAnimate] = useState(false);
+
+  const toggle = ({ target }: BaseSyntheticEvent): void => {
+    if (target instanceof HTMLAnchorElement) return;
+    setAnimate(true);
+    setExpanded(!isExpanded);
+    onToggle?.(!isExpanded);
+  };
+
+  useEffect(() => setExpanded(expanded), [expanded]);
+
+  return (
+    <div
+      className={className}
+      data-cy={
+        typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null
+      }
+    >
+      {header &&
+        (typeof header === 'function' ? (
+          header({ expanded: isExpanded, toggle })
+        ) : (
+          <PanelHeader data-cy="panel-header" onClick={toggle} expanded={isExpanded}>
+            <InlineBox>
+              <PanelHeaderTitle data-cy="title">{header}</PanelHeaderTitle>
+              <ShelfIcon direction={isExpanded ? 'down' : 'right'} />
+            </InlineBox>
+          </PanelHeader>
+        ))}
+
+      {isExpanded && (
+        <PanelBody data-cy="panel-body" hidden={!isExpanded} animate={animate}>
+          {children}
+        </PanelBody>
+      )}
+    </div>
+  );
+}
+
+export const InlineBox = styled.div`
+  display: inline-flex;
+  align-items: center;
+`;