Skip to content

Commit d5e6f2d

Browse files
tjheffnerElijahLynn
tjheffner
and
ElijahLynn
authored
VACMS 8346 storybook + design system infrastructure, take 3 (#8482)
* VACMS-8345 add modules for twig support in storybook, fix audit warnings * VACMS-8345 render twig in storybook * VACMS-8345 add support for drupal attribute object in storybook * VACMS-8345 add scss support to storybook * VACMS-8345 stub out storybook structure, update gitignore for compiled files * VACMS-8345 make storybook controls work with twig. split out sb-specific styles * VACMS-8346 add dependencies for drupal consumption * VACMS-8346 first pass at webpack config & updating pattern js to connect to drupal behaviors * VACMS-8346 verify namespace works and design system styles are present * VACMS-8346 storybook compat with webpack5 * VACMS-8346 tokens in js stories for webpack 5 and CSF 3 * VACMS-8345 generate json file containing css var data for storybook. * VACMS-8346 clean up stories, some controls, comments. move generated file to dist/ * VACMS-8346 add composer commands for design system * VACMS-8345 add ddev support for storybook * VACMS-8346 clean up new composer command names * VACMS-8346 fix composer deps in this branch. add namespace to info * VACMS-8346 components work in drupal * VACMS-8346 export config enabling the components module * VACMS-8346 update composer * VACMS-8346 update css generation config for tugboat * VACMS-8346 build storybook in build and update in tugboat * VACMS-8346 update css generation for tugboat * VACMS-8346 update path to css vars * VACMS-8346 remove block test styles * VACMS-8346 make sure dependencies get installed * Setup Tugboat URL storybook-* prefix and routing for /design-system/storybook-static * Add storybook alias for real this time * Fix path for static storybook * VACMS-8346 update yarn lock to fix dep warning * VACMS-8346 move storybook build step to online * Add pretty 403 error handling for when storybook isn't built yet. * VACMS-8346 update 403 page * VACMS-8346 add dependencies for drupal consumption * VACMS-8346 fix composer deps in this branch. add namespace to info * VACMS-8346 these files shouldnt be here. not sure why i committed them accidentally. sorry Co-authored-by: Elijah Lynn <[email protected]>
1 parent 2ae4998 commit d5e6f2d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+12039
-16
lines changed

‎.ddev/docker-compose.storybook.yaml

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
version: '3.6'
2+
3+
services:
4+
storybook:
5+
container_name: ddev-${DDEV_SITENAME}-storybook
6+
hostname: ${DDEV_PROJECT}-storybook
7+
image: node:14.17
8+
restart: "no"
9+
expose:
10+
- 6006
11+
labels:
12+
com.ddev.site-name: ${DDEV_SITENAME}
13+
com.ddev.approot: $DDEV_APPROOT
14+
working_dir: /home/node/app
15+
volumes:
16+
- ../docroot/design-system:/home/node/app
17+
command: "yarn storybook"
18+
environment:
19+
- VIRTUAL_HOST=va-gov-storybook.${DDEV_TLD}
20+
- HTTP_EXPOSE=80:6006
21+
- HTTPS_EXPOSE=443:6006
22+
- NODE_ENV=production

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ node_modules/
7070
# Ignore compiled Drupal theme files
7171
/docroot/themes/custom/*/dist/
7272

73+
# Ignore compiled design system & Storybook files
74+
/docroot/design-system/storybook-static
75+
/docroot/design-system/dist/
76+
7377
# Ignore accessibility test reports
7478
/tests/accessibility/axeReport/*.csv
7579
# Ignore accessibility test screenshots & videos

‎.storybook/403-error-document.j2.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!-- This is a Jinja2 template without a *.j2 extension because it isn't testable in a browser with *.j2. -->
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Storybook not built yet</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<meta http-equiv="refresh" content="2" />
8+
9+
<style>
10+
body {
11+
/* VA.gov dark blue */
12+
background: #112e51;
13+
text-align: center;
14+
color: white;
15+
}
16+
17+
p {
18+
font-size: large;
19+
}
20+
21+
a {
22+
text-decoration: underline;
23+
color: white;
24+
}
25+
26+
.hero {
27+
margin-top: 25px;
28+
width: 70%;
29+
height: 20%;
30+
object-fit: cover;
31+
object-position: 0 80%;
32+
}
33+
34+
.container-info {
35+
margin-bottom: 100px;
36+
}
37+
</style>
38+
</head>
39+
40+
<body>
41+
<img class="hero" src="/.web/artur-pokusin-unsplash.jpg">
42+
<h1>Storybook not built yet</h1>
43+
<div class="container-info">
44+
<p>Storybook not built yet</p>
45+
<p>Check the status of the <code>composer va:ds:storybook</code> command in the logs to learn more.</p>
46+
</div>
47+
<footer>Photo by <a href="https://unsplash.com/@arturpokusin?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Artur Pokusin</a> on <a href="https://unsplash.com/s/photos/void?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
48+
</footer>
49+
</body>
50+
51+
</html>

‎.storybook/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
See /.tugboat/vhost-storybook.conf.

‎.storybook/artur-pokusin-unsplash.jpg

53.9 KB
Loading

‎.tugboat/config.yml

+12-6
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ services:
99
aliases:
1010
- cms
1111
- web
12+
- storybook
1213

1314
# Set this as the default service. This does a few things
1415
# 1. Clones the git repository into the service container
@@ -47,7 +48,10 @@ services:
4748
- php $(curl -w "%{filename_effective}" -LO $(curl -s https://api.github.com/repos/DataDog/dd-trace-php/releases | grep browser_download_url | grep 'setup[.]php' | head -n 1 | cut -d '"' -f 4)) --enable-profiling --php-bin=php
4849

4950
# Setup web-*. vhost to serve static website.
50-
- cp "${TUGBOAT_ROOT}"/.tugboat/web-vhost.conf /etc/apache2/sites-enabled/
51+
- cp "${TUGBOAT_ROOT}"/.tugboat/vhost-web.conf /etc/apache2/sites-enabled/
52+
53+
# Setup storybook-*. vhost to serve static website.
54+
- cp "${TUGBOAT_ROOT}"/.tugboat/vhost-storybook.conf /etc/apache2/sites-enabled/
5155

5256
# Configure KeepAliveTimeout in apache2.conf. This is set 5 seconds longer than the internal tools ALB.
5357
# The internal tools ALB idle timeout is set to longer than a typical GQL query takes.
@@ -66,7 +70,7 @@ services:
6670
- echo "export PATH=/var/lib/tugboat/bin:~/.local/bin:$PATH" >> ~/.bashrc
6771
- pip3 install j2cli
6872

69-
# Set Datadog agent config defaults
73+
# Set Datadog agent config defaults
7074
- j2 "${TUGBOAT_ROOT}/.tugboat/datadog.yaml.j2" -o "/etc/datadog-agent/datadog.yaml"
7175
- echo "export DD_TAGS=pr:$TUGBOAT_GITHUB_PR,branch:$TUGBOAT_GITHUB_HEAD" >> /etc/apache2/envvars
7276

@@ -141,9 +145,9 @@ services:
141145
# and update steps, because the results of those are inherited
142146
# from the base preview.
143147
build:
144-
# Currently resetting to the remote branch/PR SHA since [Task](https://github.com/go-task/task) runs tests status against this commit.
145-
# Tugboat currently merges the branch into master and we don't need that because we have a GitHub branch rule
146-
# setup to ensure branch is up to date.
148+
# Currently, resetting to the remote branch/PR SHA since [Task](https://github.com/go-task/task) runs tests status against this commit.
149+
# Tugboat currently merges the branch into master, and we don't need that because we have a GitHub branch rule
150+
# setup to ensure branch is up-to-date.
147151
- git reset --hard $TUGBOAT_PREVIEW_SHA
148152

149153
# This j2 command is shared in both the build & clone stages. If modifying, change the other too.
@@ -161,7 +165,6 @@ services:
161165
- mv "${TUGBOAT_ROOT}/scripts/queue_runner/queue_runner.sh" /etc/service/drupal_events/run
162166
- chmod +x /etc/service/drupal_events/run
163167

164-
165168
clone:
166169
# This j2 command is shared in both the build & clone stages. If modifying, change the other too.
167170
- j2 "${TUGBOAT_ROOT}/.tugboat/.env.j2" -o "${TUGBOAT_ROOT}/.env"
@@ -170,6 +173,9 @@ services:
170173
- j2 "${TUGBOAT_ROOT}/.web/403-error-document.j2.html" -o "${TUGBOAT_ROOT}/.web/403-error-document.html"
171174

172175
online:
176+
# Build the static version of storybook for displaying CMS design system
177+
- composer va:ds:storybook
178+
173179
# We only want tests running on PRs, not branches like the base preview build of master.
174180
# This sets the commit status checks to pending all at once.
175181
- if [ "$TUGBOAT_PREVIEW_TYPE" = "pullrequest" ]; then bash -lc 'task --taskfile=tests.yml'; fi

‎.tugboat/vhost-storybook.conf

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# If testing changes to this file on the tugboatqa/php:7.1-apache image (current),
2+
# use `apache2ctl -S` to check for syntax issues then `killall apache2` to get changes to take.
3+
# Or "Stop" then "Start" the preview as that will restart apache2 too. Worth noting that
4+
# `service apache2 reload|restart` doesn't work on this image as `runit` is used.
5+
# Also `sv restart apache` acts like it works but it doesn't and doesn't bubble up any errors.
6+
7+
<VirtualHost *:80>
8+
9+
ServerName storybook-wildcard
10+
# Route preview URLs with prefix of `storybook-` to folder where the generated site output is symlinked.
11+
# e.g. https://storybook-msecydk1vl7ncmpkgh8vevjhzq25vacv.ci.cms.va.gov/
12+
ServerAlias storybook-*
13+
VirtualDocumentRoot /var/lib/tugboat/docroot/design-system/storybook-static
14+
15+
<Directory /var/lib/tugboat/docroot/design-system/storybook-static/>
16+
Options FollowSymLinks
17+
Require all granted
18+
</Directory>
19+
20+
Alias "/.storybook" "/var/lib/tugboat/.storybook"
21+
ErrorDocument 403 /.storybook/403-error-document.html
22+
<Directory /var/lib/tugboat/.storybook/>
23+
Require all granted
24+
</Directory>
25+
26+
# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
27+
# error, crit, alert, emerg.
28+
# It is also possible to configure the loglevel for particular
29+
# modules, e.g.
30+
#LogLevel debug
31+
32+
# On Tugboat these are symlinks to /dev/null by default.
33+
# `rm /var/log/apache2/*.log` and they will be generated.
34+
# Then `tail -f /var/log/apache2/*` will work.
35+
ErrorLog ${APACHE_LOG_DIR}/error.log
36+
CustomLog ${APACHE_LOG_DIR}/access.log combined
37+
38+
SetEnvIf X-Forwarded-Proto "^https" HTTPS=on
39+
</VirtualHost>

‎.tugboat/web-vhost.conf ‎.tugboat/vhost-web.conf

File renamed without changes.

‎.web/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
See /.tugboat/web-vhost.conf.
1+
See /.tugboat/vhost-web.conf.

‎composer.json

+10-3
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"drupal/block_content_permissions": "^1.6",
3636
"drupal/cer": "4.x-dev#f2ff7d6bf2a3e41757b7621a8367ede974750a84",
3737
"drupal/coder": "^8.3",
38+
"drupal/components": "^3.0@beta",
3839
"drupal/config_ignore": "^2.1",
3940
"drupal/config_override_warn": "^1.0",
4041
"drupal/config_split": "^1.4",
@@ -555,12 +556,18 @@
555556
"cd bin && ln -sf ../docroot/libraries/yarn/bin/yarn yarn",
556557
"export NODE_EXTRA_CA_CERTS=/etc/pki/tls/certs/ca-bundle.crt PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=TRUE; cd docroot/core && yarn install",
557558
"cd docroot/core && yarn build:css",
558-
"cd docroot/themes/custom/vagovadmin && yarn install && yarn build",
559+
"cd docroot/design-system && yarn install && yarn build:drupal",
559560
"cd docroot/themes/custom/vagovclaro && yarn install && yarn build"
560561
],
561562
"va:theme:watch": [
562563
"cd docroot/themes/custom/vagovclaro && yarn watch"
563564
],
565+
"va:ds:storybook": [
566+
"cd docroot/design-system && yarn install && yarn build:storybook"
567+
],
568+
"va:ds:drupal": [
569+
"cd docroot/design-system && yarn install && yarn build:drupal"
570+
],
564571
"va:config:export": [
565572
"drupal config:export --ansi"
566573
],
@@ -607,10 +614,10 @@
607614
"find docroot/modules/custom docroot/themes -name '*.install' -print0 | xargs -0 -n1 php -l > /dev/null"
608615
],
609616
"va:test:cs": [
610-
"phpcs --ignore=*.md,*.min.css,styles.css,wysiwyg.css,proofing.css,user_guides.css,whats_new.css,*/node_modules/*,*/simplesaml*/*,graphiql.css --extensions=php,module,inc,install,profile,engine,theme,css --standard=./docroot/vendor/drupal/coder/coder_sniffer/Drupal/ruleset.xml docroot/modules/custom docroot/themes/custom tests --colors"
617+
"phpcs --ignore=*.md,*.min.css,styles.css,wysiwyg.css,proofing.css,user_guides.css,whats_new.css,claro.css,*/node_modules/*,*/simplesaml*/*,graphiql.css --extensions=php,module,inc,install,profile,engine,theme,css --standard=./docroot/vendor/drupal/coder/coder_sniffer/Drupal/ruleset.xml docroot/modules/custom docroot/themes/custom tests --colors"
611618
],
612619
"va:test:unit": "phpunit tests/phpunit --colors=always --exclude-group=disabled",
613-
"va:cbf": "phpcbf --ignore=*.md,*.min.css,uswds.css,*/node_modules/*,*/simplesaml*/* --standard=./docroot/vendor/drupal/coder/coder_sniffer/Drupal/ruleset.xml docroot/modules/custom docroot/themes/custom --colors",
620+
"va:cbf": "phpcbf --ignore=*.md,*.min.css,uswds.css,claro.css,*/node_modules/*,*/simplesaml*/* --standard=./docroot/vendor/drupal/coder/coder_sniffer/Drupal/ruleset.xml docroot/modules/custom docroot/themes/custom --colors",
614621
"va:web:install": [
615622
"# Preparing Front-end...",
616623
"cd bin && ln -sf ../docroot/libraries/yarn/bin/yarn yarn",

‎composer.lock

+51-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎config/sync/core.extension.yml

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ module:
2222
cer: 0
2323
ckeditor: 0
2424
color: 0
25+
components: 0
2526
config: 0
2627
config_filter: 0
2728
config_ignore: 0

‎docroot/design-system/.babelrc.json

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"sourceType": "unambiguous",
3+
"presets": [
4+
[
5+
"@babel/preset-env",
6+
{
7+
"shippedProposals": true,
8+
"loose": true
9+
}
10+
],
11+
"@babel/preset-typescript"
12+
],
13+
"plugins": [
14+
"@babel/plugin-transform-shorthand-properties",
15+
"@babel/plugin-transform-block-scoping",
16+
[
17+
"@babel/plugin-proposal-decorators",
18+
{
19+
"legacy": true
20+
}
21+
],
22+
[
23+
"@babel/plugin-proposal-class-properties",
24+
{
25+
"loose": true
26+
}
27+
],
28+
[
29+
"@babel/plugin-proposal-private-methods",
30+
{
31+
"loose": true
32+
}
33+
],
34+
"@babel/plugin-proposal-export-default-from",
35+
"@babel/plugin-syntax-dynamic-import",
36+
[
37+
"@babel/plugin-proposal-object-rest-spread",
38+
{
39+
"loose": true,
40+
"useBuiltIns": true
41+
}
42+
],
43+
"@babel/plugin-transform-classes",
44+
"@babel/plugin-transform-arrow-functions",
45+
"@babel/plugin-transform-parameters",
46+
"@babel/plugin-transform-destructuring",
47+
"@babel/plugin-transform-spread",
48+
"@babel/plugin-transform-for-of",
49+
"babel-plugin-macros",
50+
"@babel/plugin-proposal-optional-chaining",
51+
"@babel/plugin-proposal-nullish-coalescing-operator",
52+
[
53+
"babel-plugin-polyfill-corejs3",
54+
{
55+
"method": "usage-global",
56+
"absoluteImports": "core-js",
57+
"version": "3.21.1"
58+
}
59+
]
60+
]
61+
}

0 commit comments

Comments
 (0)