Storybook: show addons by default

ex-tag commented 2 years ago

For the Storybook could you enable "Show addons" by default?

https://brianzinn.github.io/react-babylonjs/?path=/story

I'm having trouble getting started with the React-Babylonjs library because I'm not seeing enough example code. Didn't realize that all the Storybook examples provided the source code under the "Story" tab once "Show addon" was selected.

brianzinn commented 2 years ago

@octocat-1 You may need to localStorage.clear(), but I have started a fix (still need to select story tab by default too I think). I think I need so split the stories up differently as the source looks a bit wonky. I'm not using storybook in the typical way of a component library, so not all parts necessarily make sense (controls/actions).

ex-tag commented 2 years ago

Just seeing example code is a huge plus. Even if it's not perfect. Also propose adding example code to the docs.

https://github.com/brianzinn/react-babylonjs/blob/master/docs/api.md

brianzinn commented 2 years ago

I got just the stories showing on storybook and by default. Agree also about the API - did you mean seeing examples for each host element - maybe with required props?

ex-tag commented 2 years ago

did you mean seeing examples for each host element - maybe with required props

I'm not sure what "host element" means, but I think I'm asking for more. I'm a developer and code is my language. And when I'm not able to copy-paste from documentation and tweak parameters in a running program, then I'm not really learning at all. The babylonjs documentation does a decent job of explaining 3D modeling engine concepts, but it doesn't help me code. Even with the examples they provide, it's not accessible or detailed enough for me.

Therefore my proposal is for react-babylonjs to document all components and props (https://github.com/brianzinn/react-babylonjs/blob/master/docs/api.md) as code, so that developers can copy-paste them like a template, and be more productive.

For example:

<Engine
  {/* antialias does xyz. Default is true. */}
  antialias={true}

  {/* adaptToDeviceRatio does xyz. Default is true. */}
  adaptToDeviceRatio={true}

  {/* engineOptions does xyz. */}
  engineOptions={{

    /* preserveDrawingBuffer does xyz. Default is true. */
    preserveDrawingBuffer: true,

    /* stencil does xyz. Default is true */
    stencil: true
  }}

  {/* etc */}
/>

<Scene
  {/* clearColor does xyz */}
  clearColor={Color3()}

  {/* etc */}
/>

etc...

brianzinn commented 2 years ago

thanks @octocat-1 - the docs are in flight of being totally redone and will have more tutorial content and also will be easy for contributors to add to the documentation. each example opens in code sandbox and there will be walkthroughs for all of the main concepts.

brianzinn / react-babylonjs

Storybook: show addons by default #171