{"_id":"@conken-oss-pkgs/frontend-react-emotion","name":"@conken-oss-pkgs/frontend-react-emotion","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@conken-oss-pkgs/frontend-react-emotion","version":"0.0.0","license":"MIT","bugs":{"url":"https://github.com/Conken-NitKit/conken-oss-pkgs/issues"},"keywords":["react","react-component"],"publishConfig":{"access":"public"},"source":"src/index.ts","main":"lib/index.js","types":"lib/typescript/index.d.ts","sideEffects":false,"scripts":{"build":"rimraf ./lib && tsc --project tsconfig.build.json","prepublishOnly":"npm run build","lint":"eslint \"src/**/*.{js,ts,jsx,tsx}\"","lint:fix":"eslint \"src/**/*.{js,ts,jsx,tsx}\" --fix","test":"cypress run --component","storybook":"start-storybook -p 9009","typecheck":"tsc --noEmit","build-storybook":"build-storybook","new:fc":"hygen new fc"},"dependencies":{"@emotion/react":"^11.0.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0","react-refresh":"^0.14.0"},"devDependencies":{"@babel/core":"^7.19.6","@babel/preset-env":"^7.19.4","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@cypress/react":"^6.2.0","@cypress/vite-dev-server":"^3.3.1","@emotion/babel-preset-css-prop":"^11.10.0","@storybook/addon-actions":"^6.5.12","@storybook/addon-docs":"^6.4.22","@storybook/addon-essentials":"^6.4.22","@storybook/addon-links":"^6.5.12","@storybook/builder-webpack5":"^6.5.12","@storybook/manager-webpack5":"^6.5.12","@storybook/preset-create-react-app":"^1.2.0","@storybook/react":"^6.1.21","@types/node":"^18.11.2","@types/react":"^18.0.21","@types/react-dom":"^18.0.6","@vitejs/plugin-react":"^2.1.0","babel-loader":"^8.2.5","csstype":"^3.1.1","cypress":"^10.10.0","hygen":"^6.2.11","rimraf":"^3.0.2","typescript":"^4.8.4","vite":"^3.1.8"},"peerDependencies":{"@emotion/react":"^11.0.0","@types/react":"^17.0.0 || ^18.0.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"gitHead":"3c19bb881db9853beac96caa80e478c0f1026685","description":"@conken-oss-pkg/frontend-react-emotion
","_id":"@conken-oss-pkgs/frontend-react-emotion@0.0.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-2GEK1UynnIMQHAnH5Dzn5HictCLXG6aN22NAMMt0COrJS+A3+hPGRE9TqwxkTvD30JRKyT3XAD0UVyii81BYWA==","shasum":"dba8aede6306e881457974d1cf7af5ad94a01119","tarball":"https://registry.npmjs.org/@conken-oss-pkgs/frontend-react-emotion/-/frontend-react-emotion-0.0.0.tgz","fileCount":17,"unpackedSize":10928,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3W2MqZRWXLZiQDl63kJoy+q+5uP/bxjrABL9aJ0yYmAiEAp7zXev60Z4jBtahfeP1ufkfZ14vxJwOL8kgjkcwesB8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjX/SCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZLA//bZw9LMQ1p9gNkgZOkvQNbZDwqO9kzaXRaqNRvyuaFUOxzDdl\r\nd8nEwM5M2QqffPVw2+zlA+3+ZjRwgkASSG5EEwacteSa7Nk9P/2qCvwcTCza\r\nB/tfMN0aglWugzDZ0ots87IG8Z6j49O6pl6o0v2VwHtOQl3bNTfD0hZlMxIw\r\ncYRG3JVbw92UeL9zeWOAqrtpdNTqY+0V+h8xV5VOJdHpN1mHNwpYUagXk0rn\r\njEbe7TeQnuB4k4z3ZiMlR1U2nwIqHf78UdH/3Pkye4ubpKU53qiQjZijQDet\r\nB4BZIHQL/ahxDZSEI7JRKoLy8TVG0yrVNMZ4+kEB/3+ioYrQfHvbRhnnaJS5\r\nJjCYxAOxmEKs7OlGbW7nMEOwPvYeHhJ+4yAl+zYF7aNYHZD+TR4ID8BfSCil\r\nDqDj7OkyFU0/PYTfapgKTtX9jwKcWMt9NxQNAwm02m1F5LwDNeDLltDsYpX4\r\ncRdC7cmmTsg2oyK9cpPa/QbTrkPc8v3SbqR4m6CNjqQJf3WxgJl4Z6Q2Fp96\r\nFrszDFlAG8dbaWbeoJdBYZeLxwEyWWK4LEbr+6X3eNRjnPh9DssktiVAn1UK\r\nYrDURomFWHGP+FnjTdlr/0MLJ6QiMJLxHz9oRh+W4G6N2z2q5SPjrWAaIuge\r\nnCbVXd/FsLwmLgXADhqDonPTtQ/fgXR/M70=\r\n=QvWr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kubo-hide-kun","email":"hide44041@gmail.com"},"directories":{},"maintainers":[{"name":"kubo-hide-kun","email":"hide44041@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/frontend-react-emotion_0.0.0_1667232897928_0.6624684215542256"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-31T16:14:57.847Z","0.0.0":"2022-10-31T16:14:58.133Z","modified":"2022-10-31T16:14:58.252Z"},"maintainers":[{"name":"kubo-hide-kun","email":"hide44041@gmail.com"}],"description":"@conken-oss-pkg/frontend-react-emotion
","keywords":["react","react-component"],"bugs":{"url":"https://github.com/Conken-NitKit/conken-oss-pkgs/issues"},"license":"MIT","readme":"@conken-oss-pkg/frontend-react-emotion
\n\n## リンク\n\n- [開発者ガイド](/packages/frontend-react-emotion/README_DEVELOPERS.md)\n\n## インストール\n\n### npm:\n\n```sh\nnpm install @conken-oss-pkg/frontend-react-emotion\n```\n\n### yarn:\n\n```sh\nyarn add @conken-oss-pkg/frontend-react-emotion\n```\n\n### 利用方法\n\nこのライブラリで提供されるコンポーネントはコンポーネント名とタイプの組合わせることで使いたい\n\n- コンポーネント名 (`Button`, `Calendar` などのどんな部品なのかを指定します)\n- タイプ (`Basic`, `Pop` などのどんなデザインなのかを指定します)\n\n```tsx\n<コンポーネント名.タイプ>XXX\n```\n\nまた、各コンポーネントは変更可能なスタイルをオブジェクトとして受け取ることでカスタマイズ可能です。
\nこのオブジェクトの方もコンポーネント同様に `{コンポーネント名}Style.{タイプ}` というように指定する子利用可能です。\n\n```tsx\nconst style: ComponentStyle.BASIC = {\n TEXT: \"#fff\",\n BACKGROUND: \"#000\",\n FONT_FAMILY: \"sans-serif\",\n};\n\nexport const MyComponent = (): JSX.Element => {\n return ;\n};\n```\n\n実際の利用例は以下のような形です。\n\n```tsx\nimport { useCallback } from \"react\";\nimport { Button, ButtonStyle } from \"@conken-oss-pkg/frontend-react-emotion\";\n\nconst style: ButtonStyle.BASIC = {\n TEXT: \"#fff\",\n BACKGROUND: \"#000\",\n FONT_FAMILY: \"sans-serif\",\n};\n\nexport type Props = {\n label: string;\n};\n\nexport const MyButton = ({ label }: Props): JSX.Element => {\n const handleClick = useCallback(() => {\n console.log(\"clicked!!\");\n }, []);\n\n return (\n \n {label}\n \n );\n};\n```\n","readmeFilename":"README.md"}