{"_id":"@ecommerce-uprevo/color-picker","name":"@ecommerce-uprevo/color-picker","dist-tags":{"latest":"1.9.0"},"versions":{"1.9.0":{"name":"@ecommerce-uprevo/color-picker","version":"1.9.0","description":"### Basic Idea behind file/folders naming Each standalone components (Button,Image,Text etc) are considered as atoms.<br>  Any component that is a combination of multiple atoms is considered a molecule","main":"dist/index.js","typings":"dist/src/index","module":"dist/index.es.js","author":"","license":"MIT","devDependencies":{"@babel/core":"^7.23.7","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-eslint":"^9.0.5","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@testing-library/jest-dom":"^6.2.0","@testing-library/react":"^14.1.2","@types/draft-js":"^0.11.17","@types/jest":"^29.5.11","@types/node":"^20.11.4","@types/react":"^18.3.3","@types/react-color":"^3.0.12","@types/react-dom":"^18.3.0","@typescript-eslint/eslint-plugin":"^7.18.0","@typescript-eslint/parser":"^7.18.0","autoprefixer":"^10.4.16","browserslist":"^4.17.4","dotenv-webpack":"^7.1.0","eslint":"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-plugin-cypress":"^2.15.1","eslint-plugin-prettier":"^5.1.3","eslint-plugin-promise":"^6.1.1","eslint-plugin-standard":"^5.0.0","identity-obj-proxy":"^3.0.0","jest":"^29.7.0","jest-junit":"^13.0.0","postcss":"^8.4.33","react":"^18.3.1","react-dom":"^18.3.1","rollup":"^2.79.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.36.0","rollup-plugin-visualizer":"^5.12.0","sass":"^1.69.7","sass-loader":"^12.3.0","styled-components":"^5.3.11","ts-jest":"^29.1.1","typescript":"^5.3.3","@ecommerce-uprevo/eslint-config-ecommerce":"1.9.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"browserslist":["defaults","not IE 11"],"dependencies":{"react-color":"^2.19.3"},"overrides":{"@types/react-dom":"^18.3.0","@types/react":"^18.3.3"},"scripts":{"clean":"rm -rf ./dist","build":"rimraf ./dist && NODE_ENV=development rollup --config","build:production":"rimraf ./dist && NODE_ENV=production rollup --config","dev":"NODE_ENV=development rollup --config -w","lint":"eslint ./src --quiet --ext js,ts,tsx --fix"},"_id":"@ecommerce-uprevo/color-picker@1.9.0","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-OJXHZ5S1KawM+kqMZqw5fRf1t+94J6fDyQ9KazQtjNvavpPdbuB+J1+YN/9T4MH17H7UCt/HFoTIYfUmVQcqFQ==","shasum":"429a2497979d3c6c3b28e4c4064b64250633a51b","tarball":"https://registry.npmjs.org/@ecommerce-uprevo/color-picker/-/color-picker-1.9.0.tgz","fileCount":6,"unpackedSize":278610,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDRh2Z39yjLZ6DDGmjwIAR6aj9AECfjZ7JK0yRWSHm6ZwIhAKLgm9nPDV6oxkhVCPNnqDv+iZFkUGt6LskOAx5F5IKs"}]},"_npmUser":{"name":"uprevo","email":"reda.mousawi@uprevo.io"},"directories":{},"maintainers":[{"name":"fawaznasser","email":"fawaz.nasser@uprevo.io"},{"name":"uprevo","email":"reda.mousawi@uprevo.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/color-picker_1.9.0_1756473433791_0.6669008041669993"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-29T13:17:13.734Z","1.9.0":"2025-08-29T13:17:13.985Z","modified":"2025-08-29T13:17:14.238Z"},"maintainers":[{"name":"fawaznasser","email":"fawaz.nasser@uprevo.io"},{"name":"uprevo","email":"reda.mousawi@uprevo.io"}],"description":"### Basic Idea behind file/folders naming Each standalone components (Button,Image,Text etc) are considered as atoms.<br>  Any component that is a combination of multiple atoms is considered a molecule","license":"MIT","readme":"# Socital Campaign Elements\n\n### Basic Idea behind file/folders naming\nEach standalone components (Button,Image,Text etc) are considered as atoms.<br> \nAny component that is a combination of multiple atoms is considered a molecule\n\n### Basic scripts to run\n\nStart storybook\n````shell\nyarn storybook\n````\nStart storybook (without caching enabled)\n```shell\nyarn storybook:no-cache\n```\nStart development procedure\n````shell\nyarn dev\n````\nBuild files for production\n````shell\nyarn build\n````\nGenerate an atom based on preconfigured templates\n```shell\nyarn generate:component <AtomName>\n```\n\n### Components files structure\n\n#### Atoms\n\nEach atom contains at least 5 files\n\n- Atom.scss\n- Atom.stories.tsx\n- Atom.test.tsx\n- Atom.tsx\n- config.ts\n\nKey points of the atom development procedure\n\n- Every config.ts file exports AtomProps interface and a SampleData object\n- If an atom can be styled dynamically, AtomProps extends an AtomStylingProps type with the enabled css properties this atom can be configured\n- If an atom can be styled dynamically, we should use `styled-components` as bellow (Text example):\n```javascript\n    const StyledText = styled['p']((props: TextStylingProps) => ({\n        color: props.fontColor,\n        fontSize: props.fontSize,\n        textAlign: props.textAlignment,\n        lineHeight: props.lineHeight\n}))\n```\n\n### Ways to export atomic components and utils\n\nLibrary should export as a default object all the available atoms, molecules etc that should be used as the composition view\n```javascript\nexport default {\n    Layout,\n    Button,\n    Image,\n    Text\n}\n```\nAny component we want to expose as an util should be exported separately \n```javascript\nexport {\n    Composition,\n    customHooks,\n    helpers,\n    etc\n}\n```","readmeFilename":"README.md","_rev":"1-747baee0e7426bcc0155091797bb62bc"}