{"_id":"4yeartransition","name":"4yeartransition","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"4yeartransition","version":"1.0.0","description":"An NPM package that helps create the right Sex/Gender Form Options Based on the Current US Admin","keywords":["Political","Forms","Gender","React","Javascript"],"homepage":"https://github.com/nikhil-desai/4YearTransition#readme","bugs":{"url":"https://github.com/nikhil-desai/4YearTransition/issues"},"repository":{"type":"git","url":"git+https://github.com/nikhil-desai/4YearTransition.git"},"license":"MIT","author":{"name":"Nikhil Designs"},"type":"commonjs","main":"index.js","scripts":{"test":"jest"},"jest":{"testEnvironment":"jest-environment-jsdom","transform":{"^.+\\.[t|j]sx?$":"babel-jest"}},"dependencies":{"prop-types":"^15.8.1","react":"^19.0.0"},"devDependencies":{"@babel/core":"^7.26.10","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.2.0","babel-jest":"^29.7.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0"},"_id":"4yeartransition@1.0.0","gitHead":"c7c51d6a1ef695340d12b8ceed05d88567fbed6b","_nodeVersion":"23.6.1","_npmVersion":"11.1.0","dist":{"integrity":"sha512-PjeN1ePY1qnExVTARV2eTC7C5sHZ4mBrYlqdpH3E6inV3gY2ndDEILwfR4Dnap8IwbjRvCcM+BrCdmAGMDHV0A==","shasum":"b406b2c2da07484062eb8b2cb16e7c3ae135eea8","tarball":"https://registry.npmjs.org/4yeartransition/-/4yeartransition-1.0.0.tgz","fileCount":10,"unpackedSize":20897,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCySWT/RA3KFMLMdWbHr5X2iPGssmP4P8LeYuzG3LBXRAIhAIKxsTMXcO9MwY+TsXr7ja0/7IGvpJb7Gesoq+vPja/1"}]},"_npmUser":{"name":"nikhildesigns","email":"nikhildesigning@gmail.com"},"directories":{},"maintainers":[{"name":"nikhildesigns","email":"nikhildesigning@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/4yeartransition_1.0.0_1742062446818_0.12265305772765434"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-15T18:14:06.817Z","1.0.0":"2025-03-15T18:14:07.001Z","modified":"2025-03-15T18:14:07.293Z"},"maintainers":[{"name":"nikhildesigns","email":"nikhildesigning@gmail.com"}],"description":"An NPM package that helps create the right Sex/Gender Form Options Based on the Current US Admin","homepage":"https://github.com/nikhil-desai/4YearTransition#readme","keywords":["Political","Forms","Gender","React","Javascript"],"repository":{"type":"git","url":"git+https://github.com/nikhil-desai/4YearTransition.git"},"author":{"name":"Nikhil Designs"},"bugs":{"url":"https://github.com/nikhil-desai/4YearTransition/issues"},"license":"MIT","readme":"# 4YearTransition\n\n**4YearTransition** is an npm package that provides a set of form input components for selecting gender/sex. The component displays different options based on the current political party (set by the developer). When the current party is set to \"republican\" (default), only basic options (Male, Female) are shown; when set to \"democrat\", more inclusive options are displayed (with the ability to override or add custom gender options).\n\nThe package supports both **React** components and a **Vanilla JavaScript** function, along with customizable styles (defaulting to red/white/blue “America” colors).\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [React Version](#react-version)\n  - [Vanilla JavaScript Version](#vanilla-javascript-version)\n- [Props and Options](#props-and-options)\n- [Custom Styling](#custom-styling)\n- [Testing](#testing)\n- [Publishing](#publishing)\n- [License](#license)\n\n## Installation\n\nInstall the package via npm:\n\n```bash\nnpm install 4yeartransition\n```\n\n> Note: Make sure your project uses a compatible version of React if you want to use the React component.\n\n## Usage\n\n### React Version\n\nImport the `GenderInput` component from the package:\n\n```jsx\nimport React, { useState } from 'react';\nimport { GenderInput } from '4yeartransition';\n\nfunction App() {\n  const [selectedGender, setSelectedGender] = useState('');\n\n  const handleGenderChange = (e) => {\n    setSelectedGender(e.target.value);\n  };\n\n  return (\n    <div>\n      <h1>Select Gender</h1>\n      <GenderInput\n        currentParty=\"democrat\" // Set to \"republican\" or \"democrat\"\n        inputType=\"radio\"       // Options: \"radio\", \"dropdown\", \"buttonGroup\"\n        onChange={handleGenderChange}\n        // Optionally provide custom gender options for Democrat:\n        democratGenderOptions={[\n          'Male',\n          'Female',\n          'Non-Binary',\n          'Genderqueer', // custom option\n          'Agender',\n          'Prefer Not to Say'\n        ]}\n        // Optionally override default styles:\n        customStyles={{\n          container: { border: '2px solid #002868' },\n          input: { marginRight: '10px' }\n        }}\n      />\n      <p>Selected: {selectedGender}</p>\n    </div>\n  );\n}\n\nexport default App;\n```\n\n### Vanilla JavaScript Version\n\nYou can also use the package in a non-React project. Import the `createGenderInput` function and attach the generated element to your DOM.\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Gender Input Example</title>\n</head>\n<body>\n  <div id=\"form-container\"></div>\n  <script type=\"module\">\n    import { createGenderInput } from '4yeartransition';\n\n    function handleGenderChange(event) {\n      console.log('Selected gender:', event.target.value);\n    }\n\n    const genderInputEl = createGenderInput({\n      inputType: 'dropdown',       // Options: \"radio\", \"dropdown\", \"buttonGroup\"\n      currentParty: 'democrat',    // \"republican\" or \"democrat\"\n      democratGenderOptions: [\n        'Male',\n        'Female',\n        'Non-Binary',\n        'Genderqueer',  // custom option\n        'Agender',\n        'Prefer Not to Say'\n      ],\n      onChange: handleGenderChange,\n      name: 'gender',\n      customStyles: {\n        container: 'border: 2px solid #002868; padding: 10px;',\n        select: 'border: 1px solid #002868; padding: 5px;'\n      }\n    });\n\n    document.getElementById('form-container').appendChild(genderInputEl);\n  </script>\n</body>\n</html>\n```\n\n## Props and Options\n\n### For the React Component (`GenderInput`)\n\n- **`currentParty`** (string):  \n  Set the current political party. Accepted values: \"republican\" or \"democrat\".  \n  **Default:** \"republican\"\n\n- **`inputType`** (string):  \n  Determines the type of input displayed. Options include:\n  - \"radio\"\n  - \"dropdown\"\n  - \"buttonGroup\"\n\n- **`democratGenderOptions`** (array of strings):  \n  When `currentParty` is set to \"democrat\", these options will override the default list.\n\n- **`onChange`** (function, required):  \n  Callback function that gets called when an option is selected.\n\n- **`customStyles`** (object):  \n  An object to override default styling. You can provide styles for:\n  - `container`\n  - `input`\n  - `select`\n  - `button`\n\n- **`name`** (string):  \n  The name attribute for the input elements.  \n  **Default:** \"gender\"\n\n### For the Vanilla JS Function (`createGenderInput`)\n\nAccepts an options object with the same properties as above:\n\n- `currentParty`\n- `inputType`\n- `democratGenderOptions`\n- `onChange`\n- `customStyles`\n- `name`\n\n## Custom Styling\n\nBoth implementations come with default styling that uses red, white, and blue colors. You can override these defaults by passing your own CSS styles via the `customStyles` prop (React) or option (Vanilla JS).\n\nExample for React:\n\n```jsx\ncustomStyles={{\n  container: { border: '3px solid green' },\n  input: { marginRight: '15px' }\n}}\n```\n\n## Testing\n\nTests have been written using **Jest** and **React Testing Library** for the React component and **Jest** (with a jsdom environment) for the Vanilla JS implementation. To run tests, use:\n\n```bash\nnpm test\n```\n\nFor more details, check the `tests` directory in the repository.\n\n## Publishing\n\nAfter making your changes and verifying tests pass, you can publish your package to npm:\n\n1. **Login to npm:**\n   ```bash\n   npm login\n   ```\n2. **Publish your package:**\n   ```bash\n   npm publish\n   ```\n\nYour package will then be available for installation via npm.\n\n## License\n\n[MIT](LICENSE)\n\n","readmeFilename":"README.md","_rev":"1-94383b6c473f99157c9838450ba9985b"}