@puzzle/components

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

Installation

``bash
npm install @puzzle/components
`

$3

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

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

Setup

$3

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

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

$3

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

`javascript
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

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

function App() {
return (

label="Click me!"
buttonType="primary"
onClick={() => console.log('Clicked!')}
/>

options={[
{ id: '1', label: 'Option 1' },
{ id: '2', label: 'Option 2' },
]}
onChange={(values) => console.log(values)}
placeholder="Select options..."
/>

);
}
`

Components

$3

- 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

$3

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

$3

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

$3

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

$3

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

$3

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

Development

$3

To view and interact with all components, run Storybook:

`bash
npm run storybook
`

$3

To build the library:

`bash
npm run build
`

$3

To publish a new version:

`bash
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:

`tsx
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