diff --git a/packages/ui-react/lib/CodeEditor/CodeEditor.module.scss b/packages/ui-react/lib/CodeEditor/CodeEditor.module.scss deleted file mode 100644 index 1cdfe3e..0000000 --- a/packages/ui-react/lib/CodeEditor/CodeEditor.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@use '../variables' as *; -$padding: 10px; -.base { - .header-container { - display: flex; - align-items: center; - gap: 7px; - background-color: var(--border-white); - padding: $padding; - padding-bottom: 7px; - color: var(--black-color); - overflow: hidden; - border-radius: $radius-5 $radius-5 0 0; - font-weight: 700; - box-sizing: border-box; - svg { - fill: var(--primary-color); - } - } - .select-container { - display: flex; - justify-content: space-between; - align-items: center; - padding-right: $padding; - .refresh-button { - display: flex; - justify-content: center; - align-items: center; - height: 34px; - border-radius: $radius-half; - svg { - fill: var(--primary-color); - } - } - } - .divider { - flex-basis: 1px; - background-color: var(--border-white); - } - .editor-container { - flex-grow: 1; - } -} diff --git a/packages/ui-react/lib/CodeEditor/CodeEditor.stories.tsx b/packages/ui-react/lib/CodeEditor/CodeEditor.stories.tsx deleted file mode 100644 index 46d6c40..0000000 --- a/packages/ui-react/lib/CodeEditor/CodeEditor.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars -import React from 'react'; -import { CodeEditor, type CodeEditorProps } from './CodeEditor'; -import { OptionProps } from '../Select'; - -const test = (Item: OptionProps, content: string) => { - console.log('item', Item); - console.log('content', content); -}; - -const testLanguage = (value: string) => { - console.log('language', value); -}; - -const refreshTest = () => { - console.log('hello'); -}; - -const meta = { - title: 'Components/CodeEditor', - component: CodeEditor, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], - argTypes: {}, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -const defaultProps: CodeEditorProps = { - width: 600, - height: 700, - languageList: [ - { value: 'c', label: 'C', key: 3 }, - { value: 'javascript', label: 'JavaScript', key: 5 }, - { value: 'java', label: 'Java', key: 7 }, - ], - onchange: test, - onLanguageChange: testLanguage, - defaultValue: `/** - * Definition for a binary tree node. - * struct TreeNode { - * int val; - * struct TreeNode *left; - * struct TreeNode *right; - * }; - */ - /** - * Note: The returned array must be malloced, assume caller calls free(). - */ - int* preorderTraversal(struct TreeNode* root, int* returnSize) { - - }`, - onRefresh: refreshTest, -}; - -export const DefaultCodeEditor: Story = { - args: { - ...defaultProps, - }, -}; - -export const ExampleCodeEditor: Story = { - args: { - ...defaultProps, - }, -}; diff --git a/packages/ui-react/lib/CodeEditor/CodeEditor.tsx b/packages/ui-react/lib/CodeEditor/CodeEditor.tsx deleted file mode 100644 index 866161e..0000000 --- a/packages/ui-react/lib/CodeEditor/CodeEditor.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import Editor from '@monaco-editor/react'; -import styles from './CodeEditor.module.scss'; -import { Button, Card, Select, type OptionProps } from '..'; - -export interface CodeEditorProps extends React.HtmlHTMLAttributes { - /** - * width of the code area - */ - width?: number; - /** - * height of the code area - */ - height?: number; - /** - * languageList, the languageList of the code-Editor - */ - languageList?: OptionProps[]; - /** - * onchange , the onchange of the code-editor - */ - onchange?: (language: OptionProps, content: string) => void; - /** - * defaultValue, the default value of the codeEditor - */ - defaultValue?: string; - /** - * value, the value of the codeEditor - */ - value?: string; - /** - * onLanguageChange, Callbacks when the selected language changes - */ - onLanguageChange?: (value: string) => void; - /** - * onRefresh , the refresh button click callback - */ - onRefresh?: () => void; -} - -export const CodeEditor = React.forwardRef( - ( - { - width = 400, - height = 500, - onRefresh, - languageList = [ - { value: 'c', label: 'C', key: 3 }, - { value: 'javascript', label: 'JavaScript', key: 5 }, - { value: 'java', label: 'Java', key: 7 }, - ], - defaultValue = `/** - * Definition for a binary tree node. - * struct TreeNode { - * int val; - * struct TreeNode *left; - * struct TreeNode *right; - * }; - */ - /** - * Note: The returned array must be malloced, assume caller calls free(). - */ - int* preorderTraversal(struct TreeNode* root, int* returnSize) { - - }`, - value, - onchange, - onLanguageChange, - ...rest - }, - ref, - ) => { - const [selectLanguage, setSelectLanguage] = useState(); - const [content, setContent] = useState(defaultValue); - - useEffect(() => { - value && setContent(value); - }, [value]); - - const handleSelect = (value: OptionProps) => { - const newSelectLanguage = languageList.find((item) => item.key === value.key); - setSelectLanguage(newSelectLanguage?.value); - }; - - const handleCodeContent = (value: string | undefined) => { - setContent(value); - }; - - useEffect(() => { - const selectItem = languageList.find((item) => item.value === selectLanguage); - selectItem && content && onchange && onchange(selectItem, content); - }, [content, selectLanguage, onchange, languageList]); - - useEffect(() => { - onLanguageChange && selectLanguage && onLanguageChange(selectLanguage); - }, [selectLanguage, onLanguageChange]); - - const handleRefresh = () => { - setContent(defaultValue); - onRefresh && onRefresh(); - }; - - return ( - <> -
- -
- - - - Code -
- - } - mainContent={ - <> -
- - -
-
-
- -
- - } - footer={<>} - > -
- - ); - }, -); - -CodeEditor.displayName = 'CodeEditor'; diff --git a/packages/ui-react/lib/CodeEditor/index.ts b/packages/ui-react/lib/CodeEditor/index.ts deleted file mode 100644 index aa4b203..0000000 --- a/packages/ui-react/lib/CodeEditor/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './CodeEditor'; diff --git a/packages/ui-react/lib/Select/Select.stories.tsx b/packages/ui-react/lib/Select/Select.stories.tsx index 89aab47..1bc5de1 100644 --- a/packages/ui-react/lib/Select/Select.stories.tsx +++ b/packages/ui-react/lib/Select/Select.stories.tsx @@ -20,20 +20,7 @@ export default meta; type Story = StoryObj; -const defaultProps: SelectProps = { - optionsList: [ - { value: 'nextjs', label: 'Nextjs', key: 1 }, - { value: 'nuxtjs', label: 'Nuxtjs', key: 2 }, - { value: 'nodejs', label: 'Nodejs', key: 3 }, - { value: 'vuejs', label: 'Vuejs', key: 5 }, - { value: 'react', label: 'React', key: 4 }, - ], - onchange: test, - disabled: false, - isBorder: true, - defaultSelectKey: 1, - placeHolder: '', -}; +const defaultProps: SelectProps = {}; export const DefaultSelect: Story = { args: { diff --git a/packages/ui-react/lib/Select/Select.tsx b/packages/ui-react/lib/Select/Select.tsx index bc4add9..ede3c1e 100644 --- a/packages/ui-react/lib/Select/Select.tsx +++ b/packages/ui-react/lib/Select/Select.tsx @@ -22,7 +22,7 @@ export interface SelectProps extends React.HtmlHTMLAttributes { /** * the optionList of the select */ - optionsList?: Array; + optionsList: Array; /** * the title of the select */ @@ -56,12 +56,9 @@ export interface SelectProps extends React.HtmlHTMLAttributes { export const Select = React.forwardRef( ( { - optionsList = [ - { value: 'nextjs', label: 'nextjs', key: 3 }, - { value: 'nuxtjs', label: 'nuxtjs', key: 5 }, - ], + optionsList = [], onchange, - title = 'which framwork?', + title, disabled = false, defaultSelectKey, selectKey, @@ -75,7 +72,7 @@ export const Select = React.forwardRef( // Here selectItemIndex is different from selectItem, // selectItem is all the contents of the selected selectItem, // selectItemIndex is the index value inside options, starting from 0, and has nothing to do with the key inside the options. - const [visible, setVisble] = useState(false); + const [visible, setVisible] = useState(false); const [selectItem, setSelectItem] = useState( optionsList.find((item) => item.key === defaultSelectKey), ); @@ -90,7 +87,7 @@ export const Select = React.forwardRef( }, [placeHolder]); const showOptions: MouseEventHandler = () => { - if (!disabled) setVisble(!visible); + if (!disabled) setVisible(!visible); }; useEffect(() => { @@ -168,60 +165,59 @@ export const Select = React.forwardRef( setSelectItemIndex(-1); inputRef.current?.blur(); setTimeout(() => { - setVisble(false); + setVisible(false); }, 100); }; useEffect(() => { const results = fuzzySearch(optionsList, inputValue); setOptions(results); - }, [inputValue, optionsList]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [inputValue]); return ( - <> -
- -
- {!options.length ? ( -
- - 什么都没有检索到哦😭 -
- ) : ( - options.map((obj, index) => { - return ( -
handleClick(obj)} - > - {obj.label} -
- ); - }) - )} -
+
+ +
+ {!options.length ? ( +
+ + 什么都没有检索到哦😭 +
+ ) : ( + options.map((obj, index) => { + return ( +
handleClick(obj)} + > + {obj.label} +
+ ); + }) + )}
- +
); }, ); diff --git a/packages/ui-react/lib/index.ts b/packages/ui-react/lib/index.ts index 98c94a1..1c612b0 100644 --- a/packages/ui-react/lib/index.ts +++ b/packages/ui-react/lib/index.ts @@ -18,6 +18,5 @@ export * from './Sheet'; export * from './Carousel'; export * from './Switch'; export * from './DatePicker'; -export * from './CodeEditor'; export * from './Upload'; export * from './Table'; diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index 8596b9e..17a0eed 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -1,6 +1,6 @@ { "name": "@ui-aurora/react", - "version": "0.0.5", + "version": "0.0.6", "description": "A React UI library built for SASTOJ", "author": "sast", "license": "MIT", @@ -84,7 +84,6 @@ "react-dom": "^18.2.0" }, "dependencies": { - "@monaco-editor/react": "^4.6.0", "@storybook/addon-docs": "^8.0.2", "@types/react-transition-group": "^4.4.10", "classnames": "^2.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7aa5b51..0317d89 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -61,9 +61,6 @@ importers: packages/ui-react: dependencies: - '@monaco-editor/react': - specifier: ^4.6.0 - version: 4.6.0(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0) '@storybook/addon-docs': specifier: ^8.0.2 version: 8.0.2 @@ -178,7 +175,7 @@ importers: version: 8.0.2(react-dom@18.2.0)(react@18.2.0) vite: specifier: ^5.0.8 - version: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + version: 5.1.6(@types/node@20.11.30) vite-plugin-dts: specifier: ^3.6.4 version: 3.7.3(@types/node@20.11.30)(typescript@5.4.3)(vite@5.1.6) @@ -187,7 +184,7 @@ importers: version: 1.1.1(vite@5.1.6) vitest: specifier: ^1.0.4 - version: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) + version: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) packages/ui-universal: dependencies: @@ -1956,7 +1953,7 @@ packages: magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@5.4.3) typescript: 5.4.3 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) dev: true /@jridgewell/gen-mapping@0.3.5: @@ -2170,6 +2167,7 @@ packages: dependencies: monaco-editor: 0.47.0 state-local: 1.0.7 + dev: true /@monaco-editor/react@4.4.6(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==} @@ -2185,19 +2183,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /@monaco-editor/react@4.6.0(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==} - peerDependencies: - monaco-editor: '>= 0.25.0 < 1' - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - '@monaco-editor/loader': 1.4.0(monaco-editor@0.47.0) - monaco-editor: 0.47.0 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - /@ndelangen/get-tarball@3.0.9: resolution: {integrity: sha512-9JKTEik4vq+yGosHYhZ1tiH/3WpUS0Nh0kej4Agndhox8pAdWhEx5knFVRcb/ya9knCRCs1rPxNrSXTDdfVqpA==} dependencies: @@ -3141,7 +3126,7 @@ packages: magic-string: 0.30.8 ts-dedent: 2.2.0 typescript: 5.4.3 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) transitivePeerDependencies: - encoding - supports-color @@ -3492,7 +3477,7 @@ packages: react-dom: 18.2.0(react@18.2.0) resolve: 1.22.8 tsconfig-paths: 4.2.0 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) transitivePeerDependencies: - '@preact/preset-vite' - encoding @@ -3767,7 +3752,7 @@ packages: dom-accessibility-api: 0.6.3 lodash: 4.17.21 redent: 3.0.0 - vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) + vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) dev: true /@testing-library/react@14.2.2(react-dom@18.2.0)(react@18.2.0): @@ -4467,7 +4452,7 @@ packages: vite: ^4 || ^5 dependencies: '@swc/core': 1.4.8 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) transitivePeerDependencies: - '@swc/helpers' dev: true @@ -4491,7 +4476,7 @@ packages: strip-literal: 2.0.0 test-exclude: 6.0.0 v8-to-istanbul: 9.2.0 - vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) + vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) transitivePeerDependencies: - supports-color dev: true @@ -4538,7 +4523,7 @@ packages: pathe: 1.1.2 picocolors: 1.0.0 sirv: 2.0.4 - vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0) + vitest: 1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0) dev: true /@vitest/utils@1.4.0: @@ -9135,7 +9120,6 @@ packages: /lucide-react@0.368.0(react@18.2.0): resolution: {integrity: sha512-soryVrCjheZs8rbXKdINw9B8iPi5OajBJZMJ1HORig89ljcOcEokKKAgGbg3QWxSXel7JwHOfDFUdDHAKyUAMw==} - peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 dependencies: @@ -10233,6 +10217,7 @@ packages: /monaco-editor@0.47.0: resolution: {integrity: sha512-VabVvHvQ9QmMwXu4du008ZDuyLnHs9j7ThVFsiJoXSOQk18+LF89N4ADzPbFenm0W4V2bGHnFBztIRQTgBfxzw==} + dev: true /mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} @@ -12329,6 +12314,7 @@ packages: /state-local@1.0.7: resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==} + dev: true /statuses@2.0.1: resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==} @@ -13278,7 +13264,7 @@ packages: vfile-message: 4.0.2 dev: true - /vite-node@1.4.0(@types/node@20.11.30)(sass@1.72.0): + /vite-node@1.4.0(@types/node@20.11.30): resolution: {integrity: sha512-VZDAseqjrHgNd4Kh8icYHWzTKSCZMhia7GyHfhtzLW33fZlG9SwsB6CEhgyVOWkJfJ2pFLrp/Gj1FSfAiqH9Lw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -13287,7 +13273,7 @@ packages: debug: 4.3.4 pathe: 1.1.2 picocolors: 1.0.0 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) transitivePeerDependencies: - '@types/node' - less @@ -13339,7 +13325,7 @@ packages: debug: 4.3.4 kolorist: 1.8.0 typescript: 5.4.3 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) vue-tsc: 1.8.27(typescript@5.4.3) transitivePeerDependencies: - '@types/node' @@ -13353,7 +13339,43 @@ packages: vite: '*' dependencies: minimatch: 9.0.3 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) + dev: true + + /vite@5.1.6(@types/node@20.11.30): + resolution: {integrity: sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || >=20.0.0 + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 20.11.30 + esbuild: 0.19.12 + postcss: 8.4.37 + rollup: 4.13.0 + optionalDependencies: + fsevents: 2.3.3 dev: true /vite@5.1.6(@types/node@20.11.30)(sass@1.72.0): @@ -13392,7 +13414,7 @@ packages: optionalDependencies: fsevents: 2.3.3 - /vitest@1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0)(sass@1.72.0): + /vitest@1.4.0(@types/node@20.11.30)(@vitest/ui@1.4.0)(jsdom@23.2.0): resolution: {integrity: sha512-gujzn0g7fmwf83/WzrDTnncZt2UiXP41mHuFYFrdwaLRVQ6JYQEiME2IfEjU3vcFL3VKa75XhI3lFgn+hfVsQw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -13437,8 +13459,8 @@ packages: strip-literal: 2.0.0 tinybench: 2.6.0 tinypool: 0.8.2 - vite: 5.1.6(@types/node@20.11.30)(sass@1.72.0) - vite-node: 1.4.0(@types/node@20.11.30)(sass@1.72.0) + vite: 5.1.6(@types/node@20.11.30) + vite-node: 1.4.0(@types/node@20.11.30) why-is-node-running: 2.2.2 transitivePeerDependencies: - less