Adding upstream version 110.0.1.upstream/110.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 74 insertions, 0 deletions

diff --git a/browser/components/storybook/README.md b/browser/components/storybook/README.md
new file mode 100644
index 0000000000..0614abceed
--- /dev/null
+++ b/browser/components/storybook/README.md
@@ -0,0 +1,74 @@
+= Storybook for Firefox
+
+Storybook is a component library to document our design system, reusable
+components and any specific components you might want to test with dummy data.
+
+== Background
+
+The storybook will list components that can be reused, and will help document
+what common elements we have. It can also list implementation specific
+components, but they should not be added to the "Design System" section.
+
+Changes to files directly referenced from the storybook (so basically
+non-chrome:// paths) should automatically reflect changes in the opened browser.
+If you make a change to a chrome:// referenced file then you'll need to do a
+hard refresh (Cmd+Shift+R/Ctrl+Shift+R) to notice the changes.
+
+== Running Storybook
+
+Installing the npm dependencies and running the `storybook` npm script should be
+enough to get storybook running. This can be done with your personal npm/node
+that happens to be compatible or using `./mach npm`.
+
+=== Running with mach based npm
+
+If you do this a lot, you might want to add an alias like this to your shell's
+startup config:
+
+```
+alias npm-storybook="./mach npm --prefix=browser/components/storybook"
+```
+
+Then running `npm-storybook` from the repo's root directory will work with the
+storybook directory.
+
+To start storybook the first time (or if it's been a while since you last
+installed):
+
+```
+# Install the package-lock.json exactly so lockfileVersion won't change.
+# Using the `install` command may affect package-lock.json.
+./mach npm --prefix=browser/components/storybook ci
+# or
+npm-storybook ci
+```
+
+Once you've got your dependencies installed you can start storybook. You should
+run your local build to test in storybook since chrome:// URLs are currently
+being pulled from the running browser, so any changes to common-shared.css for
+example will come from your build.
+
+```
+# Start the Storybook server.
+./mach npm --prefix=browser/components/storybook run start-storybook
+# or
+npm-storybook run start-storybook
+# In another terminal:
+./mach run http://localhost:5703/
+
+# On MacOS/Linux, there's a command to start storybook and launch your browser.
+./mach npm --prefix=browser/components/storybook run storybook
+# or
+npm-storybook run storybook
+```
+
+=== Personal npm
+
+You can use your own `npm` to install and run storyboook. Compatibility is up
+to you to sort out.
+
+```
+cd browser/components/storybook
+npm ci # Install the package-lock.json exactly so lockfileVersion won't change
+npm run storybook
+```