Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/plugins/woocommerce-blocks/docs/contributors/components.md

43 lines
2.5 KiB
Markdown
Raw Normal View History

clarify intentions / purpose of different component folders in docs (https://github.com/woocommerce/woocommerce-blocks/pull/3025) * add high-level docs about our components & remove stale detail info * use current collection/folder naming in docs: - let's rename js/components in a separate PR - split paragraphs on to separate lines to improve future diffs * rename storybook.md => components.md and update link/summary * tweak component collection docs: - base have more stringent requirements, since they can be used anywhere - editor components are less strict and can assume editor context * clarify js/base/components readme in line with main doc * remove line about editor components being specialised to woo blocks
2020-08-26 20:15:16 +00:00
# Storybook & Components
This repo includes [Storybook](https://storybook.js.org) tooling so we can test and develop components in isolation.
Change default branch name to trunk (https://github.com/woocommerce/woocommerce-blocks/pull/3199) * replace references to main branch with references to trunk * update travis config to point to trunk not main branch * more branch name changes
2020-09-26 17:28:16 +00:00
The storybook is automatically built and published to [GitHub pages](https://woocommerce.github.io/woocommerce-gutenberg-products-block/) on every push to the main branch. See [travis.yml](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/.travis.yml) for details.
clarify intentions / purpose of different component folders in docs (https://github.com/woocommerce/woocommerce-blocks/pull/3025) * add high-level docs about our components & remove stale detail info * use current collection/folder naming in docs: - let's rename js/components in a separate PR - split paragraphs on to separate lines to improve future diffs * rename storybook.md => components.md and update link/summary * tweak component collection docs: - base have more stringent requirements, since they can be used anywhere - editor components are less strict and can assume editor context * clarify js/base/components readme in line with main doc * remove line about editor components being specialised to woo blocks
2020-08-26 20:15:16 +00:00
https://woocommerce.github.io/woocommerce-gutenberg-products-block/
## Where are our components?
We have components in a few folders, for different contexts.
Change default branch name to trunk (https://github.com/woocommerce/woocommerce-blocks/pull/3199) * replace references to main branch with references to trunk * update travis config to point to trunk not main branch * more branch name changes
2020-09-26 17:28:16 +00:00
- [`assets/js/base/components`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/base/components)
- [`assets/js/editor-components`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/editor-components)
- [`assets/js/icons`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/assets/js/icons)
clarify intentions / purpose of different component folders in docs (https://github.com/woocommerce/woocommerce-blocks/pull/3025) * add high-level docs about our components & remove stale detail info * use current collection/folder naming in docs: - let's rename js/components in a separate PR - split paragraphs on to separate lines to improve future diffs * rename storybook.md => components.md and update link/summary * tweak component collection docs: - base have more stringent requirements, since they can be used anywhere - editor components are less strict and can assume editor context * clarify js/base/components readme in line with main doc * remove line about editor components being specialised to woo blocks
2020-08-26 20:15:16 +00:00
Change default branch name to trunk (https://github.com/woocommerce/woocommerce-blocks/pull/3199) * replace references to main branch with references to trunk * update travis config to point to trunk not main branch * more branch name changes
2020-09-26 17:28:16 +00:00
__`assets/js/base/components`__ are used in front-end code, as well as editor & admin.
clarify intentions / purpose of different component folders in docs (https://github.com/woocommerce/woocommerce-blocks/pull/3025) * add high-level docs about our components & remove stale detail info * use current collection/folder naming in docs: - let's rename js/components in a separate PR - split paragraphs on to separate lines to improve future diffs * rename storybook.md => components.md and update link/summary * tweak component collection docs: - base have more stringent requirements, since they can be used anywhere - editor components are less strict and can assume editor context * clarify js/base/components readme in line with main doc * remove line about editor components being specialised to woo blocks
2020-08-26 20:15:16 +00:00
These components help us build consistent interfaces across the front end (shopper) experience and elsewhere.
Because they can be used in the front end and editor, components in this folder should:
- Perform efficiently - i.e. not adversely affect page performance/experience.
- Have lean dependencies - i.e. not bloat the payload unnecessarily.
- Look consistent in common themes; ideally should allow themes to adjust appearance as necessary.
Change default branch name to trunk (https://github.com/woocommerce/woocommerce-blocks/pull/3199) * replace references to main branch with references to trunk * update travis config to point to trunk not main branch * more branch name changes
2020-09-26 17:28:16 +00:00
__`assets/js/editor-components`__ are used in the editor UI for our blocks.
clarify intentions / purpose of different component folders in docs (https://github.com/woocommerce/woocommerce-blocks/pull/3025) * add high-level docs about our components & remove stale detail info * use current collection/folder naming in docs: - let's rename js/components in a separate PR - split paragraphs on to separate lines to improve future diffs * rename storybook.md => components.md and update link/summary * tweak component collection docs: - base have more stringent requirements, since they can be used anywhere - editor components are less strict and can assume editor context * clarify js/base/components readme in line with main doc * remove line about editor components being specialised to woo blocks
2020-08-26 20:15:16 +00:00
They allow us to build a consistent and powerful UI for merchants for authoring content relating to Woo data - e.g. selecting products or product attributes. Because they are focused on the editor, they can rely on known editor dependencies and optimise styling for the editor only.
Change default branch name to trunk (https://github.com/woocommerce/woocommerce-blocks/pull/3199) * replace references to main branch with references to trunk * update travis config to point to trunk not main branch * more branch name changes
2020-09-26 17:28:16 +00:00
__`assets/js/icons`__ is a suite of icons and SVG images that we use in our interfaces.
clarify intentions / purpose of different component folders in docs (https://github.com/woocommerce/woocommerce-blocks/pull/3025) * add high-level docs about our components & remove stale detail info * use current collection/folder naming in docs: - let's rename js/components in a separate PR - split paragraphs on to separate lines to improve future diffs * rename storybook.md => components.md and update link/summary * tweak component collection docs: - base have more stringent requirements, since they can be used anywhere - editor components are less strict and can assume editor context * clarify js/base/components readme in line with main doc * remove line about editor components being specialised to woo blocks
2020-08-26 20:15:16 +00:00
For more info about individual components, refer to [Storybook](https://woocommerce.github.io/woocommerce-gutenberg-products-block/) or individual readme files.
## How to run Storybook locally and test components
- `npm run storybook`
- Point your browser at port 6006, e.g. http://localhost:6006
- Play with components 🎛!
## How to add a story for a component
- Add a `stories` folder alongside the component.
Change default branch name to trunk (https://github.com/woocommerce/woocommerce-blocks/pull/3199) * replace references to main branch with references to trunk * update travis config to point to trunk not main branch * more branch name changes
2020-09-26 17:28:16 +00:00
- Add stories in `.js` files in this folder.
clarify intentions / purpose of different component folders in docs (https://github.com/woocommerce/woocommerce-blocks/pull/3025) * add high-level docs about our components & remove stale detail info * use current collection/folder naming in docs: - let's rename js/components in a separate PR - split paragraphs on to separate lines to improve future diffs * rename storybook.md => components.md and update link/summary * tweak component collection docs: - base have more stringent requirements, since they can be used anywhere - editor components are less strict and can assume editor context * clarify js/base/components readme in line with main doc * remove line about editor components being specialised to woo blocks
2020-08-26 20:15:16 +00:00
If you're stuck, copy source of an existing story to get started.