refactor(lib): remove Article component and refactor Code component w…

…ith shiki

.gitignore

@@ -2,3 +2,4 @@ node_modules
 dist
 storybook-static
 coverage
+.DS_Store

lib/Code/Code.tsx

@@ -1,14 +1,55 @@
-'use client';
-
-import { highlight } from 'sugar-high';
-import './code.css';
-
-export const Code = ({ children, ...props }: { children: string }) => {
-  let codeHTML = highlight(children);
-  return (
-    <code
-      dangerouslySetInnerHTML={{ __html: codeHTML }}
-      {...props}
-    />
-  );
-};
+import type { JSX } from 'react';
+import type { BundledLanguage } from 'shiki';
+import { codeToHast } from 'shiki';
+import { Components, toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import { Fragment } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+interface Props {
+  children: string;
+  lang: BundledLanguage;
+  className: string;
+}
+
+async function CodeBlock(props: Props) {
+  let lang = 'text'; // default monospaced text
+
+  if (props.lang && props.lang.startsWith('lang-')) {
+    lang = props.lang.replace('lang-', '');
+  }
+
+  if (props.className && props.className.startsWith('lang-')) {
+    lang = props.className.replace('lang-', '');
+  }
+
+  const hast = await codeToHast(props.children, {
+    lang,
+    themes: {
+      dark: 'material-theme-ocean',
+      light: 'min-light',
+    },
+  });
+
+  return toJsxRuntime(hast, {
+    Fragment,
+    jsx,
+    jsxs,
+    components: {
+      pre: (props: any) => (
+        <pre
+          {...props}
+          className="code-block rounded-xl border"
+        />
+      ),
+    } as Components,
+  }) as JSX.Element;
+}
+
+async function PreBlock({ children }: { children: any }) {
+  if ('type' in children && children['type'] === 'code') {
+    return CodeBlock(children['props']);
+  }
+  return children;
+}
+
+export { CodeBlock, PreBlock };

lib/Tabs/Tabs.tsx

@@ -24,9 +24,17 @@ const Tabs = ({ children }: TabsProps) => {
               className={styles['tabLabel']}
               htmlFor={`tab${index}`}
             >
-              {child.props.title}
+              {
+                // @ts-ignore
+                child.props.title
+              }
             </label>
-            <div className={styles['tabPanel']}>{child.props.children}</div>
+            <div className={styles['tabPanel']}>
+              {
+                // @ts-ignore
+                child.props.children
+              }
+            </div>
           </>
         );
       })}

lib/index.ts

@@ -1,11 +1,7 @@
-import './global.scss';
-
 export * from './Callout/Callout';
 export * from './Accordion/Accordion';
 export * from './Steps/Steps';
 export * from './Tabs/Tabs';
-export * from './Article/Article';
 export * from './Code/Code';
 export * from './Typography/Typography';
-
 export * from './utils';

package.json

@@ -13,8 +13,7 @@
   },
   "files": [
     "dist",
-    "README.md",
-    "dist/*.css"
+    "README.md"
   ],
   "sideEffects": [
     "**/*.scss"
@@ -33,9 +32,15 @@
         "default": "./dist/index.cjs"
       }
     },
-    "./*.css": {
-      "import": "./dist/*.css",
-      "require": "./dist/*.css"
+    "./callout": {
+      "import": {
+        "types": "./dist/callout.d.ts",
+        "default": "./dist/callout.js"
+      },
+      "require": {
+        "types": "./dist/callout.d.ts",
+        "default": "./dist/callout.cjs"
+      }
     }
   },
   "scripts": {
@@ -46,18 +51,21 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.15",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.2",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
     "globals": "^15.11.0",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sass": "^1.79.5",
     "semantic-release": "^24.1.2",
+    "shiki": "^1.24.4",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.5.3",
@@ -67,8 +75,10 @@
     "vite-plugin-lib-inject-css": "^2.1.1"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-medium-image-zoom": "^5.2.12",
+    "shiki": "^1.24.4"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -77,8 +87,7 @@
     "react-medium-image-zoom": "^5.2.12",
     "react-router": "^7.0.2",
     "remark-gfm": "^4.0.0",
-    "slugify": "^1.6.6",
-    "sugar-high": "^0.7.5"
+    "slugify": "^1.6.6"
   },
   "publishConfig": {
     "access": "public"

src/components/SideNav.tsx

@@ -35,9 +35,9 @@ export const components = [
     route: '/components/image',
   },
   {
-    name: 'Article',
-    description: 'A component to display articles with optional captions.',
-    route: '/components/article',
+    name: 'Code',
+    description: 'A component to display code snippets with syntax highlighting.',
+    route: '/components/code',
   },
 ].sort((a, b) => a.name.localeCompare(b.name)) as {
   name: string;

src/layouts/ComponentsLayout.tsx

@@ -5,7 +5,7 @@ export function ComponentsLayout() {
   return (
     <div className="container mx-auto max-w-6xl flex pt-10 gap-10">
       <SideNav />
-      <div className="flex-1">
+      <div className="flex-1 max-w-[65ch]">
         <Outlet />
       </div>
     </div>

src/main.tsx

@@ -9,7 +9,7 @@ import { AccordionSamples } from './pages/AccordionSamples.tsx';
 import { StepSamples } from './pages/StepSamples.tsx';
 import { TypographySamples } from './pages/TypographySamples.tsx';
 import { ImageSamples } from './pages/ImageSamples.tsx';
-import { ArticleSamples } from './pages/ArticleSamples.tsx';
+import { CodeSamples } from './pages/CodeSamples.tsx';
 
 const components: { [key: string]: React.ReactElement } = {
   accordion: <AccordionSamples />,
@@ -18,7 +18,7 @@ const components: { [key: string]: React.ReactElement } = {
   steps: <StepSamples />,
   typography: <TypographySamples />,
   image: <ImageSamples />,
-  article: <ArticleSamples />,
+  code: <CodeSamples />,
 };
 
 createRoot(document.getElementById('root')!).render(

src/pages/CodeSamples.tsx

@@ -0,0 +1,3 @@
+export const CodeSamples = () => {
+  return <></>;
+};

src/pages/TypographySamples.tsx

@@ -1,4 +1,4 @@
-import { Article, Typography } from '../../lib';
+import { Typography } from '../../lib';
 // @ts-ignore
 import article from '../samples/article.mdx?raw';
 
@@ -7,7 +7,7 @@ export const TypographySamples = () => {
     <>
       <h1 className="text-4xl font-bold mb-6">Privacy-first programming</h1>
       <Typography>
-        <Article source={article}></Article>
+        <div dangerouslySetInnerHTML={{ __html: article }}></div>
       </Typography>
       <div className="h-20"></div>
     </>

vite.config.ts

@@ -21,17 +21,19 @@ export default defineConfig({
     copyPublicDir: false,
     lib: {
       entry: {
+        index: 'lib/index.ts',
         callout: 'lib/Callout/Callout.tsx',
         code: 'lib/Code/Code.tsx',
         image: 'lib/Image/ImageZoom.tsx',
-        article: 'lib/Article/Article.tsx',
         accordion: 'lib/Accordion/Accordion.tsx',
         typography: 'lib/Typography/Typography.tsx',
         utils: 'lib/utils.ts',
+        steps: 'lib/Steps/Steps.tsx',
+        tabs: 'lib/Tabs/Tabs.tsx',
       },
     },
     rollupOptions: {
-      external: ['react/jsx-runtime', ...Object.keys(peerDependencies)],
+      external: ['react', 'react/jsx-runtime', ...Object.keys(peerDependencies)],
     },
   },
   css: {