├── .npmrc ├── .prettierignore ├── codecov.yml ├── public ├── Divider │ ├── basicUsage.html │ ├── dashed.html │ ├── customColor.html │ ├── vertical.html │ ├── customWidth.html │ └── customSpacing.html ├── Button │ ├── basicUsage.html │ ├── block.html │ ├── size.html │ ├── pill.html │ ├── type.html │ ├── loading.html │ ├── outline.html │ └── disabled.html ├── Tab │ └── basicUsage.html ├── Tabs │ └── basicUsage.html ├── Checkbox │ ├── basicUsage.html │ ├── disabled.html │ ├── readonly.html │ ├── sizes.html │ └── indeterminate.html ├── Rating │ ├── basicUsage.html │ ├── disabled.html │ ├── readonly.html │ ├── halfAllowed.html │ ├── precision.html │ └── character.html ├── TabPanel │ └── basicUsage.html ├── Stepper │ ├── inputRange.html │ ├── basicUsage.html │ ├── stepChange.html │ └── setStepLen.html ├── favicons │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ └── favicon-64x64.png ├── Tooltip │ ├── basicUsage.html │ ├── noArrow.html │ ├── triggerAction.html │ ├── empty.html │ ├── maxWidth.html │ └── backgroundColor.html ├── logos │ ├── main-logo-600.png │ ├── main-logo-800.png │ └── nav-logo-375.png ├── Marquee │ ├── fixedUsage.html │ ├── basicUsage.html │ ├── pauseWhenHover.html │ ├── duration.html │ ├── customColor.html │ └── customStyle.html ├── Radio │ ├── basicUsage.html │ ├── vertical.html │ ├── sizes.html │ └── disabled.html ├── Progress │ ├── basicUsage.html │ ├── customHeight.html │ ├── customColor.html │ └── dynamic.html ├── Textarea │ ├── rows.html │ ├── basicUsage.html │ └── size.html ├── Menu │ ├── disabled.html │ ├── basicUsage.html │ └── event.html ├── Message │ ├── basicUsage.html │ ├── duration.html │ ├── loading.html │ └── type.html ├── Collapse │ ├── basicUsage.html │ ├── disabled.html │ ├── accordion.html │ └── customIcon.html ├── Countdown │ ├── basicUsage.html │ ├── separate.html │ └── events.html ├── Overlay │ ├── OverlayBaseUse.html │ └── OverlayWithContent.html ├── Dropdown │ ├── basicUsage.html │ ├── triggerAction.html │ └── arrow.html ├── Carousel │ ├── loop.html │ ├── basicUsage.html │ ├── indicator.html │ ├── navigation.html │ ├── slidesPerView.html │ ├── disableDrag.html │ ├── gap.html │ ├── autoplay.html │ ├── disableFill.html │ ├── vertical.html │ └── autoHeight.html ├── Modal │ ├── buttonText.html │ ├── basicUsage.html │ ├── overflow.html │ ├── buttonStatus.html │ └── customFooter.html └── Select │ ├── Multiple.html │ ├── basicUsage.html │ ├── Clearable.html │ ├── Disabled.html │ └── Size.html ├── packages ├── banana-cli │ ├── templates │ │ ├── banana-react │ │ │ ├── react-only.js │ │ │ ├── banana-react-index.js │ │ │ └── index.js │ │ ├── docs │ │ │ ├── htmlSource.js │ │ │ └── basicUsage.js │ │ ├── toCamelCase.js │ │ └── banana │ │ │ ├── banana-index.js │ │ │ └── index.styles.js │ ├── CHANGELOG.md │ └── package.json ├── banana-react │ ├── src │ │ ├── message │ │ │ └── index.ts │ │ ├── radio │ │ │ └── index.ts │ │ ├── button │ │ │ └── index.ts │ │ ├── divider │ │ │ └── index.ts │ │ ├── marquee │ │ │ └── index.ts │ │ ├── tooltip │ │ │ └── index.ts │ │ ├── menu-item │ │ │ └── index.ts │ │ ├── progress │ │ │ └── index.ts │ │ ├── select-option │ │ │ └── index.ts │ │ ├── popup │ │ │ └── index.ts │ │ ├── tab-item │ │ │ └── index.ts │ │ ├── tab-panel │ │ │ └── index.ts │ │ ├── textarea │ │ │ └── index.ts │ │ ├── overlay │ │ │ └── index.ts │ │ ├── modal │ │ │ └── index.ts │ │ ├── input │ │ │ └── index.ts │ │ ├── collapse │ │ │ └── index.ts │ │ ├── dropdown │ │ │ └── index.ts │ │ ├── rating │ │ │ └── index.ts │ │ ├── stepper │ │ │ └── index.ts │ │ ├── select │ │ │ └── index.ts │ │ ├── checkbox │ │ │ └── index.ts │ │ ├── carousel │ │ │ └── index.ts │ │ ├── menu │ │ │ └── index.ts │ │ ├── radio-group │ │ │ └── index.ts │ │ ├── countdown │ │ │ └── index.ts │ │ ├── tabs │ │ │ └── index.ts │ │ └── index.ts │ ├── tsconfig.types.json │ ├── tsconfig.json │ ├── README.md │ └── copyTypesToDist.cjs └── banana │ ├── custom-elements-manifest.config.js │ ├── tsconfig.json │ ├── tsconfig.types.json │ ├── README.md │ ├── src │ ├── tabs │ │ └── index.test.ts │ ├── tab-item │ │ ├── index.test.ts │ │ ├── index.ts │ │ └── index.styles.ts │ ├── tab-panel │ │ ├── index.test.ts │ │ ├── index.styles.ts │ │ └── index.ts │ ├── carousel │ │ ├── events.ts │ │ └── utils.ts │ ├── dropdown │ │ └── index.styles.ts │ ├── select-option │ │ ├── index.test.ts │ │ └── index.styles.ts │ ├── countdown │ │ └── index.styles.ts │ ├── menu │ │ ├── index.styles.ts │ │ └── index.ts │ ├── overlay │ │ └── index.styles.ts │ ├── radio-group │ │ └── index.styles.ts │ ├── divider │ │ └── index.styles.ts │ ├── progress │ │ └── index.styles.ts │ ├── menu-item │ │ └── index.styles.ts │ ├── stepper │ │ └── utils.ts │ ├── popup │ │ └── index.styles.ts │ ├── index.ts │ ├── tooltip │ │ └── index.styles.ts │ ├── radio │ │ └── index.ts │ └── collapse │ │ └── index.styles.ts │ ├── styles │ └── components.styles.ts │ ├── copyTypesToDist.cjs │ └── web-test-runner.config.js ├── pnpm-workspace.yaml ├── .vscode └── settings.json ├── .stylelintrc ├── .dumi ├── tsconfig.json ├── typing.d.ts └── global.css ├── .husky ├── pre-commit └── commit-msg ├── commitlint.config.cjs ├── docs ├── doc-components │ ├── main-info │ │ ├── index.css │ │ └── index.tsx │ ├── design-tokens │ │ └── index.css │ └── features │ │ ├── index.tsx │ │ └── index.css ├── guide │ ├── design-tokens.md │ ├── installation.md │ ├── react.md │ └── SSR.md ├── example │ ├── Divider │ │ ├── demos │ │ │ ├── basicUsage.tsx │ │ │ ├── dashed.tsx │ │ │ ├── customColor.tsx │ │ │ ├── customWidth.tsx │ │ │ ├── vertical.tsx │ │ │ └── customSpacing.tsx │ │ └── index.md │ ├── Checkbox │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ ├── disabled.tsx │ │ │ ├── readonly.tsx │ │ │ └── sizes.tsx │ ├── Button │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ ├── block.tsx │ │ │ ├── size.tsx │ │ │ ├── pill.tsx │ │ │ ├── type.tsx │ │ │ ├── disabled.tsx │ │ │ ├── loading.tsx │ │ │ ├── outline.tsx │ │ │ └── formTest.tsx │ ├── Rating │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ ├── halfAllowed.tsx │ │ │ ├── readonly.tsx │ │ │ ├── disabled.tsx │ │ │ ├── precision.tsx │ │ │ └── formTest.tsx │ ├── Stepper │ │ └── demos │ │ │ ├── inputRange.tsx │ │ │ ├── basicUsage.tsx │ │ │ ├── stepChange.tsx │ │ │ └── setStepLen.tsx │ ├── Marquee │ │ └── demos │ │ │ ├── fixed.tsx │ │ │ ├── basicUsage.tsx │ │ │ ├── pauseWhenHover.tsx │ │ │ ├── duration.tsx │ │ │ ├── customColor.tsx │ │ │ ├── vertical.tsx │ │ │ └── customStyle.tsx │ ├── Tooltip │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ ├── noArrow.tsx │ │ │ ├── empty.tsx │ │ │ ├── triggerAction.tsx │ │ │ └── maxWidth.tsx │ ├── Progress │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ ├── dynamic.tsx │ │ │ ├── customHeight.tsx │ │ │ └── customColor.tsx │ ├── Radio │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ ├── vertical.tsx │ │ │ ├── sizes.tsx │ │ │ └── disabled.tsx │ ├── Message │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ ├── duration.tsx │ │ │ ├── loading.tsx │ │ │ └── type.tsx │ ├── Textarea │ │ └── demos │ │ │ ├── rows.tsx │ │ │ ├── basicUsage.tsx │ │ │ └── size.tsx │ ├── Collapse │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ └── disabled.tsx │ ├── Menu │ │ └── demos │ │ │ ├── disabled.tsx │ │ │ ├── basicUsage.tsx │ │ │ └── event.tsx │ ├── Input │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ └── size.tsx │ ├── Overlay │ │ └── demos │ │ │ ├── OverlayBaseUse.tsx │ │ │ └── OverlayWithContent.tsx │ ├── Dropdown │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ └── triggerAction.tsx │ ├── Countdown │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ ├── events.tsx │ │ │ └── separate.tsx │ ├── Carousel │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ ├── loop.tsx │ │ │ ├── gap.tsx │ │ │ ├── indicator.tsx │ │ │ ├── demo3.tsx │ │ │ ├── navigation.tsx │ │ │ ├── disableDrag.tsx │ │ │ ├── slidesPerView.tsx │ │ │ ├── autoplay.tsx │ │ │ ├── vertical.tsx │ │ │ ├── disableFill.tsx │ │ │ ├── autoHeight.tsx │ │ │ └── useRef.tsx │ ├── Modal │ │ └── demos │ │ │ ├── basicUsage.tsx │ │ │ ├── buttonText.tsx │ │ │ ├── overflow.tsx │ │ │ ├── customFooter.tsx │ │ │ └── buttonStatus.tsx │ └── Select │ │ └── demos │ │ ├── basicUsage.tsx │ │ ├── filter.tsx │ │ ├── Multiple.tsx │ │ ├── Clearable.tsx │ │ └── Disabled.tsx └── index.md ├── .changeset ├── odd-lizards-search.md ├── pre.json ├── config.json └── README.md ├── .gitignore ├── .github ├── ISSUE_TEMPLATE │ ├── custom.md │ ├── feature_request.md │ └── bug_report.md └── workflows │ ├── release.yml │ └── gh-pages.yml ├── scripts └── rollup-plugin-copy-types.js ├── .editorconfig ├── .prettierrc.cjs ├── tsconfig.json ├── todo.md ├── rollup.config.dev.mjs └── LICENSE /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers=true 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /dist 2 | *.yaml 3 | -------------------------------------------------------------------------------- /codecov.yml: -------------------------------------------------------------------------------- 1 | fixes: 2 | - '::packages/banana/' 3 | -------------------------------------------------------------------------------- /public/Divider/basicUsage.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/banana-cli/templates/banana-react/react-only.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/**' 3 | -------------------------------------------------------------------------------- /public/Button/basicUsage.html: -------------------------------------------------------------------------------- 1 | 我是一个按钮 -------------------------------------------------------------------------------- /public/Divider/dashed.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/Tab/basicUsage.html: -------------------------------------------------------------------------------- 1 | basicUsage 2 | -------------------------------------------------------------------------------- /public/Tabs/basicUsage.html: -------------------------------------------------------------------------------- 1 | basicUsage 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.printWidth": 160 3 | } 4 | -------------------------------------------------------------------------------- /public/Checkbox/basicUsage.html: -------------------------------------------------------------------------------- 1 | Checkbox -------------------------------------------------------------------------------- /public/Rating/basicUsage.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/TabPanel/basicUsage.html: -------------------------------------------------------------------------------- 1 | basicUsage 2 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@umijs/lint/dist/config/stylelint" 3 | } 4 | -------------------------------------------------------------------------------- /public/Button/block.html: -------------------------------------------------------------------------------- 1 | 2 | 块级按钮 3 | -------------------------------------------------------------------------------- /public/Rating/disabled.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/Rating/readonly.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/Stepper/inputRange.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/Rating/halfAllowed.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.dumi/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "include": ["**/*"] 4 | } 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx commitlint --edit "${1}" 5 | -------------------------------------------------------------------------------- /public/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FriedRiceNoodles/banana-ui/HEAD/public/favicons/favicon.ico -------------------------------------------------------------------------------- /commitlint.config.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | 3 | module.exports = { extends: ['@commitlint/config-conventional'] }; 4 | -------------------------------------------------------------------------------- /public/Tooltip/basicUsage.html: -------------------------------------------------------------------------------- 1 | 2 | Hover me! 3 | 4 | -------------------------------------------------------------------------------- /public/logos/main-logo-600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FriedRiceNoodles/banana-ui/HEAD/public/logos/main-logo-600.png -------------------------------------------------------------------------------- /public/logos/main-logo-800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FriedRiceNoodles/banana-ui/HEAD/public/logos/main-logo-800.png -------------------------------------------------------------------------------- /public/logos/nav-logo-375.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FriedRiceNoodles/banana-ui/HEAD/public/logos/nav-logo-375.png -------------------------------------------------------------------------------- /public/Tooltip/noArrow.html: -------------------------------------------------------------------------------- 1 | 2 | No Arrow 3 | 4 | -------------------------------------------------------------------------------- /public/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FriedRiceNoodles/banana-ui/HEAD/public/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FriedRiceNoodles/banana-ui/HEAD/public/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicons/favicon-64x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FriedRiceNoodles/banana-ui/HEAD/public/favicons/favicon-64x64.png -------------------------------------------------------------------------------- /public/Marquee/fixedUsage.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/banana-react/src/message/index.ts: -------------------------------------------------------------------------------- 1 | import { BMessage } from '@banana-ui/banana'; 2 | 3 | export const Message = BMessage; 4 | -------------------------------------------------------------------------------- /docs/doc-components/main-info/index.css: -------------------------------------------------------------------------------- 1 | .main-info-wrapper { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | -------------------------------------------------------------------------------- /public/Checkbox/disabled.html: -------------------------------------------------------------------------------- 1 |
2 | Checkbox 3 |
4 | Checkbox 5 |
-------------------------------------------------------------------------------- /public/Checkbox/readonly.html: -------------------------------------------------------------------------------- 1 |
2 | Checkbox 3 |
4 | Checkbox 5 |
-------------------------------------------------------------------------------- /public/Radio/basicUsage.html: -------------------------------------------------------------------------------- 1 | 2 | Banana 🍌 3 | Apple 🍎 4 | 5 | -------------------------------------------------------------------------------- /.changeset/odd-lizards-search.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@banana-ui/banana': patch 3 | '@banana-ui/react': patch 4 | --- 5 | 6 | Make the closing behavior of the overlay controllable. 7 | -------------------------------------------------------------------------------- /docs/guide/design-tokens.md: -------------------------------------------------------------------------------- 1 | --- 2 | group: 指南 3 | order: 10 4 | --- 5 | 6 | # 设计变量 Design Tokens 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/Progress/basicUsage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/Rating/precision.html: -------------------------------------------------------------------------------- 1 | Precision 2 | 3 | Precision & Readonly 4 | 5 | -------------------------------------------------------------------------------- /public/Stepper/basicUsage.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .dumi/tmp 4 | .dumi/tmp-test 5 | .dumi/tmp-production 6 | .DS_Store 7 | umd 8 | types 9 | coverage 10 | .idea 11 | node 12 | docs-dist 13 | custom-elements.json -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/banana-cli/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # banana-cli 2 | 3 | ## 0.2.0 4 | 5 | ### Minor Changes 6 | 7 | - Added formField option. 8 | 9 | ## 0.1.0 10 | 11 | ### Minor Changes 12 | 13 | - Banana cli! 14 | -------------------------------------------------------------------------------- /public/Textarea/rows.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
6 | -------------------------------------------------------------------------------- /docs/example/Divider/demos/basicUsage.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 基本使用 3 | */ 4 | 5 | import { Divider } from '@banana-ui/react'; 6 | 7 | export default function basicUsage() { 8 | return ; 9 | } 10 | -------------------------------------------------------------------------------- /public/Radio/vertical.html: -------------------------------------------------------------------------------- 1 | 2 | Banana 🍌 3 | Apple 🍎 4 | Cherry 🍒 5 | 6 | -------------------------------------------------------------------------------- /packages/banana/custom-elements-manifest.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** Globs to analyze */ 3 | globs: ['src/**/index.ts'], 4 | /** Globs to exclude */ 5 | exclude: ['src/index.ts'], 6 | litelement: true, 7 | }; 8 | -------------------------------------------------------------------------------- /docs/example/Checkbox/demos/basicUsage.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 基本使用 3 | */ 4 | 5 | import { Checkbox } from '@banana-ui/react'; 6 | 7 | export default function BasicUsage() { 8 | return Checkbox; 9 | } 10 | -------------------------------------------------------------------------------- /packages/banana-cli/templates/docs/htmlSource.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | const htmlSourceTemplate = (componentName) => ` 3 | basicUsage 4 | `; 5 | 6 | module.exports = htmlSourceTemplate; 7 | -------------------------------------------------------------------------------- /public/Checkbox/sizes.html: -------------------------------------------------------------------------------- 1 |
2 | small 3 | medium (default) 4 | large 5 |
-------------------------------------------------------------------------------- /scripts/rollup-plugin-copy-types.js: -------------------------------------------------------------------------------- 1 | import shell from 'shelljs'; 2 | 3 | export default function runTSC() { 4 | return { 5 | name: 'run tsc', 6 | closeBundle() { 7 | shell.exec('npm run tsc'); 8 | }, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /.dumi/typing.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg' { 2 | import * as React from 'react'; 3 | export const ReactComponent: React.FunctionComponent & { title?: string }>; 4 | 5 | const src: string; 6 | export default src; 7 | } 8 | -------------------------------------------------------------------------------- /docs/example/Divider/demos/dashed.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 虚线分割线 3 | * description: 使用`dashed`参数，让分割线变成虚线。 4 | */ 5 | 6 | import { Divider } from '@banana-ui/react'; 7 | 8 | export default function dashed() { 9 | return ; 10 | } 11 | -------------------------------------------------------------------------------- /public/Radio/sizes.html: -------------------------------------------------------------------------------- 1 | 2 | small 3 | medium (default) 4 | large 5 | 6 | -------------------------------------------------------------------------------- /public/Textarea/basicUsage.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
-------------------------------------------------------------------------------- /public/Tooltip/triggerAction.html: -------------------------------------------------------------------------------- 1 | 2 | Hover 3 | 4 | 5 | Click 6 | 7 | -------------------------------------------------------------------------------- /public/Button/size.html: -------------------------------------------------------------------------------- 1 |
2 | 小按钮 3 | 默认尺寸 4 | 大按钮 5 |
-------------------------------------------------------------------------------- /docs/example/Button/demos/basicUsage.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 基本使用 3 | */ 4 | 5 | import { Button } from '@banana-ui/react'; 6 | 7 | export default function BasicUsage() { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /public/Divider/customColor.html: -------------------------------------------------------------------------------- 1 |

2 | 你可以使用color参数自定义分割线的颜色： 3 |

4 | 5 | 6 |
7 |

也可以通过css变量的方式自定义分割线的颜色：

8 | -------------------------------------------------------------------------------- /public/Menu/disabled.html: -------------------------------------------------------------------------------- 1 | 2 | Option 1 3 | Option 2 4 | Option 3 5 | 6 | Disabled 7 | -------------------------------------------------------------------------------- /public/Message/basicUsage.html: -------------------------------------------------------------------------------- 1 | 显示一个全局提示 2 | 3 | -------------------------------------------------------------------------------- /public/Button/pill.html: -------------------------------------------------------------------------------- 1 |
2 | 小按钮 3 | 默认尺寸 4 | 大按钮 5 |
-------------------------------------------------------------------------------- /packages/banana-cli/templates/toCamelCase.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | 3 | // 首字母也大写的驼峰命名,兼顾数字 4 | const toCamelCase = (str) => { 5 | return str.replace(/(^|-)(\w)/g, (_all, _$1, $2) => { 6 | return $2.toUpperCase(); 7 | }); 8 | }; 9 | 10 | module.exports = toCamelCase; 11 | -------------------------------------------------------------------------------- /public/Message/duration.html: -------------------------------------------------------------------------------- 1 | 自定义提示时长 2 | 3 | -------------------------------------------------------------------------------- /.changeset/pre.json: -------------------------------------------------------------------------------- 1 | { 2 | "mode": "pre", 3 | "tag": "next", 4 | "initialVersions": { 5 | "@banana-ui/banana": "1.20.1", 6 | "@banana/banana-cli": "0.2.0", 7 | "@banana-ui/react": "1.20.1" 8 | }, 9 | "changesets": ["odd-lizards-search", "slimy-radios-lick"] 10 | } 11 | -------------------------------------------------------------------------------- /public/Marquee/basicUsage.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/Divider/vertical.html: -------------------------------------------------------------------------------- 1 |
2 | 主要按钮 3 | 4 | 默认按钮 5 | 6 | 成功按钮 7 |
-------------------------------------------------------------------------------- /packages/banana-react/tsconfig.types.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "declarationDir": "./types", 5 | "emitDeclarationOnly": true 6 | }, 7 | "extends": "../../tsconfig.json", 8 | "include": ["./src"], 9 | "exclude": ["node_modules/**/*"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/banana-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "paths": { 5 | "tslib": ["./node_modules/tslib/tslib.d.ts"] 6 | } 7 | }, 8 | "extends": "../../tsconfig.json", 9 | "include": ["./src"], 10 | "exclude": ["node_modules/**/*"] 11 | } 12 | -------------------------------------------------------------------------------- /public/Collapse/basicUsage.html: -------------------------------------------------------------------------------- 1 | 2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 3 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 4 | -------------------------------------------------------------------------------- /public/Divider/customWidth.html: -------------------------------------------------------------------------------- 1 |

2 | 你可以使用width参数自定义分割线的粗细： 3 |

4 | 5 | 6 | 7 |
8 |

也可以通过css变量的方式自定义分割线的粗细：

9 | -------------------------------------------------------------------------------- /.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 | max_line_length = 120 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /packages/banana-react/README.md: -------------------------------------------------------------------------------- 1 | # @banana-ui/react 2 | 3 | [Banana UI](https://github.com/FriedRiceNoodles/banana-ui) 的 React 版本，对原生的 Banana 进行了封装，使其更适合在 React 项目中使用。 4 | 5 | ## 安装 6 | 7 | ```bash 8 | $ npm install @banana-ui/react 9 | ``` 10 | 11 | GitHub: https://github.com/FriedRiceNoodles/banana-ui 12 | -------------------------------------------------------------------------------- /packages/banana-react/src/radio/index.ts: -------------------------------------------------------------------------------- 1 | import { BRadio } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | export const Radio = createComponent({ 6 | tagName: 'b-radio', 7 | react: React, 8 | elementClass: BRadio, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/banana/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "paths": { 5 | "tslib": ["./node_modules/tslib/tslib.d.ts"] 6 | } 7 | }, 8 | "extends": "../../tsconfig.json", 9 | "include": ["./src", "styles"], 10 | "exclude": ["node_modules/**/*"] 11 | } 12 | -------------------------------------------------------------------------------- /public/Collapse/disabled.html: -------------------------------------------------------------------------------- 1 | 2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 3 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 4 | -------------------------------------------------------------------------------- /public/Marquee/pauseWhenHover.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/example/Rating/demos/basicUsage.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 基本使用 3 | */ 4 | 5 | import { Rating } from '@banana-ui/react'; 6 | import React from 'react'; 7 | 8 | export default function BasicUsage() { 9 | return ( 10 |
11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /docs/example/Stepper/demos/inputRange.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 控制输入范围 3 | */ 4 | import { Stepper } from '@banana-ui/react'; 5 | import React from 'react'; 6 | 7 | export default function InputRange() { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/banana-react/src/button/index.ts: -------------------------------------------------------------------------------- 1 | import { BButton } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | export const Button = createComponent({ 6 | tagName: 'b-button', 7 | react: React, 8 | elementClass: BButton, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/banana-react/src/divider/index.ts: -------------------------------------------------------------------------------- 1 | import { BDivider } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | export const Divider = createComponent({ 6 | tagName: 'b-divider', 7 | react: React, 8 | elementClass: BDivider, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/banana-react/src/marquee/index.ts: -------------------------------------------------------------------------------- 1 | import { BMarquee } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | export const Marquee = createComponent({ 6 | tagName: 'b-marquee', 7 | react: React, 8 | elementClass: BMarquee, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/banana-react/src/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | import { BTooltip } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | export const Tooltip = createComponent({ 6 | tagName: 'b-tooltip', 7 | react: React, 8 | elementClass: BTooltip, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/banana/tsconfig.types.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "declarationDir": "./types", 5 | "emitDeclarationOnly": true 6 | }, 7 | "extends": "../../tsconfig.json", 8 | "include": ["./src/*/index.ts", "./src/index.ts"], 9 | "exclude": ["node_modules/**/*"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/banana-react/src/menu-item/index.ts: -------------------------------------------------------------------------------- 1 | import { BMenuItem } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | export const MenuItem = createComponent({ 6 | tagName: 'b-menu-item', 7 | react: React, 8 | elementClass: BMenuItem, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/banana-react/src/progress/index.ts: -------------------------------------------------------------------------------- 1 | import { BProgress } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | export const Progress = createComponent({ 6 | tagName: 'b-progress', 7 | react: React, 8 | elementClass: BProgress, 9 | }); 10 | -------------------------------------------------------------------------------- /public/Textarea/size.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
-------------------------------------------------------------------------------- /docs/doc-components/main-info/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | 3 | export default function MainInfo() { 4 | return ( 5 |
6 | {/*
*/} 7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/banana/README.md: -------------------------------------------------------------------------------- 1 | # @banana-ui/banana 2 | 3 | 一个基于 Web Components 的 UI 组件库。 4 | 5 | - ✅ 原生环境（无框架）可用 6 | - ✅ 服务端渲染（SSR）可用 7 | - ✅ worker 环境可用 8 | - ✅ 良好的 PC 端支持，移动端也可用 9 | - ✅ 完善的单元测试 10 | 11 | ## 安装 12 | 13 | ```bash 14 | $ npm install @banana-ui/banana 15 | ``` 16 | 17 | GitHub: https://github.com/FriedRiceNoodles/banana-ui 18 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "restricted", 8 | "baseBranch": "master", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [] 11 | } 12 | -------------------------------------------------------------------------------- /.dumi/global.css: -------------------------------------------------------------------------------- 1 | .markdown ul > li { 2 | margin-left: 20px; 3 | padding-left: 4px; 4 | list-style-type: circle; 5 | } 6 | 7 | .dumi-default-table-content td:first-child { 8 | font-weight: 500; 9 | } 10 | 11 | .dumi-default-table-content th { 12 | text-align: left; 13 | } 14 | 15 | .main-info-logo { 16 | width: 400px; 17 | } 18 | -------------------------------------------------------------------------------- /packages/banana-react/src/select-option/index.ts: -------------------------------------------------------------------------------- 1 | import { BSelectOption } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | export const SelectOption = createComponent({ 6 | tagName: 'b-select-option', 7 | react: React, 8 | elementClass: BSelectOption, 9 | }); 10 | -------------------------------------------------------------------------------- /packages/banana/src/tabs/index.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, fixture, html } from '@open-wc/testing'; 2 | import BTabs from '.'; 3 | 4 | describe('b-tabs', () => { 5 | it('accessibility tests', async () => { 6 | const element = await fixture(html``); 7 | await expect(element).to.be.accessible(); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /public/Button/type.html: -------------------------------------------------------------------------------- 1 |
2 | 主要按钮 3 | 成功按钮 4 | 警告按钮 5 | 危险按钮 6 | 虚线按钮 7 | 默认按钮 8 |
-------------------------------------------------------------------------------- /docs/example/Button/demos/block.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 块级按钮 3 | * description: 使用`block`属性，使按钮变成块级按钮。 4 | */ 5 | 6 | import { Button } from '@banana-ui/react'; 7 | 8 | export default function Block() { 9 | return ( 10 |
11 | 14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/banana-react/src/popup/index.ts: -------------------------------------------------------------------------------- 1 | import { BPopup } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | export const Popup = createComponent({ 6 | tagName: 'b-popup', 7 | react: React, 8 | elementClass: BPopup, 9 | events: { 10 | onClose: 'close', 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /packages/banana/src/tab-item/index.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, fixture, html } from '@open-wc/testing'; 2 | import BTab from '.'; 3 | 4 | describe('b-tab-item', () => { 5 | it('accessibility tests', async () => { 6 | const element = await fixture(html``); 7 | await expect(element).to.be.accessible(); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/banana-react/src/tab-item/index.ts: -------------------------------------------------------------------------------- 1 | import { BTabItem } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = {}; 6 | 7 | export const TabItem = createComponent({ 8 | tagName: 'b-tab-item', 9 | react: React, 10 | elementClass: BTabItem, 11 | events, 12 | }); 13 | -------------------------------------------------------------------------------- /docs/example/Marquee/demos/fixed.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 短文案固定 3 | * description: 传入 `fixed` 属性后，如果文案宽度小于容器宽度，则文案不会滚动。 4 | */ 5 | 6 | import { Marquee } from '@banana-ui/react'; 7 | 8 | export default function Fixed() { 9 | const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; 10 | 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /docs/example/Rating/demos/halfAllowed.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 允许半星 3 | * description: 设置 `halfAllowed` 参数即可选中半星。 4 | */ 5 | 6 | import { Rating } from '@banana-ui/react'; 7 | import React from 'react'; 8 | 9 | export default function HalfAllowed() { 10 | return ( 11 |
12 | 13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /docs/example/Rating/demos/readonly.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 只读 3 | * description: 使用 `readonly` 参数即可设置为只读，只读状态下无法进行交互。 4 | */ 5 | 6 | import { Rating } from '@banana-ui/react'; 7 | import React from 'react'; 8 | 9 | export default function Readonly() { 10 | return ( 11 |
12 | 13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /packages/banana-react/src/tab-panel/index.ts: -------------------------------------------------------------------------------- 1 | import { BTabPanel } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = {}; 6 | 7 | export const TabPanel = createComponent({ 8 | tagName: 'b-tab-panel', 9 | react: React, 10 | elementClass: BTabPanel, 11 | events, 12 | }); 13 | -------------------------------------------------------------------------------- /docs/example/Rating/demos/disabled.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 禁用评分 3 | * description: 禁用状态下无法进行交互，同时会有不同的样式，且**不会参与表单提交**。 4 | */ 5 | 6 | import { Rating } from '@banana-ui/react'; 7 | import React from 'react'; 8 | 9 | export default function Disabled() { 10 | return ( 11 |
12 | 13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /packages/banana/src/tab-panel/index.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, fixture, html } from '@open-wc/testing'; 2 | import BTabPanel from '.'; 3 | 4 | describe('b-tab-panel', () => { 5 | it('accessibility tests', async () => { 6 | const element = await fixture(html``); 7 | await expect(element).to.be.accessible(); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /public/Marquee/duration.html: -------------------------------------------------------------------------------- 1 | 3 | -------------------------------------------------------------------------------- /docs/example/Tooltip/demos/basicUsage.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 基本使用 3 | */ 4 | 5 | import { Tooltip } from '@banana-ui/react'; 6 | import React from 'react'; 7 | 8 | export default function BasicUsage() { 9 | return ( 10 |
11 | 12 | Hover me! 13 | 14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /packages/banana-react/src/textarea/index.ts: -------------------------------------------------------------------------------- 1 | import { BTextarea } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = { onChange: 'change' }; 6 | 7 | export const Textarea = createComponent({ 8 | tagName: 'b-textarea', 9 | react: React, 10 | elementClass: BTextarea, 11 | events, 12 | }); 13 | -------------------------------------------------------------------------------- /packages/banana/styles/components.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from 'lit'; 2 | 3 | export default css` 4 | :host { 5 | box-sizing: border-box; 6 | color: var(--banana-color-text, #202020); 7 | } 8 | 9 | :host *, 10 | :host *::before, 11 | :host *::after { 12 | box-sizing: inherit; 13 | } 14 | 15 | [hidden] { 16 | display: none !important; 17 | } 18 | `; 19 | -------------------------------------------------------------------------------- /public/Countdown/basicUsage.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
-------------------------------------------------------------------------------- /packages/banana-react/src/overlay/index.ts: -------------------------------------------------------------------------------- 1 | import { BOverlay } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = { 6 | onClose: 'close', 7 | }; 8 | 9 | export const Overlay = createComponent({ 10 | react: React, 11 | tagName: 'b-overlay', 12 | elementClass: BOverlay, 13 | events, 14 | }); 15 | -------------------------------------------------------------------------------- /packages/banana-react/src/modal/index.ts: -------------------------------------------------------------------------------- 1 | import { BModal } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = { 6 | onCancel: 'cancel', 7 | onOk: 'ok', 8 | }; 9 | 10 | export const Modal = createComponent({ 11 | tagName: 'b-modal', 12 | react: React, 13 | elementClass: BModal, 14 | events, 15 | }); 16 | -------------------------------------------------------------------------------- /docs/example/Progress/demos/basicUsage.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 基本使用 3 | */ 4 | 5 | import { Progress } from '@banana-ui/react'; 6 | import React from 'react'; 7 | 8 | export default function BasicUsage() { 9 | return ( 10 |
11 | 12 | 13 | 14 | 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /public/Message/loading.html: -------------------------------------------------------------------------------- 1 | 显示一个loading提示 2 | 3 | -------------------------------------------------------------------------------- /docs/example/Tooltip/demos/noArrow.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 不展示箭头 3 | * description: 使用 `noArrow` 参数可隐藏箭头。 4 | */ 5 | 6 | import { Tooltip } from '@banana-ui/react'; 7 | import React from 'react'; 8 | 9 | export default function NoArrow() { 10 | return ( 11 |
12 | 13 | No Arrow 14 | 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/banana/src/carousel/events.ts: -------------------------------------------------------------------------------- 1 | export const EVENTS = { 2 | CLICK: 'click', 3 | TOUCHSTART: 'touchstart', 4 | TOUCHMOVE: 'touchmove', 5 | TOUCHEND: 'touchend', 6 | TOUCHCANCEL: 'touchcancel', 7 | MOUSEDOWN: 'mousedown', 8 | MOUSEMOVE: 'mousemove', 9 | MOUSEUP: 'mouseup', 10 | } as const; 11 | 12 | export type EventType = typeof EVENTS extends { [K in keyof typeof EVENTS]: infer U } ? U : never; 13 | -------------------------------------------------------------------------------- /public/Overlay/OverlayBaseUse.html: -------------------------------------------------------------------------------- 1 | 展开遮罩层 2 | 3 | 4 | 16 | -------------------------------------------------------------------------------- /docs/example/Radio/demos/basicUsage.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 基本使用 3 | */ 4 | 5 | import { Radio, RadioGroup } from '@banana-ui/react'; 6 | import React from 'react'; 7 | 8 | export default function BasicUsage() { 9 | return ( 10 |
11 | 12 | Banana 🍌 13 | Apple 🍎 14 | 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /public/Radio/disabled.html: -------------------------------------------------------------------------------- 1 | 2 | Banana🍌 3 | Apple🍎 4 | Cherry🍒 5 | 6 | 7 | 8 | Banana🍌 9 | Apple🍎 10 | Cherry🍒 11 | 12 | -------------------------------------------------------------------------------- /public/Menu/basicUsage.html: -------------------------------------------------------------------------------- 1 | 2 | Option 1 3 | Option 2 4 | Option 3 5 | Option 4 6 | Option 5 7 | 8 | Option A 9 | Option B 10 | Option C 11 | -------------------------------------------------------------------------------- /.prettierrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pluginSearchDirs: false, 3 | plugins: [require.resolve('prettier-plugin-organize-imports'), require.resolve('prettier-plugin-packagejson')], 4 | printWidth: 120, 5 | proseWrap: 'preserve', 6 | singleQuote: true, 7 | trailingComma: 'all', 8 | overrides: [ 9 | { 10 | files: '*.md', 11 | options: { 12 | proseWrap: 'preserve', 13 | }, 14 | }, 15 | ], 16 | }; 17 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | hero: 3 | title: 4 | description: 一套可跨框架使用的、支持SSR的组件库 5 | actions: 6 | - text: 快速上手 7 | link: /guide/introduction 8 | - text: 组件 9 | link: /example/button 10 | --- 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/example/Checkbox/demos/disabled.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 禁用复选框 3 | * description: 禁用状态下无法进行交互，同时会有不同的样式，且**不会参与表单提交**。 4 | */ 5 | 6 | import { Checkbox } from '@banana-ui/react'; 7 | 8 | export default function Disabled() { 9 | return ( 10 |
11 | Checkbox 12 |
13 | 14 | Checkbox 15 | 16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /public/Countdown/separate.html: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | : 17 | -------------------------------------------------------------------------------- /docs/example/Checkbox/demos/readonly.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * debug: true 3 | * title: 只读 4 | * description: 只读状态下无法进行交互，但**会参与表单提交**。 5 | */ 6 | 7 | import { Checkbox } from '@banana-ui/react'; 8 | 9 | export default function Readonly() { 10 | return ( 11 |
12 | Checkbox 13 |
14 | 15 | Checkbox 16 | 17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /public/Stepper/stepChange.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | -------------------------------------------------------------------------------- /docs/example/Stepper/demos/basicUsage.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 基本使用 3 | */ 4 | import { Stepper } from '@banana-ui/react'; 5 | import React from 'react'; 6 | 7 | export default function BasicUsage() { 8 | return ( 9 |
16 | 17 | 18 |
19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /docs/example/Message/demos/basicUsage.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 基本使用 3 | */ 4 | 5 | import { Button, Message } from '@banana-ui/react'; 6 | import React from 'react'; 7 | 8 | export default function BasicUsage() { 9 | return ( 10 |
11 | 19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/banana-react/src/input/index.ts: -------------------------------------------------------------------------------- 1 | import { BInput } from '@banana-ui/banana'; 2 | import { EventName, createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = { 6 | onChange: 'change' as EventName< 7 | CustomEvent<{ 8 | value: string; 9 | }> 10 | >, 11 | }; 12 | 13 | export const Input = createComponent({ 14 | tagName: 'b-input', 15 | react: React, 16 | elementClass: BInput, 17 | events, 18 | }); 19 | -------------------------------------------------------------------------------- /docs/example/Message/demos/duration.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 自定义提示的展示时长 3 | * description: 通过配置参数中的 `duration` 属性，可以自定义提示的展示时长，单位为秒。 4 | */ 5 | 6 | import { Button, Message } from '@banana-ui/react'; 7 | 8 | export default function Duration() { 9 | return ( 10 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /packages/banana-react/src/collapse/index.ts: -------------------------------------------------------------------------------- 1 | import { BCollapse } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = { 6 | onShow: 'show', 7 | onAfterShow: 'afterShow', 8 | onHide: 'hide', 9 | onAfterHide: 'afterHide', 10 | }; 11 | 12 | export const Collapse = createComponent({ 13 | tagName: 'b-collapse', 14 | react: React, 15 | elementClass: BCollapse, 16 | events, 17 | }); 18 | -------------------------------------------------------------------------------- /packages/banana-react/src/dropdown/index.ts: -------------------------------------------------------------------------------- 1 | import { BDropdown } from '@banana-ui/banana'; 2 | import { createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = { 6 | onShow: 'show', 7 | onAfterShow: 'afterShow', 8 | onHide: 'hide', 9 | onAfterHide: 'afterHide', 10 | }; 11 | 12 | export const Dropdown = createComponent({ 13 | tagName: 'b-dropdown', 14 | react: React, 15 | elementClass: BDropdown, 16 | events, 17 | }); 18 | -------------------------------------------------------------------------------- /packages/banana-react/src/rating/index.ts: -------------------------------------------------------------------------------- 1 | import { BRating } from '@banana-ui/banana'; 2 | import { EventName, createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = { 6 | onChange: 'change' as EventName< 7 | CustomEvent<{ 8 | value: number; 9 | }> 10 | >, 11 | }; 12 | 13 | export const Rating = createComponent({ 14 | tagName: 'b-rating', 15 | react: React, 16 | elementClass: BRating, 17 | events, 18 | }); 19 | -------------------------------------------------------------------------------- /docs/example/Rating/demos/precision.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 精确显示 3 | * description: 设置 `precision` 参数即可精确显示, 建议在`只读状态`下使用。 4 | */ 5 | 6 | import { Rating } from '@banana-ui/react'; 7 | import React from 'react'; 8 | 9 | export default function Precision() { 10 | return ( 11 |
12 | Precision 13 | 14 | Precision & Readonly 15 | 16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /packages/banana-cli/templates/banana/banana-index.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | 3 | const toCamelCase = require('../toCamelCase'); 4 | 5 | const template = (componentNames) => { 6 | const importStr = componentNames.map((name) => `import B${toCamelCase(name)} from './${name}';`).join('\n'); 7 | const exportStr = componentNames.map((name) => `B${toCamelCase(name)},`).join('\n'); 8 | return `${importStr}\n\nexport {\n${exportStr}\n};`; 9 | }; 10 | 11 | module.exports = template; 12 | -------------------------------------------------------------------------------- /packages/banana-react/src/stepper/index.ts: -------------------------------------------------------------------------------- 1 | import { BStepper } from '@banana-ui/banana'; 2 | import { EventName, createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = { 6 | onChange: 'change' as EventName< 7 | CustomEvent<{ 8 | value: number; 9 | }> 10 | >, 11 | }; 12 | 13 | export const Stepper = createComponent({ 14 | tagName: 'b-stepper', 15 | react: React, 16 | elementClass: BStepper, 17 | events, 18 | }); 19 | -------------------------------------------------------------------------------- /packages/banana-react/src/select/index.ts: -------------------------------------------------------------------------------- 1 | import { BSelect } from '@banana-ui/banana'; 2 | import { EventName, createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = { 6 | onChange: 'change' as EventName< 7 | CustomEvent<{ 8 | value: string | string[]; 9 | }> 10 | >, 11 | }; 12 | 13 | export const Select = createComponent({ 14 | tagName: 'b-select', 15 | react: React, 16 | elementClass: BSelect, 17 | events, 18 | }); 19 | -------------------------------------------------------------------------------- /public/Button/loading.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 主要按钮 4 | 5 | 6 | 成功按钮 7 | 8 | 9 | 警告按钮 10 | 11 | 12 | 危险按钮 13 | 14 | 15 | 虚线按钮 16 | 17 | 默认按钮 18 |
-------------------------------------------------------------------------------- /public/Button/outline.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 主要按钮 4 | 5 | 6 | 成功按钮 7 | 8 | 9 | 警告按钮 10 | 11 | 12 | 危险按钮 13 | 14 | 15 | 虚线按钮 16 | 17 | 默认按钮 18 |
-------------------------------------------------------------------------------- /docs/example/Marquee/demos/basicUsage.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: 基本使用 3 | */ 4 | 5 | import { Marquee } from '@banana-ui/react'; 6 | 7 | export default function BasicUsage() { 8 | const content = 9 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'; 10 | 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /packages/banana-react/src/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import { BCheckbox } from '@banana-ui/banana'; 2 | import { EventName, createComponent } from '@lit-labs/react'; 3 | import * as React from 'react'; 4 | 5 | const events = { 6 | onChange: 'change' as EventName< 7 | CustomEvent<{ 8 | checked: boolean; 9 | }> 10 | >, 11 | }; 12 | 13 | export const Checkbox = createComponent({ 14 | tagName: 'b-checkbox', 15 | react: React, 16 | elementClass: BCheckbox, 17 | events, 18 | }); 19 | -------------------------------------------------------------------------------- /public/Button/disabled.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 主要按钮 4 | 5 | 6 | 成功按钮 7 | 8 | 9 | 警告按钮 10 | 11 | 12 | 危险按钮 13 | 14 | 15 | 虚线按钮 16 | 17 | 默认按钮 18 |
-------------------------------------------------------------------------------- /public/Tooltip/empty.html: -------------------------------------------------------------------------------- 1 | Hide 2 | 3 | Hover me! 4 | 5 | 6 | 17 | -------------------------------------------------------------------------------- /docs/example/Textarea/demos/rows.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * title: Rows 3 | * description: 使用 `rows` 属性更改显示的文本行数，默认为 4。 4 | */ 5 | 6 | import { Textarea } from '@banana-ui/react'; 7 | 8 | export default function Size() { 9 | return ( 10 |
17 |