
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@getcircuit/components
Advanced tools
Circuit's collection of reusable components.
First things first, install it with yarn
:
yarn add @getcircuit/components
Then, you're ready to import any exported component:
import { Button } from '@getcircuit/components'
export default () => {
return (
<div>
<Button>Submit</Button>
</div>
)
}
Clone the repository and install its dependencies
git clone https://github.com/getcircuit/web-packages
cd web-packages
yarn
Do not use npm to install the dependencies, as the specific package versions in
yarn.lock
are used to build and test the library.
To have an isolated environment to develop components, we use Storybook:
cd packages/components
yarn run storybook:dev
This will bootstrap a local storybook and open it in your browser.
To build the the library package:
cd packages/components
yarn run build
Some components may have an external CSS file. The file must be manually imported by the consumer of the library, your app for example. This is because your app build setup has no way to know what it should do with a CSS import.
VideoPlayer
: import from '@getcircuit/components/dist/css/VideoPlayer.css'
This is how to add a new icon component to the existing ones located inside src/components/icons
(further referred to as icons/
for brevity)
Use this Figma file: https://www.figma.com/file/SaBI4s1jJBoOWgZ25mNEqP/Cardboard%3A-Icons?node-id=2%3A3
Make sure to copy the SVG from the 24x24 icon selection. See: https://share.cleanshot.com/go2IRW
Change all fill
properties to currentColor
Add the new icon component to the icons/Icons.story.tsx
Add it to the exports of icons/index.ts
yarn test
To use the package locally, first create a link to it:
$ yarn link
# success Registered "@getcircuit/components".
# info You can now run `yarn link "@getcircuit/components"` in the projects where you want to use this package and it will be used instead.
If you want the link to be updated whenever a file changes, you can run the yarn dev
command to automatically build the library and its types.
Then, go to the project that will use the local version of the package:
$ yarn link @getcircuit/components
# success Using linked package for "@getcircuit/components".
If your IDE of preference is VS Code, there's a recommended set of extensions and their configurations attached to this project. To install them, just go to your extensions panel and filter them by Recommended
.
This repository follows the Conventional Commit standard. A new version of the library is automatically released for any relevant PR merged into the main
branch.
We highly encourage the usage of git-cz to write your commit messages. git-cz
automatically adds a git alias to git
, so commits can be written with:
$ git cz
? Select the type of change that you're committing: (Use arrow keys or type to search)
āÆ š test: Adding missing tests
šø feat: A new feature
š fix: A bug fix
š¤ chore: Build process or auxiliary tool changes
āļø docs: Documentation only changes
š” refactor: A code change that neither fixes a bug or adds a feature
š style: Markup, white-space, formatting, missing semi-colons...
(Move up and down to reveal more choices)
FAQs
Unknown package
The npm package @getcircuit/components receives a total of 0 weekly downloads. As such, @getcircuit/components popularity was classified as not popular.
We found that @getcircuit/components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.Ā It has 19 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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.