{"_id":"@7span/phoenix-react-components","_rev":"1-b3374231bb1b50fe8b93fc2a89f82e96","name":"@7span/phoenix-react-components","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@7span/phoenix-react-components","version":"1.0.0","keywords":["Action Menu","Action Item","Tab bar","Tab","mui","react","phoenix","phoenix-react","phoenix-react-ui","7span"],"author":{"name":"7span"},"license":"MIT","_id":"@7span/phoenix-react-components@1.0.0","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"homepage":"https://github.com/akshay-7span/react-component-library#readme","bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"dist":{"shasum":"f55f26a756b8b63b7196f2b85d07b72d59aee1ab","tarball":"https://registry.npmjs.org/@7span/phoenix-react-components/-/phoenix-react-components-1.0.0.tgz","fileCount":32,"integrity":"sha512-GZ823dAJ3CrRbHcBAW9g/BcIyES9r90+2QNKQX8ITzH6qYNL7fPJVyR8OmIur4dT5FwYH53eLqtuaSnj9NEsqw==","signatures":[{"sig":"MEYCIQDOnaOol12zJ7x7xCJH2Qbhjg6ty/xKcP+pGI5OX5EhwwIhANfdxXg0k85rCXQZBeZ7s3P+2xu/A2CvtHSgLPkULGUd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":154993},"main":"index.js","gitHead":"2e50a2dc4e8a789a6af6285e132c4370b3da5e9b","scripts":{"dev":"vite","lint":"eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0","prod":"vite --mode production","test":"echo \"Error: no test specified\" && exit 1","build":"vite build","format":"prettier --write src/*/.{js,jsx,css}","preview":"vite preview","staging":"vite --mode staging","lint:fix":"eslint src --fix","build:dev":"vite build --mode development","build:staging":"vite build --mode staging"},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"repository":{"url":"git+https://github.com/akshay-7span/react-component-library.git","type":"git"},"_npmVersion":"10.5.0","description":"A customizable ActionItems, Quiz,Header,Sidebar,TabBar,ProfileMenuItem,Loader,Dropdown,CustomizableModal,Button,PasswordSuggestion,TextFields component for React applications, built with MUI.","directories":{},"_nodeVersion":"20.12.1","dependencies":{"yaml":"^1.10.2","react":"^18.3.1","@mui/lab":"^5.0.0-alpha.171","react-dom":"^18.3.1","react-router":"^6.23.1","@mui/material":"^5.15.20","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@material-ui/lab":"^4.0.0-alpha.61","react-router-dom":"^6.23.1","@mui/icons-material":"^5.15.20"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.8","@babel/cli":"^7.24.7","@babel/core":"^7.24.7","vite-plugin-svgr":"^4.2.0","@babel/preset-env":"^7.24.7","@babel/preset-react":"^7.24.7"},"_npmOperationalInternal":{"tmp":"tmp/phoenix-react-components_1.0.0_1722520716457_0.1283254027042331","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@7span/phoenix-react-components","version":"1.0.1","description":"A customizable ActionItems, Quiz,Header,Sidebar,TabBar,ProfileMenuItem,Loader,Dropdown,CustomizableModal,Button,PasswordSuggestion,TextFields component for React applications, built with MUI.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/akshay-7span/react-component-library.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"vite build","dev":"vite","prod":"vite --mode production","staging":"vite --mode staging","build:dev":"vite build --mode development","build:staging":"vite build --mode staging","lint":"eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0","lint:fix":"eslint src --fix","format":"prettier --write src/*/.{js,jsx,css}","preview":"vite preview"},"keywords":["Action Item","Button","Customizable Modal","Sidebar","Tabbar","TextField","ProfileMenuItem","Loader","Quiz","Header","Dropdown","PasswordSuggestion"],"author":{"name":"7span"},"license":"MIT","dependencies":{"react":"^18.3.1","react-router":"^6.23.1","react-dom":"^18.3.1","yaml":"^1.10.2","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@material-ui/lab":"^4.0.0-alpha.61","@mui/lab":"^5.0.0-alpha.171","@mui/icons-material":"^5.15.20","@mui/material":"^5.15.20","react-router-dom":"^6.23.1"},"bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"homepage":"https://github.com/akshay-7span/react-component-library#readme","devDependencies":{"@babel/cli":"^7.24.7","@babel/core":"^7.24.7","@babel/preset-env":"^7.24.7","@babel/preset-react":"^7.24.7","vite":"^5.0.8","vite-plugin-svgr":"^4.2.0"},"_id":"@7span/phoenix-react-components@1.0.1","gitHead":"6c509cabca4cf7fb3b61a2505a6e69fe45c53390","_nodeVersion":"18.17.1","_npmVersion":"10.5.1","dist":{"integrity":"sha512-Cl7K0AAiAx4WY0w+wEzOz+rx7mnHkrUX1Ks9nrOEeQLW1XJlRGPfUSLQDKcrECq0RJVyidpSeZESUK+Mu2BLsw==","shasum":"06c3177f695c6fed5732429bb87c78d14a8e899e","tarball":"https://registry.npmjs.org/@7span/phoenix-react-components/-/phoenix-react-components-1.0.1.tgz","fileCount":26,"unpackedSize":156030,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC66TePumSOyJ1CpU77oLBLGCNjWC+js1b71oqSiTGRXQIgfx3gDgmRgIYvFnwPX9bEqXWKDgaFjhzIREw2iZ5LYQY="}]},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"directories":{},"maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phoenix-react-components_1.0.1_1722522217793_0.9260592206565053"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-01T13:58:36.369Z","modified":"2024-08-01T14:23:38.153Z","1.0.0":"2024-08-01T13:58:36.626Z","1.0.1":"2024-08-01T14:23:37.976Z"},"bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"author":{"name":"7span"},"license":"MIT","homepage":"https://github.com/akshay-7span/react-component-library#readme","keywords":["Action Item","Button","Customizable Modal","Sidebar","Tabbar","TextField","ProfileMenuItem","Loader","Quiz","Header","Dropdown","PasswordSuggestion"],"repository":{"type":"git","url":"git+https://github.com/akshay-7span/react-component-library.git"},"description":"A customizable ActionItems, Quiz,Header,Sidebar,TabBar,ProfileMenuItem,Loader,Dropdown,CustomizableModal,Button,PasswordSuggestion,TextFields component for React applications, built with MUI.","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"readme":"# Custom phoenix react Component\r\n\r\n`ActionItems` is a React component that renders a customizable `menu` using Material-UI's Menu and MenuItem components. It supports displaying a list of menu items with icons and optional dividers between the items.\r\n\r\n`Header` is a responsive React component designed using Material-UI. It features a customizable app bar that includes a logo, search bar, buttons, and an optional profile component. The component adapts to mobile view by providing a drawer menu.\r\n\r\nA customizable `ProfileMenuItem` component for React applications, built with MUI.\r\n\r\nThe `Quiz` component is a flexible and interactive card component for displaying quiz information. It includes various functionalities such as editing, moving, deleting, and playing a quiz. The component is designed to be customizable and can adapt to different use cases with the help of props.\r\n\r\nA customizable `sidebar` component for React applications, built with MUI.\r\n\r\nThe `TabBar` component is a customizable tab navigation component built with Material-UI. It allows you to switch between different views or sections within a page, providing a clean and user-friendly interface.\r\n\r\n## Installation\r\n\r\nInstall the necessary dependencies:\r\n\r\n```bash\r\nnpm install @mui/material @emotion/react @emotion/styled\r\n```\r\n\r\nInstall the package via npm:\r\n\r\n```bash\r\nnpm install @7span/phoenix-react-components\r\n```\r\n\r\nOr via yarn:\r\n```bash\r\nyarn add @7span/phoenix-react-components\r\n```\r\n\r\n## Usage\r\nHere's a basic example of how to use the custom ActionItems component in your React application:\r\n\r\n```\r\nimport React, { useState } from \"react\";\r\nimport ActionItems from \"@7span/phoenix-react-components\";\r\nimport { Icon1, Icon2 } from \"@mui/icons-material\"; // Replace with your actual icons\r\n\r\nconst MyComponent = () => {\r\n  const [anchorEl, setAnchorEl] = useState(null);\r\n\r\n  const menuItems = [\r\n    {\r\n      name: \"Item 1\",\r\n      icon: Icon1,\r\n      onClick: () => console.log(\"Item 1 clicked\"),\r\n    },\r\n    {\r\n      name: \"Item 2\",\r\n      icon: Icon2,\r\n      onClick: () => console.log(\"Item 2 clicked\"),\r\n    },\r\n  ];\r\n\r\n  const handleClick = (event) => {\r\n    setAnchorEl(event.currentTarget);\r\n  };\r\n\r\n  const handleClose = () => {\r\n    setAnchorEl(null);\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <button onClick={handleClick}>Open Menu</button>\r\n      <ActionItems anchorEl={anchorEl} setAnchorEl={setAnchorEl} menuItems={menuItems} />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default MyComponent;\r\n\r\n\r\n```\r\n\r\n## Props\r\n\r\n| Prop          | Type     | Default | Description                                           |\r\n|---------------|----------|---------|-------------------------------------------------------|\r\n| `anchorEl`    | object   | `null`  | The DOM element used to set the position of the menu  |\r\n| `setAnchorEl` | function | `null`  | Function to set the anchor element for the menu       |\r\n| `menuItems`   | array    | `[]`    | Array of menu items to be displayed in the menu       |\r\n\r\n\r\n\r\n## Customization\r\nYou can customize the styles of the ActionItems component and its elements by modifying the sx prop in the component's JSX.\r\n\r\n## Images\r\n| Actions Menu |\r\n|:-:|\r\n|![Action Image](https://github.com/akshay-7span/react-component-library/blob/VS-237/ActionItems/ActionItems.png)|\r\n\r\n## Author\r\n- Ajay Zala\r\n\r\n## Contributing\r\nIf you would like to contribute to the project, please follow these steps:\r\n1. Fork the repository\r\n2. Create a new branch (git checkout -b feature/your-feature)\r\n3. Make your changes\r\n4. Commit your changes (git commit -m 'Add some feature')\r\n5. Push to the branch (git push origin feature/your-feature)\r\n6. Open a Pull Request\r\n\r\n\r\n## License\r\nThis project is licensed under the MIT License\r\n\r\n## Contact\r\nIf you have any questions or suggestions, feel free to open an issue or contact me directly at [yo@7span.com].\r\n\r\n\r\nMade with by 7span\r\n##### This `README.md` file provides comprehensive details about the ActionItems component, including installation instructions, usage examples, prop descriptions, customization options, and the actual component code. Let me know if you need any more adjustments!\r\n\r\n","readmeFilename":"README.md"}