profile
viewpoint

cybervaldez/examples 0

Demos and examples for Riot and submodules

cybervaldez/xstate 0

State machines and statecharts for the modern web.

startedstorybookjs/storybook

started time in 4 days

issue openedgeorgedoescode/squircley.js

[Request] Add random shapes

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

created time in 4 days

startedgeorgedoescode/squircley.js

started time in 4 days

startedahmadawais/awesome-random-stuff

started time in 4 days

issue commentstorybookjs/storybook

Add an option to hide a story from the sidebar

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.

rafaelalmeidatk

comment created time in 4 days

issue openedtailwindlabs/tailwindcss.com

Add tailwind.ink as a tool for generating custom palettes in the docs (customizing-colors)

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!

created time in 4 days

issue commentben-rogerson/twin.macro

Disabling textOpacity/backgroundOpacity should remove the variables similar to tailwind's output

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

cybervaldez

comment created time in 14 days

pull request commentben-rogerson/twin.macro

Add dark and light mode variants

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.

ben-rogerson

comment created time in 14 days

pull request commentben-rogerson/twin.macro

Add dark and light mode variants

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
ben-rogerson

comment created time in 15 days

issue openedben-rogerson/twin.macro

Disabling textOpacity/backgroundOpacity should remove the variables similar to tailwind's output

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

created time in 15 days

issue commentben-rogerson/twin.macro

Classes setting colour set RGB value but not hex

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.

KieranO547

comment created time in 15 days

issue commenttailwindlabs/tailwindcss

text-opacity does not work with inheritance from parent

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)

jenstornell

comment created time in 15 days

issue commentstorybookjs/storybook

Pass props to stories from decorators

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.
};

isnifer

comment created time in 18 days

issue commentstorybookjs/storybook

[Question] When do we use knobs over control?

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.

cybervaldez

comment created time in 18 days

issue openedstorybookjs/storybook

[Question] When do we use knobs over control?

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.

created time in 20 days

issue commentstorybookjs/storybook

Addons panel not showing - but knobs are still working(?)

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.

goralight

comment created time in 21 days

issue openedelisealcala/storybook-tailwind-ts

withInfo is deprecated

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

created time in 22 days

issue commentdavidkpiano/xstate

Reactjs doing unnecessary renders

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))
  }
})
ivandotv

comment created time in a month

issue openedvriad/zod

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

@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

created time in a month

issue commentvriad/zod

[Request] Create schema from JSON

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?

cybervaldez

comment created time in a month

issue closeddavidkpiano/xstate

meta id showing up as (machine) instead of the 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

closed time in 2 months

cybervaldez

issue commentdavidkpiano/xstate

meta id showing up as (machine) instead of the id.

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

cybervaldez

comment created time in 2 months

issue openeddavidkpiano/xstate

meta id showing up as (machine) instead of the 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

created time in 2 months

issue commentdavidkpiano/xstate

service.children empty when machine starts

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

jzecca

comment created time in 2 months

issue commentdavidkpiano/xstate

Array conditions

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

Andarist

comment created time in 2 months

issue openedstatecharts/xstate-viz

xstate-viz not up to date with current version of xstate?

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?

created time in 2 months

issue commentstatecharts/xstate-viz

choose action is not supported

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

ls-timothee-clain

comment created time in 2 months

issue commentdavidkpiano/xstate

[@xstate/react] rc.4 doesn't run actions when sending events from parent to child

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

FMcIntosh

comment created time in 2 months

push eventcybervaldez/xstate

cybervaldez

commit sha 1def090704eb19019ad87fc3e2f894d1723a1ce2

Update delays.md changed onExit(deprecated) to exit

view details

push time in 2 months

fork cybervaldez/xstate

State machines and statecharts for the modern web.

https://xstate.js.org/docs

fork in 2 months

more