3i-shikosai32 / shikosai32-front Goto Github PK
View Code? Open in Web Editor NEWA board game result tracker for "OZ" held in the 32nd Shikosai at NITIC
Home Page: https://3i.shikosai.net
License: Other
A board game result tracker for "OZ" held in the 32nd Shikosai at NITIC
Home Page: https://3i.shikosai.net
License: Other
/
/games/we-didnt-playtest
/games/coin-dropps
/games/xeno
現状ホバー時にscale
を拡大するアニメーションを指定している。しかし特にボタンが大きいとき、これが過剰に思えるから。
h-fit
からh-auto
へ変更する。
トグル切り替え時にある程度アニメーションがあるとベストです。
/games/ice-raze
/gaems/president
Storybookの変更差分等をOrganizationのみんなが簡単に確認できるようになるChromaticを導入する。
くわしくは: https://dev.classmethod.jp/articles/chromatic-storybook-review-and-deploy/
中身となる要素を子要素で指定できるとベストです。
中身となる要素を子要素で指定できるようにしてください。
/staff
ModuleNotFoundError: Module not found: Error: Can't resolve '../src/styles/globals.scss' in '/home/reohakuta/repos/shikosai32-front/.storybook'
main
ブランチの最新のコミットでyarn run sb
を実行した場合でも同様のエラーが発生する。
reohakuta in shikosai32-front on feat/17-add_button
❯ yarn run sb
yarn run v1.22.17
$ start-storybook -p 6006
info @storybook/react v6.5.10
info
info => Loading presets
WARN Failed to load static files, no such directory: /home/reohakuta/repos/shikosai32-front/public
WARN Make sure this directory exists, or omit the -s (--static-dir) option.
info Addon-docs: using MDX1
info => Using PostCSS preset with [email protected]
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Using cached manager
21% building 3/15 entries 2617/2800 dependencies 352/557 modules
🌼 daisyUI components 2.24.0 https://github.com/saadeghi/daisyui
✔ Including: base, components, themes[1], utilities
70% sealing plugins DocGenPluginDeprecationWarning: 'createIdentifier' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your tran
DeprecationWarning: '' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createLiteral' has been deprecated since v4.0.0. Use `factory.createStringLiteral`, `factory.createStringLiteralFromNode`, `factory.createNumericLiteral`, `factory.c
DeprecationWarning: 'createBinaryExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context inst
DeprecationWarning: 'createPropertyAssignment' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context inste
DeprecationWarning: 'createObjectLiteralExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context
DeprecationWarning: 'createFalse' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createNull' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTrue' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context inst
DeprecationWarning: 'createTypeOfExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead
DeprecationWarning: 'createElementAccessExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context
DeprecationWarning: 'createIfStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createBlock' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createVariableDeclaration' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context inst
DeprecationWarning: 'createCatchClause' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTryStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
99% done plugins webpack-hot-middlewarewebpack built preview aa93cc81feb1f1237318 in 6653ms
ModuleNotFoundError: Module not found: Error: Can't resolve '../src/styles/globals.scss' in '/home/reohakuta/repos/shikosai32-front/.storybook'
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/Compilation.js:2016:28
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:798:13
at eval (eval at create (/home/reohakuta/repos/shikosai32-front/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:270:22
at eval (eval at create (/home/reohakuta/repos/shikosai32-front/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:434:22
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:116:11
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:670:25
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:855:8
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:975:5
resolve '../src/styles/globals.scss' in '/home/reohakuta/repos/shikosai32-front/.storybook'
using description file: /home/reohakuta/repos/shikosai32-front/package.json (relative path: ./.storybook)
Field 'browser' doesn't contain a valid alias configuration
using description file: /home/reohakuta/repos/shikosai32-front/package.json (relative path: ./src/styles/globals.scss)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/reohakuta/repos/shikosai32-front/src/styles/globals.scss doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/home/reohakuta/repos/shikosai32-front/src/styles/globals.scss.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/reohakuta/repos/shikosai32-front/src/styles/globals.scss.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/home/reohakuta/repos/shikosai32-front/src/styles/globals.scss.jsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/reohakuta/repos/shikosai32-front/src/styles/globals.scss.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/home/reohakuta/repos/shikosai32-front/src/styles/globals.scss.tsx doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/home/reohakuta/repos/shikosai32-front/src/styles/globals.scss.json doesn't exist
.cjs
Field 'browser' doesn't contain a valid alias configuration
/home/reohakuta/repos/shikosai32-front/src/styles/globals.scss.cjs doesn't exist
as directory
/home/reohakuta/repos/shikosai32-front/src/styles/globals.scss doesn't exist
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
info => Loading presets
error Command failed with exit code 1.
/gacha
/games/poker
Discordで話してたものです!
#17 のようなコンポーネントにデフォルトのスタイルを設定しつつ、background-color
などを含めたスタイルを外部から変更できるようにしたい場合に必要となる。
このとき、TailwindCSSを使用しているため、「className
をProps
として受け取り自身のクラス指定に追加する」といった実装となる。
しかし、Tailwindは下記のように、ユーティリティクラス名のみでスタイルを指定するため、すべてのスタイルが同じ詳細度を持つ。したがって、その優先順位は記述されたCSSがより後に読み込まれたものが優先される。
.text-neutral-900 {
--tw-text-opacity: 1;
color: rgb(8 15 22 / var(--tw-text-opacity));
}
参考 [Feature Proposal] CSS class override utility for component composition.
#1446
!important
でデフォルトのものを上書きする使うべきではないと思う
<Button className="!bg-success-700">
Hello world!
</Button>
:where()
疑似クラスを使ってデフォルトのスタイルの詳細度を0にしておくwhere:bg-***
のようにTailwindのVariantとして使えるようにプラグインを書く。
使う側は、その1とは違い!important
をつけるなどの配慮をしなくてよい。
Insane idea to give components overridable default TW classes #3523
// 詳細度を0に設定する擬似クラス:where()をバリアントとして追加する
plugin(({ addVariant, e: escape }) => {
addVariant('where', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `:where(.${escape(`where${separator}${className}`)})`;
});
});
}),
:where()
で囲んだだけではリセットCSSにも勝てないくそざこなめくじになってしまいデフォルトのスタイルが適用できず、
body :where()
のようにしてTailwindのユーテリティクラス以下リセットCSS以上の詳細度を適用しようとしても、必要な詳細度の基準がリセットCSSの定義によって変わってしまうから扱いづらい。ので:where()
で詳細度を下げるのは現実的ではないと思いました
tailwind-override
tailwind-merge
をclassName
内で使うtailwind-override
参考: Zenn.dev
- .tailwind.config.js
を読み取ってカスタムクラスまで対応してくれるのかが不明
- CSSの詳細度の問題をJS/TS側で無理やり対処しているところがすっきりしない
- GitHubのスター数が84で頼りない
tailwind-merge
import { twMerge } from 'tailwind-merge'
twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'
クラス名に対立(Conflict)する複数のTailwindユーティリティクラスが存在する場合、後ろのものを優先して抜き出してくれる関数twMerge
を提供するパッケージ。
Optimized for speed
Results get cached by default, so you don't need to worry about wasteful re-renders. The library uses a LRU cache which stores up to 500 different results. > The cache size can be modified or opt-out of by using extendTailwindMerge.
Expensive computations happen upfront so that twMerge calls without a cache hit stay fast.
These computations are called lazily on the first call to twMerge to prevent it from impacting app startup performance if it isn't used initially.
.tailwind.config.js
に記述したgradient-*
などの独自のクラスにも対応できる@layer components
で作成する
Tailwindはここで定義されたものを含むcomponents
クラスをbg-red-500
等のユーティリティクラスよりも前に挿入するから、それを使用したスタイルの上書きが適切に行えるようになる。しかし、多階層の上書きはできない
<Modal>
の展開先をprops
から受け取り、radix-ui
提供の<Dialog.Portal>
を介して指定できるようにする。<Modal>
を開いたときのオーバーレイのスタイルを外部から変更できるようにする。これは Hamburger #2 で再利用できるようにするため。type Props = {
text: string;
icon?: string;
className?: string; // bg-color指定用
}
const Button: FC<Props> = ({text, icon}) => {}
ModuleNotFoundError: Module not found: Error: Can't resolve '@/libs/twmerge/index' in '/home/reohakuta/repos/shikosai32-front/src/components/Button'
reohakuta in shikosai32-front on feat/17-add_button 📝 modified 🤷 untracked
❯ yarn run sb
yarn run v1.22.17
$ start-storybook -p 6006
info @storybook/react v6.5.10
info
info => Loading presets
info => Serving static files from ././public at /
info Addon-docs: using MDX1
info => Using PostCSS preset with [email protected]
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Using cached manager
21% building 3/15 entries 2052/2093 dependencies 233/485 modules
🌼 daisyUI components 2.24.0 https://github.com/saadeghi/daisyui
✔ Including: base, components, themes[1], utilities
70% sealing plugins DocGenPluginDeprecationWarning: 'createIdentifier' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: '' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createLiteral' has been deprecated since v4.0.0. Use `factory.createStringLiteral`, `factory.createStringLiteralFromNode`, `factory.createNumericLiteral`, `factory.createBigIntLiteral`, `factory.createTrue`, `factory.createFalse`, or the factory supplied by your transformation context instead.
DeprecationWarning: 'createBinaryExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createPropertyAssignment' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createObjectLiteralExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTypeOfExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createElementAccessExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createIfStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createBlock' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createVariableDeclaration' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createCatchClause' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTryStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createFalse' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
99% done plugins webpack-hot-middlewarewebpack built preview 87584c4da0edd89a2389 in 9314ms
ModuleNotFoundError: Module not found: Error: Can't resolve '@/libs/twmerge/index' in '/home/reohakuta/repos/shikosai32-front/src/components/Button'
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/Compilation.js:2016:28
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:798:13
at eval (eval at create (/home/reohakuta/repos/shikosai32-front/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:270:22
at eval (eval at create (/home/reohakuta/repos/shikosai32-front/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:434:22
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:116:11
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:670:25
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:855:8
at /home/reohakuta/repos/shikosai32-front/node_modules/webpack/lib/NormalModuleFactory.js:975:5
resolve '@/libs/twmerge/index' in '/home/reohakuta/repos/shikosai32-front/src/components/Button'
Parsed request is a module
using description file: /home/reohakuta/repos/shikosai32-front/package.json (relative path: ./src/components/Button)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/home/reohakuta/repos/shikosai32-front/src/components/Button/node_modules doesn't exist or is not a directory
/home/reohakuta/repos/shikosai32-front/src/components/node_modules doesn't exist or is not a directory
/home/reohakuta/repos/shikosai32-front/src/node_modules doesn't exist or is not a directory
looking for modules in /home/reohakuta/repos/shikosai32-front/node_modules
/home/reohakuta/repos/shikosai32-front/node_modules/@/libs doesn't exist
/home/reohakuta/repos/node_modules doesn't exist or is not a directory
/home/reohakuta/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
info => Loading presets
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ハンバーガーメニューとナビゲーションメニューの中で使いまわしたいからです。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.