ioulian / next-io-ghent-starter Goto Github PK

https://github.com/edvardchen/eslint-plugin-i18next

• https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-constructed-context-values.md
• https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md
• https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md
• https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-invalid-html-attribute.md
• https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-object-type-as-default-prop.md
• https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md
• https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/void-dom-elements-no-children.md

TS:

• https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/strict.ts
• https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/strict-type-checked.ts

check if feasable

https://catjam.fi/articles/ultimate-button-component

Use type="button" by default, need to check forms then

remove @ts-ignore

https://polished.js.org/docs/

check if .env contains process.d.ts values

X-Content-Type-Options
Content-Security-Policy
Cache-Control

import { ComponentProps } from "react";
import {
StyledComponentInnerComponent,
StyledComponentInnerOtherProps,
AnyStyledComponent,
StyledComponentPropsWithRef,
} from "styled-components";

export type inferStyledTypes = ComponentProps<
StyledComponentInnerComponent

&
StyledComponentInnerOtherProps &
StyledComponentPropsWithRef;

• check if useReducer can be used
• check if objects that are passed as props can be memoized
• add ignore prop to useEffects where needed

To create needed files for PWA, currently this is a manual step. Find a PWA generator

https://twitter.com/leeerob/status/1743709145386131906

https://smoothshadows.com/

https://github.com/vercel/satori

It's possible to add typechecking for the i18n labels. You just need to define which files that should be used for type checking.
Example: mijnenergie-kbc
In mijnenergie-kbc I also added a node script which checks if the translation files aren't missing any keys. This script is currently for just 2 languages but could be easily expanded based on the needs.

https://github.com/isaachinman/next-i18next#reloading-resources-in-development

Check Storybook for not picking up eslint linkComponents configuration, target="_blank" doesn't require rel="noreferrer" in stories.tsx files.

{
  "extends": "next/core-web-vitals",
  "settings": {
    "next": {
      "rootDir": "packages/visitor-app/"
    }
  },
  "rules": {
    "import/order": ["error", {
      "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
      "pathGroups": [
        {
          "pattern": "@common/**",
          "group": "internal",
          "position": "after"
        },
        {
          "pattern": "@WBTypes/**",
          "group": "internal",
          "position": "before"
        }
      ],
      "newlines-between": "always",
      "pathGroupsExcludedImportTypes": ["builtin"]
    }]
  }
}

And fix code then

https://www.npmjs.com/package/babel-plugin-inline-react-svg

https://github.com/tatethurston/nextjs-routes

Functional component

{
  "React Functional Component": {
    "prefix": ["rfc"],
    "body": [
      "import { FC } from \"react\";",
      "",
      "import { InferComponentProps } from \"@/types/styled\";",
      "",
      "import { Styled$TM_FILENAME_BASE } from \"./$TM_FILENAME_BASE.styles\";",
      "",
      "const $TM_FILENAME_BASE: FC<InferComponentProps<typeof Styled$TM_FILENAME_BASE>> = ({children, ...props}) => {",
      "  return (",
      "    <Styled$TM_FILENAME_BASE {...props}>",
      "      {children}$2",
      "    </Styled$TM_FILENAME_BASE>",
      "  )",
      "};",
      "",
      "export default $TM_FILENAME_BASE",
      ""
    ],
    "description": "React Functional Component (styled)"
  }
}

Styled Component

{
  "React Styled Component": {
    "prefix": ["rsc"],
    "body": [
      "import styled from \"styled-components\";",
      "",
      "export const Styled${TM_FILENAME_BASE/.styles$//g} = styled.$2``",
      ""
    ],
    "description": "React Styled Component"
  }
}

Story component

{
  "React Stories Component": {
    "prefix": ["rstc"],
    "body": [
      "import type { Meta, StoryObj } from \"@storybook/react\";",
      "",
      "import ${TM_FILENAME_BASE/.stories$//g} from \"./${TM_FILENAME_BASE/.stories$//g}\";",
      "",
      "const meta: Meta<typeof ${TM_FILENAME_BASE/.stories$//g}> = {",
      "  title: \"UI/${TM_FILENAME_BASE/.stories$//g}\",",
      "  component: ${TM_FILENAME_BASE/.stories$//g},",
      "  tags: [\"autodocs\"],",
      "};",
      "",
      "export default meta;",
      "type Story = StoryObj<typeof ${TM_FILENAME_BASE/.stories$//g}>;",
      "",
      "export const Default: Story = {",
      "  args: {",
      "    children: \"${TM_FILENAME_BASE/.stories$//g}\",",
      "  },",
      "};",
      ""
    ],
    "description": "React Stories Component"
  }
}

https://stackoverflow.com/questions/51791163/warning-prop-classname-did-not-match-when-using-styled-components-with-seman

https://github.com/isaachinman/next-i18next#reloading-resources-in-development

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#accessibility_concerns

flex-direction: ${({ $alignRight }) => ($alignRight ? "row-reverse" : "row")};

The buttons inside the group should effectively be reordered semantically and not only visually, as a rule of thumb we should prevent using row-reverse and column-reverse since it breaks visual and DOM connection.

https://zxcvbn-ts.github.io/zxcvbn/ is a better password strength checker, but it's heavy and needs to be loaded on demand.

https://storybook.js.org/recipes/styled-components

vercel/next.js#31439

Roadmap:

Critical:

• svg-sprite-loader (+svgo) -> works, maybe check this, but probably won't work
• styled-components -> https://github.com/dlehmhus/next-with-linaria works, add helper: getThemeVar, and pass path as string to get name of the global css variable (use intellisense as with translations)
• common components -> TODO
• i18n (using next-intl?) -> works with next-intl also: https://next-intl-docs.vercel.app/docs/workflows/typescript
• SEO -> refactor to native next.js implementation -> will work
• Sitemap -> works, but need manual configuration for localized routes, also, does not work for app/

Can wait

• Bundle analyser -> should work
• Auth
• Data loading helpers + useSWR

kirill-konshin/next-redux-wrapper#472

This improves focus state visibility:

button, a { outline-offset: 4px; }

Before:

After:

as?: keyof JSX.IntrinsicElements