Skip to content

Conversation

@Linn-Devoteam
Copy link
Contributor

Pull Request

Description

This PR adds info under the Overview section.

To achieve this, I also introduced some new building blocks to make the structure more scalable:

  • SectionCard: a reusable content block with title, divider, and body.
  • List: a component for rendering lists from config instead of hardcoding
  • Updated styled toolkit (containers, dividers, flex utilities) to support future growth and consistent styling.

The Overview tab now contains:

  • A SectionCard with an introduction to the React-Vite template.
  • A SectionCard with “What’s Included”, showing lists of components and hooks powered by the new List component.

How to test

  1. Install and start the project:

    • npm install
    • npm run dev
  2. Open the Overview tab and Verify that:

    • Intro section is displayed inside a SectionCard.
    • Lists are generated via the List component (not hardcoded).
  3. Check styling:

    • Design follow figma design

Type of Change

  • feature: New feature
  • chore: Maintenance, dependency updates, or refactoring
  • test: Adding or improving tests
  • bug: Bug fix
  • docs: Documentation updates
  • Other (please specify):

Shortcut story

https://trello.com/c/Hq1p9oUC/14-feature-layout-tab-preview-overview

Related Issues

Testing Performed

  • Unit tests added/updated
  • Integration tests added/updated
  • Manual testing performed

Screenshots/Recordings

Screenshot 2025-08-22 at 11 13 07

Checklist

  • My code follows the project's coding style guidelines
  • I have updated the documentation accordingly
  • I have added tests that prove my fix/feature works
  • All existing and new tests pass
  • I have checked for and resolved any merge conflicts
  • I have made corresponding changes to the README (if applicable)

Additional Notes

src/main.tsx Outdated
<Routes>
//TODO: Add more routes that takes you to different template pages
<Route path="/" element={<App />} />
<Route index element={<LibraryPage />} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

App needs to be rendered here. In App, we can have different elements being rendered, but main.tsx shouldn't know of our components

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, Done.

import { Typography as T } from '../../core/typography'
import Tabs from '../../components/common/organisms/Tabs'
import { Main } from '../../components/common/styled'
import { LIBRARY_TABS } from './tabs.config'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why caps 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed to LiberyTabs

@@ -0,0 +1,32 @@
export const overviewSections = [
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why .config?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used .config here to make it clear this file is only exporting static configuration data (no logic). Happy to rename it. I can rename it to overview.ts to keep it simple.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants