feat: implement fullscreen context + component

[wadjih-bencheikh18]

closes #217

[netlify]

✅ Deploy Preview for analysis-ui-components ready!

Name	Link
🔨 Latest commit	66631dc
🔍 Latest deploy log	https://app.netlify.com/sites/analysis-ui-components/deploys/63473f4a191fbf000851a5ac
😎 Deploy Preview	https://deploy-preview-237--analysis-ui-components.netlify.app/stories
📱 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 settings.

[codecov-commenter]

Codecov Report

Base: 91.85% // Head: 91.85% // No change to project coverage 👍

Coverage data is based on head (66631dc) compared to base (a3308fb).
Patch has no changes to coverable lines.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #237   +/-   ##
=======================================
  Coverage   91.85%   91.85%           
=======================================
  Files           8        8           
  Lines         491      491           
  Branches       80       80           
=======================================
  Hits          451      451           
  Misses         40       40           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[lpatiny]

In full screen I switch surprisingly to dark mode.

Also in the application the 'open stories' link should not be present because the full screen mode should be targeted to the following part:

[wadjih-bencheikh18]

In full screen I switch surprisingly to dark mode.

I will try to find out whats the problem
Because i tried the functionality on other pages and it works perfectly

[wadjih-bencheikh18]

@lpatiny fullscreen bug fixed

[stropitek]

Please create an example with 2 nested parts of the UI which can be toggled to fullscreen.

[stropitek]

Please create an example with 2 nested parts of the UI which can be toggled to fullscreen.

I meant 1 example which nests 2 fullscreen elements, not 2 examples which each have one fullscreen element.

[wadjih-bencheikh18]

I meant 1 example which nests 2 fullscreen elements, not 2 examples which each have one fullscreen element.

done, sorry for the misunderstanding

[stropitek]

"Nest" means 1 contains the other 😅

<FullScreenProvider>
  <Content i="1" />
  <FullScreenProvider>  
    <Content i="2" />
  </FullScreenProvider>
</FullScreenProvider>

[targos]

^ @stropitek do you expect to be able to nest the fullscreen action? Meaning if you put the parent in full screen, you can then put the child too, ending up with two elements in full screen.

[wadjih-bencheikh18]

"Nest" means 1 contains the other

Implemented.

[stropitek]

do you expect to be able to nest the fullscreen action? Meaning if you put the parent in full screen, you can then put the child too, ending up with two elements in full screen.

I see nesting as a potentially valid use case (for example full app + spectra area) and I wanted to see how it behaves with the current implementation. Apparently it does not behave correctly, but I'm not expecting that it works in this PR.

I guess we need to validate that nesting / stacking is a valid use case. @lpatiny any thoughts?

[lpatiny]

I think it make sense that many parts of the same application can go full screen and they could be nested but I think if we are in full screen we should not be able to put in full screen a part of it. This means that all the 'full screen' button should disappear once we are in full screen.

I'm not aware of any application in which we can have a stack of full screen and this could be quite confusing for the end user.

[targos]

This behavior is weird if you "Toggle fullscreen 1" and the try to "Toggle fullscreen 2".

I think if we are in full screen we should not be able to put in full screen a part of it.

Why not? I think it should either replace the existing full screen element or create a stack, but not remove buttons (that would be difficult to implement)

[wadjih-bencheikh18]

This behavior is weird if you "Toggle fullscreen 1" and the try to "Toggle fullscreen 2".

I fixed the behavior and it works perfectly now

[targos]

I think there's still an issue when the user exits fullscreen using the Escape key. In that case, you need to click twice on the button to enter fullscreen again.