Closed hsablonniere closed 2 years ago
Overall, I would go with option 2: it looks better for maintainability and understanding, especially in the long term.
And I would put everything in the same folder as the component: I could imagine having stories and/or tests in a distinct folder, as they are part of a "different" stack but I've got no true reason to do this (not convinced).
And I agree with the root
folder availability.
About this, I know it is possible to explicitly specify the package's entry points but I had trouble using it in a previous project: https://nodejs.org/api/packages.html#package-entry-points
I would choose the second option where we, as much as possible, colocate files together. It's a common practive in JavaScript projects to do so. I find it easier to navigate and understand. It's also easier to know which files are involved in one component.
I do find the second option to be better as well. Also it will probably be much easier to navigate through the files for us with that option than the first one.
About this, I know it is possible to explicitly specify the package's entry points but I had trouble using it in a previous project: nodejs.org/api/packages.html#package-entry-points
Yes, I tried experimenting with this but support with smart CDNs and some bundlers was still a bit weird... We'll try again in the future.
I did some experiments with rollup and I'm sad :cry:
output.preserveModules
and output.entryFileNames
to flatten the output in dist
OK, I tried all files as inputs and it seems to work :tada:
:tada: I found a way to move files automatically with a custom config of Rollup :heart:
src
JS files into the right placestories/**/cc-component.stories.js
files into the right placeimport.meta.url
(we could inline the plugin an adapt it)
stories
folder have to be manually moved (like MD files)Things that feel right:
src/components/cc-component-name/cc-component-name.js
src/components/cc-component-name/cc-component-name.stories.js
src/components/cc-component-name/cc-component-name.smart.js
src/assets/image.svg
src/lib
, src/mixins
, src/styles
and src/translations
Things we should discuss:
├── stories
│ ├── assets
│ │ ├── 24-hours-points.js
│ │ ├── addon-plans.js
│ │ ├── country-city-points-big-orga.js
│ │ ├── country-city-points-medium-orga.js
│ │ ├── country-city-points-normal-orga.js
│ │ ├── price-system.js
│ │ └── runtime-plans.js
│ ├── atoms
│ │ └── all-form-controls.js
│ ├── lib
│ │ ├── dom.js
│ │ ├── i18n-control.js
│ │ ├── make-story.js
│ │ ├── sequence.js
│ │ ├── story-names.js
│ │ └── timers.js
│ ├── maps
│ │ └── fake-map-data.js
Those files are only used by stories.
src/stories/*
stories/*
NOTE: images in stories/assets
were moved to src/assets
.
Is it bad if we have images in there that are only used by stories?
Thinking about those exceptions:
stories/assets/image.svg
going into src/assets/image.svg
doesn't bother me much
stories/assets/*.js
are mostly "fixtures", data used for stories
src/fixtures
or src/stories/fixtures
and be used by storiesstories/maps/fake-map-data.js
stories/atoms/all-form-controls.js
is really tricky, it's a special story we reuse in other storiesstories/lib
are story lib/helpers and I don't think we should mix them with production code libI propose something like this (where stories
is inside src
):
├── stories
│ ├── fixtures
│ │ ├── 24-hours-points.js
│ │ ├── addon-plans.js
│ │ ├── country-city-points-big-orga.js
│ │ ├── country-city-points-medium-orga.js
│ │ ├── country-city-points-normal-orga.js
│ │ ├── fake-map-data.js
│ │ ├── price-system.js
│ │ └── runtime-plans.js
│ ├── lib
│ │ ├── dom.js
│ │ ├── i18n-control.js
│ │ ├── make-story.js
│ │ ├── sequence.js
│ │ ├── story-names.js
│ │ └── timers.js
│ └── all-form-controls.js
NOTE: I gave a look at multiple component library repos on GitHub (thanks https://storybook.js.org/showcase/projects) and most of them put everything in src/components/ComponentName
. Some of them put the component folders directly in src
but I'm not sold on this (even if it means one less level).
NOTE: If we move the tests from test
to something inside src/**
, we'll have to update our ESLint config.
WARNING: I completely forgot about types.d.ts
files, they must be moved and merged manually.
I'm considering removing most of the "folders" in the Storybook and only keep:
I like the organization
├── stories
│ ├── fixtures
│ ├── lib
│ └── all-form-controls.js
I would prefer the assets used only by stories to be located inside the stories
directory:
├── stories
│ ├── assets
│ ├── fixtures
│ ├── lib
│ └── all-form-controls.js
I would prefer having a components
sub-directory:
├──src
│ ├── components
│ ├── stories
I like the organization
:+1:
I would prefer the assets used only by stories to be located inside the stories directory:
I'm OK with both :+1:
I would prefer having a components sub-directory:
It's already like this :+1:
Context
All components are organized in folders that have some kind of meaning. It can be semantic:
atoms
or related to the domain:env-vars
.Problems
NOTE: The folder is not used by Storybook for the left menu/tree (even if it's the same). This is done through CSF config.
Proposition
1) Component files in
src/components
Example: we move
src/atoms/cc-input-text.js
tosrc/components/cc-input-text.js
.types.d.ts
?types.d.ts
file.2) Component files in
src/components/cc-my-component
Example: we move
src/atoms/cc-input-text.js
tosrc/components/cc-input-text/cc-input-text.js
.types.d.ts
?types.d.ts
in the same folder as the componenttypes.d.ts
for types used by multiple componentssrc/homepage/cc-article-list.smart.js
tosrc/components/cc-article-list/cc-article-list.smart.js
.stories/atoms/cc-input-text.stories.js
tosrc/components/cc-input-text/cc-input-text.stories.js
.stories/homepage/cc-article-list.smart.md
tosrc/components/cc-article-list/cc-article-list.smart.md
.Impacts
In both cases, I propose that we publish to npm with all components directly available in the
root
folder.:warning: This is a breaking change.