GithubHelp home page GithubHelp logo

3i-shikosai32 / shikosai32-front Goto Github PK

View Code? Open in Web Editor NEW
5.0 1.0 2.0 12.1 MB

A board game result tracker for "OZ" held in the 32nd Shikosai at NITIC

Home Page: https://3i.shikosai.net

License: Other

JavaScript 2.12% TypeScript 97.71% SCSS 0.17%
figma firebase-auth framer-motion graphql nextjs radix-ui tailwindcss typescript urql

shikosai32-front's Introduction

shikosai32-front

Setup

  1. リポジトリをクローンする。 
    git clone "https://github.com/3I-shikosai32/shikosai32-front"
cd "shikosai32-front"
  2. 依存パッケージをインストールする。 
    yarn install
  3. 責任者から環境変数を受け取り、それをもとに.envファイルを作成する。
  4. サーバーを起動し、手順が上手くいっていることを確認する。 
    yarn dev

Design

shikosai32-front's People

Contributors

dino3616 avatar ituki0426 avatar koutyuke avatar renovate[bot] avatar reohakase avatar st20301by avatar

Stargazers

avatar avatar avatar

Watchers

avatar

Forkers

st20301by prowlee

shikosai32-front's Issues

Cardの作成

中身となる要素を子要素で指定できるようにしてください。

Toggleの作成

トグル切り替え時にある程度アニメーションがあるとベストです。

コンポーネントのPropsとして受け取ったTailwindのユーティリティクラスを、優先して適用させられるようにする

現状

#17 のようなコンポーネントにデフォルトのスタイルを設定しつつ、background-colorなどを含めたスタイルを外部から変更できるようにしたい場合に必要となる。
このとき、TailwindCSSを使用しているため、「classNameをPropsとして受け取り自身のクラス指定に追加する」といった実装となる。
しかし、Tailwindは下記のように、ユーティリティクラス名のみでスタイルを指定するため、すべてのスタイルが同じ詳細度を持つ。したがって、その優先順位は記述されたCSSがより後に読み込まれたものが優先される。

.text-neutral-900 {
  --tw-text-opacity: 1;
  color: rgb(8 15 22 / var(--tw-text-opacity));
}

CodePenでCSSの動作を確かめる

考えられる対応策

参考 [Feature Proposal] CSS class override utility for component composition.
#1446

その1: !important でデフォルトのものを上書きする

使うべきではないと思う

<Button className="!bg-success-700">
  Hello world!
</Button>

その2: :where()疑似クラスを使ってデフォルトのスタイルの詳細度を０にしておく

where:bg-***のようにTailwindのVariantとして使えるようにプラグインを書く。
使う側は、その１とは違い!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()で詳細度を下げるのは現実的ではないと思いました

★ その3: 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-*などの独自のクラスにも対応できる
  • GitHubスター数563と多め
  • 直近コミットが16日前

その4: カスタムクラスを@layer componentsで作成する

image
Tailwindはここで定義されたものを含むcomponentsクラスをbg-red-500等のユーティリティクラスよりも前に挿入するから、それを使用したスタイルの上書きが適切に行えるようになる。しかし、多階層の上書きはできない

Storybookで"../src/styles/global.scss"を解決することができない

概要

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.

`<Modal>`に諸機能を追加する

  • <Modal>の展開先をpropsから受け取り、radix-ui提供の<Dialog.Portal>を介して指定できるようにする。
  • <Modal>を開いたときのオーバーレイのスタイルを外部から変更できるようにする。これは Hamburger #2 で再利用できるようにするため。

Storybookで"@/"から始まる絶対パスでモジュールを解決できない

概要

ModuleNotFoundError: Module not found: Error: Can't resolve '@/libs/twmerge/index' in '/home/reohakuta/repos/shikosai32-front/src/components/Button'

参考: Storybookでimport aliasを使う

エラー文

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.

Modalの作成

中身となる要素を子要素で指定できるとベストです。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.