@schoolmouv/react-kit

v2.1.0

Published

16 days ago

SchoolMouv React UI Component Library

0High
0Medium
0Low

schoolmouv

react ui components schoolmouv design-system

@schoolmouv/react-kit

SchoolMouv React UI Component Library - A modern, tree-shakeable component library optimized for Next.js 14/15/16 projects.

🚀 Features

✅ React 19 - Built with the latest React
✅ TypeScript 5 - Full type safety
✅ ESM-only - Modern ES modules for optimal tree-shaking
✅ Next.js optimized - Works seamlessly with Next.js App Router
✅ Fast builds - Powered by tsup (esbuild)
✅ Storybook 10 - Interactive component documentation
✅ Linted - neostandard ESLint configuration

📦 Installation

# Using pnpm (recommended)
pnpm add @schoolmouv/react-kit

# Using npm
npm install @schoolmouv/react-kit

# Using yarn
yarn add @schoolmouv/react-kit

Peer Dependencies

This library requires the following peer dependencies:

{
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
}

Install them if not already in your project:

pnpm add react react-dom

Note: react-select is included as a regular dependency and will be installed automatically.

🎯 Quick Start

First, import the CSS file in your app's root layout or entry point:

// app/layout.tsx (Next.js App Router)
import '@schoolmouv/react-kit/styles.css'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

Then use the components:

import { Button, Card, Title } from '@schoolmouv/react-kit'

export default function MyComponent() {
  return (
    <Card>
      <Title level={1} variant="primary">Welcome</Title>
      <p>Get started with SchoolMouv React Kit</p>
      <Button onClick={() => alert('Hello!')}>
        Click me
      </Button>
    </Card>
  )
}

📖 Usage

Basic Import

import { Button, Card, Modal } from '@schoolmouv/react-kit'

export default function MyComponent() {
  return (
    <Card>
      <Button variant="primary">Click me</Button>
    </Card>
  )
}

Next.js App Router

All components are marked with "use client" directive and work seamlessly with Next.js 13+ App Router:

// app/page.tsx
import { NavigationConnected, Footer } from '@schoolmouv/react-kit'

export default function Page() {
  return (
    <>
      <NavigationConnected premium firstname="John" degree="1ere" />
      <main>{/* Your content */}</main>
      <Footer />
    </>
  )
}

🛠️ Development

Prerequisites

Node.js 18+ or 20+
pnpm 10+ (recommended) or npm 9+

Setup

# Clone the repository
git clone <repository-url>
cd ui-kit-react

# Install dependencies
pnpm install

# Build the library
pnpm run build

# Run Storybook
pnpm run storybook

# Lint code
pnpm run lint

# Auto-fix linting issues
pnpm run lint:fix

Scripts

pnpm run build - Build the library for production
pnpm run dev - Build in watch mode
pnpm run lint - Lint all files
pnpm run lint:fix - Auto-fix linting issues
pnpm run storybook - Start Storybook dev server
pnpm run build-storybook - Build Storybook for deployment

📚 Documentation

View the interactive component documentation by running Storybook:

pnpm run storybook

Then open http://localhost:6006 in your browser.

Available Components

Buttons

Button - Primary button component
FlatButton - Flat style button
RoundedButtonWithIcon - Rounded button with icon
WideButton - Full-width button
WideButtonWithProfile - Wide button with profile image

Navigation

NavigationConnected - Connected user navigation
Footer - Footer component
Breadcrumb - Breadcrumb navigation
TabBar - Tab navigation bar
Tab - Individual tab component

Layout

Card - Card container
CardCours - Course card
CourseCard - Course information card
Modal - Modal dialog
Accordion - Collapsible accordion

Forms

Input - Text input field
Checkbox - Checkbox input
TagSelector - Tag selection component
TagEditor - Tag editing component
TagList - List of tags

Display

Title - Title component with variants
ChapterTitle - Chapter title display
Summary - Summary component
Table - Data table
List - List component
Loader - Loading spinner
InfoCard - Information card
AppRating - App rating display
Cup - Achievement cup
Cups - Multiple cups display

Subjects

Subject - Subject component
SubjectCard - Subject card
SubjectCardWithDropdown - Subject card with dropdown

Other

Link - Link component
LinkList - List of links
FloatingMenu - Floating menu
GssMenu - GSS menu component

🏗️ Architecture

Build System

Bundler: tsup (esbuild-based)
Output: ESM-only (dist/index.js)
Types: TypeScript declarations (dist/index.d.ts)
Source maps: Included for debugging

Package Structure

dist/
├── index.mjs       # ESM JavaScript bundle (~109KB)
├── index.mjs.map   # JavaScript source map
├── index.css       # Compiled CSS with scoped classnames (~79KB)
├── index.css.map   # CSS source map
└── index.d.ts      # TypeScript declarations (~17KB)

Tree-shaking

The library is fully tree-shakeable. Only imported components will be included in your bundle:

// ✅ Only Button code is included
import { Button } from '@schoolmouv/react-kit'

// ❌ Avoid namespace imports (includes everything)
import * as ReactKit from '@schoolmouv/react-kit'

🎨 Styling

Components use SCSS modules with scoped classnames to avoid conflicts. All styles are compiled into a single CSS file that must be imported in your application.

Importing Styles

Required: Import the CSS file once in your app's root layout or entry point:

// Next.js App Router (app/layout.tsx)
import '@schoolmouv/react-kit/styles.css'

// Next.js Pages Router (_app.tsx)
import '@schoolmouv/react-kit/styles.css'

// Vite/CRA (main.tsx or index.tsx)
import '@schoolmouv/react-kit/styles.css'

CSS Variables

The library uses CSS custom properties for theming. You can override these in your global styles:

:root {
  --primary-02-500: #your-color;
  --spacing-05: 20px;
  /* ... other variables */
}

🔧 Configuration

TypeScript

The library is built with TypeScript 5 and includes full type definitions. Your tsconfig.json should include:

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "target": "ES2020",
    "jsx": "react-jsx"
  }
}

Next.js

For optimal performance in Next.js, ensure your next.config.js includes:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@schoolmouv/react-kit'],
}

module.exports = nextConfig

🚨 Troubleshooting

"Module not found" errors

Make sure all peer dependencies are installed:

pnpm add react@^19.0.0 react-dom@^19.0.0 react-select@^5.10.2

Styles not loading

Make sure you've imported the CSS file in your app's root:

import '@schoolmouv/react-kit/styles.css'

If you're using a bundler that doesn't support CSS imports, you may need to configure it to handle CSS files from node_modules.

TypeScript errors

Ensure you're using TypeScript 5.0+ and have @types/react and @types/react-dom installed.

📊 Bundle Size

JavaScript (ESM): ~109KB (uncompressed)
CSS: ~79KB (uncompressed)
TypeScript Declarations: ~17KB
Total: ~205KB (uncompressed)
Tree-shakeable: Import only the components you need to reduce JS bundle size

🔄 Migration from v1.x

Version 2.0 includes breaking changes:

ESM-only: No CommonJS support
React 19: Minimum React version is 19.0.0
pnpm: Now using pnpm as the package manager
Build system: Migrated from Rollup to tsup for faster builds

📄 License

[Your License Here]

🤝 Contributing

[Contributing guidelines here]

📞 Support

For issues and questions, please visit [your support channel].

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@schoolmouv/react-kit

Table of Contents

🚀 Features

📦 Installation

Peer Dependencies

🎯 Quick Start

📖 Usage

Basic Import

Next.js App Router

🛠️ Development

Prerequisites

Setup

Scripts

📚 Documentation

Available Components

Buttons

Navigation

Layout

Forms

Display

Subjects

Other

🏗️ Architecture

Build System

Package Structure

Tree-shaking

🎨 Styling

Importing Styles

CSS Variables

🔧 Configuration

TypeScript

Next.js

🚨 Troubleshooting

"Module not found" errors

Styles not loading

TypeScript errors

📊 Bundle Size

🔄 Migration from v1.x

📄 License

🤝 Contributing

📞 Support