@bioturing/components

A comprehensive UI component library for BioTuring applications built with React and Ant Design.

Installation

# Using npm
npm install @bioturing/components

# Using yarn
yarn add @bioturing/components

# Using pnpm
pnpm add @bioturing/components

Usage

import { Button } from '@bioturing/components';
import '@bioturing/components/style.css';

function App() {
  return (
    <Button type="primary">Hello BioTuring</Button>
  );
}

Available Components

The package provides the following components:

• Badge
• Breadcrumb
• Button
• Checkbox
• CodeBlock
• Collapse
• DropdownMenu
• Empty
• Field
• Form
• Input
• Popover
• Radio
• ScrollArea
• Slider
• Spin
• Switch
• Tag
• Tooltip
• Upload
• VerticalCollapsiblePanel
• And more...

Each component can be imported individually:

import { Button } from '@bioturing/components/Button';

Tree-Shaking Support

This package is fully optimized for tree-shaking, allowing you to import only the components you need:

✅ Recommended (Fully Tree-Shakable)

import { Button, Modal } from '@bioturing/components'
import '@bioturing/components/style.css'

Bundle Analysis

To analyze your bundle and verify tree-shaking effectiveness:

# Build the package
npm run build

# Open generated bundle analysis
open dist/stats.html

The component library uses:

• ESM format for optimal tree-shaking
• Preserved modules for granular chunking
• Side-effects configuration for CSS handling
• External dependencies to minimize bundle size

Modern bundlers (Vite, Webpack 5+, Next.js) will automatically eliminate unused components from your final bundle.

Styles

The package includes two CSS files:

// Main component styles
import '@bioturing/components/style.css';

// Tailwind utilities
import '@bioturing/components/tailwind.css';

Requirements

• React 18.0.0 or higher
• React DOM 18.0.0 or higher
• Ant Design 5.24.9 or higher

Development Guidelines

ESLint Rules

This package enforces strict linting rules to ensure code quality:

• No Console Statements: console.log() statements are not allowed in production builds.
  • In development, console statements will trigger warnings
  • In production, console statements will cause build errors
  • Only console.warn() and console.error() are permitted
  • The Vite build process automatically removes console statements in production

To run the linter:

# Check for linting issues
npm run lint

# Fix auto-fixable issues
npm run lint:fix

Documentation

For detailed documentation and examples, visit the BioTuring Design System documentation.

License

CC BY-NC-ND 4.0 © BioTuring