@stianlarsen/react-code-preview - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

dist/hooks/useHighlightCode.d.ts

 import { Themes, UseHighlightCode } from "../types/types";
-export declare function useHighlightCode(codeString: string, lightTheme: Themes, darkTheme: Themes): UseHighlightCode;
+export declare function useHighlightCode(codeString: string, lightTheme?: Themes, darkTheme?: Themes): UseHighlightCode;

dist/hooks/useHighlightCode.js

@@ -16,9 +16,9 @@ import { useEffect, useState } from "react";
             });
-            let themeToLoad = lightTheme === darkTheme
-                ? blackout
-                : theme === "dark" && darkTheme
+            let themeToLoad = theme === "dark"
+                ? darkTheme
                     ? darkTheme
-                    : lightTheme
-                        ? lightTheme
-                        : "blackout";
+                    : "blackout"
+                : lightTheme
+                    ? lightTheme
+                    : "blackout";
             // Assuming the theme names are directly usable, otherwise adjust the mapping logic accordingly
@@ -38,4 +38,4 @@ if (themeToLoad === "blackout") {
         highlightCodeAsync();
-    }, [theme]);
+    }, [darkTheme, lightTheme, theme]);
     return { highlightedCode, codeString: formattedCodeString };
 }

dist/main/codePreview.d.ts

 import { CodePreviewProps } from "../types/types";
 import "./css/codePreview.css";
-export declare const CodePreview: ({ component: PreviewComponent, code, lightTheme, darkTheme, className, style, initialTab, }: CodePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodePreview: (props: CodePreviewProps) => import("react/jsx-runtime").JSX.Element;

dist/main/codePreview.js

@@ -1,15 +0,10 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Loader } from "@stianlarsen/react-ui-kit";
-import { Suspense, useState } from "react";
-import { useHighlightCode } from "../hooks/useHighlightCode";
-import { defaultDarkTheme } from "../libs/theme/theme";
-import { cn } from "../utils/cn";
-import { CopyButton } from "./components/copyButton/copyButton";
-import { Tabs } from "./components/tabs/tabs";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CodeAndExamplePreview } from "./components/codeAndExamplePreview/codeAndExamplePreview";
+import { CodeOnlyPreview } from "./components/codeOnlyPreview/codeOnlyPreview";
 import "./css/codePreview.css";
-export const CodePreview = ({ component: PreviewComponent, code, lightTheme = defaultDarkTheme, darkTheme = defaultDarkTheme, className, style, initialTab = "preview", }) => {
-    const [activeTab, setActiveTab] = useState(initialTab);
-    const { highlightedCode, codeString } = useHighlightCode(code, lightTheme, darkTheme);
-    const classname = cn("code-preview", className);
-    return (_jsx(Suspense, { fallback: _jsx(Loader, {}), children: _jsxs("div", { className: classname, style: { ...style }, children: [_jsx(Tabs, { setActiveTab: setActiveTab, activeTab: activeTab }), _jsxs("div", { className: "code-preview__content", children: [activeTab === "preview" && PreviewComponent && (_jsx("div", { className: "code-preview__content__component-wrapper", children: _jsx(PreviewComponent, {}) })), activeTab === "code" && highlightedCode && (_jsxs(_Fragment, { children: [_jsx(CopyButton, { value: codeString }), _jsx("div", { className: "code-preview__content__code-wrapper", dangerouslySetInnerHTML: { __html: highlightedCode } })] }))] })] }) }));
+export const CodePreview = (props) => {
+    if ("component" in props) {
+        return _jsx(CodeAndExamplePreview, { ...props });
+    }
+    return _jsx(CodeOnlyPreview, { ...props });
 };

dist/types/types.d.ts

@@ -5,3 +5,10 @@ import { CSSProperties } from "react";
 export type TabsType = "preview" | "code";
-export interface CodePreviewProps {
+export interface PreviewOnlyCodeProps {
+    code: string;
+    lightTheme?: Themes;
+    darkTheme?: Themes;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface CodeAndPreviewProps {
     component: () => JSX.Element;
@@ -15,2 +22,3 @@ code: string;
 }
+export type CodePreviewProps = PreviewOnlyCodeProps | CodeAndPreviewProps;
 export interface UseHighlightCode {
@@ -17,0 +25,0 @@ highlightedCode: string;

package.json

 {
   "name": "@stianlarsen/react-code-preview",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "A React component that provides tabbed navigation for viewing a live component preview and its source code separately.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -122,2 +122,6 @@ # @stianlarsen/react-code-preview
 
+A recent update has made the `CodePreview` component even more flexible and user-friendly. Now, you no longer need to pass in the "component" prop for simpler use cases. This is particularly useful if you don't require tabs to switch between preview and code, allowing for a code-only display.
+
+Additionally, a copy button has been added to the code window, making it easier to copy the code to your clipboard.
+
 ## `CodePreview` Component Props
@@ -127,11 +131,11 @@
 
-| Prop         | Type                | Description                                                                                   |
-| ------------ | ------------------- | --------------------------------------------------------------------------------------------- |
-| `component`  | `() => JSX.Element` | The React component to render in the live preview.                                            |
-| `code`       | `string`            | The source code of the component as a string for display.                                     |
-| `lightTheme` | `Themes`            | The theme to use for light mode, defaults to "blackout".                                      |
-| `darkTheme`  | `Themes`            | The theme to use for dark mode, follows system preference if not set. Defaults to "blackout". |
-| `className`  | `string`            | An optional CSS class to apply custom styling.                                                |
-| `style`      | `CSSProperties`     | Optional inline styles.                                                                       |
-| `initialTab` | `TabsType`          | The initial tab to be active ("preview" or "code").                                           |
+| Prop         | Type                | Description                                                                                                  |
+| ------------ | ------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `component`  | `() => JSX.Element` | _Optional._ The React component to render in the live preview. If not provided, only code will be displayed. |
+| `code`       | `string`            | The source code of the component as a string for display.                                                    |
+| `lightTheme` | `Themes`            | The theme to use for light mode, defaults to "blackout".                                                     |
+| `darkTheme`  | `Themes`            | The theme to use for dark mode, follows system preference if not set. Defaults to "blackout".                |
+| `className`  | `string`            | An optional CSS class to apply custom styling.                                                               |
+| `style`      | `CSSProperties`     | Optional inline styles.                                                                                      |
+| `initialTab` | `TabsType`          | The initial tab to be active ("preview" or "code").                                                          |
 
@@ -138,0 +142,0 @@ ## Using with Next.js

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1194662

increased by0.22%

Number of package files

45

increased by9.76%

Lines of code

1245

increased by3.49%

Number of lines in readme file

192

increased by2.13%

No dependency changes