OSS Gate Workshop: techouse: 2024-04-18: Nozomi-Hijikata: NextUI: Work log

Nozomi-Hijikata commented 5 months ago

This is a work log of a "OSS Gate workshop". "OSS Gate workshop" is an activity to increase OSS developers. Here's been discussed in Japanese. Thanks.

作業ログ作成時の説明

以下のテンプレートを埋めてタイトルに設定します。埋め方例はスクロールすると見えてきます。

OSS Gate Workshop: ${LOCATION}: ${YEAR}-${MONTH}-${DAY}: ${ACCOUNT_NAME}: ${OSS_NAME}: Work log

タイトル例↓：

OSS Gate Workshop: Tokyo: 2017-01-16: kou: Rabbit: Work log

OSS Gateワークショップ関連情報

スライド：ワークショップの進行に使っているスライドがあります。
チャット：OSS開発に関することならなんでも相談できます。ワークショップが終わった後もオンラインで相談しながら継続的にOSSの開発に参加しましょう！
シナリオ：ワークショップの目的・内容・進め方の詳細が書いています。
過去のビギナーの作業ログ：他の人の作業ログから学べることがいろいろあるはずです。

Nozomi-Hijikata commented 5 months ago

過去にNextUIのコンポーネントのバグを修正したPRをあげていたが、8ヶ月くらいauthorからレスポンスがない

最新バージョンでも既存バグが残っているようだ。

https://github.com/nextui-org/nextui/pull/1805

他の方からレスポンスはいただいているもいただいているので、できれば直したい

Nozomi-Hijikata commented 5 months ago

その当時はIssueでコントロールされていなかった気がするが、2024/04/18現在Issue管理をしているようだ。一旦Issueを立てた

https://github.com/nextui-org/nextui/issues/2766

Nozomi-Hijikata commented 5 months ago

Issueを漁ってみる

Nozomi-Hijikata commented 5 months ago

startup docsが更新されているっぽいので、改めて順繰りに立ち上げてみる。その中で気づいたことを残す。

Nozomi-Hijikata commented 5 months ago

https://react-spectrum.adobe.com/react-aria/ https://github.com/adobe/react-spectrum adobeがreact componentのライブラリを公開している。

~betaの時は使ってなかった気がする~ →嘘使ってた

Welcome to the NextUI documentation! NextUI allows you to make beautiful, modern, and fast websites/applications regardless of your design experience, created with React.js and Stitches, based on React Aria and inspired by Vuesax.

https://v1.nextui.org/docs/guide/getting-started

Nozomi-Hijikata commented 5 months ago

内部的に、Framer motionを使ってる https://www.framer.com/motion/

CLIツールが登場している

Nozomi-Hijikata commented 5 months ago

Framer motionのIntroductionのページでエラーが出た。（キャッシュを削除しても発生）

ログ

19Third-party cookie will be blocked. Learn more in the Issues tab.
api.framer.com/site/users/me:1 

 Failed to load resource: the server responded with a status of 401 ()
client:49 [GSI_LOGGER]: Your client application may not display the Google One Tap in its default position. When FedCM becomes mandatory, One Tap only displays in the default position. Refer to the migration guide to update your code accordingly and opt-in to FedCM to test your changes. Learn more: https://developers.google.com/identity/gsi/web/guides/fedcm-migration?s=dc#layout
_.y @ client:49
client:49 [GSI_LOGGER]: Your client application uses one of the Google One Tap prompt UI status methods that may stop functioning when FedCM becomes mandatory. Refer to the migration guide to update your code accordingly and opt-in to FedCM to test your changes. Learn more: https://developers.google.com/identity/gsi/web/guides/fedcm-migration?s=dc#display_moment and https://developers.google.com/identity/gsi/web/guides/fedcm-migration?s=dc#skipped_moment
_.y @ client:49
examples/:1 Third-party sign in was disabled in browser Site Settings.
api.framer.com/auth/signin:1 

 Failed to load resource: the server responded with a status of 401 ()
api.framer.com/site/users/me:1 

 Failed to load resource: the server responded with a status of 401 ()
client:50 [GSI_LOGGER]: FedCM get() rejects with AbortError: signal is aborted without reason
_.z @ client:50
examples/:1 Third-party sign in was disabled in browser Site Settings.
framework-336caa3f6419768205fe.js:1 TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
at [slug]-eefd1fea1566058c1e89.js:1:14699
at Ii (framework-336caa3f6419768205fe.js:1:105602)
at t.unstable_runWithPriority (framework-336caa3f6419768205fe.js:1:130401)
at Wl (framework-336caa3f6419768205fe.js:1:45773)
at Oi (framework-336caa3f6419768205fe.js:1:105063)
at framework-336caa3f6419768205fe.js:1:104974
at D (framework-336caa3f6419768205fe.js:1:129460)
at w.port1.onmessage (framework-336caa3f6419768205fe.js:1:128182)
uu @ framework-336caa3f6419768205fe.js:1
main-a3d202dbe74dc08b5ac7.js:1 TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
at [slug]-eefd1fea1566058c1e89.js:1:14699
at Ii (framework-336caa3f6419768205fe.js:1:105602)
at t.unstable_runWithPriority (framework-336caa3f6419768205fe.js:1:130401)
at Wl (framework-336caa3f6419768205fe.js:1:45773)
at Oi (framework-336caa3f6419768205fe.js:1:105063)
at framework-336caa3f6419768205fe.js:1:104974
at D (framework-336caa3f6419768205fe.js:1:129460)
at w.port1.onmessage (framework-336caa3f6419768205fe.js:1:128182)
le @ main-a3d202dbe74dc08b5ac7.js:1
main-a3d202dbe74dc08b5ac7.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
le @ main-a3d202dbe74dc08b5ac7.js:1
api.framer.com/auth/signin:1 

 Failed to load resource: the server responded with a status of 401 ()
api.framer.com/site/users/me:1 

 Failed to load resource: the server responded with a status of 401 ()
client:50 [GSI_LOGGER]: FedCM get() rejects with AbortError: signal is aborted without reason
_.z @ client:50
introduction/:1 Third-party sign in was disabled in browser Site Settings.
client:50 [GSI_LOGGER]: FedCM get() rejects with NetworkError: Error retrieving a token.

Nozomi-Hijikata commented 5 months ago

Safariでもだめ。

Nozomi-Hijikata commented 5 months ago

Issueを立てた

https://github.com/framer/motion/issues/2628

NextUIに戻った

Nozomi-Hijikata commented 5 months ago

https://nextuioss.featurebase.app/roadmap

roadmapを見れるようにしているのか。リッチだ

Nozomi-Hijikata commented 5 months ago

初期化のスタートアップを行う CLIツールができてる npm install -g nextui

nextui init my-nextui-app

Nozomi-Hijikata commented 5 months ago

かっちょええ ※app routerで起動

Nozomi-Hijikata commented 5 months ago

createしたディレクトリで叩くとエラー

 npm run dev

> next-app-template@0.0.1 dev
> next dev

sh: next: command not found

 npm run dev

❯ npm --version
10.2.0

Nozomi-Hijikata commented 5 months ago

npm updateをトライ中

npm WARN ERESOLVE overriding peer dependency

added 470 packages, and audited 471 packages in 29s

138 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Nozomi-Hijikata commented 5 months ago

❯ npm run dev

> next-app-template@0.0.1 dev
> next dev

  ▲ Next.js 14.2.1
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 2.1s

worked!

Nozomi-Hijikata commented 5 months ago

❯ nextui init s-app

NextUI CLI v0.1.5

✔ Select a template › Pages

✔ Template created successfully!

~/environment/oss-workshop
❯ cd s-app

~/environment/oss-workshop/s-app
❯ npm run dev

> next-pages-template@0.1.0 dev
> next dev

sh: next: command not found

pages routerでも再現

Nozomi-Hijikata commented 5 months ago

npm updateをするだけだし、bugではないが、 updateをすることが場合によっては必要であることを明記した方がよくないか？

Nozomi-Hijikata commented 5 months ago

v1だと bundle時点で除去

NextUI uses tree-shaking so the unused modules will not be included in the bundle during the build process and each component is exported separately.

v2だと必要なcomponentをaddする形式に変更

Nozomi-Hijikata commented 5 months ago

https://nextui.org/docs/guide/upgrade-to-v2

ここにv1とv2の差分がありそう

Nozomi-Hijikata commented 5 months ago

nextui initコマンドだとほとんどがUNMET

❯ npm list --depth=0
npm ERR! code ELSPROBLEMS
npm ERR! missing: @nextui-org/button@^2.0.28, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/code@^2.0.25, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/input@^2.1.18, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/kbd@^2.0.26, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/link@^2.0.27, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/navbar@^2.0.28, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/snippet@^2.0.32, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/switch@^2.0.26, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/system@2.1.0, required by next-app-template@0.0.1
npm ERR! missing: @nextui-org/theme@2.2.0, required by next-app-template@0.0.1
npm ERR! missing: @react-aria/ssr@^3.9.2, required by next-app-template@0.0.1
npm ERR! missing: @react-aria/visually-hidden@^3.8.10, required by next-app-template@0.0.1
npm ERR! missing: @types/node@20.5.7, required by next-app-template@0.0.1
npm ERR! missing: @types/react-dom@18.2.7, required by next-app-template@0.0.1
npm ERR! missing: @types/react@18.2.21, required by next-app-template@0.0.1
npm ERR! missing: autoprefixer@10.4.19, required by next-app-template@0.0.1
npm ERR! missing: clsx@^2.0.0, required by next-app-template@0.0.1
npm ERR! missing: eslint-config-next@14.2.1, required by next-app-template@0.0.1
npm ERR! missing: eslint@8.48.0, required by next-app-template@0.0.1
npm ERR! missing: framer-motion@^11.1.1, required by next-app-template@0.0.1
npm ERR! missing: intl-messageformat@^10.5.0, required by next-app-template@0.0.1
npm ERR! missing: next-themes@^0.2.1, required by next-app-template@0.0.1
npm ERR! missing: next@14.2.1, required by next-app-template@0.0.1
npm ERR! missing: postcss@8.4.38, required by next-app-template@0.0.1
npm ERR! missing: react-dom@18.2.0, required by next-app-template@0.0.1
npm ERR! missing: react@18.2.0, required by next-app-template@0.0.1
npm ERR! missing: tailwind-variants@^0.1.20, required by next-app-template@0.0.1
npm ERR! missing: tailwindcss@3.4.3, required by next-app-template@0.0.1
npm ERR! missing: typescript@5.0.4, required by next-app-template@0.0.1
next-app-template@0.0.1 /Users/hijikatanozomi/environment/oss-workshop/new-nextui-app
├── UNMET DEPENDENCY @nextui-org/button@^2.0.28
├── UNMET DEPENDENCY @nextui-org/code@^2.0.25
├── UNMET DEPENDENCY @nextui-org/input@^2.1.18
├── UNMET DEPENDENCY @nextui-org/kbd@^2.0.26
├── UNMET DEPENDENCY @nextui-org/link@^2.0.27
├── UNMET DEPENDENCY @nextui-org/navbar@^2.0.28
├── UNMET DEPENDENCY @nextui-org/snippet@^2.0.32
├── UNMET DEPENDENCY @nextui-org/switch@^2.0.26
├── UNMET DEPENDENCY @nextui-org/system@2.1.0
├── UNMET DEPENDENCY @nextui-org/theme@2.2.0
├── UNMET DEPENDENCY @react-aria/ssr@^3.9.2
├── UNMET DEPENDENCY @react-aria/visually-hidden@^3.8.10
├── UNMET DEPENDENCY @types/node@20.5.7
├── UNMET DEPENDENCY @types/react-dom@18.2.7
├── UNMET DEPENDENCY @types/react@18.2.21
├── UNMET DEPENDENCY autoprefixer@10.4.19
├── UNMET DEPENDENCY clsx@^2.0.0
├── UNMET DEPENDENCY eslint-config-next@14.2.1
├── UNMET DEPENDENCY eslint@8.48.0
├── UNMET DEPENDENCY framer-motion@^11.1.1
├── UNMET DEPENDENCY intl-messageformat@^10.5.0
├── UNMET DEPENDENCY next-themes@^0.2.1
├── UNMET DEPENDENCY next@14.2.1
├── UNMET DEPENDENCY postcss@8.4.38
├── UNMET DEPENDENCY react-dom@18.2.0
├── UNMET DEPENDENCY react@18.2.0
├── UNMET DEPENDENCY tailwind-variants@^0.1.20
├── UNMET DEPENDENCY tailwindcss@3.4.3
└── UNMET DEPENDENCY typescript@5.0.4

npm ERR! A complete log of this run can be found in: /Users/hijikatanozomi/.npm/_logs/2024-04-18T05_23_03_039Z-debug-0.log

~/environment/oss-workshop/new-nextui-app
❯

Nozomi-Hijikata commented 5 months ago

next-app-templateで求められているversionを満たしていないのか。 ↑はNextUIのtemplateになるパッケージ

Nozomi-Hijikata commented 5 months ago

てことは、npm installでいいわけか

Nozomi-Hijikata commented 5 months ago

 npm list --depth=0
next-app-template@0.0.1 /Users/hijikatanozomi/environment/oss-workshop/new-nextui-app
├── @nextui-org/button@2.0.28
├── @nextui-org/code@2.0.25
├── @nextui-org/input@2.1.18
├── @nextui-org/kbd@2.0.26
├── @nextui-org/link@2.0.27
├── @nextui-org/navbar@2.0.28
├── @nextui-org/snippet@2.0.32
├── @nextui-org/switch@2.0.26
├── @nextui-org/system@2.1.0
├── @nextui-org/theme@2.2.0
├── @react-aria/ssr@3.9.2
├── @react-aria/visually-hidden@3.8.10
├── @types/node@20.5.7
├── @types/react-dom@18.2.7
├── @types/react@18.2.21
├── autoprefixer@10.4.19
├── clsx@2.0.0
├── eslint-config-next@14.2.1
├── eslint@8.48.0
├── framer-motion@11.1.1
├── intl-messageformat@10.5.5
├── next-themes@0.2.1
├── next@14.2.1
├── postcss@8.4.38
├── react-dom@18.2.0
├── react@18.2.0
├── tailwind-variants@0.1.20
├── tailwindcss@3.4.3
└── typescript@5.0.4

great

Nozomi-Hijikata commented 5 months ago

nextui init後だとpackage-lock.jsonが入っているので、npm installの項目がdocumentにあった方が良いだろう

Nozomi-Hijikata commented 5 months ago

PR作ろう

Nozomi-Hijikata commented 5 months ago

.mdxってなんだ、

JSX + markdown!!

Nozomi-Hijikata commented 5 months ago

https://mdxjs.com/

Nozomi-Hijikata commented 5 months ago

PR立てた