@redocly/theme-experimental 0.2.0-next.0 → 0.2.0-next.2

package/markdoc/components.tsx

@@ -1,2 +1 @@
-export { CodeStep } from './CodeStep/CodeStep';
 export * from './Cards/index';

package/markdoc/schema.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme-experimental",
-  "version": "0.2.0-next.0",
+  "version": "0.2.0-next.2",
   "description": "Experimental UI components lib",
   "keywords": [
     "theme-experimental",
@@ -10,7 +10,6 @@
   "license": "SEE LICENSE IN LICENSE",
   "exports": {
     "./package.json": "./package.json",
-    "./src/": "./src/",
     "./plugin.js": "./plugin.js"
   },
   "peerDependencies": {
@@ -60,8 +59,8 @@
     "webpack": "5.94.0"
   },
   "dependencies": {
-    "@redocly/config": "0.20.3",
-    "@redocly/theme": "0.51.0-next.0"
+    "@redocly/config": "0.21.0",
+    "@redocly/theme": "0.51.0-next.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/markdoc/CodeStep/CodeStep.tsx

@@ -1,67 +0,0 @@
-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-color-raised)' : 'transparent')};
-  border-top: 1px solid #cbccd1;
-  cursor: pointer;
-
-  &:hover {
-    border-left-color: ${({ active }) => (active ? 'var(--color-primary-base)' : '#cbccd1')};
-  }
-`;

package/src/layouts/CodeGuide/CodeDemo.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { CodeBlock } from '@redocly/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

@@ -1,47 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
-import { CodeGuideProvider } from '@portal/CodeGuide';
-
-import { CodeDemo } from './CodeDemo';
-
-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">
-        <Markdown>{children}</Markdown>
-        <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

@@ -1,79 +0,0 @@
-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
-
-export function useCodeGuideHighlightLines(highlightedLines: string) {}
-
-type CodeStepHandlersProps = {
-  nodeRef: React.RefObject<HTMLDivElement>;
-  bindTo: string;
-  context: typeof CodeGuideContext.Provider.prototype.value;
-};
-
-// @ts-ignore
-
-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
-
-  const activateSection = (file: string, lines: string, codeBlock: HTMLPreElement | undefined) => {
-    codeBlock?.scrollTo(0, 0);
-  };
-
-  return {
-    onScroll,
-    activateSection,
-  };
-}