WIP

package.json

@@ -12,7 +12,7 @@
     "packages/*"
   ],
   "engines": {
-    "node": "^22.11.0",
+    "node": "^20.11.1",
     "npm": "^10.9.0"
   },
   "scripts": {
@@ -44,7 +44,8 @@
     "typescript": "5.6.3"
   },
   "volta": {
-    "node": "22.11.0",
+    "node": "20.11.1",
     "npm": "10.9.0"
-  }
+  },
+  "packageManager": "npm@10.9.0"
 }

packages/for-ui/.storybook/main.ts

@@ -0,0 +1,30 @@
+import { dirname, join } from "path";
+export default {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: [getAbsolutePath("@storybook/addon-essentials"), {
+    name: '@storybook/addon-postcss',
+    options: {
+      postcssLoaderOptions: {
+        implementation: require('postcss'),
+      },
+    },
+  }, ],
+
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
+  },
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
+};
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

packages/for-ui/.storybook/preview-head.html

@@ -0,0 +1,11 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true" />
+<link
+  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"
+  rel="stylesheet"
+/>
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+<link
+  href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
+  rel="stylesheet"
+/>

packages/for-ui/.storybook/preview.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import '../styles/forty.css';
+import '../styles/global.css';
+
+export const parameters = {
+  layout: 'fullscreen',
+  backgrounds: {
+    default: 'default',
+    values: [
+      {
+        name: 'default',
+        value: '#FFF',
+      },
+    ],
+  },
+  controls: { expanded: true },
+  options: {
+    storySort: {
+      order: ['General', 'Form', 'Data Display', 'Feedback', 'Navigation'],
+    },
+  },
+};
+
+const rootElement = document.getElementById('root');
+
+export const decorators = [
+  (Story) => (
+    <div className="p-2">
+      <Story />
+    </div>
+  ),
+];

packages/for-ui/README.md

@@ -0,0 +1,129 @@
+<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>
+
+<div align="center">
+
+[![npm version](https://badge.fury.io/js/@4design%2Ffor-ui.svg)](https://badge.fury.io/js/@4design%2Ffor-ui)
+[![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)
+
+</div>
+
+For UI は <a href="https://3-shake.com">株式会社スリーシェイク</a>のデザインシステム「For Design System」のデザイントークンとコンポーネントライブラリを実装したパッケージです。
+
+React と MUI と Tailwind CSS で作られています。
+
+## インストール
+
+```
+npm i @4design/for-ui
+```
+
+Peer dependencies のインストール
+
+```
+npm i tailwindcss @mui/lab @mui/material @mui/base react-icons react @tanstack/react-table
+npm i --save-dev @types/react
+```
+
+## セットアップ
+
+### 1. Tailwind CSS を導入
+
+#### Tailwind CSS の CSS を読み込む
+
+- `global.css` (名前は任意) を作成
+
+  - 以下の内容を置く
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
+@layer base {
+  body {
+    @apply text-shade-dark-default text-r font-sans antialiased;
+  }
+}
+```
+
+- `app.tsx` で `global.css` を読み込む
+
+#### `postcss.config.js` の作成
+
+- `postcss.config.js` が存在しない場合は作成する。
+
+  - デフォルトの構成を自分で定義する必要があることに注意 ([参考](https://nextjs.org/docs/advanced-features/customizing-postcss-config#customizing-plugins))
+
+- 以下を追加
+
+```js
+plugins: {
+  tailwindcss: {},
+  autoprefixer: {},
+  // ...
+}
+```
+
+### 2. For UI の設定を読み込む
+
+#### preset の読み込み
+
+```js
+preset: [require('@4design/for-ui/tailwind.config.base.js')],
+```
+
+#### 共通フォントの読み込み
+
+```html
+<link
+  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"
+  rel="stylesheet"
+/>
+```
+
+またはこれに相当するものを置いてください
+
+#### MUI のスタイル上書きのための important 設定
+
+```js
+important: #root, // 任意の上位セレクタを指定する
+```
+
+または
+
+```js
+important: true;
+```
+
+を指定
+
+(複数の important が必要な場合は[こちら](https://github.com/4-design/for-ui/discussions/1093)を参考にしてください)
+
+#### `tailwind.config.js` 設定例
+
+```js
+module.exports = {
+  important: ':is(#__next, .MuiPopover-root)',
+  presets: [require('@4design/for-ui/tailwind.config.base.js')],
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@4design/for-ui/dist/**/*.js',
+  ],
+  plugins: [],
+};
+```
+
+詳細は `/example` 以下に実装例があるので参考にしてください。
+
+## License
+
+MIT License
+
+## Author
+
+4 design (3-shake Inc.)

packages/for-ui/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@4design/for-ui",
+  "version": "2.0.0-beta.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/4-design/for-ui.git"
+  },
+  "homepage": "https://github.com/4-design/for-ui",
+  "author": "3-shake, Inc. 4-design Team",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": "^20.11.1",
+    "npm": "^10.9.0"
+  },
+  "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"
+  },
+  "files": [
+    "dist",
+    "tailwind.config.base.js"
+  ],
+  "scripts": {
+    "dev": "run-p storybook",
+    "build": "run-p build:'*'",
+    "build:js": "NODE_ENV=production vite build",
+    "build:types": "tsc -p tsconfig.build.json",
+    "lint": "run-p lint:*",
+    "lint:type-check": "tsc --pretty",
+    "build-storybook": "storybook build",
+    "storybook": "storybook dev",
+    "test": "run-p test:*",
+    "test:unit": "vitest run"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "dependencies": {
+    "clsx": "2.1.1",
+    "tailwind-merge": "2.5.4"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "8.4.2",
+    "@storybook/addon-postcss": "2.0.0",
+    "@storybook/cli": "^8.4.2",
+    "@storybook/react": "8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/react": "14.2.2",
+    "@testing-library/user-event": "14.5.2",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@types/testing-library__jest-dom": "5.14.9",
+    "@vitejs/plugin-react": "4.3.3",
+    "autoprefixer": "10.4.20",
+    "jsdom": "25.0.1",
+    "npm-run-all2": "7.0.1",
+    "postcss": "8.4.47",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tailwindcss": "3.4.14",
+    "typescript": "5.6.3",
+    "vite": "5.4.10",
+    "vitest": "2.1.4"
+  },
+  "sideEffects": false,
+  "volta": {
+    "node": "20.11.1",
+    "npm": "10.9.0"
+  },
+  "packageManager": "npm@10.9.0"
+}