@azerion/bunosaurus-theme-live-codeblock 0.0.0-stage → 4.0.0

package/src/theme/Playground/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {ReactNode} from 'react';
+import PlaygroundProvider from '@theme/Playground/Provider';
+import PlaygroundContainer from '@theme/Playground/Container';
+import PlaygroundLayout from '@theme/Playground/Layout';
+
+import type {Props} from '@theme/Playground';
+
+export default function Playground({
+  children,
+  transformCode,
+  position,
+  ...props
+}: Props): ReactNode {
+  return (
+    <PlaygroundContainer>
+      <PlaygroundProvider code={children} {...props}>
+        <PlaygroundLayout position={position} />
+      </PlaygroundProvider>
+    </PlaygroundContainer>
+  );
+}

package/src/theme/ReactLiveScope/index.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+// Add react-live imports you need here
+const ReactLiveScope: unknown = {
+  React,
+  ...React,
+};
+
+export default ReactLiveScope;

package/src/theme-live-codeblock.d.ts

@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// <reference types="@docusaurus/theme-classic" />
+/// <reference types="@docusaurus/module-type-aliases" />
+
+declare module '@docusaurus/theme-live-codeblock' {
+  import type {PlaygroundPosition} from '@theme/Playground';
+
+  export type ThemeConfig = {
+    liveCodeBlock: {
+      playgroundPosition: PlaygroundPosition;
+    };
+  };
+}
+
+declare module '@theme/LiveCodeBlock' {
+  import type {ReactNode} from 'react';
+  import type {Props as BaseProps} from '@theme/CodeBlock';
+
+  type CodeBlockProps = Omit<BaseProps, 'children'>;
+
+  export interface Props extends CodeBlockProps {
+    children?: string;
+  }
+
+  export default function LiveCodeBlock(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground' {
+  import type {ReactNode} from 'react';
+  import type {Props as BaseProps} from '@theme/CodeBlock';
+  import type {LiveProvider} from 'react-live';
+
+  type CodeBlockProps = Omit<
+    BaseProps,
+    'children' | 'className' | 'language' | 'title'
+  >;
+  type LiveProviderProps = React.ComponentProps<typeof LiveProvider>;
+
+  export type PlaygroundPosition = 'top' | 'bottom';
+
+  export interface Props extends CodeBlockProps, LiveProviderProps {
+    // Allow empty live playgrounds
+    children?: string;
+    position?: PlaygroundPosition;
+  }
+
+  export default function Playground(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Provider' {
+  import type {ReactNode} from 'react';
+  import type {Props as PlaygroundProps} from '@theme/Playground';
+
+  export interface Props extends Omit<PlaygroundProps, 'children'> {
+    code: string | undefined;
+    children: ReactNode;
+  }
+
+  export interface ResetContextValue {
+    resetKey: number;
+    reset: () => void;
+  }
+
+  export const PlaygroundResetContext: React.Context<ResetContextValue | null>;
+  export function usePlaygroundReset(): ResetContextValue;
+  export default function PlaygroundProvider(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Container' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    children: ReactNode;
+  }
+
+  export default function PlaygroundContainer(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Layout' {
+  import type {ReactNode} from 'react';
+  import type {PlaygroundPosition} from '@theme/Playground';
+
+  export interface Props {
+    position?: PlaygroundPosition;
+  }
+
+  export default function PlaygroundLayout(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Preview' {
+  import type {ReactNode} from 'react';
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Props {}
+
+  export default function PlaygroundPreview(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Editor' {
+  import type {ReactNode} from 'react';
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Props {}
+
+  export default function PlaygroundEditor(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Header' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    children: ReactNode;
+    buttons?: ReactNode;
+  }
+
+  export default function PlaygroundHeader(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Buttons/ResetButton' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    className?: string;
+  }
+
+  export default function ResetButton(props: Props): ReactNode;
+}
+
+declare module '@theme/ReactLiveScope' {
+  type Scope = {
+    [key: string]: unknown;
+  };
+
+  const ReactLiveScope: Scope;
+  export default ReactLiveScope;
+}

package/src/validateThemeConfig.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {Joi} from '@docusaurus/utils-validation';
+import type {
+  ThemeConfig,
+  ThemeConfigValidationContext,
+} from '@docusaurus/types';
+
+export const DEFAULT_CONFIG = {
+  playgroundPosition: 'bottom',
+};
+
+export const Schema = Joi.object<ThemeConfig>({
+  liveCodeBlock: Joi.object({
+    playgroundPosition: Joi.string()
+      .equal('top', 'bottom')
+      .default(DEFAULT_CONFIG.playgroundPosition),
+  })
+    .label('themeConfig.liveCodeBlock')
+    .default(DEFAULT_CONFIG),
+});
+
+export function validateThemeConfig({
+  validate,
+  themeConfig,
+}: ThemeConfigValidationContext<ThemeConfig>): ThemeConfig {
+  return validate(Schema, themeConfig);
+}