5 |
9 |
10 | `;
11 |
--------------------------------------------------------------------------------
/.changelogrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | scopeDisplayName: {
3 | scripts: '脚本',
4 | changelog: '日志',
5 | config: '配置',
6 | release: '自动发布',
7 | types: '类型',
8 | readme: '说明文档',
9 | guide: '指南',
10 | },
11 | titleLanguage: 'zh-CN',
12 | };
13 |
--------------------------------------------------------------------------------
/packages/journey-map/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Section } from './Section';
2 | export { default as OverflowTitle } from './OverflowTitle';
3 | export { default as ErrorFallback } from './ErrorFallback';
4 | export { default as ListSection } from './ListSection';
5 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | **/*.svg
2 | .umi
3 | .umi-production
4 | /dist
5 | .dockerignore
6 | .DS_Store
7 | .eslintignore
8 | *.png
9 | *.toml
10 | docker
11 | .editorconfig
12 | Dockerfile*
13 | .gitignore
14 | .prettierignore
15 | LICENSE
16 | .eslintcache
17 | *.lock
18 | yarn-error.log
19 |
--------------------------------------------------------------------------------
/packages/asset-gallery/src/utils/checkSvg.test.ts:
--------------------------------------------------------------------------------
1 | import { checkSvg } from './checkSvg';
2 |
3 | test('checkSvg', () => {
4 | const isSvg = checkSvg(
5 | 'https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg',
6 | );
7 |
8 | expect(isSvg).toBeTruthy();
9 | });
10 |
--------------------------------------------------------------------------------
/packages/heatmap-calendar/demos/Demo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import HeatmapCalendar from '@arvinxu/heatmap-calendar';
3 |
4 | import { data } from './data';
5 |
6 | const Demo = () => {
7 | return
8 |
10 | );
11 | };
12 |
13 | export default Loading;
14 |
--------------------------------------------------------------------------------
/packages/sortable-list/src/store/utils.ts:
--------------------------------------------------------------------------------
1 | import type { SortableItemList } from '../types';
2 |
3 | export const getIndexOfActiveItem = <
4 | T extends SortableItemList = SortableItemList,
5 | >(
6 | list: T,
7 | id?: string,
8 | ) => {
9 | return id ? list.findIndex((i) => i.id === id) : -1;
10 | };
11 |
--------------------------------------------------------------------------------
/packages/tag-selector/src/type.ts:
--------------------------------------------------------------------------------
1 | export interface Value {
2 | key: string;
3 | text: string;
4 | refText?: string;
5 | value?: number;
6 | editable?: boolean;
7 | }
8 |
9 | export interface Item {
10 | key: string;
11 | title: string;
12 | value: Value[];
13 | inputVisible?: boolean;
14 | }
15 |
--------------------------------------------------------------------------------
/scripts/create-package/template/src/index.tsx.ejs:
--------------------------------------------------------------------------------
1 | import type { FC } from 'react';
2 |
3 | export interface <%- componentName %>Props {}
4 |
5 | const <%- componentName %>: FC<<%- componentName %>Props> = () => {
6 | return <%- componentName %>
;
7 | };
8 |
9 | export default <%- componentName %>;
10 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 | [*.md]
13 | trim_trailing_whitespace = false
14 |
15 | [Makefile]
16 | indent_style = tab
17 |
--------------------------------------------------------------------------------
/packages/journey-map/demos/YAMLWithString.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import React from 'react';
5 | import JourneyMap from '@arvinxu/journey-map';
6 | import { data } from './yml';
7 |
8 | const YAML = () => {
9 | return
8 |
10 | );
11 | };
12 |
13 | export default Basic;
14 |
--------------------------------------------------------------------------------
/packages/sortable-list/src/container/StoreUpdater.tsx:
--------------------------------------------------------------------------------
1 | import { useStoreUpdater } from '../hooks/useStoreUpdater';
2 | import type { StoreUpdaterProps } from '../types';
3 |
4 | const StoreUpdater = (props: StoreUpdaterProps) => {
5 | useStoreUpdater(props);
6 |
7 | return null;
8 | };
9 |
10 | export default StoreUpdater;
11 |
--------------------------------------------------------------------------------
/packages/mindflow/src/definition/graphOpts.test.ts:
--------------------------------------------------------------------------------
1 | import { graphOpts } from './graphOpts';
2 |
3 | describe('graphOpts', () => {
4 | it('返回正常值', () => {
5 | const ctn = document.createElement('div');
6 | const minimap = document.createElement('div');
7 | expect(graphOpts(ctn, minimap)).toMatchSnapshot();
8 | });
9 | });
10 |
--------------------------------------------------------------------------------
/packages/mindflow/src/components/MindNode/UrlNode.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from 'react';
2 | import React from 'react';
3 |
4 | import './style.less';
5 |
6 | interface LinkProps {
7 | link?: string;
8 | }
9 |
10 | const UrlNode: FC{link}
;
12 | };
13 |
14 | export default UrlNode;
15 |
--------------------------------------------------------------------------------
/packages/mindflow/src/components/Port/style.less:
--------------------------------------------------------------------------------
1 | .mind-port-in-port {
2 | width: 100%;
3 | height: 100%;
4 | background: #fff;
5 | border: 2px solid transparent;
6 | border-radius: 100%;
7 | }
8 |
9 | .mind-port-out-port {
10 | width: 18px;
11 | height: 18px;
12 | }
13 |
14 | .x6-node [magnet='true']:hover {
15 | opacity: 1;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/mindflow/src/hooks/useGraph.test.ts:
--------------------------------------------------------------------------------
1 | import { renderHook } from '@testing-library/react-hooks';
2 | import { useGraph } from './useGraph';
3 |
4 | describe('useGraph', () => {
5 | it('初始值', () => {
6 | const { result } = renderHook(() => useGraph([]));
7 | expect(result.current.container.current).toBeUndefined();
8 | });
9 | });
10 |
--------------------------------------------------------------------------------
/packages/preloader/tests/index.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 |
4 | import { Square } from '@arvinxu/preloader';
5 |
6 | describe('Preloader', () => {
7 | it('Square', () => {
8 | const { container } = render(
8 | loading...
} id={'custom'} />
9 |
10 | );
11 | };
12 |
13 | export default Loading;
14 |
--------------------------------------------------------------------------------
/packages/page-loading/src/demos/WithoutProgress.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import PageLoading from '@arvinxu/page-loading';
4 |
5 | const Loading = () => {
6 | return (
7 |
8 |
10 | );
11 | };
12 |
13 | export default Loading;
14 |
--------------------------------------------------------------------------------
/packages/journey-map/demos/CustomColor.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import React from 'react';
5 | import JourneyMap from '@arvinxu/journey-map';
6 |
7 | import { customColor } from './color';
8 |
9 | const CustomColor = () => {
10 | return
5 |
16 | `;
17 |
--------------------------------------------------------------------------------
/packages/asset-gallery/jest.config.js:
--------------------------------------------------------------------------------
1 | const base = require('../../jest.config.base');
2 |
3 | const packageName = '@arvinxu/asset-gallery';
4 |
5 | const root = '
8 |
15 | 12 | Login 13 |
14 |
18 |
20 | );
21 | };
22 |
23 | export default Login;
24 |
--------------------------------------------------------------------------------
/packages/user-panel/jest.config.js:
--------------------------------------------------------------------------------
1 | const base = require('../../jest.config.base');
2 |
3 | const packageName = '@arvinxu/user-panel';
4 |
5 | const root = '
12 |
14 | );
15 | };
16 |
17 | export default Section;
18 |
--------------------------------------------------------------------------------
/packages/heatmap-calendar/src/style.less:
--------------------------------------------------------------------------------
1 | :root {
2 | --activity-color-level-1: #ebedf0;
3 | --activity-color-level-2: #9be9a8;
4 | --activity-color-level-3: #40c463;
5 | --activity-color-level-4: #30a14e;
6 | --activity-color-level-5: #216e39;
7 | }
8 |
9 | :root[theme='dark'] {
10 | --activity-color-level-1: #161b22;
11 | --activity-color-level-2: #003820;
12 | --activity-color-level-3: #00602d;
13 | --activity-color-level-4: #1d9d47;
14 | --activity-color-level-5: #26d545;
15 | }
16 |
--------------------------------------------------------------------------------
/packages/journey-map/src/Stages/style.less:
--------------------------------------------------------------------------------
1 | .avx-journey-map-stage {
2 | &-container {
3 | display: flex;
4 | flex: 1;
5 | }
6 |
7 | &-content {
8 | display: flex;
9 | flex: 1;
10 | }
11 |
12 | &-step {
13 | display: flex;
14 | align-items: center;
15 | justify-content: center;
16 | padding: 8px;
17 | border-radius: 4px;
18 |
19 | &-text {
20 | height: 32px;
21 | line-height: 32px;
22 | text-align: center;
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/i18n/README.md:
--------------------------------------------------------------------------------
1 | # @arvinxu/i18n
2 |
3 | [![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
4 |
5 | ## License
6 |
7 | [MIT](../../LICENSE) ® Arvin Xu
8 |
9 |
10 |
11 | [version-image]: http://img.shields.io/npm/v/@arvinxu/i18n.svg?color=deepgreen&label=latest
12 | [version-url]: http://npmjs.org/package/@arvinxu/i18n
13 | [download-image]: https://img.shields.io/npm/dm/@arvinxu/i18n.svg
14 | [download-url]: https://npmjs.org/package/@arvinxu/i18n
15 |
--------------------------------------------------------------------------------
/packages/mindflow/src/definition/shapes/MinimalNode.ts:
--------------------------------------------------------------------------------
1 | /* istanbul ignore file */
2 | import { NodeView } from '@antv/x6';
3 |
4 | export class MinimalNode extends NodeView {
5 | protected renderMarkup() {
6 | return this.renderJSONMarkup({
7 | tagName: 'rect',
8 | selector: 'body',
9 | });
10 | }
11 |
12 | update() {
13 | super.update({
14 | body: {
15 | refWidth: '100%',
16 | refHeight: '100%',
17 | fill: '#1890ff',
18 | },
19 | });
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/asset-gallery/src/components/Layout.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 |
4 | import Layout from './Layout';
5 |
6 | describe('Layout', () => {
7 | it('瀑布流布局', () => {
8 | const { container } = render({children}
13 |
6 | {
8 | alert('Pressed closed');
9 | }}
10 | onMinimize={() => {
11 | alert('Pressed minimize');
12 | }}
13 | onMaximize={() => {
14 | alert('Pressed maximize');
15 | }}
16 | />
17 |
18 | );
19 | };
20 |
21 | export default Basic;
22 |
--------------------------------------------------------------------------------
/packages/journey-map/src/PainPoints/index.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from 'react';
2 | import React, { useContext } from 'react';
3 |
4 | import { ListSection } from '../components';
5 | import { JourneyMapStore } from '../useJourneyMap';
6 |
7 | const PainPoints: FC = () => {
8 | const { config } = useContext(JourneyMapStore);
9 | const height = config?.height?.painPoint;
10 |
11 | return (
12 |
19 |
21 | );
22 | };
23 |
24 | export default PngDemo;
25 |
--------------------------------------------------------------------------------
/packages/macos-traffic-light/src/MinimizeIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { FC } from 'react';
3 | import './icon.less';
4 |
5 | const MinimizeIcon: FC = () => {
6 | return (
7 |
17 | );
18 | };
19 |
20 | export default MinimizeIcon;
21 |
--------------------------------------------------------------------------------
/packages/user-panel/README.md:
--------------------------------------------------------------------------------
1 | # @arvinxu/user-panel
2 |
3 | [![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
4 |
5 | 用户登录注册面板
6 |
7 | ## License
8 |
9 | [MIT](../../LICENSE) ® Arvin Xu
10 |
11 |
12 |
13 | [version-image]: http://img.shields.io/npm/v/@arvinxu/user-panel.svg?color=deepgreen&label=latest
14 | [version-url]: http://npmjs.org/package/@arvinxu/user-panel
15 | [download-image]: https://img.shields.io/npm/dm/@arvinxu/user-panel.svg
16 | [download-url]: https://npmjs.org/package/@arvinxu/user-panel
17 |
--------------------------------------------------------------------------------
/scripts/create-package/template/README.md.ejs:
--------------------------------------------------------------------------------
1 | # @arvinxu/<%- pkg %>
2 |
3 |
4 | [![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
5 |
6 | ## License
7 |
8 | [MIT](../../LICENSE) ® Arvin Xu
9 |
10 |
11 |
12 | [version-image]: http://img.shields.io/npm/v/@arvinxu/<%- pkg %>.svg?color=deepgreen&label=latest
13 | [version-url]: http://npmjs.org/package/@arvinxu/<%- pkg %>
14 | [download-image]: https://img.shields.io/npm/dm/@arvinxu/<%- pkg %>.svg
15 | [download-url]: https://npmjs.org/package/@arvinxu/<%- pkg %>
16 |
--------------------------------------------------------------------------------
/packages/user-panel/src/user-panel.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: UserPanel 用户面板
3 | group: 登录/注册面板
4 | ---
5 |
6 | # UserPanel 用户面板
7 |
8 | [![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
9 |
10 | 用户登录注册集成面板
11 |
12 | [version-image]: http://img.shields.io/npm/v/@arvinxu/user-panel.svg?color=deepgreen&label=latest
13 | [version-url]: http://npmjs.org/package/@arvinxu/user-panel
14 | [download-image]: https://img.shields.io/npm/dm/@arvinxu/user-panel.svg
15 | [download-url]: https://github.com/arvinxx/components/tree/master/packages/user-panel
16 |
--------------------------------------------------------------------------------
/packages/asset-gallery/demos/Demo.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | * inherit: true
4 | */
5 | import AssetGallery from '@arvinxu/asset-gallery';
6 |
7 | import { useTheme } from 'antd-style';
8 | import { images } from './data';
9 |
10 | const Demo = () => {
11 | const token = useTheme();
12 | return (
13 |
22 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/packages/sortable-list/README.md:
--------------------------------------------------------------------------------
1 | # @arvinxu/sortable-list
2 |
3 | [![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
4 |
5 | 可排序列表
6 |
7 | ## License
8 |
9 | [MIT](../../LICENSE) ® Arvin Xu
10 |
11 |
12 |
13 | [version-image]: http://img.shields.io/npm/v/@arvinxu/sortable-list.svg?color=deepgreen&label=latest
14 | [version-url]: http://npmjs.org/package/@arvinxu/sortable-list
15 | [download-image]: https://img.shields.io/npm/dm/@arvinxu/sortable-list.svg
16 | [download-url]: https://npmjs.org/package/@arvinxu/sortable-list
17 |
--------------------------------------------------------------------------------
/packages/asset-gallery/demos/YAMLDemo.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | * inherit: true
4 | */
5 | import AssetGallery from '@arvinxu/asset-gallery';
6 |
7 | import { useTheme } from 'antd-style';
8 | import { yml } from './yml';
9 |
10 | const YAMLDemo = () => {
11 | const token = useTheme();
12 | return (
13 |
5 |
23 | `;
24 |
--------------------------------------------------------------------------------
/packages/asset-gallery/src/utils/clipboard.ts:
--------------------------------------------------------------------------------
1 | /* istanbul ignore file */
2 |
3 | /**
4 | * 利用 Clipboard 剪切板
5 | * @param type
6 | * @param blob
7 | */
8 | export const copyToClipboard = async (type: string, blob: Blob) => {
9 | const { state } = await navigator.permissions.query({
10 | // @ts-ignore
11 | name: 'clipboard-write',
12 | });
13 |
14 | const isAllowed = state === 'granted';
15 | if (navigator.clipboard && isAllowed) {
16 | // @ts-ignore
17 | await navigator.clipboard.write([new ClipboardItem({ [type]: blob })]);
18 | }
19 |
20 | return isAllowed;
21 | };
22 |
--------------------------------------------------------------------------------
/packages/float-label-input/tests/__snapshots__/index.spec.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`FloatLabelInput 正常渲染 1`] = `
4 |
9 |
13 |
17 |
21 |
22 |
5 |
24 | `;
25 |
--------------------------------------------------------------------------------
/packages/journey-map/src/utils/length.test.ts:
--------------------------------------------------------------------------------
1 | import { calcStageLength } from './length';
2 |
3 | describe('calcStageLength', () => {
4 | it('前后符合目标值', () => {
5 | expect(
6 | calcStageLength({
7 | totalCount: 21,
8 | actionCount: 3,
9 | stageCount: 5,
10 | index: 0,
11 | }).width,
12 | ).toEqual(11.25);
13 | });
14 | it('中间符合目标值', () => {
15 | expect(
16 | calcStageLength({
17 | totalCount: 21,
18 | actionCount: 4,
19 | stageCount: 5,
20 | index: 1,
21 | }).width,
22 | ).toEqual(17.5);
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/packages/sortable-list/src/components/Handle/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Action, ActionProps } from '../Action';
4 |
5 | export const Handle = (props: ActionProps) => (
6 |
9 |
15 |
22 |
23 |
9 |
18 | );
19 | };
20 |
21 | export default Basic;
22 |
--------------------------------------------------------------------------------
/packages/user-panel/demos/LoginWithLogo.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import React from 'react';
5 |
6 | import UserPanel from '@arvinxu/user-panel';
7 |
8 | const LoginWithLogo = () => {
9 | return (
10 |
18 |
24 | );
25 | };
26 |
27 | export default LoginWithLogo;
28 |
--------------------------------------------------------------------------------
/packages/user-panel/src/register.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: UserPanel.Register 注册面板
3 | group: 登录/注册面板
4 | ---
5 |
6 | # UserPanel.Register 注册
7 |
8 | [![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
9 |
10 | 用户登录注册集成面板
11 |
12 | [version-image]: http://img.shields.io/npm/v/@arvinxu/user-panel.svg?color=deepgreen&label=latest
13 | [version-url]: http://npmjs.org/package/@arvinxu/user-panel
14 | [download-image]: https://img.shields.io/npm/dm/@arvinxu/user-panel.svg
15 | [download-url]: https://github.com/arvinxx/components/tree/master/packages/user-panel
16 |
17 | ## 注册面板
18 |
19 | TODO
20 |
--------------------------------------------------------------------------------
/packages/mindflow/src/components/EvidenceEdge/style.less:
--------------------------------------------------------------------------------
1 | @import '../../themes/theme';
2 |
3 | .mind-edge {
4 | &-container {
5 | width: 30px;
6 | height: 30px;
7 | }
8 |
9 | &-content {
10 | position: absolute;
11 | top: 50%;
12 | left: 50%;
13 | width: 10px;
14 | height: 10px;
15 | background: @text-color-third;
16 | border-radius: 100%;
17 | transform: translate(-50%, -50%);
18 | cursor: pointer;
19 | &:hover {
20 | background: @text-color-secondary;
21 | }
22 | }
23 | &-empty {
24 | background: white;
25 | border: 1px solid @text-color-third;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/sortable-list/demos/Basic.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import SortableList from '@arvinxu/sortable-list';
5 | import { useTheme } from 'antd-style';
6 | import { useState } from 'react';
7 | import { Flexbox } from 'react-layout-kit';
8 |
9 | const Demo = () => {
10 | const [list, setList] = useState([{ id: 'hello' }, { id: 'world' }]);
11 |
12 | const token = useTheme();
13 | return (
14 |
18 | {
20 | history.push('/components/biz/user-panel');
21 | }}
22 | />
23 |
24 | );
25 | };
26 |
27 | export default LoginWithLogo;
28 |
--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
1 | name: Test CI
2 | on: [push, pull_request]
3 | jobs:
4 | test:
5 | runs-on: ubuntu-latest
6 |
7 | steps:
8 | - uses: actions/checkout@v3
9 |
10 | - name: ⚙ 设置 pnpm
11 | uses: pnpm/action-setup@v2
12 | with:
13 | version: latest
14 |
15 | - name: 🏗 准备 Node.js 环境
16 | uses: actions/setup-node@v3
17 | with:
18 | node-version: '18'
19 |
20 | - name: 🗳 安装依赖
21 | run: pnpm install
22 |
23 | - name: ✅ 测试检查
24 | run: pnpm run test:cov
25 |
26 | - name: ⬆️上传至 Codecov
27 | uses: codecov/codecov-action@v3
28 |
--------------------------------------------------------------------------------
/packages/i18n/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ## @arvinxu/i18n [1.0.1](https://github.com/arvinxx/components/compare/@arvinxu/i18n@1.0.0...@arvinxu/i18n@1.0.1) (2021-07-13)
4 |
5 | ### 🐛 修复
6 |
7 | - 修正类型无法自动提示的问题 ([189f722](https://github.com/arvinxx/components/commit/189f722))
8 |
9 | ### 🔧 持续集成
10 |
11 | - 修正 lint ([8f940b6](https://github.com/arvinxx/components/commit/8f940b6))
12 |
13 | # @arvinxu/i18n 1.0.0 (2021-07-03)
14 |
15 | ### ✨ 新特性
16 |
17 | - 实现 i18n 组件 ([5ebe6c5](https://github.com/arvinxx/components/commit/5ebe6c5))
18 |
19 | ### 🎫 杂项
20 |
21 | - 初始化 i18n ([bc0d1f1](https://github.com/arvinxx/components/commit/bc0d1f1))
22 |
--------------------------------------------------------------------------------
/packages/preloader/src/Square.less:
--------------------------------------------------------------------------------
1 | @keyframes pulse {
2 | 0% {
3 | opacity: 1;
4 | }
5 | 100% {
6 | opacity: 0;
7 | }
8 | }
9 |
10 | .avx-preloader-square {
11 | &-container {
12 | display: flex;
13 | flex-direction: row;
14 | flex-wrap: wrap;
15 | align-items: center;
16 | justify-content: space-around;
17 | width: 36px;
18 | height: 36px;
19 | }
20 |
21 | &-item {
22 | width: 35%;
23 | height: 35%;
24 | animation: pulse 0.75s ease-in infinite alternate;
25 | }
26 |
27 | &-animation-delay {
28 | -webkit-animation-delay: 0.75s;
29 | animation-delay: 0.75s;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/packages/user-panel/src/locales/index.ts:
--------------------------------------------------------------------------------
1 | import i18n from 'i18next';
2 | import { initReactI18next } from 'react-i18next';
3 | import LanguageDetector from 'i18next-browser-languagedetector';
4 |
5 | import zhCN from './zh-CN';
6 | import en from './en-US';
7 |
8 | const resources = {
9 | en: { translation: en },
10 | 'zh-CN': { translation: zhCN },
11 | };
12 |
13 | i18n
14 | .use(initReactI18next)
15 |
16 | .use(LanguageDetector)
17 | .init({
18 | resources,
19 |
20 | fallbackLng: 'zh-CN',
21 | interpolation: {
22 | escapeValue: false, // react already safes from xss
23 | },
24 | });
25 |
26 | export default i18n;
27 |
--------------------------------------------------------------------------------
/packages/mindflow/src/themes/nodeColor.ts:
--------------------------------------------------------------------------------
1 | const baseGreen = '#52c41a';
2 | const baseYellow = '#faad14';
3 | const baseRed = '#ff4d4f';
4 | const baseBlue = '#69c0ff';
5 | const baseCyan = '#5cdbd3';
6 | const basePurple = '#b37feb';
7 | const baseGray = '#8f8f8f';
8 |
9 | const black009 = 'rgba(0,0,0,0.09)';
10 | const black002 = 'rgba(0,0,0,0.02)';
11 |
12 | export const mindFlowColors = {
13 | white: '#ffffff',
14 | blue: baseBlue,
15 | cyan: baseCyan,
16 | green: baseGreen,
17 | yellow: baseYellow,
18 | red: baseRed,
19 | purple: basePurple,
20 | gray: baseGray,
21 | black009,
22 | shadowColor: black009,
23 | menuHoverBg: black002,
24 | };
25 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 |
6 | # production
7 | dist
8 | /.vscode
9 | es
10 | lib
11 |
12 | # misc
13 | .DS_Store
14 | storybook-static
15 | npm-debug.log*
16 | yarn-error.log
17 |
18 | coverage
19 | .idea
20 | package-lock.json
21 | *bak
22 | .vscode
23 |
24 | # visual studio code
25 | .history
26 | *.log
27 | functions/*
28 | lambda/mock/index.js
29 | .temp/**
30 |
31 | # umi
32 | .umi
33 | .umi-production
34 | .dumi/tmp
35 | .dumi/tmp-test
36 | .dumi/tmp-production
37 |
38 | # screenshot
39 | screenshot
40 | .firebase
41 | example/.temp/*
42 | .eslintcache
43 |
44 | apis
45 |
--------------------------------------------------------------------------------
/packages/mindflow/src/components/EvidenceEdge/Reference.less:
--------------------------------------------------------------------------------
1 | @import '../../themes/theme';
2 |
3 | .mind-edge-references {
4 | color: @text-color-secondary;
5 |
6 | &-text {
7 | display: flex;
8 | max-width: 200px;
9 | }
10 |
11 | &-item {
12 | display: flex;
13 | margin-bottom: 12px;
14 | color: @text-color-secondary;
15 | font-size: 14px;
16 | }
17 |
18 | &-tag {
19 | margin-left: 4px;
20 | padding: 0 4px;
21 | }
22 |
23 | &-foot {
24 | display: flex;
25 | flex-direction: row-reverse;
26 | }
27 | }
28 | .ant-popover {
29 | z-index: 2000;
30 | &-inner-content {
31 | padding: 8px;
32 | padding-top: 16px;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/mindflow/src/definition/edge.ts:
--------------------------------------------------------------------------------
1 | /* istanbul ignore file */
2 | import { Markup, Shape } from '@antv/x6';
3 | import './connector';
4 |
5 | Shape.Edge.config({
6 | connector: 'curve',
7 | attrs: {
8 | line: {
9 | stroke: '#d9d9d9',
10 | strokeWidth: 1,
11 | targetMarker: {
12 | tagName: 'path',
13 | d: 'M0 0 Z',
14 | },
15 | },
16 | },
17 |
18 | defaultLabel: {
19 | markup: Markup.getForeignObjectMarkup(),
20 | attrs: {
21 | fo: {
22 | width: 30,
23 | height: 30,
24 | x: -15,
25 | y: -15,
26 | },
27 | },
28 | },
29 | label: {
30 | position: 0.55,
31 | },
32 | });
33 |
--------------------------------------------------------------------------------
/packages/asset-gallery/src/utils/helper.ts:
--------------------------------------------------------------------------------
1 | /* istanbul ignore file */
2 |
3 | import { message } from 'antd';
4 |
5 | /**
6 | * 利用 Canvas 生成 png dataURL
7 | * @param image
8 | * @param scale 缩放
9 | */
10 | export const getImageBase64 = (image: HTMLImageElement, scale = 1) => {
11 | const canvas = document.getElementById('canvas') as HTMLCanvasElement;
12 | canvas.width = image.width * scale;
13 | canvas.height = image.height * scale;
14 |
15 | const context = canvas.getContext('2d');
16 | context?.drawImage(image, 0, 0, image.width, image.height);
17 |
18 | return canvas.toDataURL('image/png');
19 | };
20 |
21 | export const copySuccess = () => {
22 | message.success('🎉 复制成功!');
23 | };
24 |
--------------------------------------------------------------------------------
/packages/mindflow/src/definition/connector.ts:
--------------------------------------------------------------------------------
1 | /* istanbul ignore file */
2 | import { Graph, Path } from '@antv/x6';
3 |
4 | Graph.registerConnector(
5 | 'curve',
6 | (sourcePoint, targetPoint) => {
7 | const path = new Path();
8 | path.appendSegment(Path.createSegment('M', sourcePoint));
9 | const distance = (targetPoint.x - sourcePoint.x) / 2;
10 | path.appendSegment(
11 | Path.createSegment(
12 | 'C',
13 | sourcePoint.x + distance,
14 | sourcePoint.y,
15 | targetPoint.x - distance,
16 | targetPoint.y,
17 | targetPoint.x,
18 | targetPoint.y,
19 | ),
20 | );
21 | return path.serialize();
22 | },
23 | true,
24 | );
25 |
--------------------------------------------------------------------------------
/packages/heatmap-calendar/src/utils/index.test.ts:
--------------------------------------------------------------------------------
1 | import { mapDataCountToLevel, mapToMonth } from './index';
2 |
3 | test('mapDataCountToLevel', () => {
4 | expect(mapDataCountToLevel(0)).toBe(0);
5 | expect(mapDataCountToLevel(1)).toBe(1);
6 | expect(mapDataCountToLevel(4)).toBe(2);
7 | expect(mapDataCountToLevel(12)).toBe(3);
8 | expect(mapDataCountToLevel(20)).toBe(4);
9 | });
10 |
11 | test('mapToMonth', () => {
12 | expect(mapToMonth(0)).toBe('');
13 | expect(mapToMonth(2)).toBe('MAY');
14 | expect(mapToMonth(6)).toBe('JUN');
15 | expect(mapToMonth(10)).toBe('JUL');
16 | expect(mapToMonth(15)).toBe('AUG');
17 | expect(mapToMonth(19)).toBe('SEP');
18 | expect(mapToMonth(24)).toBe('OCT');
19 | });
20 |
--------------------------------------------------------------------------------
/packages/tag-selector/src/demos/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import TagSelector from '@arvinxu/tag-selector';
3 | import { Item } from '@arvinxu/tag-selector/type';
4 | export const smallLabel: Item[] = [
5 | {
6 | title: '未分组',
7 | key: '1526132530988',
8 | value: [
9 | {
10 | text: '测试标签1',
11 | key: 'rJecwftRf',
12 | refText: '21312',
13 | },
14 | {
15 | text: '测试标签2',
16 | key: 'rJecwfsdstRf',
17 | refText: '1352dx',
18 | },
19 | ],
20 | },
21 | ];
22 |
23 | const Simple = () => {
24 | return (
25 |
26 |
28 | );
29 | };
30 |
31 | export default Simple;
32 |
--------------------------------------------------------------------------------
/packages/heatmap-calendar/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 活跃等级映射
3 | * @param count
4 | */
5 | export const mapDataCountToLevel = (count: number) => {
6 | if (count === 0) return 0;
7 | if (count < 2) return 1;
8 | if (count < 5) return 2;
9 | if (count < 15) return 3;
10 | return 4;
11 | };
12 | /**
13 | * 映射位月份
14 | * @param week
15 | */
16 | export const mapToMonth = (week: number) => {
17 | switch (week) {
18 | case 2:
19 | return 'MAY';
20 | case 6:
21 | return 'JUN';
22 | case 10:
23 | return 'JUL';
24 | case 15:
25 | return 'AUG';
26 | case 19:
27 | return 'SEP';
28 | case 24:
29 | return 'OCT';
30 | default:
31 | return '';
32 | }
33 | };
34 |
--------------------------------------------------------------------------------
/packages/sortable-list/src/container/Wrapper.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { FC } from 'react';
3 |
4 | import { Provider, createStore, useStoreApi } from '../store';
5 |
6 | const StoreWrapper: FC = ({ children }) => {
7 | let isWrapped = true;
8 |
9 | try {
10 | useStoreApi();
11 | } catch (e) {
12 | isWrapped = false;
13 | }
14 |
15 | if (isWrapped) {
16 | // we need to wrap it with a fragment because it's not allowed for children to be a ReactNode
17 | // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
18 | return <>{children};
19 | }
20 |
21 | return
19 |
27 | );
28 | };
29 |
30 | export default SketchDemo;
31 |
--------------------------------------------------------------------------------
/packages/float-label-input/src/float-label-input.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: FloatLabelInput
3 | order: 5
4 | group:
5 | path: /
6 | nav:
7 | path: /components
8 | ---
9 |
10 | # FloatLabelInput
11 |
12 | [![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
13 |
14 |
15 |
16 | [version-image]: http://img.shields.io/npm/v/@arvinxu/float-label-input.svg?color=deepgreen&label=latest
17 | [version-url]: http://npmjs.org/package/@arvinxu/float-label-input
18 | [download-image]: https://img.shields.io/npm/dm/@arvinxu/float-label-input.svg
19 | [download-url]: https://npmjs.org/package/@arvinxu/float-label-input
20 |
21 | ## Demo
22 |
23 | ### 默认
24 |
25 |
5 |
26 | `;
27 |
--------------------------------------------------------------------------------
/packages/user-panel/demos/LoginWithFooter.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * compact: true
3 | */
4 | import React from 'react';
5 |
6 | import UserPanel from '@arvinxu/user-panel';
7 | import { message } from 'antd';
8 |
9 | const LoginWithFooter = () => {
10 | return (
11 |
8 |
12 |
16 |
20 |
24 |
25 |
19 | {
22 | message.info('微信登录实现方法');
23 | }}
24 | onRegisterClick={(history) => {
25 | history.push('/components/biz/user-panel#显示底部');
26 | }}
27 | />
28 |
29 | );
30 | };
31 |
32 | export default LoginWithFooter;
33 |
--------------------------------------------------------------------------------
/packages/journey-map/src/components/__snapshots__/OverflowTitle.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`OverflowTitle x 轴 1`] = `
4 |
5 |
10 |
11 | `;
12 |
13 | exports[`OverflowTitle x 轴 overflow 1`] = `
14 |
15 |
25 | `;
26 |
27 | exports[`OverflowTitle y 轴 1`] = `
28 |
18 |
23 |
24 |
29 |
34 |
35 | `;
36 |
--------------------------------------------------------------------------------
/packages/journey-map/tests/__snapshots__/index.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`JourneyMap 默认状态 1`] = `
4 |
5 |
32 | `;
33 |
--------------------------------------------------------------------------------
/packages/asset-gallery/tests/data.ts:
--------------------------------------------------------------------------------
1 | import type { AssetList } from '@arvinxu/asset-gallery';
2 |
3 | export const images: AssetList = [
4 | {
5 | title: '渐变色 Logo',
6 | description: '渐变色',
7 | url: 'https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg',
8 | },
9 | {
10 | title: '白色 Logo',
11 | description: '暗色背景下使用',
12 | dark: true,
13 | padding: 12,
14 | darkBackground: 'black',
15 | url: 'https://gw.alipayobjects.com/zos/antfincdn/5qY87lPw9U/white-logo.svg',
16 | },
17 | ];
18 |
19 | export const pngYML = `
20 | - 标题: 渐变色 Logo
21 | 描述: 渐变色
22 | 链接: https://gw.alipayobjects.com/zos/antfincdn/OuMB9liYZV/tupian%2525201.png
23 |
24 | - 标题: 黑色 Logo
25 | 描述: 亮色背景下使用
26 | 链接: https://gw.alipayobjects.com/zos/antfincdn/5vmPNr6Qqz/tupian%2525202.png
27 | `;
28 |
--------------------------------------------------------------------------------
/packages/float-label-input/src/useHover.ts:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react';
2 | import { useSize } from 'ahooks';
3 | import type { InputRef } from 'antd';
4 |
5 | export const useHover = () => {
6 | const inputRef = useRef
8 |
31 |
11 |
30 |
15 |
29 |
19 |
25 |
28 |
22 | 阶段
23 |
24 |
14 |
,
16 | );
17 | expect(container).toMatchSnapshot();
18 | });
19 |
20 | it('y 轴', () => {
21 | const { container } = render(
11 | {fullscreen ? (
12 |
15 | ) : (
16 |
17 | )}
18 |
19 |
25 | );
26 | };
27 |
28 | export default FullScreenLoading;
29 |
--------------------------------------------------------------------------------
/packages/i18n/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@arvinxu/i18n",
3 | "version": "1.0.1",
4 | "files": [
5 | "dist"
6 | ],
7 | "main": "dist/index.js",
8 | "module": "dist/index.js",
9 | "types": "dist/index.d.ts",
10 | "sideEffects": [
11 | "*.less"
12 | ],
13 | "homepage": "https://github.com/arvinxx/components/tree/master/packages/i18n#readme",
14 | "repository": "git+https://github.com/arvinxx/components.git",
15 | "publishConfig": {
16 | "registry": "https://registry.npmjs.org",
17 | "access": "public"
18 | },
19 | "dependencies": {
20 | "react-intl": "^5.20.4"
21 | },
22 | "scripts": {
23 | "build": "father build",
24 | "test": "jest",
25 | "test:update": "jest -u",
26 | "prepublishOnly": "pnpm run build",
27 | "cov": "jest --coverage",
28 | "clean": "rm -rf dist coverage .umi"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/mindflow/src/types/graph.ts:
--------------------------------------------------------------------------------
1 | import type { MindflowEdge, MindflowNode } from './mindflow';
2 |
3 | export interface GraphData
20 |
21 | 内容卡片
22 |
23 |
24 |
12 |
13 |
14 |
15 |
16 |
17 | 状态: {loading ? '加载中' : '加载完成'}
18 |
19 |
25 | );
26 | };
27 |
28 | export default Loading;
29 |
--------------------------------------------------------------------------------
/packages/macos-traffic-light/src/useTrafficLight.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 |
3 | export const useTrafficLight = () => {
4 | const [hover, handleHover] = useState(false);
5 |
6 | const [isFocus, setIsFocus] = useState(true);
7 |
8 | const focus = () => {
9 | setIsFocus(true);
10 | };
11 | const blur = () => {
12 | setIsFocus(false);
13 | };
14 |
15 | const hoverOn = () => {
16 | handleHover(true);
17 | };
18 | const hoverOff = () => {
19 | handleHover(false);
20 | };
21 |
22 | useEffect(() => {
23 | window.addEventListener('focus', focus);
24 | window.addEventListener('blur', blur);
25 |
26 | return () => {
27 | window.removeEventListener('focus', focus);
28 | window.removeEventListener('blur', blur);
29 | };
30 | }, []);
31 |
32 | return { hover, isFocus, hoverOn, hoverOff };
33 | };
34 |
--------------------------------------------------------------------------------
/packages/mindflow/src/components/MindNode/useFolded.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useMindflowService } from '../../store/useMindflowContext';
3 | import type { ReactShape } from '@antv/x6-react-shape';
4 | import type { NodeData } from '../../types';
5 |
6 | export const useFolded = (node: ReactShape) => {
7 | const { isNodeUnfolded, toggleNodeUnfold } = useMindflowService();
8 | const unfolded = isNodeUnfolded(node.id);
9 | const data = node.getData
20 |
21 | 内容卡片
22 |
23 |
24 |
5 |
8 |
13 |
32 |
33 |
34 |
35 | `;
36 |
--------------------------------------------------------------------------------
/typedoc.js:
--------------------------------------------------------------------------------
1 | /**
2 | * typedoc 配置项
3 | * 快查地址: https://typedoc.org/guides/options/
4 | */
5 | module.exports = {
6 | name: 'template',
7 | // 以 modules 的形式输出文档
8 | out: 'apis',
9 | exclude: '**/*+(index|.spec|.e2e).ts',
10 | excludePrivate: true,
11 | excludeProtected: true,
12 | excludeExternals: true,
13 | excludeNotExported: true,
14 | /**
15 | * 如果注释里包含 @category
16 | * 设为 false 则按照 category 分组显示
17 | * 否则按照 class interface 等默认分组显示
18 | */
19 | categorizeByGroup: false,
20 | categoryOrder: ['节点', '样式', '对象', '抽象对象'],
21 | includeDeclarations: true,
22 | includeVersion: true,
23 | /**
24 | * 不显示源码来源
25 | * 作为文档查阅的过程中这个信息比较干扰
26 | */
27 | disableSources: true,
28 | readme: './README.md',
29 | // 标记有 @internal 的代码将不会输出
30 | stripInternal: true,
31 | // 用于将 monorepo 的 路径 映射为 modules 名称
32 | 'external-modulemap': 'packages/(.*)/src',
33 | };
34 |
--------------------------------------------------------------------------------
/packages/asset-gallery/src/utils/yml.ts:
--------------------------------------------------------------------------------
1 | import { load } from 'js-yaml';
2 | import type { AssetGalleryData, AssetGalleryYML, Asset } from '../types';
3 |
4 | /**
5 | * YML 转 JSON
6 | * @param yml
7 | * @constructor
8 | */
9 | export const YMLToJSON = (yml: string): AssetGalleryData => {
10 | try {
11 | const data = load(yml) as AssetGalleryYML;
12 |
13 | return {
14 | data: data.map(
15 | (item): Asset => ({
16 | title: item.标题 || item.title,
17 | description: item.描述 || item.description,
18 | dark: item.反色 || item.dark,
19 | padding: item.padding,
20 | url: item.链接 || item.url,
21 | darkBackground: item.反色背景色 || item.darkBackground,
22 | sketch: item.sketch,
23 | }),
24 | ),
25 | };
26 | } catch (e) {
27 | /* istanbul ignore next */
28 | throw Error(`YML 不符合规范: \n${e}`);
29 | }
30 | };
31 |
--------------------------------------------------------------------------------
/packages/heatmap-calendar/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@arvinxu/heatmap-calendar",
3 | "version": "1.0.1",
4 | "files": [
5 | "dist"
6 | ],
7 | "main": "dist/index.js",
8 | "module": "dist/index.js",
9 | "types": "dist/index.d.ts",
10 | "sideEffects": [
11 | "*.less"
12 | ],
13 | "homepage": "https://github.com/arvinxx/components/tree/master/packages/heatmap-calendar#readme",
14 | "repository": "git+https://github.com/arvinxx/components.git",
15 | "publishConfig": {
16 | "registry": "https://registry.npmjs.org",
17 | "access": "public"
18 | },
19 | "scripts": {
20 | "build": "father build",
21 | "test": "jest",
22 | "test:update": "jest -u",
23 | "prepublishOnly": "pnpm run build",
24 | "cov": "jest --coverage",
25 | "clean": "rm -rf dist build coverage .umi"
26 | },
27 | "dependencies": {
28 | "@ant-design/charts": "^1.1.3"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/preloader/src/preloader.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Preloader
3 | order: 1
4 | group: 信息展示
5 | apiHeader:
6 | pkg: '@arvinxu/preloader'
7 | defaultImport: true
8 | docUrl: https://github.com/arvinxx/components/blob/master/packages/preloader/src/preloader.md
9 | sourceUrl: https://github.com/arvinxx/components/blob/master/packages/preloader/src/index.ts
10 | ---
11 |
12 | # Preloader
13 |
14 | [![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
15 |
16 |
17 |
18 | [version-image]: http://img.shields.io/npm/v/@arvinxu/preloader.svg?color=deepgreen&label=latest
19 | [version-url]: http://npmjs.org/package/@arvinxu/preloader
20 | [download-image]: https://img.shields.io/npm/dm/@arvinxu/preloader.svg
21 | [download-url]: https://npmjs.org/package/@arvinxu/preloader
22 |
23 | ## 图形一览
24 |
25 | ### Square
26 |
27 |