Milk-ui-react NPM

TODO - Sub Hero Component

What do we need to have a sub hero component in production with the new setup?

Create Repo (system ansvarlig) - estimate 1 (Sprint 1)
Create and setup NextJs project (frontend) - estimate 2 (Sprint 1)
Rewrite existing Design-System files (Rewrite library from web-components to css-modules so that the solution can compile the styling correctly) (Frontend) - estimate 3 (Sprint 2)
Build Component DSB-HERO (See Design-System) (Backend/Frontend) - estimate 1 (Sprint 1)
- All related logic to handle the UI should be included in the component.
Style DSB-HERO Component (Backend/Frontend) - estimate 2 (Sprint 2)
write test and setup test framework for DSB-HERO (Jest, Cypress) unit - UI - End2End, where it's needed - estimate 2 (Sprint 2)
Create components package (including components, styling, SVG's etc...) - RollUp.js - estimate 5 (Sprint 2-3)
- Trying to split this into smaller stories (Bundle package)
  - Handle stylesheets (Sass files, css-modules etc...)
  - Handle Components (compile typescript, bundle javascript)
  - Handle static files in package bundle (SVG's, fonts, "images" etc...)
  - Production ready (Minification, browsersupport, output type(iife, ecmascript-modules ...) etc...)
    - 'HINT' I think we need to include React in the package, to be sure that it runs as expected, and not getting errors from an older react version in another solution.
  - Publish package to intern DSB package repo. - estimate 1 (Sprint 3)
    - Store package as private npm repo in DSB. (Look at earlier setup with Design-System)

Make sure that we have access to get package. - See old React solution (https://bitbucket.dsb.dk/projects/SALG/repos/dsbdk-frontend/browse) for setup - estimate 1 (Sprint 2)

Get component package (DSB-UI) and use the DSB-HERO component (Backend/Frontend) - estimate 1 (Sprint 3)
Find a tool to render react components from package, correctly for SEO .NET-MVC (Backend/Frontend) - estimate 2-3 (Sprint 1-2)
Test (Backend/Frontend) - estimate 2
- Rendering (flickering) - frontend package
- SEO - correct output
- Any style conflicts with existing styles

Storybook (framework to visualize components, can be used for UX documentation) - estimate 2
- Setup build and publish to current DSB storybook site at: https://dsbdk-design-sit.azurewebsites.net/?path=/story/introduction-version-0-1-25-readme--readme - estimate 2
- Write story for DSB-Hero component - estimate 1
Automatic version handling when build/publish package from NextJs solution - estimate 2
Integrate/Rewrite existing test project (cypress) into NextJs - To handle GTM tracking tests - estimate ??? -> development project into NextJs solution

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Component library src/components/dsb-ui

Packages and plugins:

The following packages is used for building the UI package to NPM.

Note!!! It should be possible to remove the packages/plugins and libraries used for DSB UI package, when not neede anymore.

Packages:

Files:

npm login
# or check if your logged in
npm whoami

Build package

npm build:UI

to publish

npm publish

Vscode
- IDE settings for the project
.Yarn
- Packages used in project (like node-modules folder)
Public
- All public static content added here.
- Robots.txt, Favicon, Fonts, Images, SVG's etc...
Src
- Components
  - Layout
  - UI
- Data
  - Dummy data
- Features
  - Specific logic for a feature
- Hooks
  - Hooks and custom hooks
- Pages
  - Routing - Folder and files matches Pages
- Pages/Api
  - All api routes
- Store
  - Redux state management - Global state files/logic added here.
  - For more specific state handling, create slice under the feature.
- Styles
  - Global SASS (scss) files
- Test
  - E2E (End to end test)
- Types
  - Typescript specific files to get type check in solution
- Utils
  - General functions/logic to be used anywhere in the solution