feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf
This commit is contained in:
fanlv
2025-07-20 17:36:12 +08:00
commit 890153324f
14811 changed files with 1923430 additions and 0 deletions

View File

@@ -0,0 +1,31 @@
import { mergeConfig } from 'vite';
import svgr from 'vite-plugin-svgr';
/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
stories: ['../stories/**/*.mdx', '../stories/**/*.stories.tsx'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
viteFinal: config =>
mergeConfig(config, {
plugins: [
svgr({
svgrOptions: {
native: false,
},
}),
],
}),
};
export default config;

View File

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

View File

@@ -0,0 +1,5 @@
const { defineConfig } = require('@coze-arch/stylelint-config');
module.exports = defineConfig({
extends: [],
});

View File

@@ -0,0 +1,16 @@
# @coze-common/biz-tooltip-ui
> Project template for react component with storybook.
## Features
- [x] eslint & ts
- [x] esm bundle
- [x] umd bundle
- [x] storybook
## Commands
- init: `rush update`
- dev: `npm run dev`
- build: `npm run build`

View File

@@ -0,0 +1,62 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { CaseBlock } from '../../src/components/setting-tips/case-block';
describe('CaseBlock', () => {
const mockLabel = 'Test Label';
const mockContent = 'Test Content';
it('renders label correctly', () => {
render(<CaseBlock label={mockLabel} content={mockContent} />);
expect(screen.getByText(mockLabel)).toBeInTheDocument();
});
it('renders content correctly', () => {
render(<CaseBlock label={mockLabel} content={mockContent} />);
expect(screen.getByText(mockContent)).toBeInTheDocument();
});
it('renders complex content correctly', () => {
const complexContent = (
<div data-testid="complex-content">
<span>Child 1</span>
<span>Child 2</span>
</div>
);
render(<CaseBlock label={mockLabel} content={complexContent} />);
expect(screen.getByTestId('complex-content')).toBeInTheDocument();
expect(screen.getByText('Child 1')).toBeInTheDocument();
expect(screen.getByText('Child 2')).toBeInTheDocument();
});
it('applies correct CSS classes', () => {
render(<CaseBlock label={mockLabel} content={mockContent} />);
// Check for flex container classes
const container = screen.getByText(mockLabel).parentElement;
expect(container).toHaveClass('flex', 'flex-col');
// Check for gap class
expect(container).toHaveClass('gap-[4px]');
});
});

View File

@@ -0,0 +1,85 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { render, screen, within } from '@testing-library/react';
import '@testing-library/jest-dom';
import { RerankTips } from '../../src/components/setting-tips/rerank-tips';
// Mock I18n.t function
vi.mock('@coze-arch/i18n', () => ({
I18n: {
t: (key: string, params?: { index?: string }) => {
if (params?.index) {
return `${key}-${params.index}`;
}
return key;
},
},
}));
describe('RerankTips', () => {
it('renders headline correctly', () => {
render(<RerankTips />);
expect(screen.getByText('kl_write_034')).toBeInTheDocument();
});
it('renders case block labels correctly', () => {
render(<RerankTips />);
expect(screen.getByText('kl_write_046')).toBeInTheDocument();
expect(screen.getByText('kl_write_047')).toBeInTheDocument();
});
it('renders first case block content correctly', () => {
render(<RerankTips />);
// Check if all labels and content in first block are rendered
const firstBlock = screen.getAllByRole('article')[0];
expect(firstBlock).toBeInTheDocument();
// Check labels and content within the first block
within(firstBlock).getByText('kl_write_041-A');
within(firstBlock).getByText('kl_write_042');
within(firstBlock).getByText('kl_write_041-B');
within(firstBlock).getByText('kl_write_043');
within(firstBlock).getByText('kl_write_041-C');
within(firstBlock).getByText('kl_write_044');
within(firstBlock).getByText('kl_write_041-D');
within(firstBlock).getByText('kl_write_045');
});
it('renders second case block content correctly', () => {
render(<RerankTips />);
// Second block has the same content but in different order
expect(screen.getAllByText('kl_write_041-A')).toHaveLength(2);
expect(screen.getAllByText('kl_write_042')).toHaveLength(2);
expect(screen.getAllByText('kl_write_041-B')).toHaveLength(2);
expect(screen.getAllByText('kl_write_043')).toHaveLength(2);
expect(screen.getAllByText('kl_write_041-C')).toHaveLength(2);
expect(screen.getAllByText('kl_write_044')).toHaveLength(2);
expect(screen.getAllByText('kl_write_041-D')).toHaveLength(2);
expect(screen.getAllByText('kl_write_045')).toHaveLength(2);
});
it('renders correct number of case blocks', () => {
render(<RerankTips />);
const caseBlocks = screen.getAllByRole('article');
expect(caseBlocks).toHaveLength(2);
});
});

View File

@@ -0,0 +1,56 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { RewriteTips } from '../../src/components/setting-tips/rewrite-tips';
// Mock I18n.t function
vi.mock('@coze-arch/i18n', () => ({
I18n: {
t: (key: string) => key,
},
}));
describe('RewriteTips', () => {
it('renders headline correctly', () => {
render(<RewriteTips />);
expect(screen.getByText('kl_write_034')).toBeInTheDocument();
});
it('renders all case blocks with correct content', () => {
render(<RewriteTips />);
// Check if all labels are rendered
expect(screen.getByText('kl_write_035')).toBeInTheDocument();
expect(screen.getByText('kl_write_037')).toBeInTheDocument();
expect(screen.getByText('kl_write_039')).toBeInTheDocument();
// Check if all descriptions are rendered
expect(screen.getByText('kl_write_036')).toBeInTheDocument();
expect(screen.getByText('kl_write_038')).toBeInTheDocument();
expect(screen.getByText('kl_write_040')).toBeInTheDocument();
});
it('renders correct number of case blocks', () => {
render(<RewriteTips />);
const caseBlocks = screen.getAllByRole('article'); // Assuming CaseBlock has role="article"
expect(caseBlocks).toHaveLength(3);
});
});

View File

@@ -0,0 +1,12 @@
{
"operationSettings": [
{
"operationName": "test:cov",
"outputFolderNames": ["coverage"]
},
{
"operationName": "ts-check",
"outputFolderNames": ["./dist"]
}
]
}

View File

@@ -0,0 +1,7 @@
const { defineConfig } = require('@coze-arch/eslint-config');
module.exports = defineConfig({
packageRoot: __dirname,
preset: 'web',
rules: {},
});

View File

@@ -0,0 +1,42 @@
{
"name": "@coze-common/biz-tooltip-ui",
"version": "0.0.1",
"description": "special business tooltip ui",
"license": "Apache-2.0",
"author": "gaoyuanhan.duty@bytedance.com",
"maintainers": [],
"main": "src/index.tsx",
"scripts": {
"build": "exit 0",
"lint": "eslint ./ --cache",
"test": "vitest --run --passWithNoTests",
"test:cov": "npm run test -- --coverage"
},
"dependencies": {
"@coze-arch/i18n": "workspace:*",
"classnames": "^2.3.2"
},
"devDependencies": {
"@coze-arch/bot-typings": "workspace:*",
"@coze-arch/eslint-config": "workspace:*",
"@coze-arch/stylelint-config": "workspace:*",
"@coze-arch/ts-config": "workspace:*",
"@coze-arch/vitest-config": "workspace:*",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"@testing-library/react-hooks": "^8.0.1",
"@types/react": "18.2.37",
"@types/react-dom": "18.2.15",
"@vitest/coverage-v8": "~3.0.5",
"react": "~18.2.0",
"react-dom": "~18.2.0",
"stylelint": "^15.11.0",
"vite-plugin-svgr": "~3.3.0",
"vitest": "~3.0.5"
},
"peerDependencies": {
"react": ">=18.2.0",
"react-dom": ">=18.2.0"
}
}

View File

@@ -0,0 +1,29 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import s from './index.module.less';
export const CaseBlock: React.FC<{
label: string;
content: React.ReactNode;
}> = ({ label, content }) => (
<div role="article" className="flex flex-col gap-[4px]">
<div className={s['case-block-label']}>{label}</div>
<div className="flex">{content}</div>
</div>
);

View File

@@ -0,0 +1,58 @@
.tips-headline{
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 20px; /* 142.857% */
color: var(--Fg-COZ-fg-primary, rgba(32, 41, 65, 89%));
}
.case-block-label{
font-size: 12px;
font-weight: 400;
font-style: normal;
line-height: 16px; /* 133.333% */
color: var(--Fg-COZ-fg-secondary, rgba(44, 58, 92, 72%));
}
.rewrite-block-content{
display: inline;
flex-direction: column;
align-items: flex-start;
padding: 12px 16px;
font-size: 12px;
font-weight: 400;
font-style: normal;
line-height: 16px; /* 133.333% */
color: var(--Fg-COZ-fg-primary, rgba(32, 41, 65, 89%));
background: var(--Mg-COZ-mg-hglt-hovered, rgba(155, 162, 255, 38%));
border-radius: var(--default, 8px);
}
.rerank-block-content{
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
justify-content: center;
width: 288px;
padding: 12px 16px;
background: var(--Mg-COZ-mg-primary, rgba(97, 97, 196, 11%));
border-radius: var(--default, 8px);
}
.rerank-block-content-text{
height: 100%;
font-size: 12px;
font-weight: 400;
font-style: normal;
line-height: 16px; /* 133.333% */
}

View File

@@ -0,0 +1,19 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { RewriteTips } from './rewrite-tips';
import { RerankTips } from './rerank-tips';
export { RewriteTips, RerankTips };

View File

@@ -0,0 +1,110 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { I18n } from '@coze-arch/i18n';
import { CaseBlock } from './case-block';
import s from './index.module.less';
interface TipContentProps {
labelContentPairs: {
label: string;
content: string;
}[];
}
const TipContent: React.FC<TipContentProps> = ({ labelContentPairs }) => (
<div className={s['rerank-block-content']}>
{labelContentPairs.map(({ label, content }, index) => (
<div key={`${label}-${index}`} className="flex items-center">
<div
style={{
minWidth: '50px',
color: 'var(--Fg-COZ-fg-hglt, #543EF7)',
}}
className={s['rerank-block-content-text']}
>
{label}
</div>
<div
style={{
color: 'var(--Fg-COZ-fg-primary, rgba(32, 41, 65, 0.89))',
}}
className={s['rerank-block-content-text']}
>
{content}
</div>
</div>
))}
</div>
);
export const RerankTips: React.FC = () => {
const labelContentPairs = [
{
label: I18n.t('kl_write_041', { index: 'A' }),
content: I18n.t('kl_write_042'),
},
{
label: I18n.t('kl_write_041', { index: 'B' }),
content: I18n.t('kl_write_043'),
},
{
label: I18n.t('kl_write_041', { index: 'C' }),
content: I18n.t('kl_write_044'),
},
{
label: I18n.t('kl_write_041', { index: 'D' }),
content: I18n.t('kl_write_045'),
},
];
const secLabelContentPairs = [
{
label: I18n.t('kl_write_041', { index: 'C' }),
content: I18n.t('kl_write_044'),
},
{
label: I18n.t('kl_write_041', { index: 'D' }),
content: I18n.t('kl_write_045'),
},
{
label: I18n.t('kl_write_041', { index: 'B' }),
content: I18n.t('kl_write_043'),
},
{
label: I18n.t('kl_write_041', { index: 'A' }),
content: I18n.t('kl_write_042'),
},
];
return (
<div className="flex flex-col gap-[8px]">
<div className={s['tips-headline']}>{I18n.t('kl_write_034')}</div>
<CaseBlock
label={I18n.t('kl_write_046')}
content={<TipContent labelContentPairs={labelContentPairs} />}
/>
<CaseBlock
label={I18n.t('kl_write_047')}
content={<TipContent labelContentPairs={secLabelContentPairs} />}
/>
</div>
);
};

View File

@@ -0,0 +1,57 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { type ReactNode } from 'react';
import { I18n } from '@coze-arch/i18n';
import { CaseBlock } from './case-block';
import s from './index.module.less';
const TipContent: React.FC<{ description: ReactNode }> = ({ description }) => (
<div className={s['rewrite-block-content']}>{description}</div>
);
export const RewriteTips: React.FC = () => {
const caseList = [
{
labelKey: 'kl_write_035',
contentKey: 'kl_write_036',
},
{
labelKey: 'kl_write_037',
contentKey: 'kl_write_038',
},
{
labelKey: 'kl_write_039',
contentKey: 'kl_write_040',
},
] as const;
return (
<div className="flex flex-col gap-[8px]">
<div className={s['tips-headline']}>{I18n.t('kl_write_034')}</div>
{caseList.map(({ labelKey, contentKey }) => (
<CaseBlock
key={labelKey}
label={I18n.t(labelKey)}
content={<TipContent description={I18n.t(contentKey)} />}
/>
))}
</div>
);
};

View File

@@ -0,0 +1,17 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { RewriteTips, RerankTips } from './components/setting-tips';

View File

@@ -0,0 +1,17 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/// <reference types='@coze-arch/bot-typings' />

View File

@@ -0,0 +1,31 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "./tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"types": [],
"tsBuildInfoFile": "./dist/tsconfig.build.tsbuildinfo"
},
"include": ["src"],
"references": [
{
"path": "../../arch/bot-typings/tsconfig.build.json"
},
{
"path": "../../arch/i18n/tsconfig.build.json"
},
{
"path": "../../../config/eslint-config/tsconfig.build.json"
},
{
"path": "../../../config/stylelint-config/tsconfig.build.json"
},
{
"path": "../../../config/ts-config/tsconfig.build.json"
},
{
"path": "../../../config/vitest-config/tsconfig.build.json"
}
]
}

View File

@@ -0,0 +1,18 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@coze-arch/ts-config/tsconfig.web.json",
"compilerOptions": {
"rootDir": "./",
"outDir": "./dist",
"types": ["vitest/globals"],
"strictNullChecks": true,
"noImplicitAny": true
},
"include": [
"src",
"__tests__",
"stories",
"vitest.config.ts",
"tailwind.config.ts"
]
}

View File

@@ -0,0 +1,22 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { defineConfig } from '@coze-arch/vitest-config';
export default defineConfig({
dirname: __dirname,
preset: 'web',
});