standardize styling and css (#17)

* standardize styling and css

* Run prettier

* format with prettier

* no var rule

* test lint staged

* test lint staged

* test lint staged

* test lint staged

* checkpoint

* test lint staged

* checkpoint

* checkpoint

* checkpoint

* checkpoint

* checkpoint

* update vscode settings

---------

Co-authored-by: Onur Solmaz <[email protected]>

Author: abrehamgezahegn

.github/workflows/build.yaml

@@ -76,4 +76,4 @@ jobs:
 
       - name: Check linting
         working-directory: ./typescript
-        run: npm run lint:check
+        run: npm run lint

typescript/README.md

@@ -244,20 +244,23 @@ MIT
 
 - [x] setup eslint
 - [x] improve tsconfig
-- [ ] setup lint staged and husky
-- [ ] setup prettier
-- [ ] standardize styling (css)
-- [ ] fix styling for elements
-  - [ ] headings
-  - [ ] paragraph
-  - [ ] code
-  - [ ] table
+- [x] setup lint staged and husky
+- [x] setup prettier
+- [x] standardize styling (css)
+- [x] fix styling for elements
+  - [x] headings
+  - [x] paragraph
+  - [x] code
+  - [x] table
   - [ ] todo?
-  - [ ] equation
+  - [x] equation
   - [ ] image
-  - [ ] blockquote
-- fix ts and eslint errors in these dirs and remove from ignore list of ts and eslint
+  - [x] blockquote
+- [] fix ts and eslint errors in these dirs and remove from ignore list of ts and eslint
   ```
       "**/generated/**",
       "src/serialization/**",
   ```
+- [] setup up bumpp: https://www.npmjs.com/package/bumpp
+- [] migrate test runner to vitest
+- [] move vite app to typescript root examples dir

typescript/eslint.config.js

@@ -41,6 +41,7 @@ module.exports = [
       import: importPlugin,
     },
     rules: {
+      "no-var": ["warn"],
       // TypeScript rules
       "@typescript-eslint/explicit-function-return-type": "off",
       "@typescript-eslint/explicit-module-boundary-types": "off",

typescript/package.json

@@ -20,7 +20,6 @@
     "check": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "lint:check": "eslint src --ext .ts,.tsx --max-warnings 0",
     "prepare": "husky"
   },
   "keywords": [

typescript/src/examples/index.tsx

@@ -6,32 +6,22 @@ import { HeadingBlockRenderer } from "@/renderer/components/blocks/HeadingBlockR
 
 import { JsonDocRenderer } from "../renderer/JsonDocRenderer";
 
-// import testPage from "./testJsonDocs/test_document.json";
 import testPage from "./testJsonDocs/ex1_success.json";
-// import testPage from "./testJsonDocs/test_document_2.json";
 
 const App = () => {
-  // async function main() {
-  //   const schema = await loadSchema("./testJsonDocs/test_document_2.json");
-
-  //   try {
-  //     const isValid = validateAgainstSchema(testPage, schema);
-  //     console.log("isvlaid: ", isValid);
-  //     console.log("schema:  ", schema);
-  //   } catch (error) {
-  //     console.log("error validating schema: ", error);
-  //   }
-  // }
-
-  // useEffect(() => {
-  //   main();
-  // }, []);
-
   return (
-    <div style={{ padding: "20px", maxWidth: "800px", margin: "0 auto" }}>
+    <div
+      style={{
+        padding: "20px",
+        maxWidth: "800px",
+        margin: "0 auto",
+        background: "black",
+      }}
+    >
       <h1>JSON-DOC Renderer Development</h1>
       <JsonDocRenderer
         page={testPage}
+        theme="dark"
         components={{
           heading_1: (props) => {
             return <HeadingBlockRenderer {...props} />;

typescript/src/renderer/JsonDocRenderer.tsx

@@ -1,21 +1,23 @@
+import "./styles/index.css";
 import React from "react";
 
 import { BlockRenderer } from "./components/BlockRenderer";
-import "./styles.css";
 
 interface JsonDocRendererProps {
   page: any;
   className?: string;
   components?: React.ComponentProps<typeof BlockRenderer>["components"];
+  theme?: "light" | "dark";
 }
 
 export const JsonDocRenderer = ({
   page,
   className = "",
   components,
+  theme = "light",
 }: JsonDocRendererProps) => {
   return (
-    <div className={`json-doc-renderer ${className}`}>
+    <div className={`json-doc-renderer jsondoc-theme-${theme} ${className}`}>
       <div className="json-doc-page">
         {/* Page icon */}
         {page.icon && (

typescript/src/renderer/components/blocks/CodeBlockRenderer.tsx

@@ -26,13 +26,11 @@ export const CodeBlockRenderer: React.FC<CodeBlockRendererProps> = ({
     >
       <div>
         <div role="figure">
-          <div>
-            <div>
-              <div>{codeData?.language || "Plain Text"}</div>
-            </div>
+          <div className="notion-code-block-language">
+            {codeData?.language || "Plain Text"}
           </div>
           <div>
-            <div className="line-numbers notion-code-block">
+            <div className="line-numbers notion-code-block-content">
               <div className="notranslate">
                 <RichTextRenderer richText={codeData?.rich_text || []} />
               </div>

typescript/src/renderer/components/blocks/ParagraphBlockRenderer.tsx

@@ -17,20 +17,14 @@ export const ParagraphBlockRenderer: React.FC<ParagraphBlockRendererProps> = ({
   components,
   ...props
 }) => {
-  console.log("block.paragraph: ", block.paragraph);
-  console.log("block children:", block.children);
   return (
     <div
       {...props}
       className={`notion-selectable notion-text-block ${className || ""}`.trim()}
       data-block-id={block.id}
     >
-      <div>
-        <div>
-          <div className="notranslate">
-            <RichTextRenderer richText={block.paragraph?.rich_text || []} />
-          </div>
-        </div>
+      <div className="notranslate">
+        <RichTextRenderer richText={block.paragraph?.rich_text || []} />
       </div>
 
       {/* Render children blocks recursively */}

typescript/src/renderer/index.ts

@@ -1,13 +1,14 @@
-export { JsonDocRenderer } from "./JsonDocRenderer";
 export { BlockRenderer } from "./components/BlockRenderer";
 
 // Export individual block components for composition
 export { ParagraphBlockRenderer } from "./components/blocks/ParagraphBlockRenderer";
 export { HeadingBlockRenderer } from "./components/blocks/HeadingBlockRenderer";
 export { ListItemBlockRenderer } from "./components/blocks/ListItemBlockRenderer";
+
 export { CodeBlockRenderer } from "./components/blocks/CodeBlockRenderer";
 export { ImageBlockRenderer } from "./components/blocks/ImageBlockRenderer";
 export { TableBlockRenderer } from "./components/blocks/TableBlockRenderer";
+export { JsonDocRenderer } from "./JsonDocRenderer";
 export { QuoteBlockRenderer } from "./components/blocks/QuoteBlockRenderer";
 export { DividerBlockRenderer } from "./components/blocks/DividerBlockRenderer";
 export { ToDoBlockRenderer } from "./components/blocks/ToDoBlockRenderer";
@@ -20,3 +21,6 @@ export { OrderedListBlockRenderer } from "./components/blocks/OrderedListBlockRe
 // Export types
 export type { BlockComponents } from "./components/BlockRenderer";
 export type { JsonDocRendererProps, BlockRendererProps } from "./types";
+
+// Import default styles - users can override by importing their own after this
+import "./styles/index.css";