@redocly/theme 0.0.1 → 0.1.2

package/lib/src/SourceCode/SourceCode.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-
-import { highlight } from '../utils/highlight';
-import { SampleControls, SampleControlsWrap, PreformattedCodeBlock } from '../SamplesPanelControls';
-import { CopyButtonWrapper } from '../CopyButton';
-
-export interface SourceCodeProps {
-  lang: string;
-  source?: string;
-  externalSource?: ExternalSource;
-  withCopyButton?: boolean;
-  dataTestId?: string;
-}
-
-export interface Sample {
-  lang: string;
-  label?: string;
-}
-
-export type UnstableExternalCodeSample = Sample & {
-  get: (source: ExternalSource) => string;
-};
-
-export interface ExternalSource {
-  sample: UnstableExternalCodeSample;
-  exampleName?: string;
-  pathParams?: any;
-  properties?: any;
-  operation?: any;
-}
-
-export function Code({
-  source,
-  lang,
-  dataTestId,
-}: Required<Omit<SourceCodeProps, 'externalSource' | 'withCopyButton'>>): JSX.Element {
-  return (
-    <PreformattedCodeBlock
-      dangerouslySetInnerHTML={{ __html: highlight(source, lang) }}
-      data-cy={dataTestId}
-    />
-  );
-}
-
-export function SourceCode({
-  lang,
-  source,
-  externalSource,
-  withCopyButton,
-  dataTestId = 'source-code',
-}: SourceCodeProps): JSX.Element {
-  const _source = source || externalSource?.sample?.get?.(externalSource) || '';
-  if (withCopyButton) {
-    return (
-      <CopyButtonWrapper data={source}>
-        {({ renderCopyButton }) => (
-          <SampleControlsWrap>
-            <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
-            <Code lang={lang} source={_source} dataTestId={dataTestId} />
-          </SampleControlsWrap>
-        )}
-      </CopyButtonWrapper>
-    );
-  }
-
-  return <Code dataTestId={dataTestId} lang={lang} source={_source} />;
-}

package/lib/src/SourceCode/index.ts

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

package/lib/src/Tooltip/Tooltip.tsx

@@ -1,171 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React, { useCallback, useEffect, memo } from 'react';
-import styled, { css } from 'styled-components';
-
-import { useControl } from '../hooks';
-
-export interface TooltipProps {
-  tip: string;
-  open?: boolean;
-  placement?: 'top' | 'bottom' | 'left' | 'right';
-  className?: string;
-  width?: string;
-  dataTestId?: string;
-}
-
-export function TooltipComponent({
-  children,
-  open,
-  tip,
-  placement = 'top',
-  className = 'default',
-  width,
-  dataTestId = tip,
-}: PropsWithChildren<TooltipProps>): JSX.Element {
-  const { isOpened, handleOpen, handleClose } = useControl(open);
-
-  const isControlled = open !== undefined;
-
-  useEffect(() => {
-    if (isControlled) {
-      if (open) {
-        handleOpen();
-      } else {
-        handleClose();
-      }
-    }
-  }, [open, isControlled, handleOpen, handleClose]);
-
-  const handleEnter = useCallback(() => {
-    handleOpen();
-  }, [handleOpen]);
-
-  const handleLeave = useCallback(() => {
-    handleClose();
-  }, [handleClose]);
-
-  return (
-    <TooltipWrapper
-      onMouseEnter={isControlled ? undefined : handleEnter}
-      onMouseLeave={isControlled ? undefined : handleLeave}
-      onClick={isControlled ? undefined : handleLeave}
-      className={`tooltip-${className}`}
-    >
-      {children}
-      {isOpened && (
-        <TooltipBody data-cy={dataTestId} placement={placement} width={width}>
-          {tip}
-        </TooltipBody>
-      )}
-    </TooltipWrapper>
-  );
-}
-
-export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
-
-const PLACEMENTS = {
-  top: css`
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, -99%);
-    margin-top: -10px;
-
-    &::after {
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top-width: 6px;
-      border-top-style: solid;
-      bottom: 0;
-      left: 50%;
-      transform: translate(-50%, 99%);
-    }
-  `,
-  bottom: css`
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 99%);
-    margin-bottom: -10px;
-
-    &::after {
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-bottom-width: 6px;
-      border-bottom-style: solid;
-      top: 0;
-      left: 50%;
-      transform: translate(-50%, -99%);
-    }
-  `,
-  left: css`
-    top: 50%;
-    left: 0;
-    transform: translate(-100%, -50%);
-    margin-left: -10px;
-
-    &::after {
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-left-width: 6px;
-      border-left-style: solid;
-      top: 50%;
-      right: 0;
-      transform: translate(99%, -50%);
-    }
-  `,
-  right: css`
-    top: 50%;
-    right: 0;
-    transform: translate(100%, -50%);
-    margin-right: -10px;
-
-    &::after {
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-right-width: 6px;
-      border-right-style: solid;
-      top: 50%;
-      left: 0;
-      transform: translate(-99%, -50%);
-    }
-  `,
-};
-
-const TooltipWrapper = styled.div`
-  position: relative;
-  display: inline-block;
-`;
-
-const TooltipBody = styled.span<Pick<Required<TooltipProps>, 'placement'> & { width?: string }>`
-  display: inline-block;
-
-  position: absolute;
-  text-align: center;
-
-  padding: 10px 20px;
-  max-width: 250px;
-  white-space: normal;
-  overflow-wrap: break-word;
-
-  border-radius: var(--global-border-radius);
-  pointer-events: none;
-  transition: opacity 0.3s ease-out;
-
-  font-size: 13px;
-
-  &::after {
-    position: absolute;
-
-    content: ' ';
-    display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-background-color);
-  }
-
-  background: var(--tooltip-background-color);
-  color: var(--tooltip-color);
-  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
-
-  width: ${({ width }) => width || '120px'};
-  ${({ placement }) => `${PLACEMENTS[placement]};`}
-`;

package/lib/src/Tooltip/index.ts

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