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, StandardButton} 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} />
            <StandardButton variant="secondary">Click me</StandardButton>
        </main>
    );
}

Available Components

• Counter: A simple counter component with increment functionality
• StandardButton: A versatile button component with multiple variants

StandardButton Variants

import {StandardButton} from 'san-fe-dev-js-ui';

// Primary button (default)
<StandardButton variant="primary">Primary</StandardButton>

// Secondary button
<StandardButton variant="secondary">Secondary</StandardButton>

// Tertiary button
<StandardButton variant="tertiary">Tertiary</StandardButton>

// Text button
<StandardButton variant="text">Text</StandardButton>

// Different sizes
<StandardButton size="sm">Small</StandardButton>
<StandardButton size="md">Medium</StandardButton>
<StandardButton size="lg">Large</StandardButton>

// With icon
<StandardButton icon={<PlusIcon />} iconPosition="left">
  Add Item
</StandardButton>

// Loading state
<StandardButton isLoading>Loading...</StandardButton>

Features

• 🎨 Tailwind CSS: Built with Tailwind CSS for consistent, beautiful styling
• ⚡ TypeScript & JavaScript: Write your code in the language you prefer
• 🔥 Blazing fast: pnpm for speedy package management and Vite for lightning-fast builds
• 🧪 Testing: Jest and react-testing-library for robust testing
• 📦 Tree-shaking: Optimized bundle size with proper tree-shaking support
• 🎯 Explicit CSS: Clear, predictable CSS import system

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.