hocs | : bento : Higher-Order Components for React | Frontend Framework library

1. How can we help SWC understand CSS (or mock CSS modules)? - SWC doesn't understand css natively, and neither did Babel. As you noted, when you were using Babel, the plugin styled-components took care of this. You'll need to do the same with SWC. I can't find an existing SWC plugin that does this, but you can roll your own. Obviously this is a pain, but such is the cost of using new tooling.
2. How can we help SWC understand absolute imports? - The .swrc options for baseUrl and paths should do what you want, but that, too, seems to have some issues.

You may have better luck creating issues directly in the @swc-node GitHub repo, but given the comments there it feels like you might be SOL for a while. Might be faster/easier to rewrite your tests using one of the libraries that Next supports out of the box.

useTranslation is not a HOC, you want withTranslation. That will look like this:

Nothing is rendered because you are not correctly using the Route component's element prop to render the routed components. In react-router-dom@6 gone are the component and render and children render function props, replaced by a single element prop taking a ReactElement, a.k.a. JSX.

Route

In your App component you're creating the state that is holding the options of your player with const [playerOptions, setOptions] = useState(options)

options are your initialOptions (you could also name them like this).

Next, you pass options and setOptions to your AppContext.Provider as the value. Then options and the setter can be used by other components.

You can place the below snippet in a separate module and export AppContext and the Provider. (In the below Code and the Codesandbox, everything is in one file.)

Also creating a useAppContext or usePlayerContext hook could be interesting, if you're having many places where you're using it.

Well, not completely sure that this is the right place to put questions like this, but let try to answer, from my point of view, to these points.

Answers

1. I don't think this specific architecture has a name (like, for example, this one, that has a name https://www.freecodecamp.org/news/scaling-your-redux-app-with-ducks-6115955638be/). In any case the name would not be "Flux" or "Redux" since these names are more related to how data is treated instead of how folders are structured in the project. I don't think there is some strict rule about folder hierarchy to follow to be fully compliant with Flux or Redux patterns. For sure there are best practices and conventions, but they are not mandatory.
2. To answer this point, let me share this link https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 about an article posted by Dan Abramov. I am sharing this article because of the last update made (the article is dated 2015, but there is an important update made in 2019). As you can see seems that you are doing it good since you are putting the core logic in hooks. Just a note about this point: you said "functional components" but I think you were referring to "presentation components", this is an important distinction because "functional component" means that your component is based on a function (instead of a class), "presentation component" instead means that the component does not contain business logic. A "presentation component" can be both class-based or functional and a functional component can contain business logic (class-based component are being replaced by functional ones, but this is another story).
3. Some advice: be coherent with capitalization and casing (you are mixing uppercase and lowercase, dash-case and camelCase, usually I like to name every file or folder in dash-case, but it depends on you); nut sure if HOCs folder should be here; maybe you can put all the utils (lib, theme, styles and utils itself) in a directory called utils where each util is named property;
4. About context, and this is a controversial topic, just want to share some considerations taken from docs https://reactjs.org/docs/context.html#before-you-use-context and share my opinion on that. The idea behind context is "Context provides a way to pass data through the component tree without having to pass props down manually at every level", as per documentation subtitle. So, basically, it si something created to avoid "property drilling", as exposed here https://medium.com/swlh/avoid-prop-drilling-with-react-context-a00392ee3d8 for example. This is just a personal point of view but, maybe, is better to introduce Redux for global state management instead of using Context API.
5. Don't be scared to use Redux. Be scared if, while using Redux, you have tons of duplicated lines of code. In this case you should think about how to abstract your actions and reducers (for example with action creators). If you will be able to generalize stuff like "getting a list of items from your backend", you will realize that your code will not just have less lines of code than a repetitive one, but it is even more readable and coherent. For lists, for example, you may have an action like const getListOfNews = list("NEWS_LIST", "/api/news/"); where list is an action creator like const list = (resource, url) => (params = {}) => dispatch => { // your implementation... };, something similar with reducers.
6. No, they just "let you use state and other React features without writing a class" as said here https://reactjs.org/docs/hooks-intro.html from docs. It is important to avoid trying to adapt a pattern like MVC to something that was created with different ideas, and this is a general advice. Is like if you are coming from Angular and you try to work in the same way in React. Basically you should work with React, or other libraries/frameworks, without trying to transform them from what they are to what you already know.

After running the code as it is I obtain this arrangement:

Custom hooks are good for reusing them in multiple components but I would also use them in this example because by that code looks more clean and readable even if you will not use hooks again in the future. I prefer hooks more then HOC because when you open component you immediatelly see that there are some custom named hooks, when you use HOC you have to scroll to the bottom of the component to find out that it uses HOC. Sometimes it is not that clear to see it because you see some different props comming to it but you don't know from where do you get them. Later on you see that component is wrapper in HOC but it is not that easy to find out.

you can always use flowRight function from lodash as compose function.

here is a practical example in my graphql project in order to inject my queries/mutations to my component:

I think that the problem might be that you are not returning the expected paths model in getStaticPaths function.

Minimal example of this page: