Af 41 setup project fix

[remove-checksum]

Дополнения к #1 AF-41

---

Новые зависимости

• eslint-плагины для React
• react-bulma-components + bulma + sass (нужен для конфигурации bulma)
• commitlint-плагин для обязательного scope при feat/refactor/fix коммитах
• шрифт rubik-bubbles (только woff2)

Плоская структура папок

api - api-клиент
app - инициализация приложения
assets
components
features - модули бизнес-логики
hocs
hooks
pages
store

[Aleksandr-86]

@remove-checksum Отлично👍

1. В папку assets можно добавить ещё одну папку images (assets/images).

2. Также предлагаю переименовать маршрут
   15 <Route path="/user" element={<Landing />} />
   в
   15 <Route path="/profile" element={<Landing />} />
   (packages/client/src/pages/index.tsx)

3. Возможно следует сбросить поля и отступы добавив в головной файл стилей следующие строки:
   * { margin: 0; padding: 0; box-sizing: border-box; }
   (packages/client/src/app/app.module.css)

[archebaldo77]

Отличная работа по базовой настройке проекта, ранее была согласована с членами команды.

[DazzlingFame]

Привет, по большому счету всё ок. Структура проекта выглядит хорошо.
При пр я посмотрел так же и немного вокруг изменений.

Кроме тех комментариев, которые прикреплены к коду ещё прошу обратить внимание на наличие

• console.log в коде. Советую не пропускать никаких консолей в основную ветку. Если надо что-то подебажить в консоли, стоит оставлять это в рабочей ветке.
• .gitkeep. Тут можно почитать про назначение gitkeep. По-хорошему они были нужны только для сохранения целостности шаблона проекта, в рабочем репозитории стоит от них избавиться. (Если и не на текущем этапе, то точно в моменты, когда в директориях появляются файлы)

Комментарии по самой структуре:

• предлагаю вам везде использовать CamelCase нейминг в названиях файлов и директорий. React компоненты именуются с его использованием. Более единообразно было бы использовать одну конвенцию нейминга во всем проекте
• в вебе больше подходит нейминг page, чем screen для именования страниц, предлагаю использовать его
• немного странно выглядит дир game-screen внутри дира components. По логике названия внутри components должны лежать компоненты страниц, а страницы game-screen в pages я не увидел
• в дополнение к предыдущим комментариям предлагаю переименовать game-screen в что-то более говорящее о назначении страницы, например gameMenu или gameLanding и дальше использовать для компонентов этой страницы дир с таким же названием, чтобы можно было легко определить какие компоненты относятся к каким страницам

pages/gameMenu/index.tsx
components/gameMenu/header.tsx
components/gameMenu/menuItem.tsx

итд

[DazzlingFame]

eslint-disable стоит выставлять только в самых крайних случаях, и даже в таких случаях стоит всегда дополнительно указывать комментариями, почему он проставлен и какие действия предпринимались, чтобы избежать игнора.

В данном случае ошибка, скорее всего, заключается в том, что имена реакт компонентов должны начинаться с большой буквы.

Если исправить нейминг component, то так же откроется возможность указывать его дальше в JSX формате, те в стиле <WrappedComponent />

[remove-checksum]

Как указано в issue, плагин считает все анонимные функции, возвращающие jsx, компонентами, и требует указать для них имя
jsx-eslint/eslint-plugin-react#597

Правило показывает ошибку для hoc и render props, считаю допустимым его отключить в edb9efe

[DazzlingFame]

линтовые правила лучше не отключать, если они мешают при каких-то корнер кейсах. В том же issue jsx-eslint/eslint-plugin-react#597 предлагается решение с

export const withRouter = (component: () => ReactNode) => function withRouter() {
  return <BrowserRouter>{component()}</BrowserRouter>
}

[remove-checksum]

Изменения

• отключил eslint-plugin-react/displpay-name правило
• переименовал game-screen в GameDisplay
• добавил stylelint и stylelint-order

[DazzlingFame]

Давайте дальше вести работу в одном репозитории и разных ветках, а не в форках. Так будет намного удобнее переключаться между мейн веткой и рабочей веткой для прослеживания изменений.

По изменениям:

• сейчас получается, что в проекте часть диров с большой буквы, часть с маленькой. Лучше унифицировать, например, все называть с маленькой (это про GameDisplay)

Ещё по коду из того, что уже было влито, но хорошо бы поправить:

• советую добавить линт правило 'no-console': 'error' чтобы не допустить консолей в продакшн коде

Можно вынести и поправить отдельно в друго ПР

• при экспортах формат записи export {...} в конце файла может ухудшать читаемость и быть избыточным. Советую просто писать export const ... в месте объявления переменной/функции
• в хуках лучше не держать лишнего кода. В этом случае всё будет нормально, но в варианте, если зависимости у useEffect есть, функция будет пересоздаваться на каждый его вызов. Для унификации кода лучше применять правило: если функцию возможно вынести, лучше вынести. В данном случае у fetchServerData нет зависимостей от компонента вообще. Предлагаю его вынести в отдельный файл, где будут лежать запросы к API

  useEffect(() => {
    const fetchServerData = async () => {
      const url = `http://localhost:${__SERVER_PORT__}`
      const response = await fetch(url)
      const data = await response.json()
      console.log(data)
    }

    fetchServerData()
  }, [])

[DazzlingFame]

Хорошо, что вы используете HOC'и, но не стоит из-за них усложнять код. Если hoc будет использоваться только в 1 файле, от него лучше избавиться.

Более того, такой формат main файла совершенно нормален (пример из реального проекта)

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <Provider store={store}>
      <QueryClientProvider client={queryClient}>
        <ConnectedRouter history={history}>
          <GlobalStyle />
          <ScreenReaderMarker />
          <AppNavigator />
        </ConnectedRouter>
      </QueryClientProvider>
    </Provider>
  );

[remove-checksum]

Добавил исправления

• Удалил hocs в 19be469
• Переименовал папку однообразно c9701d3
• Добавил warn при использовании console e16e925

Если ветку можно сливать, пожалуйста одобрите изменения

[DazzlingFame]

👍