Base Implementations

For this example, it was created a new project by using CRA to simplify the understanding of the general structure of the template.

SDS Installation

To make sure sds packages are correctly added to you project, developers can use install-peerdeps dependency to add sds-react-component package and all its peer dependencies. For more information you can check the following link.

Beside that, adding sds-themes package is optional so developers can have access to the theme tokens at the same time they can give automtic support for the dark-theme.

React Router Dom

This template has been done to be compatible with react-router-dom dependency, facilitating the navigation workflow through different views. Something important to keep in mind, is that this template is compatible with the newer and older versions of react-router-dom, so developers can use the version of their preference.

General Structure of the Project

App.tsx
    |__ BrowserRouter
        |__ div/section (Most external container of the app)
            |__LinksCollection (Optional wrapper)
            |    |__AppNavbar
            |        |__AppNavbarGroup
            |        |    |__NavLink (React Router Component)
            |        |    |    |__AppNavbarItem
            |        |    |__(...)
            |        |    |__AppNavbarStaticItem
            |        |__AppNavbarCustomArea
            |
            |
            |__RoutesCollection (Optional wrapper)
                |
                |__Routes/Switch (Depends on react-router-dom version)
                    |__Route
                    |  |__Page/View
                    |       |__Wizard
                    |       |__AppPage
                    |           |__AppPageNav
                    |                |__AppPageNavItem
                    |                |__AppPageNavNestedItem
                    |           |__AppPageActions
                    |           |__AppPageContent
                    |
                    |__Route... (Repeat structure)   

Components List

React-Router-Dom components

• BrowserRouter

• Switch/Routes (Name depends on the version)

• Route

• NavLink

SDS Components

• AppNavbar

• AppNavbarGroup

• AppNavbarCustomArea

• AppNavbarItem

• AppNavbarStaticItem

• AppPage

• AppPageNav

• AppPageNavItem

• AppPageNavNestedItem

• AppPageActions

• AppPageContent