gaia-design-system v16.0.0
Gaia Design System
Gaia libraries are in maintenance mode, no new features added, read more in Wiki
What does this mean in practice:
- New features - No new features such as new components or significant changes to existing ones will be done to the React library as they will be delivered as Web Components.
- Fixing - bugs and other abnormal functionality Only when they are deemed critical (see below).
- Usage - guidance for components Simple guidance can be provided to teams using the components, but no complex cases or onboarding are supported.
- Helping - with a contribution of improvements/fixes to existing complex components Only when they are deemed critical (see below).
- Definition of Critical - When a feature is missing or contains bugs that break existing systems and no workaround is available, they are considered critical. This is decided on a case-by-case basis by the Core Team.
You are free to ask questions and help each other in #design-system Slack channel! Please let us know if you have any questions about this.
~ DS team
Requirements
Important note: Currently Gaia monorepo only supports node version 12.
- Yarn
>= 1.0.0
- Node version
v12.18.3
.
Installation
Run yarn
in the root of repository to install all the dependencies.
Environment variables
DS site
If you need to run DS site, copy file packages/ds-site/.env.example
to packages/ds-site/.env
.
Replace in it real Algolia tokens, to be able to use search feature on the website and run it. You can copy values from team mate or copy them from Netlify build settings.
Variable GATSBY_GRAPHQL_IDE=playground
gives access to GraphQL playground in http://localhost:8000/___graphql. Please use this only in development environment.
Component library current version and publish date are fetched from GitHub API with Gatsby plugin. In order to make it work, GitHub token should be created and added into env variables. Select "repo" scope when creating access token.
Running web components from the monorepo root
Run script yarn build:components && yarn start:components
in the root of mono repo. This will stencil webb components and run stencil in watch mode and start storybook for web components.
Running sandbox testing of Storybook bundle
Run script yarn sandbox
in the root of mono repo.
Test monorepo packages from the root
You can run tests of packages from root of mono repo.
You can test components
or telia-react-conponent-library
packages directly on their own with npm scripts:
- Tests for
components
package:yarn test:components
- Tests for
telia-react-conponent-library
package:yarn test:react-component-library
- Both package tests:
yarn test
. When you are pushing changes to GitHub run scripts: components
package:yarn pre-push:components
telia-react-conponent-library
package:yarn pre-push:react-component-library
- Both packages:
yarn pre-push
Build telia-react-component-library
In order to successfully build telia-react-conponent-library
, we first need to build components
package and after that react
package.
We can build components
, react
and telia-react-conponent-library
separately by running following scripts:
- For
components
package:yarn build:components
- For
react
package:yarn build:react
- For
telia-react-component-library
package:yarn:build
- Build them all:
yarn build:all
Structure
This monorepo holds three packages inside:
components
Web component package created with Stencil.js.
react
Autogenerated output target of telia-component-library
package. Web components are transformed into React components, which can be imported. This package should not be modified by hand.
telia-react-component-library
Original React component library. Includes original React component and imports new web component based components from react
package.
In future this package will be removed when all the features are moved under components
package.
Contribution
Getting started
- Fork the repository
- Clone your own fork
- Set upstream repository with
git remote add upstream git@github.com:TeliaSoneraFinland/gaia-design-system.git
- When pulling changes/rebasing from upstream, remember to use
git pull --rebase upstream master
- After this you should update your remote fork with
git push --force-with-lease origin master
- When pulling changes/rebasing from upstream, remember to use
- Install dependencies with
yarn
- Run storybook:
yarn dev
- Access storybook in URL
http://localhost:6007
- Run tests in terminal with
yarn test
Creating a pull request
Pull request is needed to make a merge of your chnages into library. Also it's a good way to get improvement comments.
- Push your changes to your own fork
- Create descriptive pull request to the upstream repository
- Wait until code and design reviews are done and make changes if asked to
Viewing designs
You can check designs from Figma. Please contact us on #design-system channel, if something is unclear.
Artifactory
Configuration
Include .npmrc
file into the root of your project. You can copy example file .npmrc.example
from repository root.
File .npmrc
should include:
registry= https://artifactory.verso.sonera.fi:443/api/npm/npm-registry-virtual/
always-auth = true
Gain access
Then login to the artifactory by running npm login
. When the command line asks, enter your RTM credentials and suiting email. After this you'll be logged in to artifactory and you are able to install the dependencies and publish packages.
Note: Use NPM instead of Yarn to login, when installing package from artifactory. Yarn doesn't support gaining access when login. Only when publishing.
With Yarn version of 1.X.X yarn login
won't work here, because it will not ask for your password and therefore not login to Artifactory.
If .npmrc
is correctly set command yarn config get registry
should return https://artifactory.verso.sonera.fi:443/api/npm/npm-registry-virtual/, if it is not correct, it may return "the default npm registry url"
.
You can also visit artifactory from website, to debug if login problems occur only in development environment.
Deploying release
Read from Deployment documentation.
Versioning
Component library uses Semantic versioning.
1 year ago