Controls panel is always empty. Even when passing in correct args / argTypes to story.

[goralight]

Summary

On storybook, I currently don't see any controls available on the controls tab. I have correctly added the args and argTypes for the component I want to show. This used to work, it would show the props of the component within the controls tab. But since around 14th May 2024, these controls just stopped working.

Example component and story:

// index.tsx
export interface RowProps extends React.HTMLAttributes<HTMLElement> {
  children: React.ReactNode
  pl?: number
  pr?: number
  pt?: number
  pb?: number
}
const Row = (props: RowProps): JSX.Element => {
  return (
    <RowContainer {...props}>
      {props.children}
    </RowContainer>
  )
}

// Row.stories.tsx
const meta = {
  title: 'Atoms/Row',
  component: Row,
  args: {
    pl: 10,
    pr: 10,
    pt: 10,
    pb: 10,
    children: <Typography element='p'>Row contents</Typography>,
  },
  argTypes: {
    pt: {
      description: 'Top padding in pixels (px)',
      type: {
        name: 'number',
        required: false
      }
    },
    pb: {
      description: 'Bottom padding in pixels (px)',
      type: {
        name: 'number',
        required: false
      }
    },
    pl: {
      description: 'Left padding in pixels (px)',
      type: {
        name: 'number',
        required: false
      }
    },
    pr: {
      description: 'Right padding in pixels (px)',
      type: {
        name: 'number',
        required: false
      }
    }
  },
  parameters: {
    docs: {
      description: { component: componentDescription }
    }
  }
} satisfies Meta<typeof Row>

export default meta
type Story = StoryObj<typeof meta>

export const PrimaryStory: Story = {
  ...TemplateStory,
  args: {
    ...meta.args
  }
}
PrimaryStory.storyName = 'Row'

// .storybook/main.ts
/* eslint-disable @typescript-eslint/no-var-requires */
import { StorybookConfig } from '@storybook/react-vite'
import turbosnap from 'vite-plugin-turbosnap'
import { mergeConfig } from 'vite'
const { execSync } = require('child_process')
const path = require('path')

const config: StorybookConfig = {
  stories: [
    '../src/**/*.stories.tsx'
  ],

  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-designs',
    'storybook-react-i18next'
  ],

  framework: {
    name: '@storybook/react-vite',
    options: {}
  },

  async viteFinal (config) {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config?.resolve?.alias,
        path: require.resolve('path-browserify'),
        tests: path.resolve(__dirname, '../tests'),
        src: path.resolve(__dirname, '../src'),
        atoms: path.resolve(__dirname, '../src/components/atoms'),
        molecules: path.resolve(__dirname, '../src/components/molecules')
      }

    }
    return mergeConfig(config, {
      plugins: [
        turbosnap({ rootDir: config.root ?? process.cwd() })
      ]
    })
  },

  env: (config) => ({
    ...config,
    STORYBOOK_CI_BRANCH: execSync('git rev-parse --abbrev-ref HEAD').toString().trimEnd()
  }),

  docs: {
    autodocs: true
  }
}

export default config

Dependencies:

// Typescript version:
    "typescript": "5.4.2"
// react version:
    "react": "18.2.0",
    "react-dom": "18.2.0",
// Emotion styled components versions:
    "@emotion/babel-plugin": "11.11.0",
    "@emotion/react": "11.11.4",
    "@emotion/styled": "11.11.0",
// All storybook dependency versions:
    "storybook": "7.6.17",
    "storybook-react-i18next": "2.0.10",
    "@storybook/addon-actions": "7.6.17",
    "@storybook/addon-designs": "7.0.9",
    "@storybook/addon-essentials": "7.6.17",
    "@storybook/addon-interactions": "7.6.17",
    "@storybook/addon-jest": "7.6.17",
    "@storybook/addon-links": "7.6.17",
    "@storybook/addon-themes": "7.6.17",
    "@storybook/api": "7.6.17",
    "@storybook/jest": "0.2.3",
    "@storybook/react": "7.6.17",
    "@storybook/react-vite": "7.6.17",
    "@storybook/test-runner": "0.16.0",
    "@storybook/testing-library": "0.2.2"

Additional information

I created an example on https://storybook.new, took the button example and placed it in my local running version of storybook. The controls do not appear but appear fine in the stackblitz

Create a reproduction

No response

[goralight]

And just like that, this issue which has been an issue since May, just randomly fixed itself with no code changes or anything.. Maybe something under the hood with storybook fixed itself or something? Who knows..