feat(examples): Add UIF Package for Rendering UI

[thanhngoc541]

Related to #2753

UIF Package - Pull Request

Description

This PR introduces enhancements to the UIF (User Interface Framework), providing a set of flexible, customizable UI components. The package is designed to help developers create responsive and consistent interfaces with ease, utilizing dynamic theming and reusable components.

Available Components

• Navbar
  A flexible navigation bar with customizable links.

navbarLinks := map[string]string{
    "Home": "/home",
    "About": "/about",
    "Contact": "/contact",
}
navbar := uif.Navbar(navbarLinks)

• Button
  A styled button component featuring a gradient background and hover effects.

theme := uif.Theme{
	PrimaryColor:   "#8e44ad",  // Purple
	SecondaryColor: "#9b59b6",  // Light Purple
	FontSize:       "18px",     // Larger font
	DefaultPadding:        "12px 24px", // Custom padding
	BorderRadius:   "10px",     // Rounded corners
}
button := theme.Button("Click Me", "#")

• Card
  A container for grouping content, with customizable dimensions, padding, and shadow effects.

cardContent := uif.Paragraph("This is a card component with some content.")
card := uif.Card(cardContent, "", "") // Card with default dimensions
// Card with image and custom dimensions
cardWithImage := uif.Card(uif.Image("https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg", "300px", "200px") + uif.Paragraph("This card contains an image and text."), "400px", "auto")

• TextInput
  An input field with dynamic styling, including labels, placeholder text, and focus effects.

textInput := uif.TextInput("name","Enter your name")
textInputEmail := uif.Theme{
	PrimaryColor: "#2980b9",
	Padding: "10px 20px",
	FontSize: "16px",
	BorderRadius: "8px",
}.TextInput("email","Enter your email")

• CodeBlock
  A preformatted text block for displaying code snippets in a styled format.

• Grid
  A responsive grid layout that supports custom column counts and gaps between items.

	// Organize content using grid layout
	gridItems := []string{
		headingIntro + paragraphIntro + divider,
		headingHowItWorks + paragraphHowItWorks + buttonExplore + divider,
		headingFeatures + paragraphFeatures,
	}

	// Create a grid with 1 column, 40px gap, and left-aligned text
	contentGrid := customTheme.Grid(gridItems, 1, "0", "left")

• Form
  A dynamic form component with customizable fields, hidden fields, and an action URL.

fields := []string{
	uif.TextInput("addr", "Enter address"),
}

// Create the form with action URL
form := uif.Form(fields, "/r/demo/users", "GetUserByAddress", "Submit")

• Heading
  Customizable headings from H1 to H6, with adjustable font sizes and margins.

headingMain := uif.Heading(1, "Components Overview")

• Paragraph
  Styled text blocks with consistent typography and line height.

descriptionMain := uif.Paragraph(`
		This page provides an overview of the various UI components available in the UIF package. Each component is customizable
		through the use of themes, allowing you to modify colors, padding, and other styling properties. Explore how these
		components can be used to create beautiful, responsive user interfaces.
	`)

• Divider
  A horizontal line used to visually separate sections of content.

divider := uif.Divider()

• Footer
  A footer component with customizable links and styling.

footer := uif.Footer([]string{"Privacy Policy", "Contact", "Terms of Service"})

Improvements

This release focuses on enhanced usability, theming flexibility, and component customization, ensuring developers can create modern, responsive UIs efficiently.

Contributors' checklist...

• Added new tests, or not needed, or not feasible
• Provided an example (e.g. screenshot) to aid review or the PR is self-explanatory
• Updated the official documentation or not needed
• No breaking changes were made, or a BREAKING CHANGE: xxx message was included in the description
• Added references to related issues and PRs
• Provided any useful hints for running manual tests
• Added new benchmarks to generated graphs, if any. More info here.

[leohhhn]

Hey @thanhngoc541, thank you for the PR and the effort. As you saw in the comment in issue #2753, we are planning to remove html support from gnoweb completely, very soon, making your functionality deprecated.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 60.96%. Comparing base (912a5db) to head (b01001b).
Report is 13 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2947      +/-   ##
==========================================
- Coverage   60.97%   60.96%   -0.02%     
==========================================
  Files         564      564              
  Lines       75273    75273              
==========================================
- Hits        45897    45887      -10     
- Misses      26008    26015       +7     
- Partials     3368     3371       +3     

Flag	Coverage Δ
contribs/gnodev	61.46% <ø> (ø)
contribs/gnofaucet	14.46% <ø> (ø)
gno.land	67.92% <ø> (ø)
gnovm	65.78% <ø> (ø)
misc/genstd	80.54% <ø> (ø)
misc/logos	20.23% <ø> (ø)
tm2	62.04% <ø> (-0.08%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.