@redocly/theme 0.1.7 → 0.1.10

package/src/Sidebar/Separator.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
+import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
+import { SeparatorItem } from '@theme/Sidebar/SeparatorItem';
+
+export function Separator({ item }: MenuItemProps): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/Separator">
+      <SeparatorItem>{item.label}</SeparatorItem>
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;

package/src/Sidebar/SeparatorItem.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
+
+export const SeparatorItem = styled(MenuItemLabel)`
+  cursor: default;
+  font-weight: var(--font-weight-bold);
+  color: var(--sidebar-separator-label-color);
+
+  :hover {
+    color: inherit;
+    background-color: inherit;
+  }
+`;

package/src/Sidebar/SeparatorLine.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const SeparatorLine = styled.div.attrs(() => ({
+  'data-component-name': 'Sidebar/SeparatorLine',
+}))`
+  height: 1px;
+  background-color: var(--sidebar-separator-line-color);
+  margin: var(--sidebar-spacing-padding-vertical) 0;
+`;

package/src/Sidebar/Sidebar.tsx

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+interface SidebarProps {
+  opened?: boolean;
+  animate?: boolean;
+}
+
+export const Sidebar = styled.aside.attrs(() => ({
+  'data-component-name': 'Sidebar/Sidebar',
+}))<SidebarProps>`
+  border-right: 1px solid var(--sidebar-right-line-color);
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  background: var(--sidebar-background-color);
+  font-size: var(--sidebar-font-size);
+  font-family: var(--sidebar-font-family);
+  color: var(--sidebar-item-color);
+  top: var(--navbar-height);
+  height: calc(100vh - var(--navbar-height));
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  -webkit-font-smoothing: antialiased;
+
+  ${({ opened, animate }) => `
+    opacity: ${opened ? '1' : '0'};
+    pointer-events: ${opened ? 'auto' : 'none'};
+    
+    & > * {
+      transform: ${opened ? 'translate(0, 0)' : 'translate(0, 40px)'};
+      transition: ${animate ? 'transform 0.65s ease, opacity 0.25s ease;' : 'none'};
+    }
+  `};
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    position: sticky;
+    pointer-events: auto;
+    display: flex;
+    opacity: 1;
+    flex-shrink: 0;
+    width: var(--sidebar-width);
+
+    & > * {
+      transform: none;
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.large} {
+    transform: none;
+  }
+`;

package/src/Sidebar/SidebarLayout.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Sidebar } from '@theme/Sidebar/Sidebar';
+import { useMobileMenu } from '@theme/hooks/useMobileMenu';
+import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
+import { MenuContainer } from '@theme/Sidebar/MenuContainer';
+
+interface SidebarLayoutProps {
+  versions: React.ReactNode;
+  menu: React.ReactNode;
+}
+
+export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element {
+  const [isOpen, setIsOpen] = useMobileMenu();
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  return (
+    <Wrapper data-component-name="Sidebar/SidebarLayout">
+      <MobileSidebarButton opened={isOpen} onClick={toggleMenu} />
+
+      <Sidebar animate={true} opened={isOpen}>
+        {versions}
+        <MenuContainer>{menu}</MenuContainer>
+      </Sidebar>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;

package/src/Sidebar/index.ts

@@ -0,0 +1,19 @@
+export * from '@theme/Sidebar/ApiCallItem';
+export * from '@theme/Sidebar/ArrowBack';
+export * from '@theme/Sidebar/BackButton';
+export * from '@theme/Sidebar/Drilldown';
+export * from '@theme/Sidebar/DrilldownMenu';
+export * from '@theme/Sidebar/DrilldownMenuItem';
+export * from '@theme/Sidebar/ExternalIcon';
+export * from '@theme/Sidebar/Menu';
+export * from '@theme/Sidebar/MenuContainer';
+export * from '@theme/Sidebar/MenuGroup';
+export * from '@theme/Sidebar/MenuItem';
+export * from '@theme/Sidebar/MenuItemLabel';
+export * from '@theme/Sidebar/MenuLink';
+export * from '@theme/Sidebar/MenuLinkItem';
+export * from '@theme/Sidebar/MobileSidebarButton';
+export * from '@theme/Sidebar/Separator';
+export * from '@theme/Sidebar/SeparatorItem';
+export * from '@theme/Sidebar/Sidebar';
+export * from '@theme/Sidebar/SidebarLayout';

package/src/Sidebar/types/DrilldownMenuProps.ts

@@ -0,0 +1,7 @@
+import { ItemState } from '@theme/Sidebar/types/ItemState';
+
+export interface DrilldownMenuProps {
+  back: () => void;
+  item: ItemState;
+  prevActiveItem?: ItemState;
+}

package/src/Sidebar/types/ItemState.ts

@@ -0,0 +1,9 @@
+import { NavItem } from '@theme/Sidebar/types/NavItem';
+import { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
+
+export interface ItemState extends NavItem {
+  items: ItemState[];
+  active: boolean;
+  hasActiveSubItem: boolean;
+  menuStyle?: MenuStyle;
+}

package/src/Sidebar/types/MenuItemProps.ts

@@ -0,0 +1,6 @@
+import { ItemState } from '@theme/Sidebar/types/ItemState';
+
+export interface MenuItemProps {
+  item: ItemState;
+  activeItem?: ItemState;
+}

package/src/Sidebar/types/MenuStyle.ts

@@ -0,0 +1,4 @@
+//TODO: make default export
+export enum MenuStyle {
+  Drilldown = 'drilldown',
+}

package/src/Sidebar/types/NavItem.ts

@@ -0,0 +1,27 @@
+import { MenuStyle } from '@theme/Sidebar/types/MenuStyle';
+
+export interface NavItem {
+  label?: string;
+  sublabel?: string;
+  icon?: string;
+  link?: string;
+  type?: string;
+  httpVerb?: string;
+  expanded?: string;
+  selectFirstItemOnExpand?: boolean;
+  pageId?: string;
+  redocPrevLink?: string;
+  redocPrevLabel?: string;
+  redocNextLink?: string;
+  redocNextLabel?: string;
+  redocFakePage?: boolean;
+  redocInfoPageId?: string;
+  target?: string;
+  external?: boolean;
+  items?: NavItem[];
+  permission?: string;
+  menuStyle?: MenuStyle;
+  separatorLine?: boolean;
+  version?: string;
+  default?: boolean;
+}

package/src/Sidebar/types/index.ts

@@ -0,0 +1,5 @@
+export * from '@theme/Sidebar/types/DrilldownMenuProps';
+export * from '@theme/Sidebar/types/ItemState';
+export * from '@theme/Sidebar/types/MenuItemProps';
+export * from '@theme/Sidebar/types/MenuStyle';
+export * from '@theme/Sidebar/types/NavItem';

package/src/SidebarLogo/SidebarLogo.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { SidebarLogo } from './SidebarLogo';
+import { SidebarLogo } from '@theme/SidebarLogo';
 
 export default {
-  title: 'SidebarLogo',
+  title: 'Components/SidebarLogo',
   component: SidebarLogo,
   argTypes: {
     backgroundColor: { control: 'color' },

package/src/SidebarLogo/__tests__/SidebarLogo.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { SidebarLogo } from '../SidebarLogo';
+import { SidebarLogo } from '@theme/SidebarLogo';
 
 describe('SidebarLogo', () => {
   it('renders', () => {

package/src/SidebarLogo/index.ts

@@ -1 +1 @@
-export * from './SidebarLogo';
+export * from '@theme/SidebarLogo/SidebarLogo';

package/src/SourceCode/SourceCode.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { SourceCode } from './SourceCode';
+import { SourceCode } from '@theme/SourceCode';
 
 export default {
-  title: 'SourceCode',
+  title: 'Components/SourceCode',
   component: SourceCode,
 } as ComponentMeta<typeof SourceCode>;
 

package/src/SourceCode/SourceCode.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
 
-import { highlight } from '../utils/highlight';
-import { SampleControls, SampleControlsWrap, PreformattedCodeBlock } from '../SamplesPanelControls';
-import { CopyButtonWrapper } from '../CopyButton';
+import { highlight } from '@theme/utils';
+import {
+  SampleControls,
+  SampleControlsWrap,
+  PreformattedCodeBlock,
+} from '@theme/SamplesPanelControls';
+import { CopyButtonWrapper } from '@theme/CopyButton';
 
 export interface SourceCodeProps {
   lang: string;

package/src/SourceCode/__tests__/SourceCode.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { SourceCode } from '../SourceCode';
 import { renderWithTheme } from '../../../tests/utils';
 
+import { SourceCode } from '@theme/SourceCode';
+
 describe('SourceCode', () => {
   it('renders without copy button', () => {
     const { container } = renderWithTheme(

package/src/SourceCode/index.ts

@@ -1 +1 @@
-export * from './SourceCode';
+export * from '@theme/SourceCode/SourceCode';

package/src/TableOfContent/TableOfContent.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ThemeProvider } from 'styled-components';
+
+import { TableOfContent } from '@theme/TableOfContent';
+import { generateMediaQueries } from '@theme/utils/media-css';
+
+const breakpoints = { small: '1rem', medium: '1rem', large: '1rem' };
+
+const theme = {
+  mediaQueries: generateMediaQueries(breakpoints),
+};
+
+export default {
+  title: 'Portal/TableOfContent',
+  component: TableOfContent,
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} as ComponentMeta<typeof TableOfContent>;
+
+const Template: ComponentStory<typeof TableOfContent> = (args) => (
+  <TableOfContent {...args}>Click</TableOfContent>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  headings: [
+    { id: '1', value: 'test 1', depth: 1 },
+    { id: '2', value: 'test 2', depth: 1 },
+    { id: '3', value: 'test 3', depth: 2 },
+    { id: '4', value: 'test 4', depth: 2 },
+    { id: '5', value: 'test 5', depth: 1 },
+  ],
+};

package/src/TableOfContent/TableOfContent.tsx

@@ -0,0 +1,112 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+
+import { useFullHeight } from '@theme/hooks/useFullHeight';
+import { useActiveHeading } from '@theme/hooks/useActiveHeading';
+import { MdHeading } from '@theme/types/portal';
+
+interface TableOfContentProps {
+  headings?: Array<MdHeading | null> | null | undefined;
+  contentWrapper: HTMLDivElement | null;
+  tocMaxDepth: number;
+}
+
+export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
+  const { headings, tocMaxDepth } = props;
+
+  const sidebar = useRef<HTMLDivElement | null>(null);
+  useFullHeight(sidebar);
+  const activeHeadingId = useActiveHeading(props.contentWrapper);
+
+  if (headings && headings.length === 1 && headings[0]?.depth === 1) {
+    return null;
+  }
+  if (!headings?.length) {
+    return null;
+  }
+
+  return (
+    <>
+      {headings && (
+        <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
+          <TableOfContentItems ref={sidebar}>
+            <TocHeader>On this page</TocHeader>
+            {headings.map((heading: MdHeading | null, idx: number) => {
+              // TODO: not sure about !heading
+              if (!heading) {
+                return null;
+              }
+              if (idx === 0 && heading.depth === 1) {
+                return null;
+              }
+              if (heading.depth && heading.depth > tocMaxDepth) {
+                return null;
+              }
+              const href = '#' + heading.id;
+              return (
+                <MenuItem
+                  key={href}
+                  depth={heading.depth || 0}
+                  href={href}
+                  className={activeHeadingId === heading.id ? 'active' : ''}
+                  dangerouslySetInnerHTML={{ __html: heading.value || '' }}
+                  data-cy={`toc-${heading.value}`}
+                />
+              );
+            })}
+          </TableOfContentItems>
+        </TableOfContentMenu>
+      )}
+    </>
+  );
+}
+
+const TocHeader = styled.div`
+  font-size: 0.8em;
+  padding: 10px 15px;
+  font-weight: bold;
+  text-transform: uppercase;
+`;
+
+const MenuItem = styled.a<{ depth: number }>`
+  display: block;
+  color: var(--color-content);
+  cursor: pointer;
+  font-size: 0.8em;
+  padding: 10px 15px;
+  padding-left: ${({ depth }) => (depth - 1) * 15}px;
+  transition: background-color 0.3s, color 0.3s;
+  text-decoration: none;
+  word-break: break-word;
+  font-family: var(--h-font-family);
+  :hover,
+  &.active {
+    color: var(--sidebar-item-active-color);
+    background-color: var(--sidebar-item-active-background-color);
+  }
+  :empty {
+    padding: 0;
+  }
+`;
+
+const TableOfContentMenu = styled.aside`
+  font-size: 1rem;
+  background-color: transparent;
+  flex-shrink: 0;
+  display: none !important;
+  font-family: var(--font-family-base);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: var(--toc-width);
+    display: block !important;
+  }
+`;
+
+const TableOfContentItems = styled.div`
+  position: sticky;
+  top: calc(var(--navbar-height) + 20px);
+  max-height: calc(100vh - var(--navbar-height) - 20px);
+  border-left: 1px solid var(--global-border-color);
+  overflow-y: auto;
+  width: var(--toc-width); ;
+`;

package/src/TableOfContent/index.ts

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

package/src/Tooltip/Tooltip.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { Tooltip } from './Tooltip';
+import { Tooltip } from '@theme/Tooltip';
 
 export default {
-  title: 'Tooltip',
+  title: 'Components/Tooltip',
   component: Tooltip,
 } as ComponentMeta<typeof Tooltip>;
 

package/src/Tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback, useEffect, memo } from 'react';
 import styled, { css } from 'styled-components';
 
-import { useControl } from '../hooks';
+import { useControl } from '@theme/hooks';
 
 export interface TooltipProps {
   tip: string;

package/src/Tooltip/__tests__/Tooltip.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 
-import { Tooltip } from '../Tooltip';
+import { Tooltip } from '@theme/Tooltip';
 
 describe('Tooltip', () => {
   it('renders closed', () => {

package/src/Tooltip/index.ts

@@ -1 +1 @@
-export * from './Tooltip';
+export * from '@theme/Tooltip/Tooltip';

package/src/Welcome.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Welcome" />
+
+# @redocly/theme
+
+Welcome to storybook for [@redocly/theme](https://www.npmjs.com/package/@redocly/theme) package.