@aurodesignsystem/auro-formkit
Advanced tools
auro-formkit is a collection of web components that can be used to build forms.
It is a monorepo that contains the following components:
auro-checkbox
auro-checkbox-groupauro-comboboxauro-counter
auro-counter-groupauro-datepickerauro-dropdownauro-formauro-inputauro-menu
auro-menu-optionauro-radio
auro-radio-groupauro-select
$ npm i @aurodesignsystem/auro-formkit
Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this stack overflow answer.
To start using the Auro Formkit components, follow the instructions below:
You can use Auro Formkit components in your project in two ways: automatic or custom registration.
For automatic registration, simply import the component:
import "@aurodesignsystem/auro-formkit/auro-checkbox";
This will automatically register both the <auro-checkbox> and the included <auro-checkbox-group> component for use in your project. Note that not all Auro Formkit components have sub-components. Be sure to check the documentation for each component to understand its specific usage and registration requirements.
If you prefer to register the component with a custom name, you can call the component class directly to create a custom registration:
import { AuroCheckbox, AuroCheckboxGroup } from "@aurodesignsystem/auro-formkit/auro-checkbox/class";
AuroCheckbox.register('custom-checkbox');
AuroCheckbox.register('custom-checkbox-group');
This will register the component as <custom-checkbox> and <custom-checkbox-group>.
When using TypeScript set moduleResolution to bundler, add the following to your tsconfig.json:
{
"compilerOptions": {
"moduleResolution": "bundler"
}
}
This configuration enables proper module resolution for the component's TypeScript files.
Here is an example of how to use the Auro Checkbox component in your HTML:
index.html -> <head>
<script type="module">
import "@aurodesignsystem/auro-formkit/auro-checkbox";
</script>
index.html -> <body>
<auro-checkbox-group>
<span slot="legend">
Form label goes here
</span>
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">
Checkbox option
</auro-checkbox>
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>
Checkbox option two
</auro-checkbox>
</auro-checkbox-group>
By following these steps, you can easily integrate Auro Formkit components into your project.
The use of any Auro custom element has a dependency on the Auro Design Tokens.
Running the dev command will open a localhost development server for all components in the monorepo at once.
To only develop a single component, use the --filter flag:
npx turbo dev --filter=@aurodesignsystem/auro-input
npm run test
Turbo will attempt to test components in parallel which will lead to port conflicts.
Setting the concurrency to 1 will prevent Turbo from running tests in parallel:
"test": "turbo run test --concurrency=1",
turbo.jsondoes not support --concurrency yet. See this issue.
This monorepo is managed using Turborepo.
When you install a dependency in a component or package in auro-formkit, you should install it directly in the package that uses it.
The package's package.json will have every dependency that it needs. This is true for both external and internal dependencies.
npm registry (e.g., Lit, Rollup, Sass)package.json using exact versions or version rangesnode_modules during npm install or yarn installauro-formkit monorepo@aurodesignsystem/combobox package might depend on @auro-formkit/inputpackage.json just like external dependencies"workspace:*" or "workspace:^1.0.0")dependencies){
"dependencies": {
"lit.js": "^3.0.0", // External dependency
"@auro-formkit/input": "workspace:*" // Internal dependency
}
}
peerDependencies){
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
}
devDependencies){
"devDependencies": {
"typescript": "^5.0.0",
"@open-wc/testing": "^4.0.0" // Internal dev dependency
}
}
Let's use @auro-formki/combobox as an example to illustrate these concepts:
{
"name": "@auro-formkit/combobox",
"dependencies": {
// Internal dependencies
"@aurodesignsystem/auro-dropdown": "*", // Required UI component
"@aurodesignsystem/auro-input": "*", // Required UI component
// External dependencies
"@alaskaairux/icons": "^5.3.0", // Required UI component
"lit": "^3.2.1" // Framework
},
"peerDependencies": {
"@aurodesignsystem/design-tokens": "^4.12.1",
"@aurodesignsystem/webcorestylesheets": "^5.1.2"
},
"devDependencies": {
// Build utilities
"rollup": "^4.24.4",
"@auro-formkit/build-tools": "*",
}
}
This structure ensures that:
External dependencies come from the npm registry.
Internal dependencies let you share functionality within your repository.
This practice has several benefits:
Improved clarity: It's easier to understand what a package depends on when its dependencies are listed in its package.json. Developers working in the repository can see at a glance what dependencies are used within the package.
Enhanced flexibility: In a monorepo at scale, it can be unrealistic to expect each package to use the same version of an external dependency.
Better caching ability: If you install too many dependencies in the root of your repository, you'll be changing the workspace root whenever you add, update, or delete a dependency, leading to unnecessary cache misses.
Pruning unused dependencies: When dependencies are installed in the packages that they are meant for, Turborepo can read your lockfile and remove dependencies that aren't used in the packages you need.
For more information, see the Turborepo docs.
package.jsonThe only dependencies that belong in the root package.json are tools for managing the repository.
Some examples of dependencies that make sense to install in the root are turbo, husky, or stylelint.
Conversely, dependencies Auro components rely on should be installed in their respective packages, such as Lit, Rollup, or other auro-formkit dependencies.
FAQs
A collection of web components used to build forms.
The npm package @aurodesignsystem/auro-formkit receives a total of 2,714 weekly downloads. As such, @aurodesignsystem/auro-formkit popularity was classified as popular.
We found that @aurodesignsystem/auro-formkit demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.
Research
/Security News
Malicious update to @ctrl/tinycolor on npm is part of a supply-chain attack hitting 40+ packages across maintainers