@tap2chefs/ui

v2.1.2

Published

3 days ago

The official UI component library for Tap 2 applications, built with Svelte 5, Tailwind CSS 4, and Storybook.

Downloads

4,988

0High
0Medium
0Low

@tap2chefs/ui

The official UI component library for Tap 2 applications, built with Svelte 5, Tailwind CSS 4, and Storybook.

Installation

Install the library using your preferred package manager:

# npm
npm install @tap2chefs/ui

# yarn
yarn add @tap2chefs/ui

# pnpm
pnpm add @tap2chefs/ui

# bun
bun add @tap2chefs/ui

Required Dependencies

This library requires the following peer dependencies:

# npm
npm install svelte@^5.0.0

# yarn
yarn add svelte@^5.0.0

# pnpm
pnpm add svelte@^5.0.0

# bun
bun add svelte@^5.0.0

Setup

Import the styles in your css file (e.g., src/app.css):

@import '@tap2chefs/ui/root.css';
@import 'tailwindcss';
@import '@tap2chefs/ui/theme.css';

Configure Tailwind CSS in your vite.config.ts:

import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
	plugins: [sveltekit(), tailwindcss()]
});

Use the components in your Svelte files:

<script>
	import { Button } from '@tap2chefs/ui';
</script>

<Button>Click me</Button>

Available Components

Layout & Structure

Card - Flexible card component with header, content, and footer sections
Separator - Visual divider for content sections
ScrollArea - Customizable scrollable container
Table - Data table component with sorting and styling
Tabs - Tabbed interface for organizing content

Navigation

Breadcrumb - Navigation breadcrumb trail
DropdownMenu - Dropdown menu with nested items support

Form Components

Input - Text input with various types and states
InputGroup - Grouped input fields with addons
Textarea - Multi-line text input
Select - Single and multi-select dropdowns
NativeSelect - Native HTML select element
Checkbox - Checkbox input with custom styling
Radio - Radio button input
Switch - Toggle switch component
DatePicker - Date selection component
DateRangePicker - Date range selection
TimePicker - Time input component
InputOTP - One-time password input
Searchbar - Search input with icon
Label - Form field label
Field - Complete form field with label and validation

Interactive Components

Button - Primary action button with variants
ButtonGroup - Grouped button component
SelectableButton - Button with selection state
SelectableCard - Card with selection state
Popover - Floating popover component
Popup - Modal popup component
Modal - Full-featured modal dialog
Drawer - Side drawer component
Tooltip - Hover tooltip component
Toast - Toast notification system

Display Components

Avatar - User avatar with fallback
Badge - Status and label badges
Heading - Typography heading component
Text - Styled text component
ItemList - List of items with styling
ColorPicker - Color selection component
Calendar - Calendar display component
RangeCalendar - Date range calendar

Available Imports

The library exports components, utilities, and hooks:

<script>
	// Components
	import { Button, Input, Card } from '@tap2chefs/ui';

	// Utils
	import { cn } from '@tap2chefs/ui/utils';

	// Hooks
	import { useMediaQuery } from '@tap2chefs/ui/hooks';
</script>

Dark Mode

The library includes built-in dark mode support. Add the dark class to an element to enable dark mode inside it:

<html class="dark">
	<!-- Your app -->
</html>

Utilities

`cn()` - Class Name Utility

A utility function for merging Tailwind CSS classes with proper precedence:

import { cn } from '@tap2chefs/ui/utils';

const className = cn('px-4 py-2', 'bg-blue-500', conditionalClass && 'hover:bg-blue-600');

Hooks

`useMediaQuery()`

A Svelte 5 rune-based hook for responsive design:

<script>
	import { useMediaQuery } from '@tap2chefs/ui/hooks';

	const isMobile = useMediaQuery('(max-width: 768px)');
	const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
	const isDesktop = useMediaQuery('(min-width: 1025px)');
</script>

{#if isMobile.current}
	<MobileLayout />
{:else if isTablet.current}
	<TabletLayout />
{:else}
	<DesktopLayout />
{/if}

Component Documentation

For detailed component documentation, examples, and interactive demos, visit the Storybook documentation (if available).

Development

Prerequisites

Bun (recommended) or Node.js 18+
Svelte 5

Getting Started

Clone the repository and install dependencies:

bun install

Start the development server:

bun run dev

# or start the server and open in browser
bun run dev -- --open

Start Storybook for component development:

bun run storybook

Everything inside src/lib is part of the library, everything inside src/routes is the showcase app.

Available Scripts

bun run dev - Start development server
bun run build - Build the library for production
bun run check - Run Svelte type checking
bun run check:watch - Run type checking in watch mode
bun run lint - Run linting (Prettier + ESLint)
bun run lint:fix - Fix linting issues
bun run format - Format code with Prettier
bun run storybook - Start Storybook dev server
bun run build-storybook - Build Storybook for production

Building

To build the library:

bun run build

This will:

Build the library using Vite
Package the library using @sveltejs/package
Run publint for package validation

Publishing

This package is published to npm under the @tap2chefs scope. Publishing is automated via GitHub Actions and semantic-release.

Manual Publishing

If you need to publish manually:

bun run build
npm publish

License

This software and associated documentation files (the "Software") are proprietary and confidential. Unauthorized copying, modification, distribution, or use of this software, via any medium, is strictly prohibited without the express written permission of Tap2.

Contributing

This is a private, closed-source project maintained by the Tap2 team. Contributions are limited to authorized team members only.

For Team Members

Branching Strategy
- Create branches from main: component/name
- Use descriptive branch names that reflect the work being done
Making Changes
- Ensure all components have corresponding Storybook stories
- Run bun run check before committing to verify types
- Run bun run lint:fix to auto-fix linting issues
- Test your changes thoroughly in Storybook
Commit Messages
- Follow conventional commit format: type(scope): message
- Types: feat, fix, docs, style, refactor, test, chore
- Example: feat(button): add loading state variant
Pull Requests
- Ensure all checks pass before requesting review
- Provide clear description of changes
- Update documentation if needed
- Link any related issues
Code Standards
- Use TypeScript types (not interfaces per project guidelines)
- Follow existing code patterns and component structure
- Maintain accessibility standards (ARIA labels, keyboard navigation)
- Keep components composable and reusable

Questions or Issues?

Contact the Tap2 development team for access and contribution guidelines.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@tap2chefs/ui

Installation

Required Dependencies

Setup

Available Components

Layout & Structure

Navigation

Form Components

Interactive Components

Display Components

Available Imports

Dark Mode

Utilities

cn() - Class Name Utility

Hooks

useMediaQuery()

Component Documentation

Development

Prerequisites

Getting Started

Available Scripts

Building

Publishing

Manual Publishing

License

Contributing

For Team Members

Questions or Issues?

`cn()` - Class Name Utility

`useMediaQuery()`