Use stylex

.github/workflows/build.yml

@@ -23,3 +23,4 @@ jobs:
       run: |
         npm install
         npm run build
+        npm run test

.gitignore

@@ -48,6 +48,3 @@ public
 # packages
 /packages/**/dist
 
-# storybook
-.storybook
-storybook-static

.storybook/main.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import { stylexPlugin } from "vite-plugin-stylex-dev";
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  staticDirs: ['../examples/nextjs/public'],
+  docs: {
+    autodocs: "tag",
+  },
+  async viteFinal(config) {
+    const { plugins = [] } = config;
+    plugins.push(
+      stylexPlugin({
+        unstable_moduleResolution: {
+          type: 'commonJS',
+          rootDir: process.cwd()
+        }
+      })
+    )
+    return config
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

examples/nextjs/package.json

@@ -14,7 +14,7 @@
     "prismjs": "^1.29.0",
     "react": "^18",
     "react-dom": "^18",
-    "rotion": "^0.0.8"
+    "rotion": "^0.0.10"
   },
   "devDependencies": {
     "@types/node": "^20",

examples/nextjs/pages/_app.tsx

@@ -1,8 +1,7 @@
 import '@/styles/globals.css'
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
-import 'rotion/styles/notionate.css'
-import 'rotion/styles/notionate-dark.css'
+import 'rotion/style.css'
 import styles from '@/styles/App.module.css'
 
 export default function App({ Component, pageProps }: AppProps) {

examples/nextjs/pages/block.tsx

@@ -1,12 +1,13 @@
 import type { GetStaticProps, NextPage } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
-import { useState, useEffect } from 'react'
 import Header from '@/components/Header'
 import Head from 'next/head'
 import styles from '@/styles/Page.module.css'
-import mermaid from 'mermaid'
 import prism from 'prismjs'
+import mermaid from 'mermaid'
+
+import 'prismjs/themes/prism.min.css'
 import 'prismjs/components/prism-bash'
 import 'prismjs/components/prism-go'
 import 'prismjs/components/prism-typescript'
@@ -57,11 +58,6 @@ export const getStaticProps: GetStaticProps<Props> = async (context) => {
 }
 
 const BlocksPage: NextPage<Props> = ({ title, icon, blocks, breadcrumbs }) => {
-  const [exModules, setExModules] = useState({ mermaid, prism })
-  useEffect(() => {
-    mermaid.initialize({ theme: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'neutral' })
-    setExModules({ mermaid, prism })
-  }, [])
   const hrefs = ['/', '/[name]']
 
   return (
@@ -86,7 +82,7 @@ const BlocksPage: NextPage<Props> = ({ title, icon, blocks, breadcrumbs }) => {
           </header>
 
           <div className={`${styles.page} ${styles.wrapperPage}`}>
-            <Page blocks={blocks} modules={exModules} link={Link} breadcrumb_hrefs={hrefs} />
+            <Page blocks={blocks} link={Link} breadcrumb_hrefs={hrefs} />
           </div>
         </div>
         <span></span>