I'm looking to generate random shapes similar to your background at Squircley.app

If we can add more customization to a story's sidebar that'd be great. Things that come to mind are label tags (for visual cues and enhance search) and ordering (I'd like to move some of my stories to the bottom of the sidebar.

In the docs, Generating Custom Color Palettes:

A common question we get is "how do I generate the 100–900 shades of my own custom colors?".

Bad news: color is complicated and we've yet to find a tool that does a good job generating these sorts of color palettes. We picked all of Tailwind's default colors by hand, balancing them by eye. Sorry!

I recently stumbled on to tailwind.ink and I believe it qualifies as a great tool for the job!

I'm keen on hearing your thoughts on the overhead. Are you noticing poor animation performance because of the css variable?

It does since many of the animation libraries(I'm using framer motion) goes through each property every animation frame. Those extra props also makes debugging very unwieldy when there's a lot of animation going on. Also the issues the variables bring with IE11 as @r0skar as pointed out

But ultimately, we should be expecting the same output similar to that of tailwind.css

Sorry! That was a mistake on my part, I forgot my build was using the tailwind dark addon which may have caused the conflict. After disabling that everything's working fine now.

I'm currently using the class strategy and grouping them together does not seem to work:

'dark:bg-black dark:text-white' // works
'dark:(bg-black text-white)' // does not work

In Tailwind, disabling the text and background opacity would remove the variables but this is not the case for twin.macro.

// tailwind.css (original)
.bg-red-400 {
  --bg-opacity: 1;
  background-color: #fc8181;
  background-color: rgba(252, 129, 129, var(--bg-opacity));
}

// tailwind.config.js
  corePlugins: {
    textOpacity: false,
    backgroundOpacity: false,
  },

// tailwind.css (with above settings)
.bg-red-400 {
  background-color: #fc8181;
}

// twin.macro
console.log(tw`bg-red-400`) // { --bg-opacity: "1", backgroundColor: "rgba(252, 129, 129, var(--bg-opacity))"}

this is adding some unnecessary overhead, in my case i'm using twin.macro to animate object properties so I would prefer to only manipulate the background or color properties(as it should).

Originally posted by @cybervaldez in https://github.com/ben-rogerson/twin.macro/issues/86#issuecomment-707237243

In Tailwind, disabling the text and background opacity would remove the variables.

// tailwind.css (original)
.bg-red-400 {
  --bg-opacity: 1;
  background-color: #fc8181;
  background-color: rgba(252, 129, 129, var(--bg-opacity));
}

// tailwind.config.js
  corePlugins: {
    textOpacity: false,
    backgroundOpacity: false,
  },

// tailwind.css (with above settings)
.bg-red-400 {
  background-color: #fc8181;
}

// twin.macro
console.log(tw`bg-red-400`) // { --bg-opacity: "1", backgroundColor: "rgba(252, 129, 129, var(--bg-opacity))"}

this is adding some unnecessary overhead, in my case i'm using twin.macro to animate object properties.

Is there a way to stop the variable from being present? (e.g: rgba(160, 174, 192, var(--text-opacity))? It's bloating twin.macro which i'm using to do property animations with. I would prefer to just see rgb(160, 174, 192)

The second parameter of a decorator is also the story's properties. I'm using this decorator so I would not be repeat adding labels to my buttons, etc.

export default {
  // ...
  decorators: [
    (story, props) => story({ args: { label: props.story, ...props.args } }),
  ],
}

export const ActiveButton = Wrapper.bind({}); // label will be it's export key (ActiveButton)

export const DisabledButton= Wrapper.bind({});
DisabledButton.args = {
  label: "[DISABLED]" // manually set the label.
};

controls was introduced in 6.0 to replace knobs. the two areas it falls short currently:

• knobs are fully dynamic, e.g. you can conditionally show and hide knobs based on the value of other knobs
• knobs can be saved on the URL and initialized from the URL. this is coming to controls in 6.1 #12291

if you don't need either of these immediately, use controls

I'm very interested in the former, conditionally show/hide knobs based on a state.

const [isEnabled, toggleEnabled]= useState(true)

return <>{isEnabled && text('enabledLabel', 'enabled')} {!isEnabled && text('disabledLabel', 'disabled')} <button onClick={()=>toggleEnabled(isEnabled)}>Toggle</button></>

I'm expecting to hide/show enabledLabel and disabledLabel in the knobs panel depending on the state.

I'm new and keep seeing knobs tutorial but I've read we should use control instead, is there any instances when I would prefer this over controls? or is this eventually going to be deprecated.

Same. Been following through the guide and i'm having the same issue, nothing here fixes it for me. I can go to the Docs tab and set my args there however.

Now that withInfo is deprecated in storybook can we have an update to your article and source?

Thinking through this more, this might be part of a bigger story - it's a valid use-case for the function component to be called again (rerender) if actions changed, if something should be done with those actions:

const [state, send] = useMachine(...);

useEffect(() => {
  state.actions.forEach(action => {
    // do something with each action
  });
}, [state.actions]); // should execute effect when only actions change

// ...

I believe this can already by done with asEffect

const [current, send]= useMachine(InputMachine, {
  actions: {
     FOCUS : asEffect(()=>setFocus(true))
  }
})

@tonyxiao that's exactly what I am looking for because basically:

• all my backend services use fastify (rest framework like Express)
• each route has a JSON Validator built-in
• each backend service exposes its OpenAPI Spec thanks to these json schemas

So basically, I am looking at a Zod to JSON Schema helper to avoid having to double specify each type. Let me know if you find anything!

Originally posted by @lazharichir in https://github.com/vriad/zod/issues/75#issuecomment-694865003

It's certainly possible but it would break type inference. You can't pass a blob of untyped data into a hypothetical zod.importJSON(blob) function and get a statically typed validator out of it. Is that a problem?

Is this going to be on the roadmap?

Description getting "(machine)" instead of the machine's actual id when accessing a state meta.

Expected Result age.type email.type

Actual Result (machine).type (machine).type

Reproduction See console log(line 75): https://codesandbox.io/s/autumn-glade-t7p4l?file=/src/index.js:1543-1545

Additional Context I'm using xstate/react, codesandbox was an example for an enhancement request

Turns out to be an issue on my part as i've destructured the id parameter InputMachine({ id })

Description getting "(machine)" instead of the machine's actual id when accessing a state meta.

Expected Result age.type email.type

Actual Result (machine).type (machine).type

Reproduction See console log(line 75): https://codesandbox.io/s/autumn-glade-t7p4l?file=/src/index.js:1543-1545

Additional Context I'm using xstate/react, codesandbox was an example for an enhancement request

Came across this issue myself today, here's a sandbox: https://codesandbox.io/s/optimistic-ride-1izew?file=/src/index.js

Good point. I'll implement it - it's on the roadmap. Any chance this would also show up for the choose action?

Since it's stated on the docs that null events are being deprecated for 'always' i've been using the latter instead but it doesn't seem to work with the online viz which kinda leaves me in a conundrum. Just need some advice if I should just revert back to null transitions for now?

Looks like viz is not up to date with the current version of xstate.

What's the current workaround for this? Currently using: @xstate/react: 1.0.0-rc.6 xstate: 4.12.0