@jatocoolcompany/ui

React component specialized for French Social Security Numbers

🚀 Overview

@jatocoolcompany/ui is a React library specialized in handling French Social Security Numbers. It provides a SocialSecurityInput component with automatic formatting, validation, and advanced features, built with TypeScript for an optimal development experience.

✨ Features

• 🔢 Automatic Formatting - Guided input by Social Security Number segments
• ✅ Built-in Validation - Automatic control key verification
• 📋 Copy Button - Easy copying of the complete number to clipboard
• 🎯 TypeScript First - Fully typed with complete type definitions
• 🎨 Modular Styling - CSS Modules for encapsulated and customizable styling
• 🌙 Dark Mode Support - Automatic dark mode detection
• 🧪 Complete Testing - Jest and React Testing Library with high coverage
• 📚 Interactive Documentation - Storybook to explore the component
• 🔧 Code Quality - ESLint, Prettier, and strict TypeScript configuration

📦 Installation

npm install jatocoolcompany-ui

yarn add jatocoolcompany-ui

pnpm add jatocoolcompany-ui

🎯 Quick Start

import React from 'react';
import { SocialSecurityInput } from 'jatocoolcompany-ui';

function App() {
  return (
    <SocialSecurityInput 
      label="Social Security Number"
      placeholder="269054958815780"
      onChange={(value) => console.log(value)}
    />
  );
}

🧩 Main Component

SocialSecurityInput

The main component of this library, specifically designed for French Social Security Number input. It automatically divides input into logical segments and calculates the control key.

import { SocialSecurityInput } from 'jatocoolcompany-ui';

<SocialSecurityInput 
  label="Social Security Number"
  placeholder="269054958815780"
  value={ssnValue}
  onChange={handleSSNChange}
  error={errorMessage}
  showCopyButton={true}
  disabled={false}
  className="custom-class"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | 'Social Security Number' | Field label | | placeholder | string | '269054958815780' | Placeholder text | | value | string | - | Controlled value | | onChange | (value: string) => void | - | Change callback | | error | string | - | Error message | | disabled | boolean | false | Disabled state | | className | string | '' | Custom CSS classes | | showCopyButton | boolean | false | Show copy button |

Optional ThemeProvider

Optional context provider for theme configuration (not required for basic usage).

import { ThemeProvider, SocialSecurityInput } from 'jatocoolcompany-ui';

<ThemeProvider theme={{ colors: { primary: '#custom-color' } }}>
  <SocialSecurityInput />
</ThemeProvider>

🎣 Custom Hook

useSocialSecurityInput

Internal hook that handles the formatting and validation logic for Social Security Numbers.

import { useSocialSecurityInput } from 'jatocoolcompany-ui';

const { values, handlers, placeholders } = useSocialSecurityInput({
  onChange: handleChange,
  placeholder: '269054958815780',
  value: currentValue,
});

🛠️ Utilities

Global Configuration

import { setGlobalConfig, getGlobalConfig, resetGlobalConfig } from 'jatocoolcompany-ui';

setGlobalConfig({
  theme: 'light',
  locale: 'fr-FR',
});

const config = getGlobalConfig();

CSS Variables

import { getCSSVariable, createCSSVariables } from 'jatocoolcompany-ui';

const primaryColor = getCSSVariable('--primary-color');
const variables = createCSSVariables({
  '--primary-color': '#007bff',
  '--secondary-color': '#6c757d'
});

🎯 Use Cases

This component is perfect for:

• Administrative Forms - Social Security Number input
• HR Applications - Employee data management
• Healthcare Systems - Patient identification
• Government Applications - Public services online

📝 TypeScript Support

This library is fully built with TypeScript and provides complete type definitions.

import type { 
  SocialSecurityInputProps, 
  GlobalConfig, 
  ThemeConfig 
} from 'jatocoolcompany-ui';

const props: SocialSecurityInputProps = {
  label: 'Social Security Number',
  onChange: (value: string) => console.log(value)
};

🚀 Development

Prerequisites

• Node.js 18+
• npm, yarn or pnpm

Installation

git clone https://github.com/Johanna1506/ui.git
cd ui
npm install

Available Scripts

| Script | Description | |--------|-------------| | npm run dev | Development build with watch mode | | npm run build | Production build | | npm run test | Run tests | | npm run test:coverage | Tests with coverage | | npm run test:watch | Tests in watch mode | | npm run lint | ESLint check | | npm run lint:fix | Auto-fix ESLint issues | | npm run format | Format with Prettier | | npm run storybook | Storybook development server | | npm run build-storybook | Build Storybook for production |

Testing

npm test

Storybook

npm run storybook

Visit http://localhost:6006 to explore the interactive component documentation.

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-component
3. Make your changes
4. Add tests for new functionality
5. Run tests: npm test
6. Check linting: npm run lint
7. Commit your changes: git commit -m 'feat: add new component'
8. Push to the branch: git push origin feature/new-component
9. Submit a pull request

Code Standards

• Use TypeScript for all new components
• Add unit tests for new functionality
• Follow established naming conventions
• Document props and public APIs
• Maintain high test coverage

📄 License

MIT © JatoCool Company

🔗 Links

• GitHub Repository
• Issues
• NPM Package

Specialized in French Social Security Numbers
Built with ❤️ by JatoCool Company