@redocly/theme-experimental 0.0.8 → 0.74.2-pingfed.1

package/markdoc/CodeStep/CodeStep.tsx

@@ -0,0 +1,67 @@
+import React, { useRef, useContext, useEffect, useCallback } from 'react';
+import styled from 'styled-components';
+
+import type { PropsWithChildren } from 'react';
+
+import { CodeGuideContext, useCodeStepHandlers } from '@portal/CodeGuide';
+
+interface CodeStepProps {
+  bindTo: string;
+}
+
+export function CodeStep({ bindTo, children }: PropsWithChildren<CodeStepProps>) {
+  const context = useContext(CodeGuideContext);
+
+  const node = useRef<HTMLDivElement | null>(null);
+
+  const isSectionActive = context.activeDocsSection === bindTo;
+  const [file, lines] = bindTo.split('#');
+
+  const { onScroll, activateSection } = useCodeStepHandlers({
+    nodeRef: node,
+    bindTo,
+    context: context,
+  });
+
+  const scrollListener = useCallback(() => {
+    onScroll(context.codeBlock);
+  }, [context.codeBlock, onScroll]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollListener);
+
+    return () => {
+      window.removeEventListener('scroll', scrollListener);
+    };
+  }, [context.codeBlock, scrollListener]);
+
+  const setRef = (instance?: HTMLDivElement | null) => {
+    if (instance) {
+      node.current = instance;
+    }
+  };
+
+  return (
+    <Wrapper
+      onClick={() => activateSection(file, lines, context.codeBlock)}
+      active={isSectionActive}
+      ref={setRef}
+    >
+      {children}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div<{ active: boolean }>`
+  padding: 0 32px 16px;
+  box-sizing: border-box;
+  border-left: 3px solid;
+  border-left-color: ${({ active }) => (active ? 'var(--color-primary-base)' : 'transparent')};
+  background-color: ${({ active }) => (active ? 'var(--bg-raised)' : 'transparent')};
+  border-top: 1px solid #cbccd1;
+  cursor: pointer;
+
+  &:hover {
+    border-left-color: ${({ active }) => (active ? 'var(--color-primary-base)' : '#cbccd1')};
+  }
+`;

package/markdoc/components.tsx

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

package/markdoc/schema.ts

@@ -0,0 +1,8 @@
+import type { Schema } from '@markdoc/markdoc';
+
+export const codeStep: Schema = {
+  attributes: {
+    bindTo: { type: String, required: false },
+  },
+  render: 'CodeStep',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme-experimental",
-  "version": "0.0.8",
+  "version": "0.74.2-pingfed.1",
   "description": "Experimental UI components lib",
   "keywords": [
     "theme-experimental",
@@ -8,11 +8,8 @@
   ],
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
-    ".": "./lib/index.js",
     "./src/": "./src/"
   },
   "peerDependencies": {
@@ -80,7 +77,7 @@
     "@redocly/portal-types": "1.2.1"
   },
   "dependencies": {
-    "@redocly/theme": "^0.33.3"
+    "@redocly/theme": "^0.74.2-pingfed.1"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/lib/layouts/CodeGuide/CodeDemo.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function CodeDemo(): React.JSX.Element;

package/lib/layouts/CodeGuide/CodeDemo.js

@@ -1,40 +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.CodeDemo = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const CodeBlock_1 = require("@theme/components/CodeBlock/CodeBlock");
-const CodeGuide_1 = require("../../mocks/CodeGuide");
-function CodeDemo() {
-    const { highlightedLines, activeCodeTab, setCurrentCodeSample, setCodeNode, codeGuideFiles } = react_1.default.useContext(CodeGuide_1.CodeGuideContext);
-    (0, CodeGuide_1.useCodeGuideHighlightLines)(highlightedLines);
-    const codeBlockRef = react_1.default.useRef(null);
-    const setRef = (instance) => {
-        if (instance) {
-            codeBlockRef.current = instance;
-            setCodeNode(codeBlockRef);
-        }
-    };
-    const activeCodeExample = codeGuideFiles.find(({ name }) => activeCodeTab === name);
-    return (react_1.default.createElement(CodeDemoWrapper, null,
-        react_1.default.createElement(CodeBlock_1.CodeBlock, { source: activeCodeExample === null || activeCodeExample === void 0 ? void 0 : activeCodeExample.content, lang: activeCodeExample === null || activeCodeExample === void 0 ? void 0 : activeCodeExample.lang, withLineNumbers: true, header: {
-                controls: {
-                    copy: {},
-                },
-            }, codeBlockRef: setRef, codeBlockMaxHeight: "75vh", hideCodeColors: true, tabs: {
-                files: codeGuideFiles,
-                activeTabName: activeCodeTab,
-                handleTabSwitch: setCurrentCodeSample,
-            } })));
-}
-exports.CodeDemo = CodeDemo;
-const CodeDemoWrapper = styled_components_1.default.div `
-  background-color: var(--samples-panel-controls-background-color);
-  border-radius: 0 var(--global-border-radius);
-  padding: 32px 0;
-  min-height: 85vh;
-`;
-//# sourceMappingURL=CodeDemo.js.map

package/lib/layouts/CodeGuide/CodeGuide.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export default function CodeGuide(props: React.PropsWithChildren<any>): React.JSX.Element;

package/lib/layouts/CodeGuide/CodeGuide.js

@@ -1,39 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const CodeDemo_1 = require("../../layouts/CodeGuide/CodeDemo");
-const MarkdownWrapper_1 = require("@theme/components/Markdown/MarkdownWrapper");
-const CodeGuide_1 = require("../../mocks/CodeGuide");
-function CodeGuide(props) {
-    var _a;
-    const { pageProps: { codeGuideFiles }, children, } = props;
-    const initialState = {
-        codeGuideFiles,
-        highlightedLines: '',
-        activeCodeTab: ((_a = codeGuideFiles === null || codeGuideFiles === void 0 ? void 0 : codeGuideFiles[0]) === null || _a === void 0 ? void 0 : _a.name) || '',
-    };
-    return (react_1.default.createElement(CodeGuide_1.CodeGuideProvider, { initialState: initialState },
-        react_1.default.createElement(Wrapper, { "data-component-name": "layouts/CodeGuide" },
-            react_1.default.createElement(MarkdownWrapper_1.MarkdownWrapper, null, children),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(StickyPosition, null,
-                    react_1.default.createElement(CodeDemo_1.CodeDemo, null))))));
-}
-exports.default = CodeGuide;
-const Wrapper = styled_components_1.default.div `
-  padding-left: 24px;
-  display: grid;
-  grid-template-columns: 40% 55%;
-  grid-column-gap: 45px;
-  height: 100%;
-`;
-const StickyPosition = styled_components_1.default.div `
-  position: sticky;
-  top: 50px;
-  left: 0;
-`;
-//# sourceMappingURL=CodeGuide.js.map

package/lib/mocks/CodeGuide/index.d.ts

@@ -1,36 +0,0 @@
-import React from 'react';
-export declare const CodeGuideContext: React.Context<{
-    highlightedLines: string;
-    activeCodeTab: string;
-    activeDocsSection: string;
-    codeBlock: undefined;
-    codeGuideFiles: CodeGuideFile[];
-    updateHighlightedLines: (_lines: string) => void;
-    setCurrentCodeSample: (_fileName: string) => void;
-    setActiveDocumentationSection: (_sectionId: string) => void;
-    setCodeNode: (_node: React.MutableRefObject<HTMLPreElement | null>) => void;
-}>;
-export type CodeGuideFile = {
-    name: string;
-    lang?: string;
-    content: string;
-};
-export interface CodeGuideProviderProps {
-    initialState: {
-        codeGuideFiles: CodeGuideFile[];
-        highlightedLines: string;
-        activeCodeTab: string;
-    };
-}
-export declare const CodeGuideProvider: ({ children, initialState, }: React.PropsWithChildren<CodeGuideProviderProps>) => React.JSX.Element;
-export declare function useCodeGuideHighlightLines(highlightedLines: string): void;
-type CodeStepHandlersProps = {
-    nodeRef: React.RefObject<HTMLDivElement>;
-    bindTo: string;
-    context: typeof CodeGuideContext.Provider.prototype.value;
-};
-export declare function useCodeStepHandlers({ nodeRef, bindTo, context }: CodeStepHandlersProps): {
-    onScroll: (codeBlock: HTMLPreElement | undefined) => void;
-    activateSection: (file: string, lines: string, codeBlock: HTMLPreElement | undefined) => void;
-};
-export {};

package/lib/mocks/CodeGuide/index.js

@@ -1,60 +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.useCodeStepHandlers = exports.useCodeGuideHighlightLines = exports.CodeGuideProvider = exports.CodeGuideContext = void 0;
-const react_1 = __importDefault(require("react"));
-exports.CodeGuideContext = react_1.default.createContext({
-    highlightedLines: '',
-    activeCodeTab: '',
-    activeDocsSection: '',
-    codeBlock: undefined,
-    codeGuideFiles: [],
-    updateHighlightedLines: (_lines) => { },
-    setCurrentCodeSample: (_fileName) => { },
-    setActiveDocumentationSection: (_sectionId) => { },
-    setCodeNode: (_node) => { },
-});
-const CodeGuideProvider = ({ children, initialState, }) => {
-    const contextValue = {
-        highlightedLines: initialState.highlightedLines,
-        activeCodeTab: initialState.activeCodeTab,
-        activeDocsSection: '',
-        codeBlock: undefined,
-        codeGuideFiles: [],
-        updateHighlightedLines: (_lines) => { },
-        setCurrentCodeSample: (_fileName) => { },
-        setActiveDocumentationSection: (_sectionId) => { },
-        setCodeNode: (_node) => { },
-    };
-    return react_1.default.createElement(exports.CodeGuideContext.Provider, { value: contextValue }, children);
-};
-exports.CodeGuideProvider = CodeGuideProvider;
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function useCodeGuideHighlightLines(highlightedLines) { }
-exports.useCodeGuideHighlightLines = useCodeGuideHighlightLines;
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function useCodeStepHandlers({ nodeRef, bindTo, context }) {
-    const onScroll = (codeBlock) => {
-        if (nodeRef.current) {
-            const offsetTop = nodeRef.current.getBoundingClientRect().top;
-            if (offsetTop < 300 && offsetTop > 150) {
-                activateSection('', '', codeBlock);
-            }
-        }
-    };
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const activateSection = (file, lines, codeBlock) => {
-        codeBlock === null || codeBlock === void 0 ? void 0 : codeBlock.scrollTo(0, 0);
-    };
-    return {
-        onScroll,
-        activateSection,
-    };
-}
-exports.useCodeStepHandlers = useCodeStepHandlers;
-//# sourceMappingURL=index.js.map