{"_id":"@compass-aiden/vwb-atomic-text","name":"@compass-aiden/vwb-atomic-text","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@compass-aiden/vwb-atomic-text","description":">","version":"0.0.1","type":"module","main":"dist/vwb-atomic-text.umd.js","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version","last 1 ie version"]},"devDependencies":{"@compass-aiden/eslint-config":"^1.5.4","@svgr/core":"^8.0.0","@svgr/plugin-jsx":"^8.0.1","@types/react":"^18.0.37","@types/react-dom":"^18.0.11","@typescript-eslint/eslint-plugin":"^5.59.0","@typescript-eslint/parser":"^5.59.0","@vitejs/plugin-react":"^4.0.0","autoprefixer":"^10.4.14","react":"^18.2.0","react-dom":"^18.2.0","eslint":"^8.38.0","eslint-config-airbnb":"^19.0.4","eslint-config-airbnb-typescript":"^17.0.0","eslint-config-prettier":"^8.8.0","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.3.4","postcss":"^8.4.24","prettier":"^2.8.8","sass":"^1.63.4","tailwindcss":"^3.3.2","typescript":"^5.0.2","unplugin-auto-import":"^0.16.4","unplugin-icons":"^0.16.3","vite":"^4.3.9","vite-plugin-svgr":"^3.2.0","@types/node":"~20.3.1","rollup-plugin-visualizer":"~5.9.2"},"peerDependencies":{"react":">=18","react-dom":">=18"},"scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint src --fix --ext ts,tsx","preview":"vite preview"},"gitHead":"c40537a023bc3bda0694f344f2b56e12878a4f95","_id":"@compass-aiden/vwb-atomic-text@0.0.1","_integrity":"sha512-Jgq1aR9CLohbfrGEPNbUQ9WmFLQfYThGLQ2u/PpEXCn4lEcSP6pPYknKqJ2TD5tQW/Y7dYvLYziR2N/J4FKpxg==","_resolved":"/tmp/537a29d35cb0444dcfacd117138ef50e/compass-aiden-vwb-atomic-text-0.0.1.tgz","_from":"file:compass-aiden-vwb-atomic-text-0.0.1.tgz","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-Jgq1aR9CLohbfrGEPNbUQ9WmFLQfYThGLQ2u/PpEXCn4lEcSP6pPYknKqJ2TD5tQW/Y7dYvLYziR2N/J4FKpxg==","shasum":"a8016d7be910a3fdcf81d6ff47b4d005938cd7f1","tarball":"https://registry.npmjs.org/@compass-aiden/vwb-atomic-text/-/vwb-atomic-text-0.0.1.tgz","fileCount":21,"unpackedSize":77119,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDgc+i4UG2LbY9N7PQOS76WCr4+KvTMxeVAZVpaz+AQPAiBpeOBvnH3SxuFmfM6mmV1IlEBf5akC77FN59IOufwdvw=="}]},"_npmUser":{"name":"aiden_frontend","email":"Aiden_FE@outlook.com"},"directories":{},"maintainers":[{"name":"aiden_frontend","email":"Aiden_FE@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vwb-atomic-text_0.0.1_1691509316683_0.8608931167015808"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-08T15:41:56.583Z","0.0.1":"2023-08-08T15:41:56.864Z","modified":"2023-08-08T15:41:57.181Z"},"maintainers":[{"name":"aiden_frontend","email":"Aiden_FE@outlook.com"}],"description":">","readme":"# vwb-atomic-text\n\n>\n\n## Features\n\n- Auto Import\n\n支持自动导入'react', 'react-i18next'等库\n\n```typescript jsx\nexport default function Demo() {\n  const [] = useState(0);\n  const { t } = useTranslation();\n\n  return <>{t('message.common.test')}</>;\n}\n```\n\n- Icons\n\n项目内置了 [unplugin-icons](https://github.com/antfu/unplugin-icons), 请参考文档使用\n\n所有 icon 支持自动导入,无需手动 import,依赖自动安装,类似如下方式直接使用即可:\n\n在 https://icon-sets.iconify.design/ 可以直接搜索所有 icon 资源,antd 的 icon 也一样存在\n\n更多用法参考 [unplugin-icons](https://github.com/antfu/unplugin-icons) 官方文档即可\n\n```typescript jsx\nexport default function Demo() {\n  return (\n    <>\n      <IconAntDesignSearchOutlined />\n    </>\n  );\n}\n```\n\n- vite-plugin-svgr\n\n```typescript jsx\nimport DemoIcon from '@/assets/svg/demo.svg';\n\nexport default function Demo() {\n  return (\n    <>\n      <DemoIcon />\n    </>\n  );\n}\n```\n\n- postcss & autoprefixer & tailwindcss\n\n```typescript jsx\nexport default function Demo() {\n  return (\n    <>\n      <p className=\"underline\">Test</p>\n    </>\n  );\n}\n```\n\n- Stores & Theme\n\n创建 Store 参考: src/stores/theme.store.ts,然后在 src/stores/store.tsx 内使用\n\n组件用法示例:\n\n```typescript jsx\nimport { ThemeContext, useThemeStore } from '@/stores';\n\nexport default function Demo() {\n  const { theme } = useContext(ThemeContext);\n  const { getThemeInstance } = useThemeStore();\n\n  function toggleTheme(themeKey: string) {\n    getThemeInstance().toggle(themeKey);\n  }\n\n  return (\n    <>\n      当前主题: {theme}\n      <button onClick={() => toggleTheme('default')} type=\"button\">\n        切换默认主题\n      </button>\n      <br />\n      <button onClick={() => toggleTheme('light')} type=\"button\">\n        切换亮色主题\n      </button>\n      <br />\n      <button onClick={() => toggleTheme('dark')} type=\"button\">\n        切换暗黑主题\n      </button>\n    </>\n  );\n}\n```\n\n- Base Styles & BEM.scss\n\n全局样式`src/assets/styles/global.scss`\n\n默认导入所有样式表顶部`src/assets/styles/base/variables.scss`,并导入 bem.scss,domain 前缀可通过 variables.scss 内变量修改\n\n```scss\n@include b(demo) {\n  // .cp-demo\n  color: red;\n  height: 2000px;\n  @include e(element) {\n    // .cp-demo__element\n    @include m(modify) {\n      // .cp-demo__element_modify\n    }\n  }\n}\n```\n\n- I18n\n\n```typescript jsx\nexport default function Demo() {\n  const { t, i18n } = useTranslation();\n  function toggleLang(lang: string) {\n    i18n.changeLanguage(lang);\n  }\n  return (\n    <>\n      当前语言环境: {i18n.language}\n      {t('message.common.test')}\n      <button onClick={() => toggleLang('en')} type=\"button\">\n        使用英语\n      </button>\n      <br />\n      <button onClick={() => toggleLang('zh-CN')} type=\"button\">\n        使用中文\n      </button>\n    </>\n  );\n}\n```\n\n- Eslint\n\n使用 Airbnb Eslint 规则\n\n`npm run lint` 执行检查\n\n- Prettier\n\n`npm run format` 执行检查\n","readmeFilename":"README.md"}