@redocly/theme-experimental 0.0.2

package/LICENSE

@@ -0,0 +1 @@
+(c) Copyright 2023 Redocly Inc, all rights reserved.

package/README.md

@@ -0,0 +1 @@
+For more details, contact team@redocly.com.

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

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

package/lib/layouts/CodeGuide/CodeDemo.js

@@ -0,0 +1,40 @@
+"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

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

package/lib/layouts/CodeGuide/CodeGuide.js

@@ -0,0 +1,39 @@
+"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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,60 @@
+"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

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@redocly/theme-experimental",
+  "version": "0.0.2",
+  "description": "Experimental UI components lib",
+  "keywords": [
+    "theme-experimental",
+    "redocly"
+  ],
+  "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": {
+    "lodash.throttle": "^4.1.1",
+    "prismjs": "^1.28.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.10.0",
+    "styled-components": "^4.1.1 || ^5.3.11",
+    "styled-system": "^5.1.5",
+    "@markdoc/markdoc": "0.4.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "7.6.4",
+    "@storybook/addon-essentials": "7.6.4",
+    "@storybook/addon-interactions": "7.6.4",
+    "@storybook/addon-links": "7.6.4",
+    "@storybook/addon-viewport": "7.6.4",
+    "@storybook/addons": "7.6.4",
+    "@storybook/core-common": "7.6.4",
+    "@storybook/node-logger": "7.6.4",
+    "@storybook/react": "7.6.4",
+    "@storybook/react-webpack5": "7.6.4",
+    "@storybook/testing-library": "0.2.2",
+    "@storybook/theming": "7.6.4",
+    "@testing-library/jest-dom": "6.1.5",
+    "@testing-library/react": "14.1.2",
+    "@testing-library/user-event": "14.5.1",
+    "@types/highlight-words-core": "1.2.3",
+    "@types/jest": "29.5.11",
+    "@types/jest-when": "3.5.5",
+    "@types/lodash.throttle": "4.1.9",
+    "@types/node": "18.19.3",
+    "@types/prismjs": "1.26.3",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "18.2.17",
+    "@types/styled-components": "5.1.34",
+    "@types/styled-system": "5.1.22",
+    "@typescript-eslint/eslint-plugin": "5.55.0",
+    "@typescript-eslint/parser": "5.55.0",
+    "chromatic": "6.17.2",
+    "concurrently": "7.6.0",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "jest-styled-components": "7.2.0",
+    "jest-when": "3.6.0",
+    "json-schema-to-ts": "2.7.2",
+    "lodash.throttle": "4.1.1",
+    "npm-run-all": "4.1.5",
+    "react-refresh": "0.14.0",
+    "react-router-dom": "6.10.0",
+    "storybook": "7.6.4",
+    "storybook-addon-pseudo-states": "2.1.2",
+    "storybook-design-token": "3.0.0-beta.6",
+    "styled-components": "5.3.11",
+    "styled-system": "5.1.5",
+    "ts-jest": "29.1.1",
+    "ts-node": "10.9.1",
+    "ts-node-dev": "2.0.0",
+    "tsc-alias": "1.8.3",
+    "tsconfig-paths": "4.2.0",
+    "tsconfig-paths-webpack-plugin": "3.5.2",
+    "typescript": "5.2.2",
+    "webpack": "5.88.2",
+    "@redocly/portal-types": "1.2.1"
+  },
+  "dependencies": {
+    "@redocly/theme": "^0.32.2"
+  },
+  "scripts": {
+    "start": "npm-run-all --parallel storybook storybook:tokens:watch",
+    "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
+    "ts:check": "tsc --noEmit --skipLibCheck",
+    "clean": "rm -rf lib",
+    "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build": "npm run clean && npm run compile",
+    "storybook": "storybook dev -p 6007",
+    "storybook:build": "npm run storybook:tokens && storybook build",
+    "storybook:tokens": "ts-node scripts/generate-css-tokens.ts",
+    "storybook:tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts"
+  }
+}

package/src/layouts/CodeGuide/CodeDemo.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CodeBlock } from '@theme/components/CodeBlock/CodeBlock';
+import { CodeGuideContext, useCodeGuideHighlightLines } from '@portal/CodeGuide';
+
+export function CodeDemo() {
+  const { highlightedLines, activeCodeTab, setCurrentCodeSample, setCodeNode, codeGuideFiles } =
+    React.useContext(CodeGuideContext);
+
+  useCodeGuideHighlightLines(highlightedLines);
+
+  const codeBlockRef = React.useRef<HTMLPreElement | null>(null);
+
+  const setRef = (instance?: HTMLPreElement | null) => {
+    if (instance) {
+      codeBlockRef.current = instance;
+      setCodeNode(codeBlockRef);
+    }
+  };
+
+  const activeCodeExample = codeGuideFiles.find(({ name }) => activeCodeTab === name);
+
+  return (
+    <CodeDemoWrapper>
+      <CodeBlock
+        source={activeCodeExample?.content}
+        lang={activeCodeExample?.lang}
+        withLineNumbers
+        header={{
+          controls: {
+            copy: {},
+          },
+        }}
+        codeBlockRef={setRef}
+        codeBlockMaxHeight="75vh"
+        hideCodeColors={true}
+        tabs={{
+          files: codeGuideFiles,
+          activeTabName: activeCodeTab,
+          handleTabSwitch: setCurrentCodeSample,
+        }}
+      />
+    </CodeDemoWrapper>
+  );
+}
+
+const CodeDemoWrapper = styled.div`
+  background-color: var(--samples-panel-controls-background-color);
+  border-radius: 0 var(--global-border-radius);
+  padding: 32px 0;
+  min-height: 85vh;
+`;

package/src/layouts/CodeGuide/CodeGuide.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import { CodeDemo } from '@theme-experimental/layouts/CodeGuide/CodeDemo';
+
+import { MarkdownWrapper } from '@theme/components/Markdown/MarkdownWrapper';
+import { CodeGuideProvider } from '@portal/CodeGuide';
+
+export default function CodeGuide(props: React.PropsWithChildren<any>) {
+  const {
+    pageProps: { codeGuideFiles },
+    children,
+  } = props;
+
+  const initialState = {
+    codeGuideFiles,
+    highlightedLines: '',
+    activeCodeTab: codeGuideFiles?.[0]?.name || '',
+  };
+
+  return (
+    <CodeGuideProvider initialState={initialState}>
+      <Wrapper data-component-name="layouts/CodeGuide">
+        <MarkdownWrapper>{children}</MarkdownWrapper>
+        <div>
+          <StickyPosition>
+            <CodeDemo />
+          </StickyPosition>
+        </div>
+      </Wrapper>
+    </CodeGuideProvider>
+  );
+}
+
+const Wrapper = styled.div`
+  padding-left: 24px;
+  display: grid;
+  grid-template-columns: 40% 55%;
+  grid-column-gap: 45px;
+  height: 100%;
+`;
+
+const StickyPosition = styled.div`
+  position: sticky;
+  top: 50px;
+  left: 0;
+`;

package/src/mocks/CodeGuide/index.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+export const CodeGuideContext = React.createContext({
+  highlightedLines: '',
+  activeCodeTab: '',
+  activeDocsSection: '',
+  codeBlock: undefined,
+  codeGuideFiles: [] as CodeGuideFile[],
+  updateHighlightedLines: (_lines: string) => {},
+  setCurrentCodeSample: (_fileName: string) => {},
+  setActiveDocumentationSection: (_sectionId: string) => {},
+  setCodeNode: (_node: React.MutableRefObject<HTMLPreElement | null>) => {},
+});
+
+export type CodeGuideFile = { name: string; lang?: string; content: string };
+
+export interface CodeGuideProviderProps {
+  initialState: {
+    codeGuideFiles: CodeGuideFile[];
+    highlightedLines: string;
+    activeCodeTab: string;
+  };
+}
+
+export const CodeGuideProvider = ({
+  children,
+  initialState,
+}: React.PropsWithChildren<CodeGuideProviderProps>) => {
+  const contextValue = {
+    highlightedLines: initialState.highlightedLines,
+    activeCodeTab: initialState.activeCodeTab,
+    activeDocsSection: '',
+    codeBlock: undefined,
+    codeGuideFiles: [] as CodeGuideFile[],
+    updateHighlightedLines: (_lines: string) => {},
+    setCurrentCodeSample: (_fileName: string) => {},
+    setActiveDocumentationSection: (_sectionId: string) => {},
+    setCodeNode: (_node: React.MutableRefObject<HTMLPreElement | null>) => {},
+  };
+
+  return <CodeGuideContext.Provider value={contextValue}>{children}</CodeGuideContext.Provider>;
+};
+
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useCodeGuideHighlightLines(highlightedLines: string) {}
+
+type CodeStepHandlersProps = {
+  nodeRef: React.RefObject<HTMLDivElement>;
+  bindTo: string;
+  context: typeof CodeGuideContext.Provider.prototype.value;
+};
+
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useCodeStepHandlers({ nodeRef, bindTo, context }: CodeStepHandlersProps): {
+  onScroll: (codeBlock: HTMLPreElement | undefined) => void;
+  activateSection: (file: string, lines: string, codeBlock: HTMLPreElement | undefined) => void;
+} {
+  const onScroll = (codeBlock: HTMLPreElement | undefined) => {
+    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: string, lines: string, codeBlock: HTMLPreElement | undefined) => {
+    codeBlock?.scrollTo(0, 0);
+  };
+
+  return {
+    onScroll,
+    activateSection,
+  };
+}