@nova-ui/bits
Advanced tools
The Nova Nui Framework provides a set of common UI-based components and services to assist with rapid web application development. Nui is built on the latest Angular and follows modern UX design principles and front-end software development practices.
In Bits, the philosophy is all about flexibility – it provides the Legos, plumbing and styles, while you control the layouts. Bits aims to provide high-quality, atomic building blocks, services and tools while allowing feature developers the ability to create whatever layouts they need.
Before you begin, make sure your development environment includes Node.js®, an npm package manager and the npm registries set.
To check your version, run node -v in a terminal/console window. To get Node.js, go to nodejs.org.
The Angular CLI is a command-line interface tool that you can use to initialize, develop, scaffold and maintain Angular applications.
You may want to check first whether it's already installed by running the following command:
ng --version
If you want to install it globally, run the following command:
npm install -g @angular/cli
In order to install bits in your project root using the CLI, run the following command:
ng add @nova-ui/bits
This will automatically perform most of the steps for you.
But, there's one additional step that needs to be done manually. Since bits uses @angular/localize for localization, this dependency
needs to be imported in your app's polyfills.ts file. The easiest way to do this is to run the following command:
ng add @angular/localize
Installation is quite simple using npm. Nui includes all of its dependencies as part of the final build such as Angular, RxJs and more.
$ npm install @nova-ui/bits
Once all dependencies and project files are downloaded, import any component modules you want to use to the appropriate Angular
module in your project. The following example imports the NuiButtonModule to make the ButtonComponent available for use.
import { NuiButtonModule } from "@nova-ui/bits";
@NgModule({
imports: [
NuiButtonModule
]
})
Note that, before alpha.15, the forRoot() method was used and an optional argument in forRoot() could be used to configure the Bits environment.
The current way to configure Bits is shown below:
import { LogLevel, NuiEnvironment } from "@nova-ui/bits";
export class OverriddenNuiEnv extends NuiEnvironment {
public logLevel: LogLevel = LogLevel.debug; // your override
}
@NgModule({
imports: [],
providers: [{
provide: NuiEnvironment,
useClass: OverriddenNuiEnv,
}],
The Nova modules you consume will search for the NuiEnvironment provider and use it; otherwise, they will use the default one. At the moment, only log levels can be configured this way.
In your root module, you need to add these imports:
imports: [
BrowserModule,
BrowserAnimationsModule,
...
]
and these providers:
providers: [
{provide: TRANSLATIONS_FORMAT, useValue: "xlf"},
{provide: MISSING_TRANSLATION_STRATEGY, useValue: MissingTranslationStrategy.Warning},
{provide: TRANSLATIONS, useValue: ""},
...
]
The TRANSLATIONS provider can be used to internationalize bits. Details here: https://cp.solarwinds.com/display/NU/i18n+for+Nova
To get some of the styles to display, you have to add the nui css class to the root html element:
<html class="nui">
<!--rest of page-->
</html>
To add styling for Bits, you need to modify angular.json corresponding to the targeted project with the following additions:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"stylePreprocessorOptions": {
"includePaths": [
"./node_modules/@nova-ui/bits/sdk/less"
]
},
...
}
}
}
"architect": {
"build": {
"options": {
"styles": [
"./node_modules/@nova-ui/bits/bundles/css/styles.css"
...
],
...
}
}
}
FYI - Bits does not use the Bootstrap component library nor does it include custom fonts.
We recommend the BEM naming convention for your css/less variable names, but you're free to use whatever convention you prefer.
To avoid compilation errors caused by tree-shaking of lodash, tsconfig.json of your project needs to have allowSyntheticDefaultImports: true property in compilerOptions.
If you have compilation error like TypeError: find_1.default is not a function when running tests you might need to add esModuleInterop: true to your compilerOptions. Or you can try Solution #2 from this article.
More details can be found here.
By default Nova requires highlight.js (which normally goes with all of its languages which even Nova does not use). This can result in an excessively large bundle size (adds ~1MB). You can exclude the languages by updating the highlight.js import path inside your tsconfig.json file.
"compilerOptions": {
"paths": {
"highlight.js": ["./node_modules/highlight.js/lib/highlight.js"]
}
},
A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code. Schematics are part of the Angular ecosystem. Nova Bits offers the following [schematics](http://apollo-docs.swdev.local/nova-bits/release_nova_v8.x/sdk/api-docs-ng2/additional-documentation/schematics .html):
The Filtered View schematic provides the ability to create a generic filtered view that can cover many use cases for filtering a set of data. Its main responsibility is to integrate a filter group panel with a list or table view that displays the filtered data. More details can be found here To add a filtered view to your project, run the following command:
ng generate @nova-ui/bits:filtered-view --name=custom-name-for-filtered-view
The Filtered Group schematic provides the ability to create a filtered group view. It depends heavily on the LocalFilteringDataSource service, so first and foremost please check out the documentation for it. This code can be generated using the following command:
ng generate @nova-ui/bits:filter-group --name=basic-filter-group --p=app
The List schematic provides the ability to create a generic list that can cover a majority of use cases for a list. Its main responsibility is to integrate the functionality of the nui-repeat component with other components commonly used with a list such as nui-select, nui-search, nui-paginator and nui-sorter. This code can be generated using the following command:
ng g @nova-ui/bits:list --name=basic-list --p=app
Atoms are the custom implementation of a well-known PageObject pattern. They are useful when it comes to e2e and visual testing an app containing Nova components and directives. They can be found in @nova-ui/bits/sdk/atoms. Note that, while they are useful for e2e and visual tests, they are not suitable for unit testing.
We encourage contributions to Nui whenever your team needs a new component, new functionality in an existing component, new icons, bug fixes or atom extensions. We're capable of releasing very quickly if you need to consume your changes as soon as possible - just let us know via Slack, email or Jira. We want to make sure you and your teams are empowered to get your features built without being blocked by us.
Nova Nui supports AoT. For a primer on AoT, you can go here or for a more detailed overview you can go here.
Nova formally supports the following browsers. Support for IE11 has been dropped as of Nova v9.0.0.
Using date pipe, string should be provided according to ISO format. Otherwise, put Moment object instead to avoid error in Safari browser. Follow this link for more details.
Need help using Nui?
Firstly, please go over our FAQ. We kindly ask that you not open Jira tickets for general support questions as we want to reserve Jira for bug reports and feature requests.
The SWI - Nova channel on Teams is a much better place to ask questions.
In order to reproduce bugs we ask that you to provide a minimal repro scenario and a link to the live repro environment.
To submit feature requests and/or defects for Nui, head over to this page for instructions.
Our program roadmap is here and shows the priorities of very large features that are expected to take longer than 6 months. Our technical roadmap is a much more granular view of the program roadmap and is basically the view for the current quarter.
It's pretty simple to add a new icon to the repository for your product. If you need a new icon(s) as part of a patch/hotfix, just let us know via Teams or Jira and we'll make sure your changes are applied to the appropriate branch(es).
FAQs
SolarWinds Nova Framework
The npm package @nova-ui/bits receives a total of 405 weekly downloads. As such, @nova-ui/bits popularity was classified as not popular.
We found that @nova-ui/bits 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.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.