feat: add component catalog base

[andreancardona]

Closes #12

Related to #8

Changelog

New

• Adds in Catalog List View
• Adds in Catalog Grid View
• Breaks up each component into their own directory and stylesheet

Testing / reviewing

• Make sure you see both view styles for the component catalog at all the breakpoints

Note:

• This does not include functionality
• Still missing filter and search, pagination styling & functionality

[mattrosno]

@andreancardona can this PR close #12, so we don't have to wait to merge this until the full prototype is done?

[mattrosno]

@andreancardona I updated PR name because we can't merge this if we wanted to, until you mark the PR as "Ready for review."

[mattrosno]

@andreancardona weird - not sure why GitHub here didn't say that this branch was behind main... I just merged in main branch and fixed the build that was breaking due to notice linting.

[mattrosno]

Next.js file naming convention is to use lowercase dashed file names like component-catalog.js instead of ComponentCatalog.js. Not a big deal right now, but let's standardize on that going forward.

I'm thinking these components can go in a /components/catalog directory, as the catalog components will be not specific to components... they will be used in the Elements catalog, Patterns catalog, etc. All asset catalogs.

Actually, we can split these components up to their own directories so each components can have its own CSS Modules file. That way, we can use short class names like styles.container and not need styles.componentCatalogItemGridContainer.

[mattrosno]

Looking good! Lmk if you want to pair up to do any of these recommendations.

[jharvey10]

Looks like there's just two minor code smells. One for commented out code and another for an expression that can be returned instead of being assigned to a local variable.
Should be easily fixable!

[andreancardona]

Next.js file naming convention is to use lowercase dashed file names like component-catalog.js instead of ComponentCatalog.js. Not a big deal right now, but let's standardize on that going forward.

I'm thinking these components can go in a /components/catalog directory, as the catalog components will be not specific to components... they will be used in the Elements catalog, Patterns catalog, etc. All asset catalogs.

Actually, we can split these components up to their own directories so each components can have its own CSS Modules file. That way, we can use short class names like styles.container and not need styles.componentCatalogItemGridContainer.

• Next.js file naming convention is to use lowercase dashed file names like component-catalog.js instead of ComponentCatalog.js. Not a big deal right now, but let's standardize on that going forward.

I'm thinking these components can go in a /components/catalog directory, as the catalog components will be not specific to components... they will be used in the Elements catalog, Patterns catalog, etc. All asset catalogs.

• Actually, we can split these components up to their own directories so each components can have its own CSS Modules file. That way, we can use short class names like styles.container and not need styles.componentCatalogItemGridContainer.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.7% Duplication