Dernetsoft-component-library NPM

📦 DERNETSOFT-COMPONENT-LIBRARY

DERNetSoft Component Library contains foundational React UI component libraries for shipping new features faster, is a comprehensive library of components that features our implementation of component based application.

DERNetSoft Component is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.

DERNetSoft Component is a collection of CSS utilities to help you rapidly lay out custom designs.

Installing the Library 🧰

To use DERNetSoft Component Library , all you need to do is install the dernetsoft-component-library package and its peer dependencies:

$ yarn add dernetsoft-component-library antd styled-components
# or
$ npm i dernetsoft-component-library antd styled-components

Features 🚀

Ease of Styling: DERNetSoft Component Library contains a set of layout components like Box and Card that make it easy to style your components by passing props.
Flexible & composable: DERNetSoft components are built on top of a React UI Primitive for endless composability.
Dark Mode 😍: Most components in the library are dark mode compatible. (Incoming feature)

Running Previewing

npm run storybook

Running Unit Testing

npm run test

Update and publish

npm run update

Technology Stack 💻

🏆 Compiler

🔍 Building and Previewing

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Find out more at https://storybook.js.org.

✅ Unit Testing

via Jest or via BrowserStack

🎉 Publishing

via NPM through dernetsoft-admin.

Getting started with DERNetSoft Component Library

Here is an example of a basic app using DERNetSoft Component Library's Button component:

import * as React from 'react';
import ReactDOM from 'react-dom';
import Button from 'dernetsoft-component-library';

function App() {
  return (
    <Button type="primary" text="Click Me" disabled={false} />
  );
}
ReactDOM.createRoot(document.querySelector('#app')).render(<App />);

In the interactive demo below, try changing the code and see how it affects the output. (Hint: change disabled to "true" and type to "secondary".

Development Guide Lines into DERNetSoft Component Library

If you want collaborate to the growing library you have to follow the path lines created from the DERNetSoft Development Team to effectively see your components published. The folder structure will be the same for all entire project, each component should be inside each property folder with all types, test and jsx files. Here an example how existing Button is organized:

Once the component is created, with all files needed, we you can check your created component running npm run storybook, it will running locally the service Storybook and you should be able to test it on http://localhost:6006.

To publish a new version of the library, please contact @ilprincipecolo as collaborator of the project.