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

[Nozomi-Hijikata]

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]

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

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

• fix(navbar): fixed the height of navbar menu nextui-org/nextui#1805

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

[Nozomi-Hijikata]

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

• [BUG] - Modal does not fully close when opened from the Navbar component nextui-org/nextui#2766

[Nozomi-Hijikata]

Issueを漁ってみる

[Nozomi-Hijikata]

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

[Nozomi-Hijikata]

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]

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

CLIツールが登場している

[Nozomi-Hijikata]

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]

Safariでもだめ。

[Nozomi-Hijikata]

Issueを立てた

• [BUG] Docs: Application error: a client-side exception has occurred (see the browser console for more information). framer/motion#2628

NextUIに戻った

[Nozomi-Hijikata]

https://nextuioss.featurebase.app/roadmap

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

[Nozomi-Hijikata]

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

nextui init my-nextui-app

[Nozomi-Hijikata]

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

[Nozomi-Hijikata]

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]

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]

❯ 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]

❯ 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]

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

[Nozomi-Hijikata]

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]

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

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

[Nozomi-Hijikata]

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]

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

[Nozomi-Hijikata]

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

[Nozomi-Hijikata]

 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]

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

[Nozomi-Hijikata]

PR作ろう

[Nozomi-Hijikata]

.mdxってなんだ、

JSX + markdown!!

[Nozomi-Hijikata]

https://mdxjs.com/

[Nozomi-Hijikata]

PR立てた

• docs(guide): add an explanation for the installation guide nextui-org/nextui#2769

[github-actions]

おつかれさまでした！

ワークショップの終了にともないissueを閉じますが、このまま作業メモとして使っても構いません 👌

ワークショップの感想を集めています！

ブログなどに書かれた際は、このページへリンクの追加をお願いします 🙏

またの参加をお待ちしています！