Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Type errors for stories args are not thrown when running lint #164

Open
WiktorHejman opened this issue Aug 16, 2024 · 0 comments
Open

Type errors for stories args are not thrown when running lint #164

WiktorHejman opened this issue Aug 16, 2024 · 0 comments

Comments

@WiktorHejman
Copy link

WiktorHejman commented Aug 16, 2024

Describe the bug
I've noticed some inconsistent behavior with the linting rules for stories, but it will be easier to explain with a simple example. Let's say we have a basic button component that looks like this:

type ButtonVariant = "primary" | "secondary";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
}

export const Button: React.FC<ButtonProps> = ({ ...props }) => {
  return <button {...props}>click</button>;
};

and we wrote some simple stories for it:

type StoryProps = ComponentProps<typeof Button>;

const meta: Meta<StoryProps> = {
  component: Button,
  tags: ["autodocs"],
  argTypes: {
    variant: {
      options: ["primary", "secondary"],
      control: {
        type: "select",
      },
    },
  },
};

export default meta;

type Story = StoryObj<StoryProps>;

export const Primary: Story = {
  args: {
    variant: "variant-that-do-not-exist-or-whatever",
  },
};

export const Secondary: Story = {
  args: {
    variant: "secondary",
  },
};

when the file is opened in the editor, the linter highlights the "variant" property with an error message, but running the lint script doesn't result in an error.

To Reproduce
Steps to reproduce the behavior:

  1. Provide any error value for one of args properties in Story object
  2. Save file
  3. Run lint

Expected behavior
IMO error should be thrown by eslint. Or shouldn't be? If not, then why?

Screenshots
File:
image

Terminal output after running lint:
image

Additional context
Below you can find rest of the project config.

package.json

{
  "name": "playground",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^1.6.1",
    "@eslint/js": "8.57.0",
    "@storybook/addon-essentials": "8.2.4",
    "@storybook/addon-interactions": "^8.2.9",
    "@storybook/addon-links": "^8.2.9",
    "@storybook/addon-onboarding": "^8.2.9",
    "@storybook/blocks": "^8.2.9",
    "@storybook/react": "8.2.4",
    "@storybook/react-vite": "8.2.4",
    "@storybook/test": "8.2.4",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "8.1.0",
    "@typescript-eslint/parser": "8.1.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "8.57.0",
    "eslint-plugin-react": "7.35.0",
    "eslint-plugin-react-hooks": "4.6.2",
    "eslint-plugin-react-refresh": "0.4.7",
    "eslint-plugin-storybook": "0.8.0",
    "globals": "^15.9.0",
    "storybook": "8.2.4",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.0",
    "vite": "^5.4.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "allowJs": false,
    "skipLibCheck": true,

    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": ["src"]
}

.eslintrc.cjs

module.exports = {
  root: true,
  extends: [
    "eslint:recommended",
    "plugin:react-hooks/recommended",
    "plugin:react/jsx-runtime",
    "plugin:storybook/recommended",
    "plugin:@typescript-eslint/recommended-type-checked",
  ],
  plugins: [
    "react",
    "react-hooks",
    "react-refresh",
    "@typescript-eslint",
    "storybook",
  ],
  env: { browser: true, es2020: true },
  ignorePatterns: [
    "dist",
    "storybook-static",
    ".eslintrc.cjs",
    "vite.config.ts",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: true,
    ecmaFeatures: { jsx: true },
  },
  settings: {
    react: {
      version: "detect",
    },
  },
};
@WiktorHejman WiktorHejman changed the title Type error for stories args is not thrown when running lint Type errors for stories args are not thrown when running lint Aug 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant