Stories only respect folders some of the time

[cmw9706]

Describe the bug

I am using storybook with typescript. I create a component and a corresponding story in a folder under the stories folder, for example,

touch .storybook/stories/Inputs/SearchInput.tsx
touch .storybook/stories/Inputs/SearchInput.stories.tsx

I create my components and run storybook generate

yarn storybook-generate

Now I run my app

yarn ios

When I run my app, my newly created component DOES NOT show up the in the inputs directory where it should be but rather directly below it.

This happens inconsistently, half the time I will create a component/stories in a directory and it will render in app in that directory, half the time i will create a component/stories in a directory, and I will render outside of the directory. When I check the storybook.require.js - I see the folders being picked up?

Not sure what I am missing here, the code to create both stories is nearly identical?

// The component the renders in the folder 

import { View } from 'react-native';
import { IconInput } from './IconInput';
import React from 'react';

const IconInputMeta = {
  name: 'IconInput',
  component: IconInput,
  args: {
    placeHolderText: 'Placeholder',
    isPassword: false,
    hasError: false,
  },
  decorators: [
    (Story: any) => (
      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
        <Story />
      </View>
    ),
  ],
};

export default IconInputMeta;

export const Basic = {};

export const Password = {
  args: {
    isPassword: true,
  },
};
export const Error = {
  args: {
    hasError: true,
  },
};

// The component that does not render in the folder

import { View } from 'react-native';
import React from 'react';
import { SearchInput } from './SearchInput';

const SearchInputMeta = {
  title: 'SearchInput',
  component: SearchInput,
  argTypes: {
    onChangeText: { action: 'Text changed' },
  },
  args: {
    placeHolderText: 'Search',
  },
  decorators: [
    (Story: any) => (
      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
        <Story />
      </View>
    ),
  ],
};

export default SearchInputMeta;

export const Basic = {};

[dannyhw]

@cmw9706 the structure is not dependent on your folder structure it depends on the title in the meta (default export). If you want it to show in inputs you should make the title inputs/SearchInput

[cmw9706]

Oh snap - I realized that using the 'name:' property makes the component respect the folder structure but using title doesn't. I assume if I make the title as you say this will work properly, but if the behavior with the name property expected? I changed

  title: 'SearchInput',

to

  name: 'SearchInput',

And now my SearchInput is in the inputs directory

[dannyhw]

@cmw9706 I don't think thats actually the case, probably you're just getting an automatic title and if you removed the name property it would still be there.

Automatic titles can be generated by your folder structure if you don't have a title manually defined.

[cmw9706]

Is this documented somewhere?/Would there be a good place to document it?

[dannyhw]

The storybook website has some information about auto titles and this feature is copied from the web. Not sure if this needs to be added in this repo or not. Maybe at some point it makes sense to have a rn storybook documentation website.