pixel-react 1.8.1 → 1.8.2

package/src/validations/regex.stories.tsx

@@ -0,0 +1,362 @@
+import React, { useState } from 'react';
+
+import {
+  EMAIL_REGEX,
+  URL_REGEX,
+  PHONE_REGEX,
+  POSTAL_CODE_REGEX,
+  IPV4_REGEX,
+  IPV6_REGEX,
+  HEX_COLOR_REGEX,
+  PASSWORD_SIMPLE_REGEX,
+  PASSWORD_COMPLEX_REGEX,
+  ALPHABET_ONLY_REGEX,
+  NUMBERS_ONLY_REGEX,
+  ALPHANUMERIC_REGEX,
+  DATE_REGEX,
+  TIME_REGEX,
+  FILE_EXTENSION_REGEX,
+  MAC_ADDRESS_REGEX,
+  CREDIT_CARD_REGEX,
+  SSN_REGEX,
+  UUID_REGEX,
+  HTML_TAG_REGEX,
+  WHITESPACE_REGEX,
+  US_ZIP_CODE_REGEX,
+  USERNAME_REGEX,
+  INDIAN_PHONE_REGEX,
+  INDIAN_PIN_CODE_REGEX,
+  GSTIN_REGEX,
+  PAN_CARD_REGEX,
+  AADHAAR_REGEX,
+  VEHICLE_REGISTRATION_REGEX,
+  INDIAN_CURRENCY_REGEX,
+  INTERNATIONAL_PHONE_REGEX,
+  INDIAN_PASSPORT_REGEX,
+  DRIVING_LICENSE_REGEX,
+  USERNAME_SPECIAL_REGEX,
+  DECIMAL_NUMBER_REGEX,
+  HTML_ATTRIBUTE_REGEX,
+  RGB_COLOR_REGEX,
+  HSL_COLOR_REGEX,
+  BASE64_REGEX,
+  BINARY_NUMBER_REGEX,
+  HEXADECIMAL_NUMBER_REGEX,
+  ROMAN_NUMERALS_REGEX,
+  CURRENCY_GENERIC_REGEX,
+  LINKEDIN_PROFILE_REGEX,
+  TWITTER_HANDLE_REGEX,
+} from './regex';
+
+export default {
+  title: 'Regex/Validations',
+};
+
+export const Playground = () => {
+  const [input, setInput] = useState('');
+  const [result, setResult] = useState('');
+  const [selectedRegex, setSelectedRegex] = useState('');
+
+  const validators = [
+    {
+      name: 'EMAIL_REGEX',
+      regex: EMAIL_REGEX,
+      description: 'Validates an email address (e.g. user@example.com)',
+    },
+    {
+      name: 'URL_REGEX',
+      regex: URL_REGEX,
+      description: 'Validates a URL (e.g. https://www.example.com)',
+    },
+    {
+      name: 'PHONE_REGEX',
+      regex: PHONE_REGEX,
+      description: 'Validates a general phone number (e.g. (123) 456-7890)',
+    },
+    {
+      name: 'POSTAL_CODE_REGEX',
+      regex: POSTAL_CODE_REGEX,
+      description: 'Validates postal code format',
+    },
+    {
+      name: 'IPV4_REGEX',
+      regex: IPV4_REGEX,
+      description: 'Validates IPv4 addresses (e.g. 192.168.0.1)',
+    },
+    {
+      name: 'IPV6_REGEX',
+      regex: IPV6_REGEX,
+      description:
+        'Validates IPv6 addresses (e.g. 2001:0db8:85a3:0000:0000:8a2e:0370:7334)',
+    },
+    {
+      name: 'HEX_COLOR_REGEX',
+      regex: HEX_COLOR_REGEX,
+      description: 'Validates hex color codes (e.g. #FFFFFF)',
+    },
+    {
+      name: 'PASSWORD_SIMPLE_REGEX',
+      regex: PASSWORD_SIMPLE_REGEX,
+      description: 'Validates a simple password (e.g. password123)',
+    },
+    {
+      name: 'PASSWORD_COMPLEX_REGEX',
+      regex: PASSWORD_COMPLEX_REGEX,
+      description: 'Validates a complex password (e.g. P@ssw0rd!',
+    },
+    {
+      name: 'ALPHABET_ONLY_REGEX',
+      regex: ALPHABET_ONLY_REGEX,
+      description: 'Validates alphabets only (e.g. abc)',
+    },
+    {
+      name: 'NUMBERS_ONLY_REGEX',
+      regex: NUMBERS_ONLY_REGEX,
+      description: 'Validates numbers only (e.g. 123)',
+    },
+    {
+      name: 'ALPHANUMERIC_REGEX',
+      regex: ALPHANUMERIC_REGEX,
+      description: 'Validates alphanumeric values (e.g. abc123)',
+    },
+    {
+      name: 'DATE_REGEX',
+      regex: DATE_REGEX,
+      description: 'Validates date in YYYY-MM-DD format (e.g. 2024-12-11)',
+    },
+    {
+      name: 'TIME_REGEX',
+      regex: TIME_REGEX,
+      description: 'Validates time in HH:MM:SS format (e.g. 14:30:45)',
+    },
+    {
+      name: 'FILE_EXTENSION_REGEX',
+      regex: FILE_EXTENSION_REGEX,
+      description: 'Validates file extensions (e.g. .jpg, .png)',
+    },
+    {
+      name: 'MAC_ADDRESS_REGEX',
+      regex: MAC_ADDRESS_REGEX,
+      description: 'Validates MAC address (e.g. 00:14:22:01:23:45)',
+    },
+    {
+      name: 'CREDIT_CARD_REGEX',
+      regex: CREDIT_CARD_REGEX,
+      description: 'Validates credit card number (e.g. 1234 5678 9012 3456)',
+    },
+    {
+      name: 'SSN_REGEX',
+      regex: SSN_REGEX,
+      description: 'Validates Social Security Number (e.g. 123-45-6789)',
+    },
+    {
+      name: 'UUID_REGEX',
+      regex: UUID_REGEX,
+      description: 'Validates UUID (e.g. 123e4567-e89b-12d3-a456-426614174000)',
+    },
+    {
+      name: 'HTML_TAG_REGEX',
+      regex: HTML_TAG_REGEX,
+      description: 'Validates HTML tags (e.g. <div>, <span>)',
+    },
+    {
+      name: 'WHITESPACE_REGEX',
+      regex: WHITESPACE_REGEX,
+      description: 'Validates whitespace characters (e.g. spaces, tabs)',
+    },
+    {
+      name: 'US_ZIP_CODE_REGEX',
+      regex: US_ZIP_CODE_REGEX,
+      description: 'Validates US ZIP code (e.g. 90210)',
+    },
+    {
+      name: 'USERNAME_REGEX',
+      regex: USERNAME_REGEX,
+      description: 'Validates username (e.g. user123)',
+    },
+    {
+      name: 'INDIAN_PHONE_REGEX',
+      regex: INDIAN_PHONE_REGEX,
+      description: 'Validates Indian phone number (e.g. +91 9876543210)',
+    },
+    {
+      name: 'INDIAN_PIN_CODE_REGEX',
+      regex: INDIAN_PIN_CODE_REGEX,
+      description: 'Validates Indian PIN code (e.g. 110001)',
+    },
+    {
+      name: 'GSTIN_REGEX',
+      regex: GSTIN_REGEX,
+      description: 'Validates GSTIN number (e.g. 07AACCB1234K1Z5)',
+    },
+    {
+      name: 'PAN_CARD_REGEX',
+      regex: PAN_CARD_REGEX,
+      description: 'Validates PAN card number (e.g. ABCDE1234F)',
+    },
+    {
+      name: 'AADHAAR_REGEX',
+      regex: AADHAAR_REGEX,
+      description: 'Validates Aadhaar number (e.g. 1234 5678 9012)',
+    },
+    {
+      name: 'VEHICLE_REGISTRATION_REGEX',
+      regex: VEHICLE_REGISTRATION_REGEX,
+      description: 'Validates vehicle registration number (e.g. DL 12 AB 1234)',
+    },
+    {
+      name: 'INDIAN_CURRENCY_REGEX',
+      regex: INDIAN_CURRENCY_REGEX,
+      description: 'Validates Indian currency format (e.g. ₹1234.56)',
+    },
+    {
+      name: 'INTERNATIONAL_PHONE_REGEX',
+      regex: INTERNATIONAL_PHONE_REGEX,
+      description:
+        'Validates international phone numbers (e.g. +44 20 7946 0958)',
+    },
+    {
+      name: 'INDIAN_PASSPORT_REGEX',
+      regex: INDIAN_PASSPORT_REGEX,
+      description: 'Validates Indian passport number (e.g. A1234567)',
+    },
+    {
+      name: 'DRIVING_LICENSE_REGEX',
+      regex: DRIVING_LICENSE_REGEX,
+      description: 'Validates driving license number (e.g. DL-123456789012)',
+    },
+    {
+      name: 'USERNAME_SPECIAL_REGEX',
+      regex: USERNAME_SPECIAL_REGEX,
+      description:
+        'Validates username with special characters (e.g. user_123@)',
+    },
+    {
+      name: 'DECIMAL_NUMBER_REGEX',
+      regex: DECIMAL_NUMBER_REGEX,
+      description: 'Validates decimal numbers (e.g. 123.45)',
+    },
+    {
+      name: 'HTML_ATTRIBUTE_REGEX',
+      regex: HTML_ATTRIBUTE_REGEX,
+      description: 'Validates HTML attribute value (e.g. class="my-class")',
+    },
+    {
+      name: 'RGB_COLOR_REGEX',
+      regex: RGB_COLOR_REGEX,
+      description: 'Validates RGB color format (e.g. rgb(255, 0, 0))',
+    },
+    {
+      name: 'HSL_COLOR_REGEX',
+      regex: HSL_COLOR_REGEX,
+      description: 'Validates HSL color format (e.g. hsl(0, 100%, 50%))',
+    },
+    {
+      name: 'BASE64_REGEX',
+      regex: BASE64_REGEX,
+      description: 'Validates base64 encoded string (e.g. aGVsbG8gd29ybGQ=)',
+    },
+    {
+      name: 'BINARY_NUMBER_REGEX',
+      regex: BINARY_NUMBER_REGEX,
+      description: 'Validates binary number (e.g. 1010)',
+    },
+    {
+      name: 'HEXADECIMAL_NUMBER_REGEX',
+      regex: HEXADECIMAL_NUMBER_REGEX,
+      description: 'Validates hexadecimal number (e.g. 1A3F)',
+    },
+    {
+      name: 'ROMAN_NUMERALS_REGEX',
+      regex: ROMAN_NUMERALS_REGEX,
+      description: 'Validates Roman numerals (e.g. IV, X, MM)',
+    },
+    {
+      name: 'CURRENCY_GENERIC_REGEX',
+      regex: CURRENCY_GENERIC_REGEX,
+      description: 'Validates generic currency format (e.g. $123.45)',
+    },
+    {
+      name: 'LINKEDIN_PROFILE_REGEX',
+      regex: LINKEDIN_PROFILE_REGEX,
+      description:
+        'Validates LinkedIn profile URL (e.g. https://www.linkedin.com/in/username)',
+    },
+    {
+      name: 'TWITTER_HANDLE_REGEX',
+      regex: TWITTER_HANDLE_REGEX,
+      description: 'Validates Twitter handle (e.g. @username)',
+    },
+  ];
+
+  const validateInput = () => {
+    const validator = validators.find(
+      (validator) => validator.name === selectedRegex
+    );
+    if (validator && validator.regex) {
+      const isValid = validator.regex.test(input);
+      setResult(isValid ? 'Valid input' : 'Invalid input');
+    } else {
+      setResult('No validator selected');
+    }
+  };
+
+  const handleRegexChange = (e) => {
+    setSelectedRegex(e.target.value);
+    setResult('');
+  };
+
+  const selectedValidator = validators.find(
+    (validator) => validator.name === selectedRegex
+  );
+
+  return (
+    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+      <h1>Validation Regex Playground</h1>
+
+      <select
+        value={selectedRegex}
+        onChange={handleRegexChange}
+        style={{ padding: '10px', width: '300px', marginRight: '10px' }}
+      >
+        <option value="">Select Regex</option>
+        {validators.map((validator) => (
+          <option key={validator.name} value={validator.name}>
+            {validator.name}
+          </option>
+        ))}
+      </select>
+
+      {selectedValidator && (
+        <>
+          <p>
+            <b>{selectedValidator.name}</b>
+          </p>
+          <p style={{ fontStyle: 'italic' }}>{selectedValidator.description}</p>
+        </>
+      )}
+
+      <div style={{ marginTop: '20px' }}>
+        <input
+          type="text"
+          placeholder="Enter input to test"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          style={{ padding: '10px', width: '300px', marginRight: '10px' }}
+        />
+        <button onClick={validateInput} style={{ padding: '10px' }}>
+          Validate
+        </button>
+      </div>
+
+      <div
+        style={{
+          marginTop: '20px',
+          color: result === 'Valid input' ? 'green' : 'red',
+        }}
+      >
+        {result}
+      </div>
+    </div>
+  );
+};

package/src/validations/regex.ts

@@ -0,0 +1,194 @@
+// Validation Regex Collection
+
+// Email Validation
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+// URL Validation
+const URL_REGEX = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w.-]*)*\/?$/;
+
+// Phone Number Validation
+const PHONE_REGEX = /^\+?[\d\s\-()]{7,15}$/;
+
+// Postal Code Validation (Generic)
+const POSTAL_CODE_REGEX = /^[A-Za-z\d\s\-]{3,10}$/;
+
+// IPv4 Address Validation
+const IPV4_REGEX =
+  /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+
+// IPv6 Address Validation
+const IPV6_REGEX = /^(?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}$/;
+
+// Hexadecimal Color Code Validation
+const HEX_COLOR_REGEX = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/;
+
+// Password Validation (At least 8 chars, one letter, one number)
+const PASSWORD_SIMPLE_REGEX = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
+
+// Password Validation (At least 8 chars, one uppercase, one lowercase, one number, one special character)
+const PASSWORD_COMPLEX_REGEX =
+  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+
+// Only Alphabets Validation
+const ALPHABET_ONLY_REGEX = /^[A-Za-z]+$/;
+
+// Only Numbers Validation
+const NUMBERS_ONLY_REGEX = /^\d+$/;
+
+// Alphanumeric Validation
+const ALPHANUMERIC_REGEX = /^[A-Za-z0-9]+$/;
+
+// Date Validation (YYYY-MM-DD)
+const DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/;
+
+// Time Validation (HH:MM:SS)
+const TIME_REGEX = /^\d{2}:\d{2}:\d{2}$/;
+
+// File Extension Validation (e.g., .jpg, .png, .gif, .bmp)
+const FILE_EXTENSION_REGEX = /\.(jpg|png|gif|bmp)$/i;
+
+// MAC Address Validation
+const MAC_ADDRESS_REGEX = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
+
+// Credit Card Number Validation (Basic)
+const CREDIT_CARD_REGEX = /^\d{4}-?\d{4}-?\d{4}-?\d{4}$/;
+
+// Social Security Number (SSN) Validation (US Format)
+const SSN_REGEX = /^\d{3}-\d{2}-\d{4}$/;
+
+// UUID Validation
+const UUID_REGEX =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+// HTML Tags Validation
+const HTML_TAG_REGEX = /<\/?[\w\s=\"'\/\.:;#-]*>/g;
+
+// Whitespace Validation (Leading or Trailing)
+const WHITESPACE_REGEX = /^\s+|\s+$/g;
+
+// US ZIP Code Validation (5 or 9 digits)
+const US_ZIP_CODE_REGEX = /^\d{5}(-\d{4})?$/;
+
+// Username Validation (Alphanumeric, underscores, 3-16 characters)
+const USERNAME_REGEX = /^[a-zA-Z0-9_]{3,16}$/;
+
+// Indian Specific Validations
+
+// Indian Phone Number Validation
+const INDIAN_PHONE_REGEX = /^[6-9]\d{9}$/;
+
+// Indian PIN Code Validation
+const INDIAN_PIN_CODE_REGEX = /^\d{6}$/;
+
+// GSTIN Validation
+const GSTIN_REGEX = /^\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}$/;
+
+// PAN Card Validation
+const PAN_CARD_REGEX = /^[A-Z]{5}\d{4}[A-Z]{1}$/;
+
+// Aadhaar Number Validation
+const AADHAAR_REGEX = /^\d{12}$/;
+
+// Vehicle Registration Validation
+const VEHICLE_REGISTRATION_REGEX = /^[A-Z]{2}\d{2}[A-Z]{0,2}\d{4}$/;
+
+// Indian Currency Format Validation
+const INDIAN_CURRENCY_REGEX = /^\u20B9?\s?\d{1,3}(,\d{3})*(\.\d{1,2})?$/;
+
+// Additional Generic and Specific Validations
+
+// International Phone Number Validation
+const INTERNATIONAL_PHONE_REGEX = /^\+?[1-9]\d{1,14}$/;
+
+// Passport Number Validation (India)
+const INDIAN_PASSPORT_REGEX = /^[A-Z]{1}-?\d{7}$/;
+
+// Driving License Validation (India)
+const DRIVING_LICENSE_REGEX = /^[A-Z]{2}-\d{2}-\d{4}-\d{7}$/;
+
+// Username with Special Characters
+const USERNAME_SPECIAL_REGEX = /^[a-zA-Z0-9._-]{3,16}$/;
+
+// Decimal Number Validation
+const DECIMAL_NUMBER_REGEX = /^-?\d+(\.\d+)?$/;
+
+// HTML Attributes Validation
+const HTML_ATTRIBUTE_REGEX = /\b[a-zA-Z-]+(="[^"]*"|='[^']*'|=[^\s>]*)?/g;
+
+// RGB Color Code Validation
+const RGB_COLOR_REGEX = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;
+
+// HSL Color Code Validation
+const HSL_COLOR_REGEX = /^hsl\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%\)$/;
+
+// Base64 String Validation
+const BASE64_REGEX =
+  /^(?:[A-Za-z0-9+\/]{4})*(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=)?$/;
+
+// Binary Number Validation
+const BINARY_NUMBER_REGEX = /^[01]+$/;
+
+// Hexadecimal Number Validation
+const HEXADECIMAL_NUMBER_REGEX = /^[0-9A-Fa-f]+$/;
+
+// Roman Numerals Validation
+const ROMAN_NUMERALS_REGEX =
+  /^(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})$/;
+
+// Currency Validation (Generic)
+const CURRENCY_GENERIC_REGEX = /^[\u0024-\u20B9]?\d+(,\d{3})*(\.\d{1,2})?$/;
+
+// LinkedIn Profile URL Validation
+const LINKEDIN_PROFILE_REGEX =
+  /^https?:\/\/(www\.)?linkedin\.com\/in\/([a-zA-Z0-9-]{5,30})$/;
+
+// Twitter Handle Validation
+const TWITTER_HANDLE_REGEX = /^@?([a-zA-Z0-9_]{1,15})$/;
+
+export {
+  EMAIL_REGEX,
+  URL_REGEX,
+  PHONE_REGEX,
+  POSTAL_CODE_REGEX,
+  IPV4_REGEX,
+  IPV6_REGEX,
+  HEX_COLOR_REGEX,
+  PASSWORD_SIMPLE_REGEX,
+  PASSWORD_COMPLEX_REGEX,
+  ALPHABET_ONLY_REGEX,
+  NUMBERS_ONLY_REGEX,
+  ALPHANUMERIC_REGEX,
+  DATE_REGEX,
+  TIME_REGEX,
+  FILE_EXTENSION_REGEX,
+  MAC_ADDRESS_REGEX,
+  CREDIT_CARD_REGEX,
+  SSN_REGEX,
+  UUID_REGEX,
+  HTML_TAG_REGEX,
+  WHITESPACE_REGEX,
+  US_ZIP_CODE_REGEX,
+  USERNAME_REGEX,
+  INDIAN_PHONE_REGEX,
+  INDIAN_PIN_CODE_REGEX,
+  GSTIN_REGEX,
+  PAN_CARD_REGEX,
+  AADHAAR_REGEX,
+  VEHICLE_REGISTRATION_REGEX,
+  INDIAN_CURRENCY_REGEX,
+  INTERNATIONAL_PHONE_REGEX,
+  INDIAN_PASSPORT_REGEX,
+  DRIVING_LICENSE_REGEX,
+  USERNAME_SPECIAL_REGEX,
+  DECIMAL_NUMBER_REGEX,
+  HTML_ATTRIBUTE_REGEX,
+  RGB_COLOR_REGEX,
+  HSL_COLOR_REGEX,
+  BASE64_REGEX,
+  BINARY_NUMBER_REGEX,
+  HEXADECIMAL_NUMBER_REGEX,
+  ROMAN_NUMERALS_REGEX,
+  CURRENCY_GENERIC_REGEX,
+  LINKEDIN_PROFILE_REGEX,
+  TWITTER_HANDLE_REGEX,
+};

package/tsconfig.json

@@ -1,55 +1,55 @@
-{
-  "compilerOptions": {
-    /* Language and Environment */
-    "target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
-
-    /* Modules */
-    "module": "ESNext" /* Specify what module code is generated. */,
-    "moduleResolution": "Node" /* Specify how TypeScript looks up a file from a given module specifier. */,
-
-    /* JavaScript Support */
-    "allowJs": false /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
-    "maxNodeModuleJsDepth": 1 /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */,
-
-    /* Emit */
-    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
-    // "emitDeclarationOnly": true /* Only output d.ts files and not JavaScript files. */,
-    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
-    "outDir": "lib" /* Specify an output folder for all emitted files. */,
-    "declarationDir": "lib" /* Specify the output directory for generated declaration files. */,
-
-    /* Interop Constraints */
-    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
-    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
-    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
-
-    /* Type Checking */
-    "strict": true /* Enable all strict type-checking options. */,
-    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
-    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
-    "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
-    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
-    "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
-    "allowUnreachableCode": false /* Disable error reporting for unreachable code. */,
-
-    /* Completeness */
-    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
-    "types": ["vite-plugin-svgr/client"],
-    "noEmit": true,
-
-    //Able to import json file with alias name
-    "resolveJsonModule": true
-
-    // Path alias
-    // "paths": {
-    //   "@components": ["./src/components/"],
-    //   "@styles": ["./src/assets/styles/"],
-    //   "@icons": ["./src/assets/icons/"],
-    //   "@/*": ["./src/*"]
-    // }
-  },
-
-  "include": ["src"],
-  "exclude": ["node_modules", "lib", "**/*.stories.tsx"]
-}
+{
+  "compilerOptions": {
+    /* Language and Environment */
+    "target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
+
+    /* Modules */
+    "module": "ESNext" /* Specify what module code is generated. */,
+    "moduleResolution": "Node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+
+    /* JavaScript Support */
+    "allowJs": false /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
+    "maxNodeModuleJsDepth": 1 /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */,
+
+    /* Emit */
+    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
+    // "emitDeclarationOnly": true /* Only output d.ts files and not JavaScript files. */,
+    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
+    "outDir": "lib" /* Specify an output folder for all emitted files. */,
+    "declarationDir": "lib" /* Specify the output directory for generated declaration files. */,
+
+    /* Interop Constraints */
+    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+    "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
+    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
+    "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
+    "allowUnreachableCode": false /* Disable error reporting for unreachable code. */,
+
+    /* Completeness */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+    "types": ["vite-plugin-svgr/client"],
+    "noEmit": true,
+
+    //Able to import json file with alias name
+    "resolveJsonModule": true
+
+    // Path alias
+    // "paths": {
+    //   "@components": ["./src/components/"],
+    //   "@styles": ["./src/assets/styles/"],
+    //   "@icons": ["./src/assets/icons/"],
+    //   "@/*": ["./src/*"]
+    // }
+  },
+
+  "include": ["src"],
+  "exclude": ["node_modules", "lib", "**/*.stories.tsx"]
+}

package/vite.config.js

@@ -1,14 +1,14 @@
-import react from '@vitejs/plugin-react';
-import path from 'path';
-import svgrPlugin from 'vite-plugin-svgr';
-
-export default {
-  plugins: [
-    react(),
-    svgrPlugin({
-      svgrOptions: {
-        icon: true,
-      },
-    }),
-  ],
-};
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import svgrPlugin from 'vite-plugin-svgr';
+
+export default {
+  plugins: [
+    react(),
+    svgrPlugin({
+      svgrOptions: {
+        icon: true,
+      },
+    }),
+  ],
+};