Components, capabilities and tools
In these pages, we dive deeper into the shared components, capabilites and tools. All are made to ease your job in delivering product features.
Shared components
You will find these shared UI components under libs/dnb-components/.
| Footer | @dnb/footer | The standard footer at the bottom of each page. |
| Header | @dnb/header | The standard header for the top of the page. Includes the Menu. |
| Menu | @dnb/menu | The standard navigation menu. Comes by default in the Header. |
| Sidebar Menu | @dnb/sidebarmenu | An alternative to the standard Menu, placed on the left side of the page. |
| Error boundary | @dnb/error-boundary | A JavaScript Error boundary catcher that default displays a sensible UI to the user when a component within crashes. |
| Error pages | @dnb/error-pages | The standard error fallback pages from a server response "Not Found" and "Internal server error". |
| Layout | @dnb/layout | The standard layout skeleton where you place the standard header and footer within together with your page content. Read more about the standard DNB Layout. |
| React Helmet | @dnb/helmet | A component for altering HTML-tags normally placed within the <head> tag, commonly used for setting the page <title> |
| Feedback component | @dnb/feedback | (POC) A "give feedback" component where users can write page-specific feedback. |
| Link | @dnb/link | (POC) Links to handle routing correct within Gatsby. Read more about routing and pages. |
We decided to leave the description and "how to use" documentation closer to the specific component source code, so look up the
Readme.md's within the repository for further details.
Shared capabilities
List of capabilities placed in libs/dnb-capabilities/:
| API handler | @dnb/api-handler | Handles almost all your API request needs. |
| Authentication | @dnb/authentication | Global authentication hooks and functions. |
| Dynamic Routing | @dnb/dynamic-routing | A library to handle routing parameters and gatsby apps navigation. Read more about routing and pages. |
| Locale | @dnb/locale | Provides a standardized way of handling selected language |
| Minimum test requirements | @dnb/minimum-test-requirements | Contains standard unit tests that are required to be run for each web component |
| Loader script | @dnb-capabilities/loader-script | An application uploaded to E-Platform to load the generated manifest.json and application files generated by spa-build through the apps manifest.json. |
| Wrap App Element | import { wrapAppElement} from '@dnb/app' | Let's you locally scope Gatsby's wrapPageElement API for only the Gatsby Theme / Plugin your working on, so that it doesn't affect unrelated pages. Read more on wrapAppElement |
Shared tools
List of tools placed in tools/:
| CI/CD configuration | tools/cicd | Pipeline configuration. Read more about the CI/CD configuration |
| Devconfig setup script | tools/devconfig | The developer setup script to enable pre-commit hooks etc. |
| ESlint extensions | tools/eslint-extensions | Additional extensions for ESLint |
| Gatsby extensions | tools/gatsby-extensions | Additional extensions for Gatsby |
| Git helpers | tools/git-helpers | Includes a tool for finding old outdated branches in git |
| Jenkins stats | tools/jenkins-stats | Tool for extracting statistics from Jenkins into an Excel worksheet |
| Lokalise | tools/lokalise | Script for downloading translations from Lokalise |
| Nx Executors | tools/nx-executors | Includes start-server-and, an executor for starting services before the next downstream executor |
| Nx Extensions | tools/nx-extensions | Nx generators and executors for React and Gatsby applications. |
| S3 Azure AD Proxy | tools/s3-azure-ad-proxy | Reusable application in a Docker container that will use Azure AD to authenticate a user, and then proxy files from an s3 bucket. |
| Storybook | tools/storybook | All storybook configurations and extensions |
| Test utils | tools/test-utils | Test configurations |
| Yarn plugins | tools/yarn-plugins | Includes pre-install, which warns if user is trying to install without using yarn |
Shared gatsby themes
List of themes in libs/dnb-gatsby-themes that you can add to your app's gatsby-config.js.
| Basic App core | @dnb/app/theme | The core functionality behind a DNB app. |
| Basic Root app core | @dnb/root-app/theme | The core functionality behind a root-app. Similar to @dnb/app, but with additional functionality to bind the apps together. |
| App Manifest | @dnb/app-manifest/theme | Theme to configure the manifest file. |
| Images setup | @dnb/images/theme | Includes shared defaults and needed dependencies to handle Gatsby images. |
| Path translation | @dnb/path-translation/theme | Can provide apps with a translation of page names (location path). |
| PostCss | @dnb/postcss-config/theme | Used by @dnb/app and @dnb/root-app to resolve postcssConfigTheme. |
| SPA build | @dnb/spa-build/theme | Build plugin for React SPA to make it work inside the monorepo with Gatsby. |
Configurations
| Prettier | /.prettierrc.js: Root configuration /.prettierignore: List files to ignore formatting |
| Eslint | /.eslintrc.json: Root configuration /.eslintignore: List files to ignore /tools/eslint-extensions/*: Custom plugins |
| Jest | /jest.config.js: Root configuration/jest.base.js: Base configuration /jest.preset.js: Preset configuration /tools/test-utils/jest**: Custom plugins for setup |
| Typescript | /tsconfig.base.json: Root configuration |
| Babel | Created in /tools/nx-extensions/dnb-nx-gatsby/babel.js: getGatsbyBabelOptions() Created as @dnb/gatsby/babel (an extension of @nrwl/gatsby/babel) Created in /tools/nx-extensions/dnb-nx-workspace/src/babel-plugins Used as babelPluginExtendNX in /tools/setup/dnb-nx-gatsby/babel.config.js |
Shared technology
- GitLab: The Git repository handler. Read more about the GitLab repo and how to get access.
- Nexus: The repository for artifacts in DNB. Read more about Nexus and NPM.
- Nexus IQ: Read more about Nexus IQ in Quality Assurance.
- SonarQube: Scanning projects with sonar-scanner. Read more about SonarQube in Quality Assurance.
- Storybook: To document and demonstrate UI components. Read more about Storybook.