@smartbear/design-system
Advanced tools
Presentational components implementing the SmartBear Design System
This repository contains presentational components implementing the SmartBear Design System.
See a live demo based on StoryBook.
Currently only React is supported. If you need support for a different framework please submit a pull request.
First, make sure you add the following snippet to your <head> element in your HTML
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
This is because the SmartBear design system registers Open Sans as the default sans font.
Second, install the design system using one of the following mechanisms:
Just add the CSS directly to your <head> element:
<!-- Replace VERSION with the version you want -->
<link
href="https://cdn.jsdelivr.net/npm/@smartbear/design-system@VERSION/dist/style.css"
rel="stylesheet"
/>
While this is quick and makes it easy to try out, it is not recommended for production use, as the stylesheet is very large, and you will only be able to use the CSS Components.
The HTML Components are only available if you install it with Node.js
Install the npm module as a runtime dependency:
npm install --save @smartbear/design-system
You can now use React Components as well as the Tailwind CSS Plugin
It's highly recommended you install Tailwind CSS.
Add the plugin to your Tailwind config:
// tailwind.config.js
module.exports = {
plugins: [require('@smartbear/design-system').tailwindPlugin],
}
We would love pull requests from people in SmartBear to improve this library. Start by cloning this repo and fire up Storybook to see existing components:
# Force the use of PostCSS 8 to avoid Storybook problems
npx npm-force-resolutions
# Install dependencies
npm install
# View components in Storybook
npm run storybook
We follow the tailwindcss guidelines for Extracting Components. This design system provides CSS components and Example components.
When you define a new component you should always start by creating a new stories/*/MyComponent.stories.tsx file.
While you're experimenting you can define the component in the same file, and when you're happy with it, extract it to a CSS Component or HTML Component.
Components that only require a single HTML element are defined as CSS Components. To create a new CSS Component:
src/molecules/*.css file.npm run build-css-components. This will generate a CSS-in-JS .js file.addComponents in src/tailwindPlugin.js@import the file in stories/index.css (otherwise it won't be loaded in StoryBook)Components that require two or more HTML elements are defined as HTML components.
This library currently uses React to define HTML Components. Support for additional UI libraries are welcome!
To create a new React Component just create a new src/{molecules,organism}/*.tsx file.
Because tailwindcss is centred around utility classes, the SmartBear theme is implemented by overriding and adding utilities to the standard set of utilities. This is described in more detail in Customizing Your Design System.
The theme defines the following values:
The theme is defined in src/tailwindPlugin.js.
Before you release, update dependencies:
npx npm-check-updates --upgrade
npm install
Verify that everything still looks ok in Storybook.
Update the version number in standalone-example.html
Update CHANGELOG.md and commit. Now you can release:
npm version [major|minor|patch]
npm publish --access public && npm run deploy-storybook
git push && git push --tags
FAQs
Presentational components implementing the SmartBear Design System
The npm package @smartbear/design-system receives a total of 1 weekly downloads. As such, @smartbear/design-system popularity was classified as not popular.
We found that @smartbear/design-system demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.