Gathering detailed insights and metrics for @accelint/design-system
Gathering detailed insights and metrics for @accelint/design-system
Gathering detailed insights and metrics for @accelint/design-system
Gathering detailed insights and metrics for @accelint/design-system
npm install @accelint/design-system
Typescript
Module System
Node Version
NPM Version
71.3
Supply Chain
78.8
Quality
93
Maintenance
100
Vulnerability
95.6
License
Cumulative downloads
Total Downloads
Last day
0%
1
Compared to previous day
Last week
66.7%
15
Compared to previous week
Last month
-55.6%
221
Compared to previous month
Last year
0%
719
Compared to previous year
9
15
25
Welcome to the C2 Design System (C2DS)! This library is a collection of UI components and tools for engineers to build specialized, precise user experiences for Command and Control (C2) systems.
This design system, which we've designated C2DS for simplicity, was born of three essential business priorities:
From an engineering perspective, we also want to future-proof our investment by switching to an approach more natively compatible with React Server Components. This is the future of React and getting out ahead of that transition is valuable before it becomes a significant pain point inhibiting rapid feature development.
Developed by the Core team at Accelint, C2DS is a shared platform that all engineers can -- and are encouraged -- to contribute to. This system is published as open source to invite collaboration across our partners and the engineering community in general.
The runtime performance of our applications is an enduring central concern. Our applications place a high performance demand on the browser client, primarily due to the sheer data throughput and intensive rendering requirements. Therefore, it makes sense to move away from a runtime CSS-in-JS solution in favor of a build/compile time styling solution.
The highly bespoke nature of some of our feature implementation is a constant source of friction when using other design systems. We want to move towards a solution that provides us with better tooling to craft features without locking us into existing UI/UX paradigms or irrelevant constraints.
We also want to establish a common platform for multiple similar, but stylistically and functionally unique, applications to be built on a consistent design language with fewer established opinions. The intent here is to provide all the power and flexibility of a custom solution while maintaining a common foundation for interoperability with different digital properties.
C2DS is a semi-headless, themeless collection of components that express minimal opinions about layout and baked-in styles with an API of props for each component that strives to suit many common use cases. The design guidelines are established within Figma.
The vast majority of spacing and color theming is left up to the implementer to define. For every element of this system, the priority has been flexibility over rigid requirements and an "escape hatch" for overriding style and behavior if necessary.
While the exported modules of this package do not include a theme, the Ladle stories for each component utilize a theme established within the ./.ladle/theme
folder for documentation purposes. You can feel free to use this as a starting point for your app's implementation and customize it to suit your needs.
The icons are also missing because we're trying to avoid locking this design system into a specific design language -- they are considered a part of the theming and an application-level concern. Each component that supports icons expects them to be implemented through composition. This enables maximum flexibility and freedom for the implementing app.
This design system is built on a number of concepts with which you may not be familiar. Learn about the technologies, packages, abstractions and patterns that power this design system.
Check out what exists. You can review the components, tokens and primitives available in the system using the Ladle stories for each element: C2DS Stories.
From the root of the standard toolkit project, run:
1pnpm i 2 3pnpm --filter=@accelint/design-system preview
If you run into errors, try running
pnpm build
after you install the dependencies and then run the preview command again. If you don't have pnpm enabled then you can enable it with the command
corepack enable pnpm
.
Learn how to get your app up and running.
Learn how to craft components for this design system.
No vulnerabilities found.
No security vulnerabilities found.