wip feat:code component

doc/docs/components/_meta.json

@@ -26,5 +26,12 @@
     "label": "Layout",
     "collapsible": true,
     "collapsed": false
+  },
+  {
+    "type": "dir",
+    "name": "show",
+    "label": "Show",
+    "collapsible": true,
+    "collapsed": false
   }
 ]

doc/docs/components/show/_meta.json

@@ -0,0 +1,7 @@
+[
+  {
+    "type": "file",
+    "name": "code",
+    "label": "code"
+  }
+]

doc/docs/components/show/code.mdx

@@ -0,0 +1,5 @@
+# Code
+
+## 基本用法
+
+<code src="./code/basic-usage.tsx" />

doc/docs/components/show/code/basic-usage.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {Code, CodeFile} from '@qwqui/core';
+
+export default function App(){
+  const codes = Array.from({length:10000}).fill('console.log("aaa");').join('\n');
+  return (
+    <Code>
+      <CodeFile name="index.ts" code="// Comment" language="javascript" />
+      <CodeFile name="file.ts" code={codes} language="javascript" />
+    </Code>
+  )
+}

packages/components/code/README.md

@@ -0,0 +1,13 @@
+# @qwqui/code
+
+<!-- Description -->
+
+## Install
+
+```bash
+pnpm add @qwqui/code
+```
+
+## License
+
+MIT

packages/components/code/__test__/code.test.tsx

@@ -0,0 +1,3 @@
+describe('code', () => {
+  it.todo('should define');
+})

packages/components/code/index.ts

@@ -0,0 +1,2 @@
+export * from './src/code';
+export * from './src/code-file';

packages/components/code/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@qwqui/code",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "build": "rslib build",
+    "clean:dist": "rimraf dist .rslib",
+    "clean:deps": "rimraf node_modules"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "types": "./dist/index.d.mts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.mts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "18.3.1"
+  },
+  "devDependencies": {
+    "@koale/useworker": "^4.0.2",
+    "@qwqui/tools": "workspace:^"
+  },
+  "dependencies": {
+    "shiki": "^1.22.0"
+  }
+}

packages/components/code/rslib.config.ts

@@ -0,0 +1,2 @@
+import { defineBuild } from '@qwqui/build';
+export default defineBuild();

packages/components/code/src/code-body.tsx

@@ -0,0 +1,42 @@
+import { useContext, useEffect,useRef,useState } from "react"
+import { CodeContext, CodeContextType } from "./code-context"
+import style from './styles/code-body.module.scss';
+import './styles/hack.css';
+import {darkTheme} from './dark-theme'
+import { useHighlightCode} from "./hooks/useParser";
+import { CodeFileProps } from "./code.types";
+
+export const CodeBody = () => {
+  const {activeCode,codeFiles, cache, setCache,init} = useContext<CodeContextType>(CodeContext);
+  const [codeLanguage, setCodeLanguage] = useState('');
+  const [activeCodeFile, setActvieCodeFile] = useState<CodeFileProps>();
+  const codeBodyDom = useRef<HTMLDivElement>();
+  useEffect(()=>{
+    const [codeFile] = codeFiles.filter((file) => file.name === activeCode);
+    if (!codeFile){
+      return;
+    }
+    setActvieCodeFile(codeFile);
+    setCodeLanguage(codeFile.language);
+  }, [activeCode, codeFiles]);
+  const {html,loading} = useHighlightCode(activeCodeFile, cache, setCache, {
+    langs: [codeLanguage],
+    themes:[],
+  }, [darkTheme as unknown as Record<string,string>]);
+  useEffect(()=>{
+    if(!codeBodyDom.current && init && loading){
+      return;
+    }
+    const ele = codeBodyDom.current;
+    const lastChild= ele.querySelectorAll('code > span:last-child > :first-child')[0];
+    if (lastChild){
+      const width = (lastChild as HTMLElement).offsetWidth;
+      ele.style['--line-number-width']=`${width}px`;
+      ele.style.setProperty('--line-number-width', `${width}px`)
+      console.log(ele)
+    }
+  },[init, loading]);
+  return  (
+    <div ref={codeBodyDom} className={style.root} dangerouslySetInnerHTML={{__html: html}}></div>
+  )
+}

packages/components/code/src/code-context.ts

@@ -0,0 +1,21 @@
+import { createContext } from "react";
+import { CodeFileProps } from "./code.types";
+
+export const CodeContext = createContext(null);
+export type CodeContextType = {
+  codeFiles: CodeFileProps[];
+  setCodeFiles: React.Dispatch<React.SetStateAction<CodeFileProps[]>>;
+  activeCode: string;
+  setActiveCode: React.Dispatch<React.SetStateAction<string>>;
+  x: number;
+  setX: React.Dispatch<React.SetStateAction<number>>;
+  width: number;
+  setWidth: React.Dispatch<React.SetStateAction<number>>;
+  prevX: number;
+  setPrevX: React.Dispatch<React.SetStateAction<number>>;
+  prevWidth: number;
+  setPrevWidth: React.Dispatch<React.SetStateAction<number>>;
+  cache: Record<string, string>;
+  setCache: React.Dispatch<React.SetStateAction<Record<string,string>>>;
+  init: boolean
+}

packages/components/code/src/code-file.tsx

@@ -0,0 +1,26 @@
+import {factory} from '@qwqui/tools';
+import { CodeFileProps } from './code.types';
+import { useContext, useEffect } from 'react';
+import { CodeContext, CodeContextType } from './code-context';
+
+const hasCode = (name: string, code: string, codeFiles: CodeFileProps[]) => {
+  return codeFiles.some((codeFile) => {
+    return codeFile.name ===name && codeFile.code === code
+  })
+}
+
+export const CodeFile = factory<CodeFileProps>((props) => {
+  const {codeFiles, setCodeFiles} = useContext<CodeContextType>(CodeContext);
+  const {name, code, language} = props;
+  useEffect(()=>{
+    if (!hasCode(name, code, codeFiles)){
+      setCodeFiles([
+        ...codeFiles,
+        {name, code, language}
+      ])
+    }
+  }, [name, code, codeFiles, language, setCodeFiles])
+  return (
+    <></>
+  )
+}, 'CodeFile');

packages/components/code/src/code-header.tsx

@@ -0,0 +1,121 @@
+import React, { useContext, useEffect, useRef } from "react";
+import style from './styles/header.module.scss';
+import { CodeContext, CodeContextType } from "./code-context";
+import {resolveCssVar} from '@qwqui/tools';
+import { CopyIcon } from "./copy";
+
+interface CodeItemProps {
+  name: string;
+  icon: React.ReactNode;
+  onMouseEnter: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave: React.MouseEventHandler<HTMLDivElement>;
+  onClick?: (name: string)=>void
+}
+
+const CodeItem = ({name, icon, onMouseEnter, onMouseLeave,onClick}:CodeItemProps) => {
+  const item = useRef<HTMLDivElement>(null);
+  const {setWidth,setX, activeCode, setPrevWidth, setPrevX,x,width} = useContext<CodeContextType>(CodeContext);
+  useEffect(()=>{
+    if (name === activeCode){
+      setPrevWidth(width);
+      setPrevX(x)
+      const currentWidth = item.current.offsetWidth;
+      const currentX = item.current.offsetLeft
+      setWidth(currentWidth + 6);
+      setX(currentX - 3);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [name, activeCode, setWidth, setX]);
+  const handleClick = () => {
+    onClick?.(name);
+  }
+  return (
+    <div 
+      className={style['root__items-wrapper__item']}
+      data-name={name}
+      ref={item}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onClick={handleClick}
+    >
+      {icon}
+      <span>{name}</span>
+    </div>
+  )
+};
+
+const TrafficLight = () => {
+  return (
+    <div className={style['traffic-light']}>
+      <div className={style['traffic-light__red']}></div>
+      <div className={style['traffic-light__yellow']}></div>
+      <div className={style['traffic-light__green']}></div>
+    </div>
+  )
+}
+
+export const CodeHeader = () => {
+  const {
+    codeFiles,
+    x,
+    width,
+    setX,
+    setWidth,
+    prevX,
+    prevWidth,
+    setPrevWidth,
+    setPrevX,
+    activeCode,
+    setActiveCode,
+    init
+  } = useContext<CodeContextType>(CodeContext);
+  const vars = resolveCssVar('active-block', {x, width})
+  const onMouseEnter = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    setPrevX(x);
+    setPrevWidth(width);
+    const target = e.currentTarget;
+    setX(target.offsetLeft - 3);
+    setWidth(target.offsetWidth + 6);
+  }
+  const onMouseLeave = () => {
+    setX(prevX);
+    setWidth(prevWidth);
+  }
+  const copyActiveCode = () => {
+    const activeFile = codeFiles.filter(file =>file.name === activeCode)[0];
+    if (!activeFile) {
+      return;
+    }
+    navigator.clipboard.writeText(activeFile.code);
+  }
+  const changeActive = (name: string) => {
+    setPrevX(x);
+    setPrevWidth(width);
+    setActiveCode(name);
+  }
+  return (
+    <div className={style.root}>
+      <TrafficLight />
+      <div className={style['root__items-wrapper']}>
+        {
+          codeFiles.map((item) => {
+            return (
+              <CodeItem
+                name={item.name}
+                icon={item.icon}
+                key={item.name}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+                onClick={changeActive}
+              />
+            )
+          })
+        }
+      </div>
+      <CopyIcon className={style.copy} onClick={copyActiveCode} />
+      {
+        !init && <div className={style['root__active_block']} style={vars}></div>
+      }
+    </div>
+  )
+}

packages/components/code/src/code.tsx

@@ -0,0 +1,72 @@
+import {factory} from '@qwqui/tools';
+import { CodeContext } from './code-context';
+import { CodeFileProps, CodeWrapper } from './code.types';
+import { CodeHeader } from './code-header';
+import { useEffect, useMemo, useState } from 'react';
+import style from './styles/code-wrapper.module.scss';
+import { CodeBody } from './code-body';
+import { useHighligther } from './hooks/useParser';
+import { darkTheme } from './dark-theme';
+
+export const Code = factory<CodeWrapper>((props)=>{
+  const [codeFiles, setCodeFiles] = useState<CodeFileProps[]>([]);
+  const [activeCode, setActiveCode] = useState('');
+  const [x, setX] = useState(0);
+  const [width, setWidth] = useState(72);
+  const [prevX,setPrevX] = useState();
+  const [prevWidth, setPrevWidth] = useState();
+  const [cache, setCache] = useState({});
+  const [init, setInit] = useState(true);
+  useEffect(()=>{
+    if (codeFiles[0]){
+      setActiveCode(codeFiles[0].name);
+    }
+  }, [codeFiles]);
+  useMemo(async ()=>{
+    if (codeFiles.length>1){
+      return;
+    }
+    setInit(true)
+    const languages=codeFiles.map(file => file.language);
+    const hl = await useHighligther({
+      langs: languages,
+      themes: [],
+    }, [darkTheme as unknown as Record<string, string>])
+    const tmpCache = {};
+    for (const file of codeFiles) {
+      const {name, code, language} = file;
+      tmpCache[name] = hl.codeToHtml(code, {
+        lang: language,
+        theme: 'dark-theme',
+      });
+    }
+    setCache(tmpCache);
+    hl.dispose()
+    setInit(false)
+  }, [codeFiles])
+  return (
+    <CodeContext.Provider value={{
+      codeFiles,
+      setCodeFiles,
+      activeCode,
+      setActiveCode,
+      x,
+      width,
+      setX,
+      setWidth,
+      prevX,
+      setPrevX,
+      prevWidth,
+      setPrevWidth,
+      cache,
+      setCache,
+      init
+    }}>
+      <div className={style.root}>
+        <CodeHeader />
+        <CodeBody />
+        {props.children}
+      </div>
+    </CodeContext.Provider>
+  )
+}, 'Code');