rr-storybook

A collection of reusable React components for the Resident Rise project.

Installation

This package is intended to be used within the Resident Rise monorepo. Make sure it is correctly linked in your package.json.

Usage

You can import components directly from the package:

import { Button, Card } from 'rr-storybook';

Tailwind CSS Integration

For Tailwind CSS to work correctly with rr-storybook components, you need to do two things in your application's tailwind.config.js:

1. Inherit the theme: Use the preset from rr-storybook to include its custom theme (e.g., colors, shadows).
2. Scan component files: Add the path to the rr-storybook component files to the content array so Tailwind can find the CSS classes.

Here is the recommended configuration:

// tailwind.config.js
const path = require('path');

// It's recommended to use require.resolve to get the absolute path to the package
const rrStorybookPath = path.dirname(require.resolve('rr-storybook/package.json'));

module.exports = {
  presets: [require('rr-storybook/tailwind.preset.js')],
  content: [
    // Your application's source files
    './src/**/*.{js,ts,jsx,tsx}',

    // Path to rr-storybook's components
    `${rrStorybookPath}/src/**/*.{js,ts,jsx,tsx,mdx}`,
  ],
  // ... your other theme customizations
};

Important:

• After changing tailwind.config.js, you must restart your development server.
• If require.resolve('rr-storybook/package.json') fails, it means rr-storybook is not correctly installed or linked in your project's node_modules.

As an alternative to require.resolve, you can use a relative path if you have a simple monorepo structure. For example: "../storybook/src/**/*.{js,ts,jsx,tsx,mdx}". However, this is less robust.