4-design / for-ui Goto Github PK

ローディング時は選択できないのでhoverで色が変わるのはおかしい (あとhoverの色も要修正) のでその設定ができるようにする

• 高さ 39 → 44
• Icon
  • MdExpendMore を使う
  • 色修正

AtomとExamplesになっているのを修正

• mondayをチケットに名前修正
• beforeとafterのスクリーンショットを乗せるようにしたい

課題

メジャーバージョンとマイナーバージョンの分岐を、
ブランチによって切り替えたい

Material Design特有のripple effectを外していきたい

• :focus-visibleでoutlineをしっかりつける必要がある

現状のtwin.macroとemotionを使った実装からMUIの仕組みに依存するように修正していく

• badge #668
• button #669
• card #670
• checkbox #671
• chip #672
• divider #673
• dropzone #674
• icon #675
• layout #676
• loader #677
• menu #678
• modal #679
• radio #680
• select #681
• skeleton #682
• spacer #683
• stepper #684
• styles #685
• switch #686
• tab #687
• table #688
• tag #689
• textField #690
• typography #691

現状Muiの各種コンポーネントのPropsをextendしており、例えば本来sizeのないChipにまでsizeがあったりする。必要ないものは省いたほうがいいのではないか

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency eslint-import-resolver-typescript to v3.6.1
• chore(deps): update dependency turbo to v1.10.15
• fix(deps): update dependency eslint-plugin-import to v2.28.1
• fix(deps): update dependency react-number-format to v5.3.1
• chore(deps): update dependency @hookform/resolvers to v3.3.2
• chore(deps): update dependency @tanstack/react-table to v8.10.7
• chore(deps): update dependency @testing-library/user-event to v14.5.1
• chore(deps): update dependency eslint to v8.51.0
• chore(deps): update dependency next to v13.5.4
• chore(deps): update dependency react-hook-form to v7.47.0
• chore(deps): update dependency react-icons to v4.11.0
• chore(deps): update dependency typescript to v5.2.2
• chore(deps): update dependency webpack to v5.89.0
• chore(deps): update dependency yup to v1.3.2
• fix(deps): update dependency @rushstack/eslint-patch to v1.5.1
• fix(deps): update dependency eslint-plugin-sonarjs to ^0.21.0
• fix(deps): update dependency react-router-dom to v6.16.0
• chore(deps): update actions/checkout action to v4
• chore(deps): update dependency lint-staged to v15
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency postcss to v8.4.31 [security]
• chore(deps): update dependency eslint-plugin-react to v7.33.2
• chore(deps): update dependency prettier to v3.0.3

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @types/react-table to v7.7.16
• chore(deps): update dependency autoprefixer to v10.4.16
• chore(deps): update dependency vite to v3.2.7
• chore(deps): update material-ui monorepo (@mui/base, @mui/lab, @mui/material, @mui/types)
• chore(deps): update react monorepo (@types/react, @types/react-dom)
• chore(deps): update storybook monorepo (@storybook/addon-actions, @storybook/addon-backgrounds, @storybook/addon-essentials, @storybook/addon-links, @storybook/addons, @storybook/builder-vite, @storybook/builder-webpack5, @storybook/manager-webpack5, @storybook/react, @storybook/theming)
• chore(deps): update dependency vitest to v0.34.6
• chore(deps): update dependency @testing-library/jest-dom to v6
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency @storybook/mdx2-csf to v0.0.4
• chore(deps): update dependency html-webpack-plugin to v5.5.3
• chore(deps): update dependency babel-loader to v8.3.0
• chore(deps): update dependency @mdx-js/react to v2
• chore(deps): update dependency @storybook/mdx2-csf to v1
• chore(deps): update dependency @vitejs/plugin-react to v4
• chore(deps): update dependency babel-loader to v9
• chore(deps): update dependency vite to v4
• chore(deps): update node.js to v18 (node, @types/node)
• chore(deps): update storybook monorepo to v7 (major) (@storybook/addon-actions, @storybook/addon-backgrounds, @storybook/addon-essentials, @storybook/addon-links, @storybook/addons, @storybook/builder-vite, @storybook/builder-webpack5, @storybook/react, @storybook/theming)
• fix(deps): update typescript-eslint monorepo to v6 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

@Qs-F

これ何か変更すべきことってありますかね？
追加variable など

現状だと、

             InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <MdAlternateEmail size="24" css={[
                      css`fill: ${theme`iconColor.shade.medium.default`};`,
                      tw`ml-3 -mr-1`
                    ]} />
                  </InputAdornment>
                ),
              }}

こうする必要があるので、これを

             leadingIcon={<MdAlternateEmail size="24" /> }

ぐらいで設定できるようにしたい

• 選択時のスタイルを修正
• disabledのスタイルを修正
• #646

問題

Radioコンポーネントでlabelなし状態の場合、disabled属性が渡されない

解決方法

Before
<_Radio value={value} {...rest} />

After
<_Radio value={value} disabled={disabled}  {...rest} />

Issueというよりは相談なのですが、
現在Securify側ではMUIを直接使わざるを得ない箇所があり、Nextアプリのdependenciesに指定しています。

3desing-ui側もdependenciesにMUIを追加しているかと思うのですが、その両方が原因となり、
添付画像のように二つのMUIがnode_modulesに含まれている状況です。

Next.jsのpeerDependenciesのように、3desing-ui側もpeerDependencies化が可能かと思うのですがどうでしょう？
(dependencies --> peer / devDependenciesに移動できれば一つのアプリで二つのMUIを使う状況を防止できるかと思います)

3design-ui側のMUI

securify側のMUI

https://github.com/3-shake/securify-shield/tree/main/ui/src/components/common/Drawer

stylesはサービス固有のもののため、本来3design-uiに含めたいものではないものの、見本として必要である。
代替案として、rootディレクトリにstylesを移すことを提案する

@etchteam/storybook-addon-css-variables-theme
https://storybook.js.org/addons/@etchteam/storybook-addon-css-variables-theme

これを使うのが良さそう

内容

Chipsコンポーネントの型定義の一部が利用側にコード側の意図に沿って伝番されないため、
例えばcolorの指定が外側から利用する際はdefaultのみの選択になっている

詳細

type ChipColorType = 'default' | 'negative' | 'white'

export type ChipProps = Exclude<
  MuiChipProps,
  'color' | 'onDelete' | 'icon' | 'deleteIcon' | 'size'
> & {
  twin?: TwStyle[]
  color?: ChipColorType
} & (
    | {
        leadingIcon: MuiChipProps['icon']
        trailingIcon?: never
      }
    | {
        leadingIcon?: never
        trailingIcon?: MuiChipProps['deleteIcon']
        onDelete?: MuiChipProps['onDelete']
      }
  )