Project Structure Documentation

[deruvodanielMS]

To ensure effective documentation and organization of our project, we need to create a Confluence page outlining the main structure of our UI frameworkless Web Components project. This will serve as a reference for team members and allow us to document further as the project progresses.

Project Overview:

Our project involves the development of a UI frameworkless approach for building Web Components. We are utilizing the following technologies and tools:

LIT: We have chosen LIT as the main library for building Web Components due to its lightweight nature and efficient rendering capabilities. StoryBook: We will be using StoryBook as a development environment and documentation tool to showcase and test our Web Components in isolation. Testing with Play Functions: We will implement tests using Play Functions to ensure the functionality and behavior of our Web Components. Custom Theme with Design System Tokens: Our UI will be based on a custom theme utilizing tokens from our Design System. This will ensure consistent styling across our components and adherence to our established design guidelines. Publishing via NPM: The final Web Components library will be published as an npm package for easy installation and integration into other projects. Main Project Structure:

src directory: Contains the source code for our Web Components, organized into individual component directories. stories directory: Includes StoryBook stories for each component, enabling isolated development and documentation. tests directory: Contains tests for our Web Components, utilizing Play Functions for robust testing coverage. theme directory: Holds the custom theme files, including the tokens imported from our Design System. dist directory: The compiled output of our Web Components library, ready for distribution via NPM.

[deruvodanielMS]

Link to the confluence file: