REFACTOR: Create and Implement List UI Component

[Yura33-dev]

Description

This PR creates a new UI component called List for almost all kind of lists in project.

Changes Made

1. Added a new ui component
2. Refactored sections which use lists (Music, Events, Merch, Press)

Usage

If you want to create a brand new list somewhere in project, you should follow these steps:

1. Create a new css-styles for list in src/components/ui/List/type directory;
2. Import this css file in List.styles.css and add it to object styles in the file with some key;
3. Create a new list in your section:

<List type='your-key-from-List.styles.css'>
    {someArray.map(item => (
        <List.Item key={item.id}>
            ...
        </List.Item>
     ))}
</List>

[netlify[bot]]

✅ Deploy Preview for one-fall ready!

Name	Link
🔨 Latest commit	6974f575a24c06633068689e5a6b076cd7633fe2
🔍 Latest deploy log	https://app.netlify.com/sites/one-fall/deploys/668d475f54491900089102a3
😎 Deploy Preview	https://deploy-preview-15--one-fall.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Yura33-dev]

Hi @naumch1k 👋 !

I have a few questions about List implementation. Could you please check my PR if you have a time?

1. Press and Events sections require some styles for <li>. I tried to pass className to <List.Item>. But in this case I have imported 2 files with styles in sections. Maybe, I can do it in more elegant way?
2. Should I refactor Gallery and Menu with List component as well?

Thank you and have a nice sunday!

[naumch1k]

Hey @Yura33-dev 🙌 It's so satisfying to see how much cleaner our codebase looks now with five fewer folders under app/components!

1. Press and Events sections require some styles for <li>. I tried to pass className to <List.Item>. But in this case I have imported 2 files with styles in sections. Maybe, I can do it in more elegant way?

Actually, you can!

Instead of importing two stylesheets for the sections, you can achieve this more elegantly by using the newly created useList hook. When used within ListItem.tsx, his hook will return the type of list the item belongs to. Then, you can use styles[type].item to set the class name.

// ListItem.tsx

import { useList } from '../List.context'
import { styles } from '../List.styles'

interface IListItemProps {
  children: React.ReactNode
  className?: string
}

export const ListItem = ({ children }: IListItemProps) => {
  const { type } = useList()

  return ( 
    <li className={styles[type].item}>
      {children}
    </li>
  )
}

This way, you can move your CSS code from PressCard.module.css to press.module.css, replace root with item to distinguish ul and li elements, and it will work seamlessly. This approach will allow us to store the list and item styles in a single file dedicated to a particular list type!

2. Should I refactor Gallery and Menu with List component as well?

Let's postpone the refactoring of Gallery for now, as it relies on some compound selectors like .listItem:nth-of-type(4n + 1) .lightboxButton , which will require a different approach. Menu is a UI component itself and does not require refactoring 😉

[Yura33-dev]

Hi, @naumch1k ! 👋

I have finished with those improvements. Let`s check my code and if everything is good you can merge this Pull Request 😊