Adding static storybook

.gitignore

@@ -20,6 +20,7 @@ features/*.png
 config/sync/.htaccess
 mysql/
 node_modules
+web/themes/custom/*/dist/
 
 # Ignore personal directories
 .idea/

.gitlab-ci.yml

@@ -5,7 +5,8 @@
 
 variables:
   GIT_DEPTH: "3"
-  THEME_PATH: "" # Update to enable front jobs
+  THEME_PATH: "" # Update to enable front jobs (web/themes/custom/XXX)
+  STORYBOOK_PATH: "" # Update to enable storybook job (themes/custom/XXX/dist/storybook/index.html)
   GIT_STRATEGY: clone # Workaround until git is updated in runner, see https://gitlab.com/gitlab-org/gitlab-foss/issues/60466
 
 image: skilldlabs/php:73
@@ -34,6 +35,7 @@ stages:
   - deploy
   - tests
   - reports
+  - document
 
 
 sniffers:clang:
@@ -57,9 +59,10 @@ sniffers:front:
     - make lintval
   cache:
     key:
-      files: # These paths have to be hardcoded until https://gitlab.com/gitlab-org/gitlab/issues/118466 lands or use a non-custom gitlab variable
-        - ${THEME_PATH}/package.json
-        - ${THEME_PATH}/yarn.lock
+      files:
+      # Until https://gitlab.com/gitlab-org/gitlab/issues/118466 lands ...
+        - web/themes/custom/XXX/package.json # ... this path has to be hardcoded
+        - web/themes/custom/XXX/yarn.lock # ... this path has to be hardcoded
     paths:
       - ${THEME_PATH}/node_modules/ # Populated during yarn install
   artifacts:
@@ -294,22 +297,22 @@ test:contentgen:
   <<: *ra_only
   when: manual
 
-test:storybook:
-  stage: tests
+report:statusreportval:
+  stage: reports
   environment:
     url: https://${CI_ENVIRONMENT_SLUG}-${CI_PROJECT_PATH_SLUG}.${REVIEW_DOMAIN}
     name: review/$CI_COMMIT_REF_NAME
     on_stop: stop_review
   script:
+  - echo "Starting job script in ${BUILD_DIR}"
   - cd ${BUILD_DIR}
-  - make build-storybook
+  - make statusreportval
   dependencies:
   - deploy:review
   <<: *ra_tags
   <<: *ra_only
-  when: manual
 
-report:statusreportval:
+report:watchdog:
   stage: reports
   environment:
     url: https://${CI_ENVIRONMENT_SLUG}-${CI_PROJECT_PATH_SLUG}.${REVIEW_DOMAIN}
@@ -318,23 +321,27 @@ report:statusreportval:
   script:
   - echo "Starting job script in ${BUILD_DIR}"
   - cd ${BUILD_DIR}
-  - make statusreportval
+  - make watchdogval
   dependencies:
   - deploy:review
   <<: *ra_tags
   <<: *ra_only
 
-report:watchdog:
-  stage: reports
+document:storybook:
+  stage: document
   environment:
     url: https://${CI_ENVIRONMENT_SLUG}-${CI_PROJECT_PATH_SLUG}.${REVIEW_DOMAIN}
     name: review/$CI_COMMIT_REF_NAME
     on_stop: stop_review
+  only:
+    variables:
+      - $STORYBOOK_PATH
   script:
-  - echo "Starting job script in ${BUILD_DIR}"
   - cd ${BUILD_DIR}
-  - make watchdogval
+  - make build-storybook
+  - echo "- Storybook is accessible here :" && echo "${CI_ENVIRONMENT_URL}/${STORYBOOK_PATH}"
   dependencies:
   - deploy:review
   <<: *ra_tags
   <<: *ra_only
+  when: always

scripts/makefile/front.mk

@@ -2,6 +2,15 @@ FRONT_PORT?=65200
 
 # Execute front container function.
 frontexec = docker run \
+	--rm \
+	--init \
+	-u $(CUID):$(CGID) \
+	-v $(shell pwd)/web/themes/custom/$(THEME_NAME):/app \
+	--workdir /app \
+	$(IMAGE_FRONT) ${1}
+
+# Execute front container function on localhost:FRONT_PORT. Needed for dynamic storybook.
+frontexec-with-port = docker run \
 	--rm \
 	--init \
 	-p $(FRONT_PORT):$(FRONT_PORT) \
@@ -10,6 +19,16 @@ frontexec = docker run \
 	--workdir /app \
 	$(IMAGE_FRONT) ${1}
 
+# Execute front container with TTY. Needed for storybook components creation.
+frontexec-with-interactive = docker run \
+	--rm \
+	--init \
+	-u $(CUID):$(CGID) \
+	-v $(shell pwd)/web/themes/custom/$(THEME_NAME):/app \
+	--workdir /app \
+	-it \
+	$(IMAGE_FRONT) ${1}
+
 clear-front:
 	@echo "Clean of node_modules and compiled dist... To skip this action please set CLEAR_FRONT_PACKAGES=no in .env file"
 	$(call frontexec, rm -rf /app/node_modules /app/dist)
@@ -51,14 +70,20 @@ lint:
 	$(call frontexec, yarn lint-fix)
 
 storybook:
-	@echo "Running storybook..."
+	@echo "Running dynamic storybook..."
 	docker pull $(IMAGE_FRONT)
 	$(call frontexec, yarn install --ignore-optional --check-files)
-	$(call frontexec, yarn storybook -p $(FRONT_PORT))
+	$(call frontexec, yarn run build);
+	$(call frontexec-with-port, yarn storybook -p $(FRONT_PORT))
 
 build-storybook:
-	@echo "Export storybook..."
+	@echo "Export static storybook..."
 	docker pull $(IMAGE_FRONT)
 	$(call frontexec, yarn install --ignore-optional --check-files)
 	$(call frontexec, yarn run build);
-	$(call frontexec, yarn run build-storybook -c .storybook -o dist/storybook)
+	$(call frontexec, yarn run build-storybook)
+
+create-component:
+	@echo "Create component CLI dialog... It assumed that you already have 'make storybook' or 'make build-storybook' finished"
+	docker pull $(IMAGE_FRONT)
+	$(call frontexec-with-interactive, yarn cc)

scripts/makefile/tests.mk

@@ -6,7 +6,7 @@ phpcsexec = docker run --rm \
 	skilldlabs/docker-phpcs-drupal ${1} -s --colors \
 	--standard=Drupal,DrupalPractice \
 	--extensions=php,module,inc,install,profile,theme,yml,txt,md,js \
-	--ignore=*.css,libraries/*,dist/*,styleguide/*,README.md,README.txt,node_modules/*,work/themes/**.js \
+	--ignore=*.css,libraries/*,dist/*,styleguide/*,README.md,README.txt,node_modules/*,work/themes/**.js,work/themes/**.md \
 	.
 
 ## Validate codebase with phpcs sniffers to make sure it conforms https://www.drupal.org/docs/develop/standards