Amplifyやっていき
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
NoteUIのコンポーネントないやんけ
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
NoteUI自作
AutoLayoutで基本は組むのかな?
flexはコンポーネントをネストしてつくるんかな
この辺のTips・コツ・Hacksがありそう
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
まぁまぁわかってきたけどまとめんのだる笑
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
基本的にはネットで引っかかるチュートリアルが全部そのままでは動かないっぷり
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
Create,UpdateのFormはModelから自動で生成する、という機能があるっぽい
が、閉じるボタンがないし、あんまり使わない気もする
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
コンポーネント構成はこんな感じ
Figma右のAutoLayoutで縦横方向の並びで構成する感じ。
横並びにしたい場合はFrameでくくって、横並びでflexやらjustify的に調整した子部品を追加する感じ
縦横の幅は↓の感じで指定
Fixed…固定幅
Hug…中身に合わせて変動
Fill…親の幅に合わせる
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
モーダルはこれでいける。すごい。
<div className='modal'>
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
レスポンシブやってみる
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
collectionのレスポンシブは↓のライブラリとかでJSで対応したほうが楽そうではある。
あんまり公式記述がない?
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
collectionはそもそもFigmaにないから、variantで動向はできないよね?
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
Sync with Figma
時にエラー
An error occurred saving components Item name already exists
なんかうまいことupdateされない/既存のコンポーネントが新規として扱われる事がある。
→UI Libraryから削除して再度取り込みで解消
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
コンポーネントのレスポンシブ対応
Figmaのvariantという同一コンポーネントを外部変数で複数のバリエーションをもたせる機能を使う
バリアントの足し方は簡単で、以下をクリックする
するとコンポーネントがバリアント付きのものになるので、Add Variantで全く同じ見た目の異なるバージョンを複製できる
複数のvariantを持ってる状態。
コンポーネントツリー上はvariant名が並ぶことになる。
AmplifyUI上でレスポンシブを聞かせるには、variantのproperty名を breakpoint
, 値を定められた以下の値を設定する必要がある
{
base: '0',
small: '480px',
medium: '768px',
large: '992px',
xl: '1280px',
xxl: '1536px',
}
複製は簡単なので、全値を作っておくのがベターそう
あとは amplify pull
してくればレスポンシブ対応の完了
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
Collectionのレスポンシブ頑張ろうとするとcss+!importantとかで頑張らないとamplifyに負けるシーンがあるな…
slotでflexで避けるかだな…
思想的にもSlotなりで頑張って実現するほうがUIのスタイリングをFigmaに寄せられるので正しいかな…
Collectionの他機能は使えないので、機能とデザインのトレードオフ(なんでやねん)
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
Viteに慣れるとCRAまじ遅いな…
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
現状の進捗こんな感じ
UI Library周りはまぁまぁ満足できたかも
PC
PS
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
UI周りはあと遷移系だけやりたい
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
作業リポジトリ
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
使ってたFigma
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
うーんなるほど
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
とにかく保管が聞かない辛い
![もっくま(Mistletoe)](https://res.cloudinary.com/zenn/image/fetch/s--rPuPRpVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/b702ab704f.jpeg)
AppSyncのローカルMockテストは。cognitoのAuth設定してたらそのままでは有効にならなささそう
めんどくさい…
やっぱり開発者単位で個別環境作るのが楽なんちゃうか