{"_id":"@councilhclsym/aem-core-components-react-base","name":"@councilhclsym/aem-core-components-react-base","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@councilhclsym/aem-core-components-react-base","version":"0.0.1","license":"Apache-2.0","keywords":["adobe","aem","cq5","react","core","components"],"description":"AEM - React Implementation for the AEM Core Components","author":{"name":"CouncilHclSym."},"main":"dist/index.js","types":"dist/index.d.ts","homepage":"https://github.com/cqsapient/councilhclsym-aem-core-components-react-base/blob/master/README.md","repository":{"type":"git","url":"git+https://github.com/cqsapient/councilhclsym-aem-core-components-react-base.git"},"scripts":{"clean":"shx rm -rf coverage/ dist/ src/tsconfig.types.tsbuildinfo","linter":"eslint --ext .ts,.tsx .","linter:fix":"eslint --ext .ts,.tsx . --fix","build":"npm run clean && webpack --config config/webpack.config.core.js  && webpack --config config/webpack.config.lib.js  &&   tsc -p src/tsconfig.types.json","build:production":"npm run clean && cross-env NODE_ENV=production webpack  --config config/webpack.config.core.js --mode=production && webpack --config config/webpack.config.lib.js  --mode=production &&  tsc -p src/tsconfig.types.json","build:types":"npm run clean && tsc -p src/tsconfig.types.json","docs":"jsdoc -c ./jsdoc_conf.json && doxdox \"src/**/*.+(js|jsx)\" --layout templates/DOCUMENTATION.hbs --output DOCUMENTATION.md","readme":"node node_modules/markdown-include/bin/cli.js markdown-include.config.json","docs-readme":"npm run docs && npm run readme","semantic-release":"semantic-release"},"peerDependencies":{"react":"^18.2.0","react-router-dom":"^6.16.0"},"devDependencies":{"@babel/cli":"^7.10.5","@babel/core":"^7.11.4","@babel/preset-env":"^7.11.0","@babel/preset-react":"^7.10.4","@babel/preset-typescript":"^7.22.15","@cfaester/enzyme-adapter-react-18":"^0.7.1","@semantic-release/changelog":"^5.0.1","@semantic-release/git":"^9.0.0","@semantic-release/github":"^7.2.0","@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.5.0","@testing-library/user-event":"^7.2.1","@types/enzyme":"^3.10.5","@types/jest":"^26.0.14","@types/node":"^12.20.10","@typescript-eslint/eslint-plugin":"^3.9.0","@typescript-eslint/parser":"^3.9.0","babel-plugin-istanbul":"^5.2.0","chai":"^4.2.0","clean-webpack-plugin":"^3.0.0","commitizen":"^4.2.3","cross-env":"^6.0.3","cz-conventional-changelog":"^3.3.0","doxdox":"^3.0.0","enzyme":"^3.11.0","eslint":"^6.8.0","istanbul":"^0.4.5","istanbul-instrumenter-loader":"^3.0.1","jest":"^29.7.0","jest-environment-jsdom-fourteen":"1.0.1","jest-resolve":"26.6.2","jest-watch-typeahead":"0.6.3","jsdoc":"^3.6.5","markdown-include":"^0.4.3","prop-types":"^15.7.2","react":"^18.2.0","react-dom":"^18.2.0","react-router-dom":"^6.16.0","semantic-release":"^17.4.1","shx":"^0.3.2","source-map-loader":"^1.1.0","ts-jest":"^29.1.1","ts-loader":"^9.4.4","typescript":"^5.2.2","webpack":"^5.88.2","webpack-cli":"^5.1.4","webpack-manifest-plugin":"^5.0.0","webpack-node-externals":"^1.7.2"},"eslintConfig":{"extends":"plugin:@typescript-eslint/recommended","parser":"@typescript-eslint/parser","parserOptions":{"ecmaVersion":2020,"sourceType":"module"},"rules":{"@typescript-eslint/no-empty-interface":0}},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"release":{"plugins":["@semantic-release/commit-analyzer","@semantic-release/release-notes-generator","@semantic-release/npm",["@semantic-release/git",{"assets":["package.json"]}]]},"dependencies":{"@cfaester/enzyme-adapter-react-18":"^0.7.1","babel-loader":"^9.1.3","babelrc":"^0.0.7","ts-node":"^10.9.1","ts-node-dev":"^2.0.0"},"gitHead":"3c5492e27e0ab6ff6cc326d41af728751bad44be","bugs":{"url":"https://github.com/cqsapient/councilhclsym-aem-core-components-react-base/issues"},"_id":"@councilhclsym/aem-core-components-react-base@0.0.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-oORPlnuXo5vOZFeCRy4DuocDJuFzYxznKtGxk8ufezv8o2YFZAHWKq1zQoIAgRU0X7M94W4XPh2jTLpCiryYgw==","shasum":"89bf47bcdfe64aa2f69ae2551e73bc64a4add322","tarball":"https://registry.npmjs.org/@councilhclsym/aem-core-components-react-base/-/aem-core-components-react-base-0.0.1.tgz","fileCount":109,"unpackedSize":11070741,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzpjD449/hUHo92Z5pojHarw+BQqK3s8LAPYIzdUkIjQIgRXYCZdBABWLPak7jXFC6z2NxW7I3BVPRdMlyX3o1vPo="}]},"_npmUser":{"name":"deepankarcouncil","email":"deepankar.dhoundiyal@brisbane.qld.gov.au"},"directories":{},"maintainers":[{"name":"deepankarcouncil","email":"deepankar.dhoundiyal@brisbane.qld.gov.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/aem-core-components-react-base_0.0.1_1695807476231_0.05765565672036055"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-27T09:37:56.094Z","0.0.1":"2023-09-27T09:37:56.607Z","modified":"2023-09-27T09:37:56.863Z"},"maintainers":[{"name":"deepankarcouncil","email":"deepankar.dhoundiyal@brisbane.qld.gov.au"}],"description":"AEM - React Implementation for the AEM Core Components","homepage":"https://github.com/cqsapient/councilhclsym-aem-core-components-react-base/blob/master/README.md","keywords":["adobe","aem","cq5","react","core","components"],"repository":{"type":"git","url":"git+https://github.com/cqsapient/councilhclsym-aem-core-components-react-base.git"},"author":{"name":"CouncilHclSym."},"bugs":{"url":"https://github.com/cqsapient/councilhclsym-aem-core-components-react-base/issues"},"license":"Apache-2.0","readme":"# AEM WCM Components - React Core implementation\n\nThis module provides a React implementation for the [AEM core components](https://www.aemcomponents.dev/). \nThis enables you to use the core components:\n-In the [AEM SPA editor](https://docs.adobe.com/content/help/en/experience-manager-64/developing/headless/spas/spa-overview.html) with React\n-In [React web components](https://www.npmjs.com/package/@adobe/react-webcomponent)\n-Or in any other React context, provided you have the input needed to instantiate the components.\n\n[Introduction Video and Demo](https://www.youtube.com/watch?v=9759AhM7fAc)\n\nCurrent supported / exported components:\n\n### Page Authoring\n - Button (V1)\n - Download (V1)\n - Image (V2)\n - List (V2)\n - Separator (V1)\n - Teaser (V1)\n - Text (V2)\n - Title (V2)\n\n### Layout\n - BreadCrumb (V2)\n - Language Navigation (V1)\n - Navigation (V1)\n \n### Abstraction\n-  AbstractCoreComponent\n-  CoreComponentModel (interface)\n\n### Containers\nFor the containers (Accordion,Tabs,Carousel,Container) we do not provide any implementation in this project.\nIt does not make sense to provide it for web-components as you can leverage the normal Core Components implementation such as a Tab Container, and drag your web components in there.\nInstead we provide them for the SPA editor only, introducing a dependency, and therefore we moved it into a [separate project](https://www.npmjs.com/package/@adobe/aem-core-components-react-spa).\n\n\n## Usage\n\nYou can choose to import the entire library at once OR import components individually. \nThe latter is useful if you want to only enable a few components and you want to save your javascript footprint.\nAlso, if you want to load all core components, but you want to lazyload them with react suspense, you will need to import them individually.\n\n### Importing the whole library: \n\n```\nimport * as BaseCoreComponents from \"@adobe/aem-core-components-react-base\";\nconst {ButtonV1, ButtonV1Model, ButtonV1IsEmptyFn} = BaseCoreComponents;\n```\n\n### Importing the button component individually:\n \n```\nimport ButtonV1, {ButtonV1Model, ButtonV1IsEmptyFn} from \"@adobe/aem-core-components-react-base/dist/authoring/button/v1/ButtonV1\";\n```\n\n### Using the imported code\n\nNow that you have the Button and ButtonV1IsEmptyFn imported, you can use them in your project.\nThe properties of the Button 1 on 1 correspond to the Sling Model Exporter (.model.json) output.\n\nNote: There are some exceptions where some extra properties are added (mainly i18n labels) that are currently not present in the OOTB sling model exports.\nThese can be added by the project itself with delegation. If they are not present, the default (English) values will be used.\n\n#### Button - Direct instantiation with TypeScript:\n```\nconst modelProps:ButtonV1Model = {\n    text: 'Example Button',\n    link: '/content/my/awesome/page.html',\n    icon: 'iconCssCLass'\n};\n\nconst html:JSX.Element = (<ButtonV1 {...modelProps}/>);\n```\n\n\n#### Button - Example with the spa editor:\n\n```\nMapTo('my-project/wcm/components/button')(ButtonV1, {isEmpty: ButtonV1IsEmptyFn});\n```\n\nFor a complete project with examples, visit the [github page](https://github.com/adobe/aem-react-core-wcm-components/tree/master/examples).","readmeFilename":"README.md"}