From 35ebfe96c0c70de4bfdf71c19bf59f7cdf845d74 Mon Sep 17 00:00:00 2001 From: David Ferlay Date: Wed, 4 Mar 2020 17:43:52 +0100 Subject: [PATCH] Adding static storybook --- .gitignore | 1 + .gitlab-ci.yml | 35 +++++++++++++++++++++-------------- scripts/makefile/front.mk | 33 +++++++++++++++++++++++++++++---- scripts/makefile/tests.mk | 2 +- 4 files changed, 52 insertions(+), 19 deletions(-) diff --git a/.gitignore b/.gitignore index c9943e2f5..f2c5f7415 100644 --- a/.gitignore +++ b/.gitignore @@ -20,6 +20,7 @@ features/*.png config/sync/.htaccess mysql/ node_modules +web/themes/custom/*/dist/ # Ignore personal directories .idea/ diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index c34cd1fd9..06b75a7ed 100644 --- a/.gitlab-ci.yml +++ b/.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 diff --git a/scripts/makefile/front.mk b/scripts/makefile/front.mk index 1b9cc8734..3d71c0074 100644 --- a/scripts/makefile/front.mk +++ b/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) diff --git a/scripts/makefile/tests.mk b/scripts/makefile/tests.mk index 8aba48645..0e7507812 100644 --- a/scripts/makefile/tests.mk +++ b/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