Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
@nifi-fds/core
Advanced tools
The Apache NiFi Flow Design System module is an atomic reusable platform providing consistent set of UI/UX components for open source friendly web applications to consume.
Weekly downloads
Readme
The Apache NiFi Flow Design System is an atomic reusable platform for providing a consistent set of UI/UX components for open source friendly web applications to consume. Users can interact with this design system by running the demo application locally or by visiting: https://apache.github.io/nifi-fds/.
The demo application serves 2 main purposes
@nifi-fds/core
releases.@nifi-fds/core
.For developers not interested in building the FDS NgModule you can use npm to install the distribution files.
npm install @nifi-fds/core --save
import { NgModule } from '@angular/core';
import { FdsCoreModule } from '@nifi-fds/core';
function AppModule() {}
AppModule.prototype = {
constructor: AppModule
};
AppModule.annotations = [
new NgModule({
imports: [
FdsCoreModule,
...
],
...
})
...
NiFi FDS is a themeable UI/UX component platform. To customize the core FDS components create a simple Sass file that defines your primary, accent, and warn palettes and passes them to mixins that output the corresponding styles. A typical theme file will look something like this:
// Include the base styles and mixins for Nifi FDS core
@import 'platform/core/common/styles/flow-design-system';
//Change these
$primary-color: $rose1;
$primary-color-hover: $rose2;
$accent-color: $blue-grey1;
$accent-color-hover: $blue4;
// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core;
// Define the palettes
$fds-base-palette: (50: #89df79, 100: $primary-color-hover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $primary-color, 600: $primary-color, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
$fds-accent-palette: (50: #89df79, 100: $accent-color-hover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $accent-color, 600: $accent-color, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
$fds-warn-palette: (50: #81410f, 100: #D14A50, 200: #af5814, 300: #c66317, 400: #dd6f19, 500: $warn-color, 600: $warn-color, 700: #eea66e, 800: #f1b485, 900: #f4c29b, A100: #ec9857, A200: #89df79, A400: #89df79, A700: #f6d0b2, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
$fds-primary: mat-palette($fds-base-palette, 500, 100, 500);
$fds-accent: mat-palette($fds-accent-palette, 500, 100, 500);
$fds-warn: mat-palette($fds-warn-palette, 500, 100, 500);
// Define the theme (Optionally specify a default, lighter, and darker hue.)
$fds-theme: mat-light-theme($fds-primary, $fds-accent, $fds-warn);
// FDS theme mixin
@include fds-theme($fds-theme);
You don't have to use Sass to style the rest of your application but you will need to compile this file and include the corresponding style sheet in the head of the HTML document:
<link rel="stylesheet" href='node_modules/@nifi-fds/core/common/styles/css/flow-design-system.min.css'/>
NOTE: The theme file may be concatenated and minified with the rest of the application's CSS.
Optionally you can override the font file paths if you want your font files to be served from a different location.
$fds-font-path: '/path/to/font/files';
Developers can perform code changes and automatically build this project using npm and webpack from the root directory via:
npm run watch
NOTE: Building depends on bash
scripts found in the scripts
folder. Therefore, building on Windows is not supported at this time.
Full builds are also available using npm from the root directory via:
npm run clean:install
or to build without running unit tests run:
npm run clean:install:skipTests
NOTE: Full builds for this project assume a 2 stage build but it only completes the first stage for you. In the first stage all of the assets for the project are copied into the target/frontend-working-directory
, tested, and bundled/minified/obfuscated. It is up to the consumer of this project to integrate the second stage to include the produced index.html and optimized assets files into any deployable archive of their choosing.
Once built you can start the application from the target/frontend-working-directory
directory via:
cd target/frontend-working-directory
npm start
The demo application should now be available at: http://127.0.0.1:28080/. The port may differ if there is a conflict on 28080. See the output of the start command for the available URLs.
The developer mailing list (dev@nifi.apache.org) is monitored pretty closely, and we tend to respond quickly. If you have a question, don't hesitate to shoot us an e-mail - we're here to help! Unfortunately, though, e-mails can get lost in the shuffle, so if you do send an e-mail and don't get a response within a day or two, it's our fault - don't worry about bothering us. Just ping the mailing list again.
FAQs
The Apache NiFi Flow Design System module is an atomic reusable platform providing consistent set of UI/UX components for open source friendly web applications to consume.
The npm package @nifi-fds/core receives a total of 718 weekly downloads. As such, @nifi-fds/core popularity was classified as not popular.
We found that @nifi-fds/core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 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
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.