San FE Dev JS UI

San FE Dev JS UI

A modern React UI component library with TypeScript support and Tailwind CSS styling.

Installation

npm install san-fe-dev-js-ui
# or
yarn add san-fe-dev-js-ui
# or
pnpm add san-fe-dev-js-ui

Usage

Import CSS Styles

Important: You need to import the CSS styles for the components to display correctly.

import {Counter} from 'san-fe-dev-js-ui';
import 'san-fe-dev-js-ui/styles'; // Import the CSS styles

function App() {
    const [count, setCount] = useState(0);
    return (
        <main>
            <h1>My App</h1>
            <Counter initialValue={count} />
        </main>
    );
}

Available Components

• Counter: A simple counter component with increment functionality

Features

• 🚀 Automatic CSS Inclusion: No need to import CSS separately - styles are automatically injected
• ⚡ TypeScript & JavaScript: Write your code in the language you prefer
• 🔥 Blazing fast: pnpm for speedy package management and Vite for lightning-fast builds
• 🎨 Tailwind CSS: Built-in Tailwind CSS support for beautiful styling
• 🧪 Testing: Jest and react-testing-library for robust testing
• 📦 Tree-shaking: Optimized bundle size with proper tree-shaking support

Usage

Before (Old Way)

import {useState} from 'react';
import {Counter} from 'san-fe-dev-js-ui';
import 'san-fe-dev-js-ui/styles'; // ❌ Had to import CSS separately

function App() {
    const [count, setCount] = useState(0);
    return (
        <main>
            <h1>test</h1>
            <Counter initialValue={count} />
        </main>
    );
}

After (New Way)

import {useState} from 'react';
import {Counter} from 'san-fe-dev-js-ui';
// ✅ No CSS import needed! Styles are automatically included

function App() {
    const [count, setCount] = useState(0);
    return (
        <main>
            <h1>test</h1>
            <Counter initialValue={count} />
        </main>
    );
}

How It Works

The library automatically injects styles when imported using a dynamic style injection system:

1. Style Injection: When you import any component, styles are automatically injected into the document head
2. No Duplicates: The system prevents duplicate style injection
3. SSR Safe: Works safely with server-side rendering
4. Zero Dependencies: No external dependencies required

Quickstart

Prerequisites

1. Install Node >= 20.x.
2. Install pnpm. E.g. corepack prepare pnpm@latest --activate.

Installation

Manually clone repo or use degit.

# With CSS Modules config
npx degit github:morewings/react-library-template my-library
# With Tailwind CSS config
npx degit github:morewings/react-library-template#tailwind my-library
cd ./my-library
pnpm i

Enable Tailwind CSS

You can find all changes at this PR and tailwind branch.

Improve tree shaking

The default settings allow modern bundlers such as Vite and esbuild successfully tree-shake unused modules from the bundle. Unfortunately there are problems with Next.js and Webpack not capable to tree-shake single file ES Module.

In order to fix this enable preserveModules setting in Rollup options.

import {defineConfig} from 'vite';

export default defineConfig(() => ({
    // ...
    build: {
        lib: {
            // ...
            fileName: (format, entryName) => {
                // Create entry file(s) inside the bundle
                if (entryName === 'src/lib/index') {
                    return `index.${format === 'es' ? 'js' : 'cjs'}`;
                    // Organize external dependencies which included in the bundle
                } else if (entryName.includes('node_modules')) {
                    return `external/module.${format === 'es' ? 'js' : 'cjs'}`;
                }
                // Keep other modules in places
                return `${entryName}.${format === 'es' ? 'js' : 'cjs'}`;
            },
            // Change bundle formats to ES Modules and commonJS.
            // UMD bundle will not work with preserveModules:true
            formats: ['es', 'cjs'],
        },
        rollupOptions: {
            // ...
            output: {
                // ...
                preserveModules: true,
            },
        },
    },
}));

You can find all changes at corresponding PR and tree-shaking branch.