react-french-ssn 1.3.0

package/README.md

@@ -0,0 +1,192 @@
+# react-french-ssn
+
+<div align="center">
+
+**React component for French Social Security Numbers (NIR)**
+
+[![npm version](https://badge.fury.io/js/react-french-ssn.svg)](https://www.npmjs.com/package/react-french-ssn)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+
+</div>
+
+## 🚀 Overview
+
+`react-french-ssn` is a React library specialized in handling French Social Security Numbers (NIR - Numéro d'Identification au Répertoire). 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
+
+```bash
+npm install react-french-ssn
+```
+
+```bash
+yarn add react-french-ssn
+```
+
+```bash
+pnpm add react-french-ssn
+```
+
+## 🎯 Quick Start
+
+```tsx
+import React from 'react';
+import { SocialSecurityInput } from 'react-french-ssn';
+
+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.
+
+```tsx
+import { SocialSecurityInput } from 'react-french-ssn';
+
+<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).
+
+```tsx
+import { ThemeProvider, SocialSecurityInput } from 'react-french-ssn';
+
+<ThemeProvider theme={{ colors: { primary: '#custom-color' } }}>
+  <SocialSecurityInput />
+</ThemeProvider>
+```
+
+## 🎣 Custom Hook
+
+### useSocialSecurityInput
+
+Internal hook that handles the formatting and validation logic for Social Security Numbers.
+
+```tsx
+import { useSocialSecurityInput } from 'react-french-ssn';
+
+const { values, handlers, placeholders } = useSocialSecurityInput({
+  onChange: handleChange,
+  placeholder: '269054958815780',
+  value: currentValue,
+});
+```
+
+## 🛠️ Utilities
+
+### Global Configuration
+
+```tsx
+import { setGlobalConfig, getGlobalConfig, resetGlobalConfig } from 'react-french-ssn';
+
+setGlobalConfig({
+  theme: 'light',
+  locale: 'fr-FR',
+});
+
+const config = getGlobalConfig();
+```
+
+### CSS Variables
+
+```tsx
+import { getCSSVariable, createCSSVariables } from 'react-french-ssn';
+
+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.
+
+```tsx
+import type { 
+  SocialSecurityInputProps, 
+  GlobalConfig, 
+  ThemeConfig 
+} from 'react-french-ssn';
+
+const props: SocialSecurityInputProps = {
+  label: 'Social Security Number',
+  onChange: (value: string) => console.log(value)
+};
+```
+
+
+
+## 📄 License
+
+MIT © JatoCool Company
+
+## 🔗 Links
+
+- [NPM Package](https://www.npmjs.com/package/react-french-ssn)
+
+---
+
+<div align="center">
+
+**Specialized in French Social Security Numbers**  
+**Built with ❤️ by JatoCool Company**
+
+</div>

package/dist/components/SocialSecurityInput/SocialSecurityInput.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SocialSecurityInputProps } from '../../types';
+declare const SocialSecurityInput: React.FC<SocialSecurityInputProps>;
+export default SocialSecurityInput;
+//# sourceMappingURL=SocialSecurityInput.d.ts.map

package/dist/components/SocialSecurityInput/SocialSecurityInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SocialSecurityInput.d.ts","sourceRoot":"","sources":["../../../src/components/SocialSecurityInput/SocialSecurityInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAIvD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAmK3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/SocialSecurityInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SocialSecurityInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SocialSecurityInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SocialSecurityInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/SocialSecurityInput/useSocialSecurityInput.d.ts

@@ -0,0 +1,56 @@
+interface UseSocialSecurityInputProps {
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    value?: string;
+}
+interface SocialSecurityState {
+    sex: string;
+    year: string;
+    month: string;
+    department: string;
+    insee: string;
+    order: string;
+    controlKey: string;
+    error: string;
+}
+export declare const useSocialSecurityInput: ({ onChange, placeholder, value }: UseSocialSecurityInputProps) => {
+    values: SocialSecurityState;
+    handlers: {
+        sex: {
+            onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+            onPaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
+        };
+        year: {
+            onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+            onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+        };
+        month: {
+            onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+            onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+        };
+        department: {
+            onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+            onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+        };
+        insee: {
+            onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+            onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+        };
+        order: {
+            onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+            onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+        };
+    };
+    parseSocialSecurityNumber: (fullNumber: string) => void;
+    placeholders: {
+        sex: string;
+        year: string;
+        month: string;
+        department: string;
+        insee: string;
+        order: string;
+        controlKey: string;
+    };
+};
+export {};
+//# sourceMappingURL=useSocialSecurityInput.d.ts.map

package/dist/components/SocialSecurityInput/useSocialSecurityInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSocialSecurityInput.d.ts","sourceRoot":"","sources":["../../../src/components/SocialSecurityInput/useSocialSecurityInput.ts"],"names":[],"mappings":"AAEA,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,mBAAmB;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,sBAAsB,GAAI,kCAAsD,2BAA2B;;;;0BAsJpG,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;yBAUpC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;;;0BAarC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;2BAWlC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;;;0BAStC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;2BAWlC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;;;0BAStC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;2BAkBlC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;;;0BAStC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;2BAWlC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;;;0BAStC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;2BAOlC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;;;4CAvJT,MAAM;;;;;;;;;;CAsKtD,CAAC"}

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ThemeConfig } from '../config';
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    theme?: Partial<ThemeConfig>;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export {};
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/components/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/components/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAoC,WAAW,EAAE,MAAM,WAAW,CAAC;AAE1E,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiCtD,CAAC"}

package/dist/config/index.d.ts

@@ -0,0 +1,83 @@
+export interface ThemeConfig {
+    colors: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        background: string;
+        surface: string;
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        border: {
+            default: string;
+            focus: string;
+            error: string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    typography: {
+        fontFamily: string;
+        fontSize: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+        };
+        fontWeight: {
+            normal: number;
+            medium: number;
+            semibold: number;
+            bold: number;
+        };
+    };
+    borderRadius: {
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    shadows: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    breakpoints: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}
+export interface ComponentConfig {
+    button: {
+        defaultVariant: 'primary' | 'secondary' | 'outline';
+        defaultSize: 'small' | 'medium' | 'large';
+        disabledOpacity: number;
+    };
+    input: {
+        defaultType: 'text' | 'email' | 'password' | 'number';
+        disabledOpacity: number;
+    };
+}
+export interface GlobalConfig {
+    theme: ThemeConfig;
+    components: ComponentConfig;
+    prefix: string;
+}
+export declare const defaultConfig: GlobalConfig;
+export declare const setGlobalConfig: (config: Partial<GlobalConfig>) => void;
+export declare const getGlobalConfig: () => GlobalConfig;
+export declare const resetGlobalConfig: () => void;
+//# sourceMappingURL=index.d.ts.map

package/dist/config/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC;YAChB,SAAS,EAAE,MAAM,CAAC;YAClB,QAAQ,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,MAAM,EAAE;YACN,OAAO,EAAE,MAAM,CAAC;YAChB,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;IACF,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,UAAU,EAAE;QACV,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE;YACR,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE,MAAM,CAAC;YACb,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;SACZ,CAAC;QACF,UAAU,EAAE;YACV,MAAM,EAAE,MAAM,CAAC;YACf,MAAM,EAAE,MAAM,CAAC;YACf,QAAQ,EAAE,MAAM,CAAC;YACjB,IAAI,EAAE,MAAM,CAAC;SACd,CAAC;KACH,CAAC;IACF,YAAY,EAAE;QACZ,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,WAAW,EAAE;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE;QACN,cAAc,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;QACpD,WAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;QAC1C,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;QACtD,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,eAAe,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;CAChB;AA6ED,eAAO,MAAM,aAAa,EAAE,YAI3B,CAAC;AAIF,eAAO,MAAM,eAAe,GAAI,QAAQ,OAAO,CAAC,YAAY,CAAC,KAAG,IAa/D,CAAC;AAEF,eAAO,MAAM,eAAe,QAAO,YAElC,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO,IAEpC,CAAC"}

package/dist/decorators/withTheme.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ThemeConfig } from '../config';
+export declare const withTheme: (Story: React.ComponentType, context: {
+    args: {
+        theme?: Partial<ThemeConfig>;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=withTheme.d.ts.map

package/dist/decorators/withTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withTheme.d.ts","sourceRoot":"","sources":["../../src/decorators/withTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,CAAC,aAAa,EAAE,SAAS;IAAE,IAAI,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;KAAE,CAAA;CAAE,4CAQxG,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import './styles/theme.css';
+export { default as SocialSecurityInput } from './components/SocialSecurityInput';
+export { ThemeProvider } from './components/ThemeProvider';
+export { getCSSVariable, createCSSVariables } from './utils/cssVariables';
+export { setGlobalConfig, getGlobalConfig, resetGlobalConfig, defaultConfig } from './config';
+export type { SocialSecurityInputProps } from './types';
+export type { GlobalConfig, ThemeConfig, ComponentConfig } from './config';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EACL,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,aAAa,EACd,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AACxD,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC"}