react-french-ssn 1.4.0 → 1.4.1

package/README.md

@@ -298,9 +298,62 @@ const props: SocialSecurityInputProps = {
 
 MIT © JatoCool Company
 
+## 🎮 Testez le composant interactivement
+
+### 🚀 Démo en ligne
+
+**🎮 [Testez le composant directement dans votre navigateur](https://johanna1506.github.io/ui/demo.html)**
+
+Cette démo interactive vous permet de :
+- ✅ Tester le formatage automatique en temps réel
+- ✅ Voir la validation et les messages d'erreur
+- ✅ Comprendre la structure du numéro de sécurité sociale
+- ✅ Essayer différents exemples de numéros
+
+### 📦 Démo CodeSandbox
+
+[![Edit react-french-ssn-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-french-ssn-demo-4xq8k?fontsize=14&hidenavigation=1&theme=dark)
+
+**Cliquez sur le bouton ci-dessus pour tester le composant dans CodeSandbox !**
+
+### 🎯 Fonctionnalités à tester
+
+- ✅ **Formatage automatique** - Tapez `269054958815780` pour voir le découpage
+- ✅ **Validation en temps réel** - Essayez des numéros invalides
+- ✅ **Bouton de copie** - Copiez le numéro formaté
+- ✅ **Accessibilité** - Testez avec le clavier et lecteurs d'écran
+- ✅ **Mode sombre** - Détection automatique du thème
+
+### 🏠 Démo locale avec Storybook
+
+```bash
+# Cloner le repository
+git clone https://github.com/Johanna1506/ui.git
+cd ui
+
+# Installer les dépendances
+npm install
+
+# Lancer Storybook
+npm run storybook
+```
+
+Puis ouvrez [http://localhost:6006](http://localhost:6006) dans votre navigateur.
+
+### 📚 Stories disponibles
+
+- **Interactive** - Composant entièrement interactif pour tester toutes les fonctionnalités
+- **Default** - Version basique du composant
+- **WithLabel** - Avec label personnalisé
+- **WithError** - Avec gestion d'erreur
+- **Disabled** - État désactivé
+- **WithCopyButton** - Avec bouton de copie
+- **WithCustomTexts** - Textes personnalisés
+
 ## 🔗 Links
 
 - [NPM Package](https://www.npmjs.com/package/react-french-ssn)
+- [GitHub Repository](https://github.com/Johanna1506/ui)
 
 ---
 

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

@@ -1 +1,2 @@
 export { default } from './SocialSecurityInput';
+export { default as useSocialSecurityInput } from './useSocialSecurityInput';

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

@@ -1,19 +1,4 @@
-interface UseSocialSecurityInputProps {
-    onChange?: (value: string) => void;
-    placeholder?: string;
-    value?: string;
-    fieldsetId?: string;
-}
-interface SocialSecurityState {
-    sex: string;
-    year: string;
-    month: string;
-    department: string;
-    insee: string;
-    order: string;
-    controlKey: string;
-    error: string;
-}
+import type { UseSocialSecurityInputProps, SocialSecurityState } from '../../types';
 export declare const useSocialSecurityInput: ({ onChange, placeholder, value, fieldsetId }: UseSocialSecurityInputProps) => {
     values: SocialSecurityState;
     handlers: {
@@ -53,4 +38,4 @@ export declare const useSocialSecurityInput: ({ onChange, placeholder, value, fi
         controlKey: string;
     };
 };
-export {};
+export default useSocialSecurityInput;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { default as SocialSecurityInput } from './components/SocialSecurityInput';
+export { useSocialSecurityInput } 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 { SocialSecurityInputProps, UseSocialSecurityInputProps, SocialSecurityState, SocialSecurityHandlers, SocialSecurityPlaceholders } from './types';
 export type { GlobalConfig, ThemeConfig, ComponentConfig } from './config';

package/dist/index.esm.js

@@ -523,4 +523,4 @@ const ThemeProvider = ({ children, theme }) => {
     return jsx(Fragment, { children: children });
 };
 
-export { SocialSecurityInput, ThemeProvider, createCSSVariables, defaultConfig, getCSSVariable, getGlobalConfig, resetGlobalConfig, setGlobalConfig };
+export { SocialSecurityInput, ThemeProvider, createCSSVariables, defaultConfig, getCSSVariable, getGlobalConfig, resetGlobalConfig, setGlobalConfig, useSocialSecurityInput };

package/dist/index.js

@@ -533,3 +533,4 @@ exports.getCSSVariable = getCSSVariable;
 exports.getGlobalConfig = getGlobalConfig;
 exports.resetGlobalConfig = resetGlobalConfig;
 exports.setGlobalConfig = setGlobalConfig;
+exports.useSocialSecurityInput = useSocialSecurityInput;

package/dist/types/index.d.ts

@@ -63,3 +63,54 @@ export interface SocialSecurityInputProps {
         };
     };
 }
+export interface UseSocialSecurityInputProps {
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    value?: string;
+    fieldsetId?: string;
+}
+export interface SocialSecurityState {
+    sex: string;
+    year: string;
+    month: string;
+    department: string;
+    insee: string;
+    order: string;
+    controlKey: string;
+    error: string;
+}
+export interface SocialSecurityHandlers {
+    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;
+    };
+}
+export interface SocialSecurityPlaceholders {
+    sex: string;
+    year: string;
+    month: string;
+    department: string;
+    insee: string;
+    order: string;
+    controlKey: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-french-ssn",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "React component for French Social Security Numbers (NIR) with automatic formatting and validation",
   "type": "module",
   "main": "dist/index.js",
@@ -24,6 +24,7 @@
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx}\"",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "deploy-storybook": "storybook build && gh-pages -d storybook-static",
     "prepublishOnly": "npm run build",
     "release": "semantic-release"
   },
@@ -76,6 +77,7 @@
     "eslint": "^8.53.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "gh-pages": "^6.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",