[Joy] Remove private to leverage CodeSandbox

[siriwatknp]

Summary

• mark package as public starting with v0.1.0-alpha.0 to make joy appear in CodeSandbox.
  • It is fine to release 0.x.y because it is considered unstable according to semver
• add joy creact-react-app to examples so that we can try it out in CodeSandbox.
• add a dummy Button.

---

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 069dcd0

[michaldudak]

@mui/material-next uses 6.0.0-alpha. Have you considered adopting the same pattern here as well?

[mnajdova]

@mui/material-next uses 6.0.0-alpha. Have you considered adopting the same pattern here as well?

👍 replace dev with alpha please :)

[mnajdova]

Would suggest removing it, to indicate that it is not necessary if no theme is provided, or provide a custom theme :)

[mnajdova]

Also, probably the theme should be required, no? Otherwise, what is the point of adding a provider without the theme?

[siriwatknp]

I think CssVarsProvider is what we will use the most, so I put it as default here. (We can change it in the future if we have a better way but for now I think it is good enough)

probably the theme should be required

The theme is not required because of the default theme. However, CssVarsProvider is required, otherwise, how do we turn the default theme to CSS variables.

[mnajdova]

Wait, I thought joy's default theme already crates the variables. Does this mean that whoever uses the joy's design system will need to wrap the app in CssVarsProvider? If yes, then this breaks the zero configuration approach we had till now.

[siriwatknp]

Does this mean that whoever uses the joy's design system will need to wrap the app in CssVarsProvider

No. You can start with plain Button same as @mui/material:

import Button from '@mui/joy/Button';

<Button> // this should work

You are still able to access the default theme as usual but you won't get the global theme CSS variables attached to your app (some components might have CSS variables because it is the component scope).

If you want to use CSS variables from your theme, you will need to wrap your app with CssVarsProvider.

You can consider CssVarsProvider as a feature on top of ThemeProvider.

[siriwatknp]

I am still reluctant about attaching CSS variables automatically without using CssVarsProvider. I think it can be tested in the future but not a blocker at this point.

[siriwatknp]

@mui/material-next uses 6.0.0-alpha. Have you considered adopting the same pattern here as well?

At first I thought that using dev would be more explicit that this is development work but I am happy to go with alpha.

[hbjORbj]

Looks good to me :)

[siriwatknp]

I think it is fine to merge this PR to unblock some of my WIP (All of the change is about Joy, so I don't think there will be any impact).