@puzzle/components

A comprehensive React component library built with TypeScript and styled with Tailwind CSS.

Installation

npm install @puzzle/components

Peer Dependencies

This package requires the following peer dependencies to be installed in your project:

npm install react react-dom react-router-dom @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons tailwindcss

Setup

1. Import the CSS

Import the component styles in your main CSS file or at the root of your application:

@import '@puzzle/components/dist/colors.css';

2. Configure Tailwind CSS

Make sure your tailwind.config.js includes the component library in the content array:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@puzzle/components/dist/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        puzzlegreen: '#1c6b19',
        puzzlegreenLighter: '#258b21',
      }
    },
  },
  plugins: [],
}

Usage

import { Button, CustomMultiSelect, Container } from '@puzzle/components';

function App() {
  return (
    <Container>
      <Button 
        label="Click me!" 
        buttonType="primary" 
        onClick={() => console.log('Clicked!')} 
      />
      
      <CustomMultiSelect
        options={[
          { id: '1', label: 'Option 1' },
          { id: '2', label: 'Option 2' },
        ]}
        onChange={(values) => console.log(values)}
        placeholder="Select options..."
      />
    </Container>
  );
}

Components

Basic Components

• Button - Versatile button component with multiple styles and states
• Divider - Visual separator component
• Input - Text input component
• LoadingSpinner - Loading indicator component
• Textarea - Multi-line text input component
• Tooltip - Hover tooltip component

Form Components

• AutofillTextarea - Textarea with autofill capabilities
• CustomMultiSelect - Multi-select dropdown component
• CustomSingleSelect - Single-select dropdown component
• LikertScaleInput - Likert scale rating input
• SearchSelect - Searchable select component

Layout Components

• Container - Responsive container with max-width constraints
• Layout - Main layout wrapper component
• LayoutAside - Sidebar layout component
• LayoutMain - Main content area component

Navigation Components

• Breadcrumb - Breadcrumb navigation component
• Header - Page header component
• TitleBar - Title bar component

Data Visualization Components

• Sparkline - Small line chart component
• TimeframeFilter - Time period selection component

Interactive Components

• Confirm - Confirmation dialog component
• ExpandableListCard - Collapsible list card component
• Popup - Modal popup component

Development

Storybook

To view and interact with all components, run Storybook:

npm run storybook

Building

To build the library:

npm run build

Publishing

To publish a new version:

npm run prepublishOnly
npm publish

Styling

This library uses Tailwind CSS for styling with custom puzzle green colors:

• puzzlegreen: #1c6b19
• puzzlegreenLighter: #258b21

The components are designed to work seamlessly with Tailwind CSS and follow consistent design patterns.

TypeScript Support

All components are built with TypeScript and include full type definitions. Import types as needed:

import type { ButtonProps } from '@puzzle/components';

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request