Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@atom-learning/components
Advanced tools
Clone the repo
git clone git@github.com:Atom-Learning/components.git
Install dependencies
yarn install
Before starting to develop on this project, please consider the following:
pre-commit
hooks work before pushing into a branchdev
: Starts the libary for developmentbuild:lib
: Builds the library and populates the dist
folderbuild:docs
: Builds the documentation and exports it to be consumed by the documentation
projectclean
: Deletes the dist
folder to ensure a clean buildformat
: Formats the code using Prettier
lint
: Lints the code using Eslint
test
: Runs the testing suit using Jest
test:watch
: Runs the testing suit in watch modevalidate
: Runs all the validate commands (see package.json
for more details) - This command is used by the CI too, to check pushed changesstart:sandbox
: Starts up a sandboxThe project follows the SemVer standard Semantic Versioning to make using the library easy. SemVer uses the MAJOR
.MINOR
.PATCH
notation to identify changes with MAJOR
representing breaking changes that are not backwards compatible, MINOR
representing new features / non-breaking additions and PATCH
representing fixes.
It is also a requirement to use Semantic commits as each tag will translate to a different type of version upgrade. For example:
breaking change
will be associated with a major release.Note: The precommit
hooks will prevent commits that don't have the required tag prefixed to the message
Versioning happens automatically when a feature branch gets merged into main
. semantic-release is employed to calculate the new version number by running through all the new commits and their commit message tag. Once the new version is calculated, it updates the package.json and automatically updates the CHANGELOG.md
. Then it proceeds to publish the new version both in GitHub
and npm
.
Note: Once a branch gets merged into main
, it is automatically published, therefore main
always needs to be in a pristine state. For that reason, following the GitFlow model, all work needs to happen into a branch, and main
is locked
@semantic-release/commit-analyzer
- checks commits messages for the required tags@semantic-release/release-notes-generator
- creates/updates the release notes@semantic-release/npm
- publishes version to npm
@semantic-release/github
- publishes version to GitHub Releases
husky
- precommit hook to prevent incomplete commit messagesThe design system is aiming to adhere to strict accessibility standards with AA as the minimum. To enable this, eslint-plugin-jsx-a11y
is set to strict mode.
Different tools are used to validate the components as each serves a different purpose. The accessibility unit tests will fail the pipeline and prevent releasing inaccessible components. However, these tests are only valid with the context they are testing on, so they can't guarantee 100% that a component is fully accessible. Therefore, manual testing is required along with design validation.
Before developing a component, please take some time to read the following sections and the reading provided.
React.Fragment
where possible to avoid adding extra <div>
Sometimes we break HTML semantics when we add
<div>
elements to our JSX to make our React code work, especially when working with lists (<ol>
,<ul>
and<dl>
) and the HTML<table>
. In these cases we should rather use React Fragments to group together multiple elements. for examples please look at the React documentation
jest-axe
) to ensure that the components' different variations don't have any accessibility issues. Example:it('has no programmatically detectable a11y issues', async () => {
render(<Flex />, document.body)
const results = await axe(document.body)
expect(results).toHaveNoViolations()
})
Note: axe
doesn't catch contrast issues when run on jsdom
which jest
is using.
As mentioned above, accessibility testing is heavily reliant on the context, so when using the Design System in an app, please consider the following:
FAQs
Unknown package
The npm package @atom-learning/components receives a total of 209 weekly downloads. As such, @atom-learning/components popularity was classified as not popular.
We found that @atom-learning/components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.