{"_id":"@cristianodmtsb/colmeia","_rev":"1-adaa9d68d23f38837cea30dd7b65b698","name":"@cristianodmtsb/colmeia","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cristianodmtsb/colmeia","version":"1.0.0","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/cristianodmtsb/colmeia.git"},"author":{"name":"Cristianodmtsb"},"license":"ISC","scripts":{"storybook":"start-storybook -s ./public","storybook:build":"build-storybook -c .storybook -o storybook-dist -s ./public","test":"jest"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged","commit-msg":"commitlint -E HUSKY_GIT_PARAMS","prepare-commit-msg":"exec < /dev/tty && git cz --hook || true"}},"devDependencies":{"@apollo/react-hooks":"^3.1.4","@babel/core":"^7.8.7","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/plugin-transform-modules-commonjs":"^7.8.3","@babel/plugin-transform-runtime":"^7.9.0","@babel/preset-env":"^7.8.7","@babel/preset-react":"^7.8.3","@commitlint/cli":"^8.3.5","@commitlint/config-conventional":"^8.3.4","@magento/peregrine":"~6.0.0","@magento/pwa-buildpack":"~5.1.1","@magento/venia-ui":"~3.0.0","@storybook/addon-backgrounds":"^5.3.14","@storybook/addon-docs":"^5.3.14","@storybook/addon-knobs":"^5.3.14","@storybook/addon-storysource":"^5.3.14","@storybook/addon-viewport":"^5.3.14","@storybook/react":"^5.3.14","@testing-library/jest-dom":"^5.1.1","@testing-library/react":"^10.0.2","apollo-cache-inmemory":"^1.6.5","apollo-cache-persist":"^0.1.1","apollo-client":"^2.6.8","apollo-link-http":"^1.5.16","apollo-storybook-react":"^0.2.4","babel-jest":"^25.1.0","babel-loader":"^8.0.6","commitizen":"^4.0.3","cz-conventional-changelog":"3.1.0","graphql":"^15.0.0","graphql-tag":"^2.10.3","husky":"^4.2.3","identity-obj-proxy":"^3.0.0","jest":"^25.1.0","jest-canvas-mock":"^2.2.0","jest-fetch-mock":"^3.0.3","jest-transform-graphql":"^2.1.0","mock-apollo-client":"^0.3.0","node-sass":"^4.13.1","postcss-preset-env":"^6.7.0","prettier":"1.19.1","pretty-quick":"^2.0.1","react":"^16.13.1","react-apollo":"^3.1.4","react-dom":"^16.13.1","react-redux":"^7.2.0","react-router-dom":"^5.1.2","react-tabs":"^3.1.0","react-test-renderer":"^16.13.1","redux":"^4.0.5","sass-loader":"^8.0.2","storybook-design-token":"^0.5.1","svg-spritemap-webpack-plugin":"^3.5.5","workbox-webpack-plugin":"^5.1.2"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"dependencies":{"cep-promise":"^3.0.9","i18next":"^19.4.2","react-i18next":"^11.3.4","react-input-mask":"^2.0.4","react-lottie":"^1.2.3"},"gitHead":"c8da8d8715b84ab530bca9847a9bffca67b5b29b","description":"- [Colmeia](#Colmeia) - [Access](#Access) - [Usage](#Usage) - [Css](#Css) - [FallbackMapping](#FallbackMapping) - [Add new svg icons to sprite](#add-new-svg-icons-to-sprite) - [Configuring SASS](#configuring-sass) - [Dependencies with PWA Studio](#depende","bugs":{"url":"https://github.com/cristianodmtsb/colmeia/issues"},"homepage":"https://github.com/cristianodmtsb/colmeia#readme","_id":"@cristianodmtsb/colmeia@1.0.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-5eLQ+du4zilCpW5ojnLqehMcMMLzYLv66EdJ8H+o5I1zV6LDr/PzccUDcFHL5aLqagGdIj04xYWqPa48VcufXg==","shasum":"c6a9b470ca908aa109eb4ed0db01a9f97c6b4b2e","tarball":"https://registry.npmjs.org/@cristianodmtsb/colmeia/-/colmeia-1.0.0.tgz","fileCount":240,"unpackedSize":283884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht6cgCRA9TVsSAnZWagAA+UsP/03KINML1rFquueUZDV4\njRltcN4Xf6vVRKXLt5wZOoeWvIJFoHHeDT5zNJ0JAGCcOK9bnK9m7q3z0sPD\ne+wdyIpZoCHGIwZC7F7u+CY7aO94QBmYkuhshWyBPz7+jZZOTXUHTaD532Jb\noj5/2cRb1KgelFfAGslbkkXXsShirAI3DMHFQM58dv6IsmcAatsJZ6iigNUY\nVwQ1t5AelMNspeqjUppgSNtYFOgICjH9oiv6tpduP/TDNTZ0xlpVNY9GcQaw\nK8CV1Ws2oDpcYzg+i3JbWbpEz6IGmnzc360gfQ8tGcRVMe9ulGLY60XTcwFI\neYul/CnDJ5L6U1Sd4lkc+jP8IWWLxN7EjkCcKari54XyXy38DWON3v1grz7J\niYfXW+9k8ot3UVbkR6/hIyAVGDQIjEmBOjrtoY9KNnJmQqs9yyG1kMkItZM2\nU8FyFgLT9OOlqCdphfTQNba4g8Yp35j6VObZNwZgizwqKa0GFLSdyqwGXBKi\n/BPtJ5hptUIXa/BA+Gimv6rZDRNGJ9KI7cQr9HXqJK0n9+Q79jt/5p08FnPO\nQG0v7RumN8vjD6HS5XVuP/WdBPEzF3z3QeUETooQa3WpGwKUGHEt6fESufiK\nFN4kvmGoBHWaYmKddFXSVotJFnjl5aYF0flnJW6a5EMzqZb8rZMf39+5BnDr\nkIbI\r\n=9L16\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjTXUdAE4+LN85i+QghHXSeIeIZu7M8S1vNTxO+zLi4AiBIiFsoLxG6z/FNKG6r0HzHZdSu9O4puC1h6tWYLei/zQ=="}]},"_npmUser":{"name":"cristianodmtsb","email":"cristianodmtsb@gmail.com"},"directories":{},"maintainers":[{"name":"cristianodmtsb","email":"cristianodmtsb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/colmeia_1.0.0_1639425824144_0.36282618146575385"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-13T20:03:44.095Z","1.0.0":"2021-12-13T20:03:44.287Z","modified":"2022-04-05T01:50:06.408Z"},"maintainers":[{"name":"cristianodmtsb","email":"cristianodmtsb@gmail.com"}],"description":"- [Colmeia](#Colmeia) - [Access](#Access) - [Usage](#Usage) - [Css](#Css) - [FallbackMapping](#FallbackMapping) - [Add new svg icons to sprite](#add-new-svg-icons-to-sprite) - [Configuring SASS](#configuring-sass) - [Dependencies with PWA Studio](#depende","homepage":"https://github.com/cristianodmtsb/colmeia#readme","repository":{"type":"git","url":"git+https://github.com/cristianodmtsb/colmeia.git"},"author":{"name":"Cristianodmtsb"},"bugs":{"url":"https://github.com/cristianodmtsb/colmeia/issues"},"license":"ISC","readme":"# Colmeia\n\n- [Colmeia](#Colmeia)\n- [Access](#Access)\n- [Usage](#Usage)\n- [Css](#Css)\n- [FallbackMapping](#FallbackMapping)\n- [Add new svg icons to sprite](#add-new-svg-icons-to-sprite)\n- [Configuring SASS](#configuring-sass)\n- [Dependencies with PWA Studio](#dependencies-with-pwa-studio)\n- [peer-dependency](#peer-dependency)\n- [Autoprefix](#autoprefix)\n- [Contributing](#contributing)\n\n# Access\n\n**[https://colmeia.now.sh/](https://colmeia.now.sh/)**\n\n# Usage\n\n```shell\nyarn add @cristianodmtsb/colmeia\n```\n\nThen open the `webpack.config.js` file, find the usage of `configureWebpack` method and add the following block inside the `special` node:\n\n```javascript\n'@cristianodmtsb/colmeia': {\n    cssModules: true,\n    esModules: true,\n    graphqlQueries: true,\n    rootComponents: false,\n    upward: false\n}\n```\n\nIt will be like this:\n\n```javascript\nspecial: {\n    'react-feather': {\n        esModules: true\n    },\n    '@magento/peregrine': {\n        esModules: true,\n        cssModules: true\n    },\n    '@magento/venia-ui': {\n        cssModules: true,\n        esModules: true,\n        graphqlQueries: true,\n        rootComponents: true,\n        upward: true\n    },\n    '@cristianodmtsb/colmeia': {\n        cssModules: true,\n        esModules: true,\n        graphqlQueries: true,\n        rootComponents: false,\n        upward: false\n    }\n},\n```\n\n\n## Css \n\nAdd the css from colmeia in `src/index.js`\n\n```javascript\nimport '@cristianodmtsb/colmeia/lib/index.css';\n```\n\n## FallbackMapping\n\nAdd the plugin to map the Venia fallback files that Colmeia is using.\n\nOpen your `webpack.config.js`, import the Colmeia's fallback file.\n\n```javascript\nconst cmaMapping = require('@cristianodmtsb/colmeia/fallback-mapping');\n```\n\nIn `clientConfig.plugins` add `cristianodmtsbOverrideMappingPlugin`. The **overrideMapping** is the other pluging to fallback, is \nrecommended to use this way. \n\n```javascript\n...\nnew cristianodmtsbOverrideMappingPlugin(\n  Object.assign(cmaMapping, overrideMapping);\n),\n...\n```\n\n## Add new svg icons to sprite\n\nTo work with SVG icons in your project all you have to do is run the following command to install [svg-spritemap-webpack-plugin](https://github.com/cascornelissen/svg-spritemap-webpack-plugin) and configure it in your project.\n\n```shell\nyarn add -D svg-spritemap-webpack-plugin\n\nnpm install svg-spritemap-webpack-plugin --save-dev\n```\n\nIn the webpack configuration file of your project add **SVGSpritemapPlugin**.\n\n```javascript\nclientConfig.plugins = [\n        ...clientConfig.plugins,\n\n        new DefinePlugin({\n            /**\n             * Make sure to add the same constants to\n             * the globals object in jest.config.js.\n             */\n            UNION_AND_INTERFACE_TYPES: JSON.stringify(\n                unionAndInterfaceTypes\n            ),\n            STORE_NAME: JSON.stringify('Venia')\n        }),\n        new HTMLWebpackPlugin({\n            filename: 'index.html',\n            template: './template.html',\n            minify: {\n                collapseWhitespace: true,\n                removeComments: true\n            }\n        }),\n        new cristianodmtsbOverrideMappingPlugin(\n            Object.assign(cmaMapping, overrideMapping)\n        ),\n\n        //Add SVGSpritemapPlugin   \n        new SVGSpritemapPlugin([\n         'src/assets/icons/**/*.svg',\n         './node_modules/@cristianodmtsb/colmeia/lib/assets/**/*.svg',\n        ], {\n           output: {\n               filename: 'sprites.svg',\n           },\n           sprite: {\n               generate: {\n                   use: true\n               }\n           }\n        })\n    ];\n```\n\nFinally, remove the previous svg loader package that is no longer needed by running. \n**if you were not using the previous loader, ignore this step.**\n\n```shell\nyarn remove svg-sprite-loader\n\nnpm uninstall svg-sprite-loader\n```\n\nThen remove the following lines from `src/index.js`.\n\n```javascript\n- const files = require.context(\n-  '!svg-sprite-loader!./assets/icons',\n-   false,\n-   /.*\\.svg$/,\n- );\n- files.keys().forEach(files);\n```\n\n## Configuring SASS\n\nTo configure SASS, you need to install these dev dependencies:\n\n```shell \nyarn add --dev sass-loader node-sass\n```\n\nThen edit the `webpack.config.js` and add a new rule to clientConfig\n\n```javascript\nclientConfig.module.rules.push({\n  rules: [\n    {\n      test: /\\.s[ca]ss$/,\n      use: [\n        'style-loader',\n        {\n          loader: 'css-loader',\n          options: {\n            modules: true,\n            sourceMap: true,\n          },\n        },\n        'sass-loader',\n      ],\n    },\n  ],\n});\n```\n\n# Dependencies with PWA Studio\n\nThis library uses a peer dependency on two PWA Studio libraries:\n\n- venia-ui\n- peregrine\n\nThe idea of this library is to have custom components based on `venia-ui` and custom logic (hooks) based on `peregrine`.\n\n## peer-dependency\n\nWe use peer-dependency to keep the project version of `venia-ui` and `peregrine`.\n\nWhen this library is imported in a project as a library it will consider the project version instead of the version set in this library.\n\n# Autoprefix\n\nFollow these steps to configure the autoprefix in your project:\n\n1. Install the dependencies with `yarn add --dev postcss-preset-env`\n\n2. Edit the webpack.config.js with this code after the plugins:\n\n```javascript\nclientConfig.module.rules.push({\n    test: /\\.css$/,\n    use: [{\n        loader: 'postcss-loader',\n        options: {\n            sourceMap: true,\n            config: {\n                path: './node_modules/@cristianodmtsb/colmeia'\n            }\n        }\n    }],\n});\n```\n\n# Contributing\n\nMake sure to read the [contribution guidelines](CONTRIBUTION.md)\n","readmeFilename":"README.md"}