refactor(web): Use samuwrite packages

tailwind/package.json

@@ -8,6 +8,7 @@
     "dist/index.css"
   ],
   "main": "dist/index.css",
+  "author": "[email protected]",
   "devDependencies": {
     "@tailwindcss/typography": "0.5.7",
     "sass": "1.55.0",

web/package.json

@@ -21,28 +21,14 @@
   },
   "dependencies": {
     "@primer/octicons-react": "17.5.0",
-    "@radix-ui/react-alert-dialog": "^1.0.0",
-    "@radix-ui/react-dropdown-menu": "1.0.0",
-    "@radix-ui/react-label": "1.0.0",
-    "@radix-ui/react-popover": "1.0.0",
-    "@radix-ui/react-radio-group": "1.0.0",
-    "@radix-ui/react-scroll-area": "1.0.0",
-    "@radix-ui/react-slider": "^1.0.0",
-    "@radix-ui/react-slot": "^1.0.0",
-    "@radix-ui/react-switch": "1.0.0",
-    "@radix-ui/react-tooltip": "1.0.0",
     "@rose-pine/palette": "3.0.1",
+    "@samuwrite/markdown": "^1.0.0",
+    "@samuwrite/radix": "^1.0.0",
+    "@samuwrite/tailwind": "^1.0.3",
     "monaco-editor": "0.31.0",
     "monaco-vim": "0.3.4",
-    "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rehype-dom-stringify": "3.0.1",
-    "rehype-external-links": "2.0.1",
-    "rehype-source-map": "1.0.1",
-    "remark-gfm": "3.0.1",
-    "remark-parse": "10.0.1",
-    "remark-rehype": "10.1.0",
-    "tinykeys": "1.4.0",
-    "unified": "10.1.2"
+    "react": "18.2.0",
+    "tinykeys": "1.4.0"
   }
 }

web/src/app/app.tsx

@@ -1,4 +1,4 @@
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "@samuwrite/radix";
 import { useState } from "react";
 import { Doc } from "../doc/type";
 import { Editor } from "../editor/type";
@@ -53,7 +53,7 @@ export const App = (): JSX.Element => {
 
   return (
     <PromptProvider>
-      <TooltipProvider>{app}</TooltipProvider>
+      <Tooltip.Provider>{app}</Tooltip.Provider>
     </PromptProvider>
   );
 };

web/src/button/button.tsx

@@ -1,4 +1,4 @@
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "@samuwrite/radix";
 import { ButtonHTMLAttributes, forwardRef } from "react";
 import { outline } from "../outline/outline";
 import * as s from "./button.module.css";
@@ -11,7 +11,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 export const Button = forwardRef<HTMLButtonElement, Props>(
   (props, ref): JSX.Element => {
     const { asChild, primary, ...rest } = props;
-    const Comp = asChild ? Slot : "button";
+    const Comp = asChild ? Slot.Root : "button";
     return (
       <Comp
         ref={ref}

web/src/dropdown/dropdown.tsx

@@ -1,4 +1,4 @@
-import * as Radix from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu as Radix } from "@samuwrite/radix";
 import { animation } from "../animation/animation";
 import { Card } from "../card/card";
 import { outline } from "../outline/outline";

web/src/popover/popover.tsx

@@ -1,4 +1,4 @@
-import * as Radix from "@radix-ui/react-popover";
+import { Popover as Radix } from "@samuwrite/radix";
 import { animation } from "../animation/animation";
 import { Card } from "../card/card";
 import { Scroll } from "../scroll/scroll";

web/src/preview/html.ts

@@ -1,43 +1,26 @@
 import { useEffect, useState } from "react";
-import rehypeDomStringify from "rehype-dom-stringify";
-import { rehypeSourceMap } from "rehype-source-map";
-import rehypeExternalLinks from "rehype-external-links";
-import remarkGfm from "remark-gfm";
-import remarkParse from "remark-parse";
-import remarkRehype from "remark-rehype";
-import { Plugin, unified } from "unified";
+import { getHtml } from "@samuwrite/markdown";
 import { Editor } from "../editor/type";
 
-const processor = unified()
-  .use(remarkParse as Plugin)
-  .use(remarkGfm)
-  .use(remarkRehype)
-  .use(rehypeDomStringify as Plugin)
-  .use(rehypeSourceMap)
-  // Always open links in new tab to avoid navigating away from the editor
-  // https://github.com/thien-do/samuwrite.com/issues/122
-  .use(rehypeExternalLinks, { target: "_blank" });
 interface Params {
   editor: Editor;
 }
 
-const getHtml = async (editor: Editor): Promise<string> => {
-  const file = await processor.process(editor.getValue());
-  const html = file.toString();
-  return html;
-};
-
 export const usePreviewHtml = (params: Params): string => {
   const { editor } = params;
 
   const [html, setHtml] = useState("");
 
   useEffect(() => {
     // Set initial value
-    getHtml(editor).then((text) => setHtml(text));
+    getHtml(editor.getValue()).then((text) => setHtml(text));
 
     // Listen for changes
-    const handler = async () => setHtml(await getHtml(editor));
+    const handler = async () => {
+      const markdown = editor.getValue();
+      const html = await getHtml(markdown);
+      setHtml(html);
+    };
     const listeners = [
       editor.onDidChangeModelContent(handler),
       editor.onDidChangeModel(handler), // Open new file

web/src/prompt/dialog.tsx

@@ -1,4 +1,4 @@
-import * as Radix from "@radix-ui/react-alert-dialog";
+import { AlertDialog as Radix } from "@samuwrite/radix";
 import { ReactNode } from "react";
 import { animation } from "../animation/animation";
 import { Card } from "../card/card";

web/src/scroll/scroll.tsx

@@ -1,4 +1,4 @@
-import * as Radix from "@radix-ui/react-scroll-area";
+import { ScrollArea as Radix } from "@samuwrite/radix";
 import { ReactNode } from "react";
 import * as s from "./scroll.module.css";
 

web/src/settings/radio/group.tsx

@@ -1,18 +1,17 @@
-import { RadioGroup, RadioGroupProps } from "@radix-ui/react-radio-group";
-import { Label } from "@radix-ui/react-label";
+import { RadioGroup, Label } from "@samuwrite/radix";
 import { SettingsRadioOption } from "./option";
 import * as s from "./group.module.css";
 
-interface Props extends RadioGroupProps {
+interface Props extends RadioGroup.RadioGroupProps {
   label: string;
   options: { value: string; label: string; icon: JSX.Element }[];
 }
 
 export const SettingsRadioGroup = (props: Props): JSX.Element => {
   const { label, options, ...rest } = props;
   return (
-    <RadioGroup className={s.container} {...rest}>
-      <Label>{label}</Label>
+    <RadioGroup.Root className={s.container} {...rest}>
+      <Label.Root>{label}</Label.Root>
       <div className={s.options}>
         {options.map((option) => (
           <SettingsRadioOption
@@ -23,6 +22,6 @@ export const SettingsRadioGroup = (props: Props): JSX.Element => {
           />
         ))}
       </div>
-    </RadioGroup>
+    </RadioGroup.Root>
   );
 };

web/src/settings/radio/option.tsx

@@ -1,4 +1,4 @@
-import { RadioGroupItem } from "@radix-ui/react-radio-group";
+import { RadioGroup } from "@samuwrite/radix";
 import { outline } from "../../outline/outline";
 import * as s from "./option.module.css";
 
@@ -12,12 +12,12 @@ export const SettingsRadioOption = (props: Props): JSX.Element => {
   const { icon, label, value } = props;
 
   return (
-    <RadioGroupItem
+    <RadioGroup.Item
       value={value}
       className={[s.container, outline.onFocus].join(" ")}
     >
       <span className={s.icon}>{icon}</span>
       <span className={s.label}>{label}</span>
-    </RadioGroupItem>
+    </RadioGroup.Item>
   );
 };

web/src/settings/slider/slider.tsx

@@ -1,5 +1,5 @@
 import { Slider, SliderProps } from "../../slider/slider";
-import { Label } from "@radix-ui/react-label";
+import { Label } from "@samuwrite/radix";
 import * as s from "./slider.module.css";
 
 interface Props {
@@ -21,9 +21,9 @@ export const SettingsSlider = (props: Props): JSX.Element => {
   return (
     <div className={s.container}>
       <span className={s.header}>
-        <Label className={s.label} htmlFor={input.id}>
+        <Label.Root className={s.label} htmlFor={input.id}>
           {label}
-        </Label>
+        </Label.Root>
         <span className={s.value}>{value}</span>
       </span>
       <span className={s.control}>

web/src/settings/switch/switch.tsx

@@ -1,4 +1,4 @@
-import { Label } from "@radix-ui/react-label";
+import { Label } from "@samuwrite/radix";
 import { SwitchButton } from "../../switch/switch";
 import * as s from "./switch.module.css";
 
@@ -13,7 +13,7 @@ export const SettingsSwitch = (props: Props): JSX.Element => {
   const { id, checked, setChecked, label } = props;
   return (
     <div className={s.container}>
-      <Label htmlFor={id}>{label}</Label>
+      <Label.Root htmlFor={id}>{label}</Label.Root>
       <SwitchButton id={id} checked={checked} onCheckedChange={setChecked} />
     </div>
   );

web/src/slider/slider.tsx

@@ -1,4 +1,4 @@
-import * as Radix from "@radix-ui/react-slider";
+import { Slider as Radix } from "@samuwrite/radix";
 import { CSSProperties } from "react";
 import { outline } from "../outline/outline";
 import * as s from "./slider.module.css";

web/src/switch/switch.tsx

@@ -1,7 +1,7 @@
 import { DashIcon, DotIcon } from "@primer/octicons-react";
+import { Switch as Radix } from "@samuwrite/radix";
 import { outline } from "../outline/outline";
 import * as s from "./switch.module.css";
-import * as Radix from "@radix-ui/react-switch";
 
 interface Props extends Radix.SwitchProps {}
 

web/src/tooltip/tooltip.tsx

@@ -1,4 +1,4 @@
-import * as Radix from "@radix-ui/react-tooltip";
+import { Tooltip as Radix } from "@samuwrite/radix";
 import { ReactNode } from "react";
 import { Card } from "../card/card";
 import * as s from "./tooltip.module.css";

web/tsconfig.json

@@ -4,7 +4,6 @@
     "moduleResolution": "node",
     "strict": true,
     "jsx": "react-jsx",
-    "plugins": [{ "name": "typescript-plugin-css-modules" }],
     // Rose pine vsc themes are JSON
     "resolveJsonModule": true,
     // Require to import JSON