Using lazy loaded ES modules.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import { applyPolyfills, defineCustomElements } from 'https://unpkg.com/genero-design-system/loader/index.js'
applyPolyfills().then(() => {
defineCustomElements()
})
</script>
</head>
<body>
<gds-button>button</gds-button>
</body>
</html>
Install GDS to you project.
npm install genero-design-system
Add this to React App's index.js
file. More info https://stenciljs.com/docs/react
// Include global GDS css with css variables.
import 'genero-design-system/dist/gds/gds.css'
import { applyPolyfills, defineCustomElements } from 'genero-design-system/loader'
// applyPolyfills for Edge and IE11.
applyPolyfills().then(() => {
defineCustomElements()
})
Use as React components.
import { GdsButton } from 'genero-design-system/react'
const render = () => {
return <GdsButton rightIcon="❯">button</GdsButton>
}
Use as web components.
import React from 'react'
const render = () => {
return <div><gds-button right-icon="❯">button</gds-button></div>
}
There's no main entrypoint for all mixins, you are instead encouraged to encapsulate all dependencies in the files that they are used.
// Import component
@use '~genero-design-system/src/components/gds-button' as button;
.button {
@include button.base;
}
npm install
Build and watch changes. Also checks dependencies for updates.
npm start
Run storybook
npm run storybook
Use the gds-button
component as a basis for the new component.
Use Stencil CLI to generate a new component:
gds-my-component
npm run generate
Next do the following:
gds-button/_index.scss
the the new component's folder.gds-button.scss
as a basis.Build and watch the component and generate readme.md docs. TODO: This should also watch changes in _index.scss files.
npm run start
While we don't have our internal Style Guide, let's use the same as Stencil core team: https://stenciljs.com/docs/style-guide
--component-name-size-property-modifier
.Build static storybook to /docs folder.
npm run build
npm run build:storybook
You can test static version locally.
npx http-server docs
The storybooks are automatically built on commits to master
and when versions are tagged. For now you'll need to edit thedocs/storybook-config.json
file and add versions you want to be displayed. TODO: this should be done with a script in the github action.
If you want to manually add a version to the storybooks docs:
# Build the storybook
npm run build
npm run build:storybook
# Clone the gh-pages branch
git clone --single-branch -b gh-pages git@github.com:generoi/genero-design-system.git gds-gh-pages
cd gds-gh-pages
cp -r ../docs docs/my-custom-build
# Edit the storybook.config.json to include the version
vim docs/storybook.config.json
Please add here, when you solve something you got stuck at.
/public
folder for static assets in stories./.storybook/preview-head.html
to inject code to all stories globally.npm run build:stencil --watch
.In React apps:
shadow: false
) in a React app, you need to use a unique key for components that are re-rendered when state changes. Commits will be linted according to conventional commits
you can also use commitizen
npx git-cz
or if you have it installed
git cz
You can use linking to use GDS local repo in other project directly.
Go to GDS local repo.
yarn link
Go to you project where you want to use GDS directly.
yarn link genero-design-system
Presto!
Make sure everything is built.
npm run build
Automatically generates changelog and bumps the version.
Bump minor (or patch or major) version:
npm run release -- --release-as minor
or based on commit log:
npm run release
or manually specify the version:
npm run release -- --release-as 1.1.0
or a named prerelease version:
npm run release -- --prerelease beta
Push release commit and tag.
git push
git push --tags
See conventional-changelog/standard-version#cli-usage for more details and examples
npm login
npm publish