styledot-docs v1.0.7
The 23andMe Styleguide
The home for 23andMe's Design System component implementation
Join us on Slack in #frontend-guild
Quickstart
git clone git@github.com:23andme-private/style.git
cd style
npm install
npm run start
Access http://localhost:8000 in a web browser.
Developing in StyleDot
Editing happens under style/src
. Building outputs to style/lib
and style/docs
.
style/src/lib
is where the Design System components live. Edit here if you'd like to add or update an actual component for use in the styleguide and npm package.style/src/docs
is where the framing for the styleguide website lives. Edit here if you'd like to update or add a component example to the styleguide.
Running npm run start
from earlier will automatically watch for changes and update them in the browser.
Careful:
Only update files found in /src
. src
stands for source, the source code for components/documentation.
Anything under /lib
is overwritten. Do not modify these files.
Troubleshooting Local Development:
Issue: Not seeing your latest style changes in YouDot
Run npm run lib
in StyleDot and try creating the beta again (will need to up the version).
Issue: "Error: listen EADDRINUSE 127.0.0.1:8000" while running npm run start
Cause: You already have something running on port 8000.
1. Find the PID of the process lsof -n -i :8000 | grep LISTEN
2. Copy the PID, and use it to kill the process kill -9 [THE PID]
3. Try running it again, npm run start
Running tests
Tests are written using Jest. Run with: npm run test
Release guide
Versioning
Generally, follow semantic versioning. Given a version number MAJOR.MINOR.PATCH, increment the:
- MAJOR version when you make incompatible API changes,
- MINOR version when you add functionality in a backwards compatible manner, and
- PATCH version when you make backwards compatible bug fixes.
Beta releases for testing
Do an NPM beta release and test it against your local environment and sandbox builds to verify changes.
Note: This requires special publishing access to our NPM package, please get in touch with the StyleDot team in #frontend-guild Slack room to request access.
The steps for publishing a beta release:
- Check the latest versions. Go to Styledot on NPM and look at the Version tab.
- Update the version in
lib/package.json
.- If the current version is
1.0.1
, your beta version should be1.0.2-beta.0
. - If you have already created a beta version such as
1.0.2-beta.0
, then up the version to1.0.2-beta.1
.
- If the current version is
- From the
/lib
directory, run the following command:npm publish --tag beta
. - Once the publish action succeeds, go to your other repo's
package.json
and update the version of StyleDot to the one you just published, eg:"styledot": "1.0.2-beta.1",
. - Run
npm install styledot
to update to your newly published beta version. (In YouDot run this inyou/assets
). - Run whatever commands needed to grab those changes from the updated package. (In YouDot this would be
make css
from theyou/assets
directory). - Create a Sandbox with a StyleDot beta version: Commit and push your YouDot branch with the beta version in
package.json
, then build your Sandbox.
!! remove beta version before merging !!
Release to NPM
- Checkout and pull the main branch
git checkout main && git pull
- Increment version in lib/package.json (find latest version number here)
- Publish the npm package from the lib folder by running
npm publish
- Go back to the root folder
cd ..
- Find out what the next incremented tag version would be
git tag
- Tag the release incrementally
git tag 1.0.X
- Update the
changelog.md
file in the root style directory with the version, date, and changes. - Create a release commit
git commit -am "Release-YYYYMMDD"
- Push
git push && git push --tags
- Update devs by sending an email to frontend-guild@23andme.com, and posting in #frontend-guild. Including the latest changelog is a good start.
Release Documentation
- In GitHub Actions, go to the Deploy to Prod (style.23andme.com) workflow.
- Next to the notice about the workflow having a workflow_dispatch event trigger, click the "Run workflow" dropdown.
- Confirm the
main
branch is selected, and then click "Run workflow":
Note: It may take up to 10 minutes for changes to reflect on the web
Maintainers
- Chalise Grogan
- Farwa Alam
- Kirsten Burns
- Rachel Lopatin
Found a bug or some other issue? Please use the StyleDot project in JIRA to file a new ticket and view existing ones.