{"_id":"@ecommerce-uprevo/campaign-components","_rev":"2-8cb82bcba1a48b5dd93a5ff20458f9ae","name":"@ecommerce-uprevo/campaign-components","dist-tags":{"latest":"1.14.5"},"versions":{"1.14.4":{"name":"@ecommerce-uprevo/campaign-components","version":"1.14.4","author":"","license":"MIT","_id":"@ecommerce-uprevo/campaign-components@1.14.4","maintainers":[{"name":"fawaznasser","email":"fawaz.nasser@uprevo.io"},{"name":"uprevo","email":"reda.mousawi@uprevo.io"}],"dist":{"shasum":"fa5e341fac4c712fc2a0488cd77a3f79c3661ddf","tarball":"https://registry.npmjs.org/@ecommerce-uprevo/campaign-components/-/campaign-components-1.14.4.tgz","fileCount":270,"integrity":"sha512-mJVn7NdE7S+aif9APlIRa7T2s6v17JfCSU54zdxIKna872TmWRt1J7iqUIl4FHAaImtK/fyEW4mEO5c0mLwQ4g==","signatures":[{"sig":"MEQCIHVfcVNlQvtWGWg/MHirz+pLrnNbxz2tP58cRr8xITQ2AiAN3hR/zVg5LYHbjvoJHSkX/3vgBi7I0y7h2gNjQnqAxA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":416240},"main":"dist/index.js","module":"dist/index.es.js","scripts":{"dev":"NODE_ENV=development rollup --config -w","lint":"eslint ./src --quiet --ext js,ts,tsx --fix","build":"rimraf ./dist && NODE_ENV=development rollup --config","clean":"rm -rf ./dist","build:production":"rimraf ./dist && NODE_ENV=production rollup --config","generate:component":"npx generate-react-cli component"},"typings":"dist/src/index","_npmUser":{"name":"uprevo","email":"reda.mousawi@uprevo.io"},"_npmVersion":"10.9.2","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","directories":{},"_nodeVersion":"22.15.0","browserslist":["defaults","not IE 11"],"dependencies":{"uuid":"^8.3.2","react":"^18.3.1","lodash":"^4.17.21","react-dom":"^18.3.1","browser-bunyan":"^1.6.3","styled-components":"5.3.11","@ecommerce-uprevo/validators":"1.14.4","@browser-bunyan/console-formatted-stream":"^1.6.2"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","sass":"^1.69.7","tslib":"^2.6.2","eslint":"^8.57.0","rollup":"^2.79.1","postcss":"^8.4.33","typescript":"^5.3.3","@babel/core":"^7.23.7","@types/jest":"^29.5.11","@types/node":"^20.11.4","@types/uuid":"^8.3.0","@types/react":"^18.2.48","autoprefixer":"^10.4.16","@jest/globals":"^29.7.0","@types/lodash":"^4.14.168","jest-canvas-mock":"^2.4.0","identity-obj-proxy":"^3.0.0","rollup-plugin-terser":"^7.0.2","@rollup/plugin-eslint":"^9.0.5","eslint-plugin-cypress":"^2.15.1","eslint-plugin-promise":"^6.1.1","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-replace":"^5.0.5","@testing-library/react":"^14.1.2","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","eslint-plugin-standard":"^5.0.0","@ecommerce-uprevo/types":"1.14.4","@rollup/plugin-commonjs":"^25.0.7","@types/styled-components":"^5.1.24","rollup-plugin-visualizer":"^5.12.0","@testing-library/jest-dom":"^6.2.0","@typescript-eslint/parser":"^7.18.0","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@testing-library/user-event":"^13.1.9","@typescript-eslint/eslint-plugin":"^7.18.0","rollup-plugin-peer-deps-external":"^2.2.4","@ecommerce-uprevo/eslint-config-ecommerce":"1.14.4"},"peerDependencies":{"react":">=18.2","react-dom":">=18.2","browser-bunyan":">=1.6.3","@browser-bunyan/console-formatted-stream":">=1.6.2"},"_npmOperationalInternal":{"tmp":"tmp/campaign-components_1.14.4_1756473189373_0.10039190745885018","host":"s3://npm-registry-packages-npm-production"}},"1.14.5":{"name":"@ecommerce-uprevo/campaign-components","version":"1.14.5","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","@jest/globals":"^29.7.0","@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","@testing-library/user-event":"^13.1.9","@types/jest":"^29.5.11","@types/lodash":"^4.14.168","@types/node":"^20.11.4","@types/react":"^18.2.48","@types/styled-components":"^5.1.24","@types/uuid":"^8.3.0","@typescript-eslint/eslint-plugin":"^7.18.0","@typescript-eslint/parser":"^7.18.0","autoprefixer":"^10.4.16","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-canvas-mock":"^2.4.0","postcss":"^8.4.33","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","tslib":"^2.6.2","typescript":"^5.3.3","@ecommerce-uprevo/types":"1.14.4","@ecommerce-uprevo/eslint-config-ecommerce":"1.14.4"},"peerDependencies":{"@browser-bunyan/console-formatted-stream":">=1.6.2","browser-bunyan":">=1.6.3","react":">=18.2","react-dom":">=18.2"},"browserslist":["defaults","not IE 11"],"dependencies":{"@browser-bunyan/console-formatted-stream":"^1.6.2","browser-bunyan":"^1.6.3","lodash":"^4.17.21","react":"^18.3.1","react-dom":"^18.3.1","styled-components":"5.3.11","uuid":"^8.3.2","@ecommerce-uprevo/validators":"1.9.0"},"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","generate:component":"npx generate-react-cli component","lint":"eslint ./src --quiet --ext js,ts,tsx --fix"},"_id":"@ecommerce-uprevo/campaign-components@1.14.5","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-u7yz25DRqBnMzZz5Rb4tR3eyKkrL22fIhQwNITPGhgJkxoFb0mWBmn36x1XdlBlm/UJVMEFMmVmu0ndOCW7bDQ==","shasum":"cad8d3c74cf3efed6892e2a6f12d08990d8c2fb0","tarball":"https://registry.npmjs.org/@ecommerce-uprevo/campaign-components/-/campaign-components-1.14.5.tgz","fileCount":270,"unpackedSize":416239,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA4on3OWVR0vOEk1JMRF3+mlh+SwnB3Q/YvREMwOsyJ+AiEAspWqGb74Z1kPvmHVB6eXrrSOagc83WWZ05wVLeiTS1E="}]},"_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/campaign-components_1.14.5_1757647380793_0.5878688644873475"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-29T13:13:09.249Z","modified":"2025-09-12T03:23:01.222Z","1.14.4":"2025-08-29T13:13:09.572Z","1.14.5":"2025-09-12T03:23:00.986Z"},"license":"MIT","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","maintainers":[{"name":"fawaznasser","email":"fawaz.nasser@uprevo.io"},{"name":"uprevo","email":"reda.mousawi@uprevo.io"}],"readme":"# Ecommerce 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"}