@redocly/theme 0.9.12-alpha.0 → 0.9.13

package/lib/index.js

@@ -40,4 +40,5 @@ __exportStar(require("./config"), exports);
 __exportStar(require("./Pages"), exports);
 __exportStar(require("./Markdown"), exports);
 __exportStar(require("./ReferenceDocs"), exports);
+__exportStar(require("./SidebarActions"), exports);
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.12-alpha.0",
+  "version": "0.9.13",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -83,7 +83,6 @@
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
     "highlight-words-core": "^1.2.2",
-    "react-date-picker": "9.2.0",
     "hotkeys-js": "^3.10.1",
     "timeago.js": "^4.0.2"
   },

package/src/Catalog/Filter.tsx

@@ -1,31 +1,18 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { DatePickerProps } from 'react-date-picker';
-
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 import { Checkbox } from '@theme/ui/Checkbox';
 
-// TODO: figure out how to fix this
-const DatePicker: React.FC<DatePickerProps> =
-  // eslint-disable-next-line @typescript-eslint/no-var-requires, import/order, import/no-extraneous-dependencies
-  require('react-date-picker').default;
-
-// disabled type checking for selectedOptions
-export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions: any } }) {
+export function Filter({ filter }: { filter: ResolvedFilter }) {
   if (!filter.parentUsed) return null;
   return (
     <FilterGroup key={filter.property + filter.title}>
-      <FilterTitle>
-        {filter.title}
-        {filter.selectedOptions?.size ? (
-          <a onClick={() => filter.selectOption('')}> Clear </a>
-        ) : null}
-      </FilterTitle>
+      <FilterTitle>{filter.title}</FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
           onChange={(e) => filter.selectOption(e.target.value)}
-          value={(filter.selectedOptions as Set<any>).values().next()?.value || ''}
+          value={filter.selectedOptions.values().next()?.value || ''}
         >
           <option key="none" value="">
             All
@@ -36,49 +23,6 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
             </option>
           ))}
         </StyledSelect>
-      ) : filter.type === 'date-range' ? (
-        <>
-          <DatePickerWrapper>
-            <span> From: </span>
-            <DatePicker
-              closeCalendar={true}
-              format="y-MM-dd"
-              dayPlaceholder="DD"
-              monthPlaceholder="MM"
-              yearPlaceholder="YYYY"
-              value={filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null}
-              minDetail="decade"
-              maxDate={new Date()}
-              onChange={(from: Date) => {
-                filter.selectOption({
-                  ...(filter.selectedOptions as any),
-                  from: formatDateWithNoTimeZone(from),
-                });
-              }}
-            />
-          </DatePickerWrapper>
-          <DatePickerWrapper>
-            <span> To: </span>
-            <DatePicker
-              closeCalendar={true}
-              dayPlaceholder="DD"
-              monthPlaceholder="MM"
-              yearPlaceholder="YYYY"
-              format="y-MM-dd"
-              minDate={
-                filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined
-              }
-              value={filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : null}
-              minDetail="decade"
-              onChange={(to: Date) => {
-                filter.selectOption({
-                  ...filter.selectedOptions,
-                  to: formatDateWithNoTimeZone(to),
-                });
-              }}
-            />
-          </DatePickerWrapper>
-        </>
       ) : (
         filter.filteredOptions.map((value: any) => {
           const id = 'filter--' + filter.property + '--' + slug(value.value);
@@ -115,11 +59,6 @@ const FilterTitle = styled.h4`
   font-weight: var(--font-weight-bold);
   margin: 0;
   margin-bottom: 16px;
-
-  > a {
-    font-size: 14px;
-    cursor: pointer;
-  }
 `;
 
 const FilterValue = styled.label`
@@ -156,68 +95,9 @@ const StyledSelect = styled.select`
   background-position: right 10px center;
   background-size: 1em;
   width: 100%;
-  padding-right: 25px;
 `;
 
 // TODO: import from portal
 function slug(str: string): string {
   return str.replace(/\s/g, '-').toLowerCase();
 }
-
-const DatePickerWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 5px;
-
-  align-items: center;
-  gap: 10px;
-
-  > span {
-    width: 50px;
-  }
-
-  .react-date-picker {
-    flex: 1;
-  }
-
-  .react-calendar__tile--now {
-    background: #cbf7f1;
-    color: black;
-
-    &:enabled:hover,
-    &:enabled:focus {
-      background: #b1efe7;
-      color: black;
-    }
-  }
-
-  .react-date-picker__inputGroup__input:invalid {
-    background: rgb(255 125 0 / 10%);
-  }
-
-  .react-date-picker__button {
-    padding: 4px 4px;
-    svg {
-      width: 12px;
-    }
-  }
-
-  .react-date-picker__wrapper {
-    border: 1px solid rgba(0, 0, 0, 0.23);
-    border-radius: var(--border-radius);
-    padding: var(--input-padding);
-  }
-
-  .react-date-picker__inputGroup__input {
-    width: 20px;
-  }
-`;
-
-function padZero(num: number) {
-  return num < 10 ? '0' + num : num;
-}
-
-function formatDateWithNoTimeZone(date?: Date | null) {
-  if (!date) return date;
-  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
-}

package/src/ReferenceDocs/DevOnboardingTryItSecurity.tsx

@@ -5,6 +5,7 @@ import type { TryItSecurityAppsProps } from './TryItSecurityApps';
 
 import { Button } from '@theme/Button/Button';
 import { usePageData } from '@portal/hooks/usePageData';
+import { usePreloadHistory } from '@portal/usePreloadHistory';
 
 import { Dropdown } from './Dropdown';
 
@@ -13,6 +14,7 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
 
   // @ts-ignore
   const { userData } = usePageData('userData') || {};
+  const history = usePreloadHistory();
 
   // TODO: handle error
   const [_error, setError] = React.useState<string | undefined>();
@@ -26,6 +28,8 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
   const [acceptValueUpdate, setAcceptValueUpdate] = React.useState(true);
   const initialRender = React.useRef(true);
 
+  const hasApiAccess = !loading && !!apps?.length;
+
   React.useEffect(() => {
     if (!props.value && initialRender.current) return;
     if (acceptValueUpdate) {
@@ -92,7 +96,11 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
     });
   };
 
-  const placeholder = loading ? 'Loading your apps...' : undefined;
+  const placeholder = loading
+    ? 'Loading your apps...'
+    : hasApiAccess
+    ? undefined
+    : 'You do not have access to this API';
 
   return (
     <>
@@ -109,11 +117,17 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
           }}
         />
         <UseKeyButton
-          disabled={!selectedAppSecret || appLoading}
+          disabled={(!selectedAppSecret && hasApiAccess) || appLoading}
           color="secondary"
-          onClick={() => selectedAppSecret && props.onChange(selectedAppSecret)}
+          onClick={() => {
+            if (selectedAppSecret) {
+              props.onChange(selectedAppSecret);
+            } else if (!hasApiAccess) {
+              history.push('/apps/?createApp&apiId=' + apiId);
+            }
+          }}
         >
-          {appLoading ? 'Loading...' : 'Use key'}
+          {appLoading ? 'Loading...' : hasApiAccess ? 'Use key' : 'Request access'}
         </UseKeyButton>
       </FormControl>
     </>
@@ -159,7 +173,7 @@ const FormLabel = styled.label<{ required?: boolean }>`
 `;
 
 const UseKeyButton = styled(Button)`
-  width: 100px;
+  min-width: 100px;
   align-self: flex-end;
   margin-top: 10px;
   margin-right: 0;

package/src/Sidebar/FooterWrapper.tsx

@@ -1,8 +1,11 @@
 import styled from 'styled-components';
-
-export const FooterWrapper = styled.div.attrs(() => ({
-  'data-component-name': 'Sidebar/FooterWrapper',
-}))`
+export const FooterWrapper = styled.div<{ collapsed?: boolean }>`
+  ${({ collapsed }) =>
+    collapsed &&
+    `
+        position: sticky;
+        bottom: 0;
+    `}
   margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
   padding-top: var(--sidebar-spacing-unit);
   padding-right: var(--sidebar-spacing-unit);

package/src/Sidebar/SidebarLayout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
 import { Sidebar } from '@theme/Sidebar/Sidebar';
@@ -13,26 +13,49 @@ import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { MobileSidebarIcon } from './MobileSidebarIcon';
 
 interface SidebarLayoutProps {
-  versions: React.ReactNode;
-  menu: React.ReactNode;
+  versions?: React.ReactNode;
+  menu?: React.ReactNode;
   backLink?: {
     label: string;
     slug: string;
   };
   footer?: React.ReactNode;
+  actions?: React.ReactNode;
   header?: React.ReactNode;
   growContent?: boolean;
+  collapsed?: boolean;
+  onToggleMenu?: (isOpen: boolean) => void;
 }
 
+const StyledFooterWrapper = styled(FooterWrapper)`
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries?.medium} {
+    display: flex;
+  }
+`;
+
 export function SidebarLayout({
   versions,
   menu,
   footer,
   header,
   growContent,
+  collapsed,
+  onToggleMenu,
 }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
-  const toggleMenu = () => setIsOpen(!isOpen);
+  const [mappedCollapsed, setMappedCollapsed] = React.useState(collapsed);
+
+  useEffect(() => {
+    setMappedCollapsed(collapsed && !isOpen);
+  }, [isOpen, collapsed, setMappedCollapsed]);
+
+  const toggleMenu = () => {
+    onToggleMenu?.(!isOpen);
+    setIsOpen(!isOpen);
+  };
+
   const { search, sidebar } = useThemeConfig();
 
   if (sidebar?.hide) {
@@ -40,20 +63,45 @@ export function SidebarLayout({
   }
 
   return (
-    <Wrapper data-component-name="Sidebar/SidebarLayout">
-      <MobileSidebarButton opened={isOpen} onClick={toggleMenu}>
-        <MobileSidebarIcon />
-      </MobileSidebarButton>
-
-      {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
-      <Sidebar animate={true} opened={isOpen}>
-        {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
-        {versions}
-        <MenuContainer growContent={growContent}>{menu}</MenuContainer>
-        {footer ? <FooterWrapper>{footer}</FooterWrapper> : null}
-      </Sidebar>
-    </Wrapper>
+    <>
+      {mappedCollapsed ? (
+        footer ? (
+          <Wrapper collapsed={true}>
+            <StyledFooterWrapper data-component-name="Sidebar/FooterWrapper" collapsed={true}>
+              {footer}
+            </StyledFooterWrapper>
+            <MobileSidebarButton opened={isOpen} onClick={toggleMenu}>
+              <MobileSidebarIcon />
+            </MobileSidebarButton>
+          </Wrapper>
+        ) : null
+      ) : (
+        <Wrapper data-component-name="Sidebar/SidebarLayout">
+          <MobileSidebarButton opened={isOpen} onClick={toggleMenu}>
+            <MobileSidebarIcon />
+          </MobileSidebarButton>
+          {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
+          <Sidebar animate={true} opened={isOpen}>
+            {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
+            {versions ? <>{versions}</> : null}
+            <MenuContainer growContent={growContent}>{menu}</MenuContainer>
+            {footer && !isOpen ? (
+              <FooterWrapper data-component-name="Sidebar/FooterWrapper">{footer}</FooterWrapper>
+            ) : null}
+          </Sidebar>
+        </Wrapper>
+      )}
+    </>
   );
 }
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div<{ collapsed?: boolean }>`
+  ${({ collapsed }) =>
+    collapsed &&
+    `
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        border-right: 1px solid var(--sidebar-border-color);
+    `}
+`;

package/src/Sidebar/index.ts

@@ -13,6 +13,7 @@ export * from '@theme/Sidebar/MenuItemLabel';
 export * from '@theme/Sidebar/MenuLink';
 export * from '@theme/Sidebar/MenuLinkItem';
 export * from '@theme/Sidebar/MobileSidebarButton';
+export * from '@theme/Sidebar/MobileSidebarIcon';
 export * from '@theme/Sidebar/Separator';
 export * from '@theme/Sidebar/SeparatorItem';
 export * from '@theme/Sidebar/Sidebar';

package/src/SidebarActions/ChangeViewButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { LayoutVariant } from './SidebarActions';
+import { StyledChangeViewButton, ChangeViewSvgRow, ChangeViewSvgColumn } from './styled';
+
+interface ChangeViewButtonProps {
+  layout: LayoutVariant;
+  onClick: () => void;
+}
+
+export const ChangeViewButton = ({
+  layout,
+  onClick,
+}: ChangeViewButtonProps): JSX.Element | null => {
+  return (
+    <StyledChangeViewButton title="Change layout" onClick={onClick}>
+      {layout === LayoutVariant.STACKED ? <ChangeViewSvgRow /> : <ChangeViewSvgColumn />}
+    </StyledChangeViewButton>
+  );
+};

package/src/SidebarActions/CollapseSidebarButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { StyledToggleRightPanelButton, HideLeftPanelSVG, ShowLeftPanelSVG } from './styled';
+
+interface CollapseSidebarButtonProps {
+  initialValue: boolean;
+  onClick: () => void;
+}
+export const CollapseSidebarButton = ({
+  initialValue,
+  onClick,
+}: CollapseSidebarButtonProps): JSX.Element => {
+  return (
+    <StyledToggleRightPanelButton
+      title={initialValue ? 'Show sidebar' : 'Hide sidebar'}
+      onClick={onClick}
+    >
+      {initialValue ? <HideLeftPanelSVG /> : <ShowLeftPanelSVG />}
+    </StyledToggleRightPanelButton>
+  );
+};

package/src/SidebarActions/SidebarActions.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { ChangeViewButton } from './ChangeViewButton';
+import { ToggleRightPanelButton } from './ToggleRightPanelButton';
+import { CollapseSidebarButton } from './CollapseSidebarButton';
+import { ControlsWrap, ControlsWrapChangeLayoutButtons } from './styled';
+
+export enum LayoutVariant {
+  STACKED = 'stacked',
+  THREE_PANEL = 'three-panel',
+}
+
+interface SidebarActionsProps {
+  showChangeLayoutButton: boolean;
+  showRightPanelToggle: boolean;
+  layout: LayoutVariant;
+  initialShowRightPanelToggle: boolean;
+  collapsedSidebar: boolean;
+  isOpenapiDocs: boolean;
+  hideCollapseSidebarButton?: boolean;
+  onChangeRightPanelViewClick: () => void;
+  onChangeViewClick: () => void;
+  onChangeCollapseSidebarClick: () => void;
+  requestAccessButton?: React.ReactElement | null;
+}
+
+export const SidebarActions = ({
+  showChangeLayoutButton,
+  showRightPanelToggle,
+  layout,
+  initialShowRightPanelToggle,
+  hideCollapseSidebarButton = false,
+  collapsedSidebar,
+  isOpenapiDocs,
+  onChangeRightPanelViewClick,
+  onChangeViewClick,
+  onChangeCollapseSidebarClick,
+  requestAccessButton,
+}: SidebarActionsProps) => {
+  return (
+    <ControlsWrap isOpenapiDocs={isOpenapiDocs} isCollapsed={collapsedSidebar}>
+      {isOpenapiDocs && (
+        <ControlsWrapChangeLayoutButtons isCollapsed={collapsedSidebar}>
+          {initialShowRightPanelToggle && (
+            <ToggleRightPanelButton
+              showRightPanelToggle={showRightPanelToggle}
+              onClick={onChangeRightPanelViewClick}
+            />
+          )}
+          {showChangeLayoutButton && showRightPanelToggle && (
+            <ChangeViewButton layout={layout} onClick={onChangeViewClick} />
+          )}
+        </ControlsWrapChangeLayoutButtons>
+      )}
+      {!collapsedSidebar && requestAccessButton}
+      {!hideCollapseSidebarButton && (
+        <CollapseSidebarButton
+          initialValue={collapsedSidebar}
+          onClick={onChangeCollapseSidebarClick}
+        />
+      )}
+    </ControlsWrap>
+  );
+};

package/src/SidebarActions/ToggleRightPanelButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { StyledToggleRightPanelButton, HideRightPanelSVG, ShowRightPanelSVG } from './styled';
+
+interface ToggleRightPanelButtonProps {
+  showRightPanelToggle: boolean;
+  onClick: () => void;
+}
+export const ToggleRightPanelButton = ({
+  showRightPanelToggle,
+  onClick,
+}: ToggleRightPanelButtonProps): JSX.Element => {
+  return (
+    <StyledToggleRightPanelButton
+      title={showRightPanelToggle ? 'Hide samples' : 'Show samples'}
+      onClick={onClick}
+    >
+      {showRightPanelToggle ? <HideRightPanelSVG /> : <ShowRightPanelSVG />}
+    </StyledToggleRightPanelButton>
+  );
+};

package/src/SidebarActions/index.tsx

@@ -0,0 +1 @@
+export { SidebarActions, LayoutVariant } from './SidebarActions';