Add a template that has colocated tests and stories out-of-the-box

[spxrogers]

Current Behavior

TSDX bootstraps a folder structure as:

src
└── index.tsx # <Thing /> component defined here.
stories
└── Thing.stories.tsx
test
└── blah.test.tsx # 'Thing' tests defined here.

Desired Behavior

As a library grows to a larger size, the flat-directory nature of the package can benefit from the (subjectively nice) colocation of components with their tests and stories:

src
├── components
│   ├── Thing1
│   │   ├── Thing1.stories.tsx
│   │   ├── Thing1.test.tsx
│   │   └── Thing1.tsx
│   └── Thing2
│       ├── Thing2.stories.tsx
│       ├── Thing2.test.tsx
│       └── Thing2.tsx
└── index.tsx

// src/index.tsx
export * from './components/Thing1/Thing1';
export * from './components/Thing2/Thing2';

Suggested Solution

Builtin support for this structure out of the box, such the same as adding support for Storybook or not.

Who does this impact? Who is this for?

Component library owners who bootstrap with TSDX.

Describe alternatives you've considered

¯\_(ツ)_/¯

Additional context / Request

The above manual restructure works, and all is dandy with an accompanying .storybook/main.js diff:

-   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
+   stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'],

However, the stories now also end up in dist/:

dist
├── components
│   ├── Thing1
│   │   ├── Thing1.d.ts
│   │   └── Thing1.stories.d.ts # sad!
│   └── Thing2
│       ├── Thing2.d.ts
│       └── Thing2.stories.d.ts # sad!
├── index.d.ts
├── index.js
├── tsdx-component-lib.cjs.development.js
├── tsdx-component-lib.cjs.development.js.map
├── tsdx-component-lib.cjs.production.min.js
├── tsdx-component-lib.cjs.production.min.js.map
├── tsdx-component-lib.esm.js
└── tsdx-component-lib.esm.js.map

If there is guidance on how to avoid bundling the *.stories.d.ts files in the output, that would be grand.

---

ref: An example/reference repo I walked through to validate the above: https://github.com/spxrogers/tsdx-component-lib