{"_id":"@4design/for-ui-legacy","name":"@4design/for-ui-legacy","dist-tags":{"latest":"1.1.11"},"versions":{"1.1.11":{"name":"@4design/for-ui-legacy","version":"1.1.11","repository":{"type":"git","url":"git+https://github.com/4-design/for-ui.git"},"homepage":"https://github.com/4-design/for-ui","author":{"name":"locona","email":"miyamae@youx.co.jp"},"license":"MIT","engines":{"node":">=14.0.0"},"main":"dist/commonjs/for-ui.js","module":"dist/esm/for-ui.esm.js","exports":{".":{"import":"./dist/esm/for-ui.esm.js","require":"./dist/commonjs/for-ui.js","types":"./dist/types/index.d.ts"},"./tailwind.config.base.js":"./tailwind.config.base.js"},"types":"dist/types/index.d.ts","scripts":{"build":"run-p build:'*'","build-storybook":"build-storybook","build:js":"NODE_ENV=production vite build","build:types":"tsc -p tsconfig.build.json","dev":"run-p storybook","lint":"run-p lint:*","lint:type-check":"tsc --pretty","storybook":"start-storybook --no-manager-cache -p 6006 -s public","test":"run-p test:*","test:unit":"vitest run"},"peerDependencies":{"@mui/base":">=5.0.0-alpha.120","@mui/lab":">=5.0.0-alpha.73","@mui/material":">=5.9.3","@tanstack/react-table":">=8.5.22","@types/react":">=18.0.0","react":">=18.0.0","react-icons":">=4.3.0","tailwindcss":">=3.0.0"},"dependencies":{"clsx":"2.1.0","material-ui-popup-state":"5.0.9","react-dropzone":"14.2.3","react-number-format":"5.3.4","react-transition-group":"4.4.5","tailwind-merge":"1.14.0"},"devDependencies":{"@emotion/react":"11.11.1","@emotion/styled":"11.11.0","@hookform/resolvers":"3.2.0","@mdx-js/react":"1.6.22","@mui/base":"5.0.0-alpha.126","@mui/lab":"5.0.0-alpha.127","@mui/material":"5.12.1","@mui/types":"7.2.4","@storybook/addon-actions":"6.5.15","@storybook/addon-backgrounds":"6.5.15","@storybook/addon-essentials":"6.5.15","@storybook/addon-links":"6.5.15","@storybook/addon-postcss":"2.0.0","@storybook/addons":"6.5.16","@storybook/builder-vite":"0.2.6","@storybook/builder-webpack5":"6.5.14","@storybook/manager-webpack5":"6.5.14","@storybook/mdx2-csf":"0.0.3","@storybook/react":"6.5.15","@storybook/theming":"6.5.16","@tanstack/react-table":"8.15.0","@testing-library/jest-dom":"5.17.0","@testing-library/react":"14.2.2","@testing-library/user-event":"14.5.2","@types/react":"18.2.37","@types/react-dom":"18.2.15","@types/testing-library__jest-dom":"5.14.9","@vitejs/plugin-react":"2.2.0","autoprefixer":"10.4.19","babel-loader":"9.1.0","jsdom":"24.0.0","npm-run-all2":"6.1.2","postcss":"8.4.31","react":"18.2.0","react-dom":"18.2.0","react-hook-form":"7.45.4","react-icons":"4.10.1","tailwindcss":"3.4.3","typescript":"5.1.6","vite":"3.2.5","vitest":"0.33.0","webpack":"5.88.2","yup":"1.2.0"},"overrides":{"@mdx-js/react":{"react":"^18.2.0","react-dom":"^18.2.0"}},"sideEffects":false,"volta":{"node":"16.20.2"},"gitHead":"876faaa0793d41020f560c560e859a90546d9952","description":"<h1 align=\"center\">   <img width=\"240\" src=\"/.github/assets/fui_logo_logotype_light.svg#gh-light-mode-only\" alt=\"For UI\" title=\"For UI\">   <img width=\"240\" src=\"/.github/assets/fui_logo_logotype_dark.svg#gh-dark-mode-only\"> </h1>","bugs":{"url":"https://github.com/4-design/for-ui/issues"},"_id":"@4design/for-ui-legacy@1.1.11","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-5m4dLQD6O1y3isva4ffmPORlzhnZUBIBuiyE2KVOmgYawuFavaeNTnsLdZES5QV/m7wBZjTtRy1WpJ0Qt9MKiQ==","shasum":"0be076d86d91d7f982f5adc304e4c4a49a3d6255","tarball":"https://registry.npmjs.org/@4design/for-ui-legacy/-/for-ui-legacy-1.1.11.tgz","fileCount":101,"unpackedSize":303164,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCipbSPi0pdeIDa4KqPx4wxdKWkQMLQpJ4uWAcrFAISqQIhAJ80qHwWr/SUXIHREXcjOx+qgLUL/EJUVTaI8i1NTjqr"}]},"_npmUser":{"name":"creatorqsf","email":"qsf@de-liker.com"},"directories":{},"maintainers":[{"name":"creatorqsf","email":"qsf@de-liker.com"},{"name":"locona","email":"locona.0810@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/for-ui-legacy_1.1.11_1730904325395_0.004327217657638327"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-06T14:45:25.253Z","1.1.11":"2024-11-06T14:45:25.654Z","modified":"2024-11-06T14:45:25.978Z"},"maintainers":[{"name":"creatorqsf","email":"qsf@de-liker.com"},{"name":"locona","email":"locona.0810@gmail.com"}],"description":"<h1 align=\"center\">   <img width=\"240\" src=\"/.github/assets/fui_logo_logotype_light.svg#gh-light-mode-only\" alt=\"For UI\" title=\"For UI\">   <img width=\"240\" src=\"/.github/assets/fui_logo_logotype_dark.svg#gh-dark-mode-only\"> </h1>","homepage":"https://github.com/4-design/for-ui","repository":{"type":"git","url":"git+https://github.com/4-design/for-ui.git"},"author":{"name":"locona","email":"miyamae@youx.co.jp"},"bugs":{"url":"https://github.com/4-design/for-ui/issues"},"license":"MIT","readme":"<h1 align=\"center\">\n  <img width=\"240\" src=\"/.github/assets/fui_logo_logotype_light.svg#gh-light-mode-only\" alt=\"For UI\" title=\"For UI\">\n  <img width=\"240\" src=\"/.github/assets/fui_logo_logotype_dark.svg#gh-dark-mode-only\">\n</h1>\n\n<div align=\"center\">\n\n[![npm version](https://badge.fury.io/js/@4design%2Ffor-ui.svg)](https://badge.fury.io/js/@4design%2Ffor-ui)\n[![CI](https://github.com/4-design/for-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/4-design/for-ui/actions/workflows/ci.yml)\n\n</div>\n\nFor UI は <a href=\"https://3-shake.com\">株式会社スリーシェイク</a>のデザインシステム「For Design System」のデザイントークンとコンポーネントライブラリを実装したパッケージです。\n\nReact と MUI と Tailwind CSS で作られています。\n\n## インストール\n\n```\nnpm i @4design/for-ui\n```\n\nPeer dependencies のインストール\n\n```\nnpm i tailwindcss @mui/lab @mui/material @mui/base react-icons react @tanstack/react-table\nnpm i --save-dev @types/react\n```\n\n## セットアップ\n\n### 1. Tailwind CSS を導入\n\n#### Tailwind CSS の CSS を読み込む\n\n- `global.css` (名前は任意) を作成\n\n  - 以下の内容を置く\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@tailwind variants;\n\n@layer base {\n  body {\n    @apply text-shade-dark-default text-r font-sans antialiased;\n  }\n}\n```\n\n- `app.tsx` で `global.css` を読み込む\n\n#### `postcss.config.js` の作成\n\n- `postcss.config.js` が存在しない場合は作成する。\n\n  - デフォルトの構成を自分で定義する必要があることに注意 ([参考](https://nextjs.org/docs/advanced-features/customizing-postcss-config#customizing-plugins))\n\n- 以下を追加\n\n```js\nplugins: {\n  tailwindcss: {},\n  autoprefixer: {},\n  // ...\n}\n```\n\n### 2. For UI の設定を読み込む\n\n#### preset の読み込み\n\n```js\npreset: [require('@4design/for-ui/tailwind.config.base.js')],\n```\n\n#### 共通フォントの読み込み\n\n```html\n<link\n  href=\"https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap\"\n  rel=\"stylesheet\"\n/>\n```\n\nまたはこれに相当するものを置いてください\n\n#### MUI のスタイル上書きのための important 設定\n\n```js\nimportant: #root, // 任意の上位セレクタを指定する\n```\n\nまたは\n\n```js\nimportant: true;\n```\n\nを指定\n\n(複数の important が必要な場合は[こちら](https://github.com/4-design/for-ui/discussions/1093)を参考にしてください)\n\n#### `tailwind.config.js` 設定例\n\n```js\nmodule.exports = {\n  important: ':is(#__next, .MuiPopover-root)',\n  presets: [require('@4design/for-ui/tailwind.config.base.js')],\n  content: [\n    './pages/**/*.{js,ts,jsx,tsx}',\n    './components/**/*.{js,ts,jsx,tsx}',\n    './node_modules/@4design/for-ui/dist/**/*.js',\n  ],\n  plugins: [],\n};\n```\n\n詳細は `/example` 以下に実装例があるので参考にしてください。\n\n## License\n\nMIT License\n\n## Author\n\n4 design (3-shake Inc.)\n","readmeFilename":"README.md"}