@redocly/theme 0.64.0-next.1 → 0.64.0-next.3

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -1,57 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogTagsWithTooltip = CatalogTagsWithTooltip;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../../core/constants");
-const Tag_1 = require("../../components/Tag/Tag");
-const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
-const hooks_1 = require("../../core/hooks");
-const CatalogAvatar_1 = require("../../components/Catalog/CatalogAvatar");
-function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = false, showAvatars, tagProps, }) {
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
-    const { translate } = useTranslate();
-    if (!items || items.length === 0) {
-        if (showPlaceholder) {
-            return (react_1.default.createElement(CatalogTagsNotConnectedWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, translate('catalog.notConnected', 'Not connected')));
-        }
-        return null;
-    }
-    if (items.length <= itemsToShow) {
-        return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
-            icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
-        }), { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
-            react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item))))));
-    }
-    const displayedItems = items.slice(0, itemsToShow);
-    const remainingCount = items.length - itemsToShow;
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
-        react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
-            displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
-                icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
-            }), { textTransform: "none", maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
-                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),
-            react_1.default.createElement(MoreTagsButton, null,
-                "+",
-                remainingCount,
-                " ",
-                translate('catalog.tags.more', 'more')))));
-}
-const CatalogTagsWrapper = styled_components_1.default.div `
-  display: flex;
-  flex-wrap: wrap;
-`;
-const MoreTagsButton = styled_components_1.default.span `
-  font-size: var(--catalog-tags-more-button-font-size);
-  margin-left: var(--catalog-tags-more-button-margin-left);
-`;
-const CatalogTagsNotConnectedWrapper = styled_components_1.default.span `
-  font-size: var(--catalog-tags-not-connected-font-size);
-  line-height: var(--catalog-tags-not-connected-line-height);
-  color: var(--catalog-tags-not-connected-color);
-`;
-//# sourceMappingURL=CatalogTagsWithTooltip.js.map

package/lib/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.d.ts

@@ -1,7 +0,0 @@
-import type { JSX } from 'react';
-type ExcalidrawDiagramProps = {
-    diagramHtml: string;
-    className?: string;
-};
-export declare function ExcalidrawDiagram({ diagramHtml, className }: ExcalidrawDiagramProps): JSX.Element;
-export {};

package/lib/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.js

@@ -1,95 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExcalidrawDiagram = ExcalidrawDiagram;
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../../core/utils");
-const hooks_1 = require("../../../core/hooks");
-const SvgViewer_1 = require("../../../components/SvgViewer/SvgViewer");
-function ExcalidrawDiagram({ diagramHtml, className }) {
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
-    const { translate } = useTranslate();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const open = () => setIsOpen(true);
-    const close = () => setIsOpen(false);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('excalidraw-wrapper', className), dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdoc/ExcalidrawDiagram/ExcalidrawDiagram", onClick: open, onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && open(), role: "button", tabIndex: 0, "aria-label": translate('excalidraw.openFullscreen', 'Click to open diagram in fullscreen') }),
-        react_1.default.createElement(SvgViewer_1.SvgViewer, { isOpen: isOpen, onClose: close, labels: {
-                zoomIn: translate('excalidraw.zoomIn', 'Zoom in'),
-                zoomOut: translate('excalidraw.zoomOut', 'Zoom out'),
-                fitToView: translate('excalidraw.reset', 'Fit to view'),
-                close: translate('excalidraw.close', 'Close'),
-                dialogLabel: translate('excalidraw.viewer', 'Excalidraw diagram viewer'),
-            } },
-            react_1.default.createElement(ViewerContent, { dangerouslySetInnerHTML: { __html: diagramHtml } }))));
-}
-const Wrapper = styled_components_1.default.div `
-  background-color: var(--excalidraw-bg-color);
-  border-radius: var(--excalidraw-border-radius);
-  cursor: pointer;
-  transition: box-shadow 0.2s ease;
-  overflow: hidden;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--border-color-input-focus);
-  }
-
-  svg {
-    max-width: 100%;
-    height: auto;
-    display: block;
-
-    > rect {
-      fill: var(--excalidraw-bg-color);
-    }
-  }
-
-  & + & {
-    margin-top: var(--spacing-md);
-  }
-`;
-const ViewerContent = styled_components_1.default.div `
-  svg {
-    display: block;
-    max-width: none !important;
-  }
-`;
-//# sourceMappingURL=ExcalidrawDiagram.js.map

package/lib/markdoc/components/ExcalidrawDiagram/variables.d.ts

@@ -1 +0,0 @@
-export declare const excalidraw: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/ExcalidrawDiagram/variables.dark.d.ts

@@ -1 +0,0 @@
-export declare const excalidrawDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/ExcalidrawDiagram/variables.dark.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.excalidrawDarkMode = void 0;
-const styled_components_1 = require("styled-components");
-exports.excalidrawDarkMode = (0, styled_components_1.css) `
-  --excalidraw-bg-color: var(--bg-color); // @presenter Color
-`;
-//# sourceMappingURL=variables.dark.js.map

package/lib/markdoc/components/ExcalidrawDiagram/variables.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.excalidraw = void 0;
-const styled_components_1 = require("styled-components");
-exports.excalidraw = (0, styled_components_1.css) `
-  /**
-  * @tokens Excalidraw
-  */
-
-  --excalidraw-bg-color: var(--bg-color); // @presenter Color
-  --excalidraw-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-
-  // @tokens End
-`;
-//# sourceMappingURL=variables.js.map

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -1,101 +0,0 @@
-import React, { JSX } from 'react';
-import styled from 'styled-components';
-
-import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
-import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
-import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
-import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { CatalogAvatar } from '@redocly/theme/components/Catalog/CatalogAvatar';
-
-export type CatalogTagsWithTooltipProps = {
-  items: string[];
-  itemsToShow?: number;
-  showPlaceholder?: boolean;
-  tagProps?: TagProps;
-  showAvatars?: boolean;
-};
-
-export function CatalogTagsWithTooltip({
-  items,
-  itemsToShow = 1,
-  showPlaceholder = false,
-  showAvatars,
-  tagProps,
-}: CatalogTagsWithTooltipProps): JSX.Element | null {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-
-  if (!items || items.length === 0) {
-    if (showPlaceholder) {
-      return (
-        <CatalogTagsNotConnectedWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          {translate('catalog.notConnected', 'Not connected')}
-        </CatalogTagsNotConnectedWrapper>
-      );
-    }
-    return null;
-  }
-
-  if (items.length <= itemsToShow) {
-    return (
-      <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-        {items.map((item, index) => (
-          <Tag
-            key={`${item}-${index}`}
-            {...tagProps}
-            {...(showAvatars && {
-              icon: <CatalogAvatar value={item} size="small" />,
-            })}
-            maxLength={CATALOG_TAG_MAX_LENGTH}
-          >
-            <CatalogHighlight>{item}</CatalogHighlight>
-          </Tag>
-        ))}
-      </CatalogTagsWrapper>
-    );
-  }
-
-  const displayedItems = items.slice(0, itemsToShow);
-  const remainingCount = items.length - itemsToShow;
-
-  return (
-    <Tooltip tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
-      <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-        {displayedItems.map((item, index) => (
-          <Tag
-            key={`${item}-${index}`}
-            {...tagProps}
-            {...(showAvatars && {
-              icon: <CatalogAvatar value={item} size="small" />,
-            })}
-            textTransform="none"
-            maxLength={CATALOG_TAG_MAX_LENGTH}
-          >
-            <CatalogHighlight>{item}</CatalogHighlight>
-          </Tag>
-        ))}
-
-        <MoreTagsButton>
-          +{remainingCount} {translate('catalog.tags.more', 'more')}
-        </MoreTagsButton>
-      </CatalogTagsWrapper>
-    </Tooltip>
-  );
-}
-
-const CatalogTagsWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-
-const MoreTagsButton = styled.span`
-  font-size: var(--catalog-tags-more-button-font-size);
-  margin-left: var(--catalog-tags-more-button-margin-left);
-`;
-
-const CatalogTagsNotConnectedWrapper = styled.span`
-  font-size: var(--catalog-tags-not-connected-font-size);
-  line-height: var(--catalog-tags-not-connected-line-height);
-  color: var(--catalog-tags-not-connected-color);
-`;

package/src/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.tsx

@@ -1,85 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import type { JSX } from 'react';
-
-import { concatClassNames } from '@redocly/theme/core/utils';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
-
-type ExcalidrawDiagramProps = {
-  diagramHtml: string;
-  className?: string;
-};
-
-export function ExcalidrawDiagram({ diagramHtml, className }: ExcalidrawDiagramProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const open = () => setIsOpen(true);
-  const close = () => setIsOpen(false);
-
-  return (
-    <>
-      <Wrapper
-        className={concatClassNames('excalidraw-wrapper', className)}
-        dangerouslySetInnerHTML={{ __html: diagramHtml }}
-        data-component-name="Markdoc/ExcalidrawDiagram/ExcalidrawDiagram"
-        onClick={open}
-        onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && open()}
-        role="button"
-        tabIndex={0}
-        aria-label={translate('excalidraw.openFullscreen', 'Click to open diagram in fullscreen')}
-      />
-      <SvgViewer
-        isOpen={isOpen}
-        onClose={close}
-        labels={{
-          zoomIn: translate('excalidraw.zoomIn', 'Zoom in'),
-          zoomOut: translate('excalidraw.zoomOut', 'Zoom out'),
-          fitToView: translate('excalidraw.reset', 'Fit to view'),
-          close: translate('excalidraw.close', 'Close'),
-          dialogLabel: translate('excalidraw.viewer', 'Excalidraw diagram viewer'),
-        }}
-      >
-        <ViewerContent dangerouslySetInnerHTML={{ __html: diagramHtml }} />
-      </SvgViewer>
-    </>
-  );
-}
-
-const Wrapper = styled.div`
-  background-color: var(--excalidraw-bg-color);
-  border-radius: var(--excalidraw-border-radius);
-  cursor: pointer;
-  transition: box-shadow 0.2s ease;
-  overflow: hidden;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--border-color-input-focus);
-  }
-
-  svg {
-    max-width: 100%;
-    height: auto;
-    display: block;
-
-    > rect {
-      fill: var(--excalidraw-bg-color);
-    }
-  }
-
-  & + & {
-    margin-top: var(--spacing-md);
-  }
-`;
-
-const ViewerContent = styled.div`
-  svg {
-    display: block;
-    max-width: none !important;
-  }
-`;

package/src/markdoc/components/ExcalidrawDiagram/variables.dark.ts

@@ -1,5 +0,0 @@
-import { css } from "styled-components";
-
-export const excalidrawDarkMode = css`
-  --excalidraw-bg-color: var(--bg-color); // @presenter Color
-`;

package/src/markdoc/components/ExcalidrawDiagram/variables.ts

@@ -1,12 +0,0 @@
-import { css } from "styled-components";
-
-export const excalidraw = css`
-  /**
-  * @tokens Excalidraw
-  */
-
-  --excalidraw-bg-color: var(--bg-color); // @presenter Color
-  --excalidraw-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-
-  // @tokens End
-`;