docs: remove cientos props table (#412)

* docs: change props tables to HTML/markdown

* docs: remove CientosPropsTable component

* docs: remove CientosPropsTable dep from pnpm-lock

* docs: added `backticks` to component names on docs to avoid recursion

---------

Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>

docs/guide/abstractions/lensflare.md

@@ -25,25 +25,16 @@ import { Lensflare } from '@tresjs/cientos'
 
 ## Props
 
-<CientosPropsTable
-component-path="src/core/abstractions/Lensflare/component.vue"
-:fields="['name', 'description', 'default']"
-:on-format-value="({valueFormatted, propName, fieldName, getFieldFormatted}) => {
-  if (fieldName === 'description') {
-    return getFieldFormatted('type') + ' – ' + valueFormatted
-  }
-  if (fieldName === 'name') {
-    const seeMores = {
-    'elements': `<a href='#elements'>${valueFormatted}</a>`,
-    'seed': `<a href='#seed'>${valueFormatted}</a>`,
-    'seedProps': `<a href='#seedprops'>${valueFormatted}</a>`,
-    }
-    return seeMores.hasOwnProperty(propName) ? seeMores[propName] : valueFormatted
-  }
-}"
- />
-
-<CientosPropsList component-path="src/core/abstractions/Lensflare/component.vue" :fields="['name', 'description']" />
+| Name | Description | Default |
+| :--- | :---------- | :------ |
+| **scale** |  `number` – scale of the lensflare | `1.0` |
+| **elements** | `Partial&lt;LensflareElementProps&gt;[]` – array of lensflare element properties | `undefined` |
+| **seed** | `number` – random seed for generating random seeded elements | `undefined` |
+| **seedProps** | `SeedProps[]` – specifications for generating random seeded elements | `undefined` |
+| **color** | `TresColor` – default color of lensflare elements | `undefined` |
+| **distance** | `number` – default distance of lensflare elements from flare center | `undefined` |
+| **size** | `number` – default size of lensflare elements | `undefined` |
+| **texture** | `Texture string[]` – default texture of lensflare elements | `undefined` |
 
 ## `elements`
 

docs/guide/staging/backdrop.md

@@ -23,4 +23,8 @@ The `cientos` package provides a `<Backdrop />` component. It's just a curved pl
 
 ## Props
 
-<CientosPropsTable component-path="src/core/staging/Backdrop.vue" :fields="['name', 'type', 'default', 'required']" />
+| Name | Type | Default | Required |
+| :--- | :--- | ------- | -------- |
+| floor | number | `0.25` | No |
+| segments | number | `20` | No |
+| receiveShadow | boolean | `false` | No |

docs/guide/staging/fit.md

@@ -4,7 +4,7 @@
   <FitDemo />
 </DocsDemo>
 
-`<Fit />` uniformly scales and positions its children as a group. By default, it fits its children into a <nobr>1 × 1 × 1 box</nobr> at the world origin.
+`<Fit />` uniformly scales and positions its children as a group. By default, it fits its children into a 1 × 1 × 1 box at the world origin.
 
 Alternatively, the children can be fit into a `Box3` or an `Object3D`.
 
@@ -16,8 +16,15 @@ Or the children can simply be resized. With `<Fit />` the children are scaled re
 
 ## Props
 
-<CientosPropsTable :on-format-value="({valueFormatted, propName, fieldName, getFieldFormatted}) => {
-  if (fieldName === 'description') {
-    return valueFormatted + '<p>default:<br />' + getFieldFormatted('default') + '</p>'
-  }
-}" :fields="['name', 'description']" component-path="src/core/staging/Fit.vue" />
+<table><thead><tr class="row-header"><th class="col-name">Name</th><th class="col-description">Description</th></tr></thead><tbody><tr class="row-into"><td class="col-name"><strong>into</strong></td><td class="col-description">If <code>into</code> is:
+<ul>
+<li>omitted or explicitly <code>undefined</code>: position/scale children to fit into a 1 × 1 × 1 <code>Box3</code> at world origin.</li>
+<li><code>null</code>: turn off <code>&lt;Fit /&gt;</code>; reset scale/position of children.</li>
+<li><code>number</code>: convert argument to <code>Vector3(number, number, number)</code>.</li>
+<li><code>[number, number, number]</code>: convert argument to <code>Vector3</code>.</li>
+<li><code>Vector3</code>: position/scale children to fit inside a <code>Box3</code> of size <code>Vector3</code> at target objects' cumulative center.</li>
+<li><code>Box3</code>: position/scale children to fit inside <code>Box3</code>.</li>
+<li><code>Object3D</code>: position/scale children to fit inside calculated <code>Box3</code>. <a href="https://threejs.org/docs/#api/en/math/Box3.setFromObject">See <code>THREE.Box3.setFromObject</code></a>. <code>&lt;Fit /&gt;</code> must not contain the <code>Object3D</code> and vice-versa.</li>
+</ul>
+<p>default:<br><code>new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))</code></p></td></tr><tr class="row-precise"><td class="col-name"><strong>precise</strong></td><td class="col-description"><a href="https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject">See <code>precise</code> argument in <code>THREE.Box3.setFromObject</code></a><br>
+<p>default:<br><code>false</code></p></td></tr></tbody></table>

docs/guide/staging/ocean.md

@@ -7,17 +7,15 @@
 `<Ocean />` is a wrapper for the [Three.js `Water` add-on](https://threejs.org/examples/?q=ocean#webgl_shaders_ocean).
 
 ::: warning
-<Ocean /> comes with a default texture, so it needs to be wrapped in a Suspense component.
+`<Ocean />` comes with a default texture, so it needs to be wrapped in a Suspense component.
 :::
 
 ## Usage
 
-<<< @/.vitepress/theme/components/OceanDemo.vue{3,11}
-
 ### SKY
 
-<Ocean /> works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.
-(<Sky /> is not required for making this component work.)
+`<Ocean />` works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.
+(`<Sky />` is not required for making this component work.)
 
 ### Fog
 
@@ -27,12 +25,12 @@ The `<Ocean />` component also reacts when there's [Fog](https://threejs.org/doc
 
 You can use custom geometry by adding it as a child.
 
-```
-    <Suspense>
-      <Ocean>
-        <TresCircleGeometry :args="[50, 16]" />
-      </Ocean>
-    </Suspense>
+```HTML
+<Suspense>
+  <Ocean>
+    <TresCircleGeometry :args="[50, 16]" />
+  </Ocean>
+</Suspense>
 ```
 
 ## Props

docs/guide/staging/sky.md

@@ -1,7 +1,7 @@
 # Sky
 
 <DocsDemo>
-  <SkyDemo />
+<SkyDemo />
 </DocsDemo>
 
 `<Sky />` is a wrapper for the [Three.js `Sky` add-on](https://threejs.org/examples/?q=sky#webgl_shaders_sky).
@@ -12,4 +12,11 @@
 
 ## Props
 
-<CientosPropsTable component-path="src/core/staging/Sky.vue" />
+<table><thead><tr class="row-header"><th class="col-name">Name</th><th class="col-type">Type</th><th class="col-description">Description</th><th class="col-default">Default</th><th class="col-required">Required</th></tr></thead><tbody><tr class="row-turbidity"><td class="col-name"><strong>turbidity</strong></td><td class="col-type"><code>number</code></td><td class="col-description">Haziness<br>
+</td><td class="col-default"><code>3.4</code></td><td class="col-required">No</td></tr><tr class="row-rayleigh"><td class="col-name"><strong>rayleigh</strong></td><td class="col-type"><code>number</code></td><td class="col-description"><a href="https://en.wikipedia.org/wiki/Rayleigh_scattering">Rayleigh scattering</a><br>
+</td><td class="col-default"><code>3</code></td><td class="col-required">No</td></tr><tr class="row-mie-coefficient"><td class="col-name"><strong>mieCoefficient</strong></td><td class="col-type"><code>number</code></td><td class="col-description"><a href="https://en.wikipedia.org/wiki/Mie_scattering">Mie scattering</a> amount<br>
+</td><td class="col-default"><code>0.005</code></td><td class="col-required">No</td></tr><tr class="row-mie-directional-g"><td class="col-name"><strong>mieDirectionalG</strong></td><td class="col-type"><code>number</code></td><td class="col-description"><a href="https://en.wikipedia.org/wiki/Mie_scattering">Mie scattering</a> direction<br>
+</td><td class="col-default"><code>0.7</code></td><td class="col-required">No</td></tr><tr class="row-elevation"><td class="col-name"><strong>elevation</strong></td><td class="col-type"><code>number</code></td><td class="col-description">Sun's elevation from the horizon, in degrees<br>
+</td><td class="col-default"><code>0.6</code></td><td class="col-required">No</td></tr><tr class="row-azimuth"><td class="col-name"><strong>azimuth</strong></td><td class="col-type"><code>number</code></td><td class="col-description">Sun's <a href="https://en.wikipedia.org/wiki/Solar_azimuth_angle">azimuth angle</a>, in degrees – its horizontal coordinate on the horizon<br>
+</td><td class="col-default"><code>180</code></td><td class="col-required">No</td></tr><tr class="row-distance"><td class="col-name"><strong>distance</strong></td><td class="col-type"><code>number</code></td><td class="col-description">Sky box scale<br>
+</td><td class="col-default"><code>450000</code></td><td class="col-required">No</td></tr></tbody></table>