Giter VIP home page Giter VIP logo

Comments (6)

Akryum avatar Akryum commented on August 11, 2024 1

Yeah why not having all of this in a dropdown at the top of the Controls tab 👍

from histoire.

Akryum avatar Akryum commented on August 11, 2024

In a way, you can already do presets with different variants (this has the advantage of already having UI and props - title/icon/etc.)

from histoire.

Akryum avatar Akryum commented on August 11, 2024

I'm more in favor of having a way for the user to save and load state without adding a new API in parallel to the variants.

from histoire.

hugoattal avatar hugoattal commented on August 11, 2024

@Akryum So, saving and loading presets from local storage should be good?

Solution 1
It could be something as simple as a "Save" and "Reset" buttons:

  • The "Save" button would save the state to local storage and display this state as default
  • The "Reset" button would remove the state from local storage and display the default state

Solution 2
A more advanced version would have a "Create" button with a text input to write the name of the preset.
Then there would be a dropdown with all the saved presets (+ the default one at the top)
And for each selected preset (but the default) a "Save" and "Delete" buttons.

Solution 3
Same as solution 2, but you would be able to create additional default presets with custom names

All solutions would only read/write from localstorage, so no additional API. (except for solution 3, but still no write)

Wdyt? I believe it would be very useful during development.

from histoire.

Akryum avatar Akryum commented on August 11, 2024

I'd like a mix of solution 1 and 2:

  • A Presets tab next to controls and docs
  • A 'Save' to preset button that instantly creates an unamed state preset and selects it as active (automatically restored onward)
  • A list of state presets
  • The first item is 'Initial state' from the story (active by default)
  • For each state preset:
    • Click: Activate (and restore automatically)
    • Double-click on name: Rename the preset
    • Rename icon button
    • Delete icon button

from histoire.

hugoattal avatar hugoattal commented on August 11, 2024

I'm not sure a preset tab would be a good solution, since it will heavily depend on the controls.
I'm afraid there would be a lot of back and forth between the controls tab and the preset tab.

I think the presets should at least be quickly accessed with a drop-down at the top of the controls tab (and we could display the drop-down only if there's at least one preset)

Wdyt? Btw, this could also be a plugin that people could activate or not if you prefer.

from histoire.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.