docs(changeset): Fix exports for styles

Author: mayank1513

.changeset/curvy-women-serve.md

@@ -0,0 +1,5 @@
+---
+"react18-loaders": patch
+---
+
+Fix exports for styles

examples/nextjs/src/app/docx/page.tsx

@@ -0,0 +1,5 @@
+import { Docs } from "@repo/shared";
+
+export default function DocsPage() {
+  return <Docs />
+}

lib/package.json

@@ -90,7 +90,12 @@
       "types": "./dist/hooks/index.d.ts",
       "import": "./dist/hooks/index.mjs",
       "require": "./dist/hooks/index.js"
-    }
+    },
+    "./index.css": "./dist/index.css",
+    "./dist/index.css": "./dist/index.css",
+    "./dist": "./dist/index.css",
+    "./css": "./dist/index.css",
+    "./styles": "./dist/index.css"
   },
   "scripts": {
     "build": "tsup && tsc -p tsconfig-build.json && gzip -c dist/index.js | wc -c",

package.json

@@ -27,7 +27,6 @@
     "prettier": "^3.5.3",
     "turbo": "^2.5.3",
     "typedoc": "^0.28.4",
-    "typedoc-plugin-extras": "^4.0.0",
     "typedoc-plugin-mdn-links": "^5.0.2",
     "typedoc-plugin-missing-exports": "^4.0.0",
     "typedoc-plugin-rename-defaults": "^0.7.3"

packages/shared/package.json

@@ -40,9 +40,11 @@
     "vitest": "^3.1.4"
   },
   "dependencies": {
+    "@m2d/react-markdown": "^1.0.0",
     "@mayank1513/fork-me": "^2.1.3",
     "@repo/scripts": "workspace:*",
     "esbuild-raw-plugin": "^0.2.0",
+    "mdast2docx": "^1.4.1",
     "nextjs-darkmode": "^1.0.10",
     "nextjs-themes": "^4.0.6",
     "r18gs": "^3.0.1",

packages/shared/src/client/docs/docs.module.scss

@@ -0,0 +1,3 @@
+.docs {
+  /* create your container styles here */
+}

packages/shared/src/client/docs/docs.tsx

@@ -0,0 +1,40 @@
+import { HTMLProps, ReactNode, useRef } from "react";
+import styles from "./docs.module.scss";
+import readme from "../../../../../README.md?raw"
+import { Md } from "@m2d/react-markdown";
+import { toDocx } from "mdast2docx";
+import { AstArrayElement } from "@m2d/react-markdown/utils";
+
+export interface DocsProps extends HTMLProps<HTMLDivElement> {
+	children?: ReactNode;
+}
+
+export const Docs = (props: DocsProps) => {
+	const className = [props.className, styles["docs"]].filter(Boolean).join(" ");
+	const astRef = useRef<AstArrayElement[]>([])
+	return (
+		<div {...props} className={className} data-testid="docs">
+			<button onClick={() => {
+				const mdAst = astRef.current[0].mdast;
+				if (mdAst) {
+					toDocx(mdAst).then(docxBlob => {
+						// download docx blob
+						const url = URL.createObjectURL(docxBlob as Blob);
+						const a = document.createElement("a");
+						a.href = url;
+						a.download = "document.docx";
+						document.body.appendChild(a);
+						a.click();
+						document.body.removeChild(a);
+						URL.revokeObjectURL(url);
+					}).catch(() => {
+						alert("Something went wrong!")
+					});
+				} else {
+					alert("Something went wrong!")
+				}
+			}}>Download as Docx</button>
+			<Md astRef={astRef}>{readme}</Md>
+		</div>
+	);
+}

packages/shared/src/client/docs/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./docs";

packages/shared/src/client/global-loader/global-loader.tsx

@@ -1,5 +1,5 @@
 import { LoaderContainer } from "react18-loaders";
-import { Bars1 } from "react18-loaders/dist/server/bars/bars1";
+import { Bars1 } from "react18-loaders/dist/server";
 
 /**
  * # GlobalLoader

packages/shared/src/client/index.ts

@@ -7,6 +7,7 @@
  */
 
 // client component exports
+export * from "./docs";
 export * from "./demo";
 export * from "./header";
 export * from "./global-loader";