Add comprehensive linked live code

Checks

[X] I have checked that this enhancement has not already been requested

How would you categorize this request. You can select multiple if not sure

Documentation

Enhancement Description

Buckaroo is a complex widget with multiple levels of abstraction. Writing examples for this is also difficult.

For any state of buckaroo it should be obvious how to write python or js code to recreate that state
Any of these states should be live edittable
Live edittable code should read as naturally as possible
Live edittable code should be self contained, without importing variables
Don't use faker type libraries for demos, it obscures what is happening
For buckaroo maintainers, you shouldn't have to write the same demo in two places, this will be work that is ignored
All demo code should ideally live in the github repo

Pseudo Code Implementation

There are a couple of features that fall out of this.

The buckaroo widget already formats json for the JS to display. That's it's core reason for existing. Add a method .to_codepen() that generates a codepen link for any buckaroo state. Look here https://github.com/paddymul/buckaroo/blob/main/docs/examples/CodePenButton.tsx#L40-L51

Write some type of code templating system that does the following

Have one file, that lays out each example. This should be executable python code. I should also have commented markers that pull out the relevant code snippets. Each snippet should be named.
From that templating, call .to_codepen() to generate the codepen link
Have a build step to generate an ipynb file with the same step
Generate pycafe from the same snippet

Here's an example

Float_col example

###df_var###
float_col = [5, -8, 13.23, -8.01, -999.345245234, None]
float_df = pd.DataFrame({
    'float_obj_displayer': float_col,
    'float_float_displayer_1__3': float_col,
    'float_float_displayer_0__3': float_col,
    'float_float_displayer_3__3': float_col,
    'float_float_displayer_3_13': float_col})
###end_df_var###

###conf_var###
def float_conf_col(min_digits, max_digits):
    return {'displayer_args': { 'displayer': 'float', 'min_fraction_digits':min_digits, 'max_fraction_digits': max_digits}}
float_config = {
        'float_obj_displayer':  {'displayer_args': {'displayer': 'obj'}},      
        'float_float_displayer_1__3' : float_conf_col(1,3),
        'float_float_displayer_0__3' : float_conf_col(0,3),
        'float_float_displayer_3__3' : float_conf_col(3,3),
        'float_float_displayer_3_13' : float_conf_col(3,13)}
###end_conf_var###

Here is what an ipynb cell using this would look like in template form

{{float_ex.df}}
{{float_ex.conf}}
BuckarooWidget(float_df, column_config_override=float_config)

You can write a similar template for solara/pycafe

Prior Art

https://mmomtchev.github.io/react-edit-list/#/simple

paddymul / buckaroo

Add comprehensive linked live code #297