DEV Community: Abraham

Same UI component for all frameworks

Abraham — Mon, 16 May 2022 13:20:52 +0000

Premise

"I love React😍", "I'm more of a vue person myself🤷🏽", "Angular all the way🙌🏽", "Solid js does it for me🙂". "Lol, ya'll just forgot Svelte uhn😏".

Five developers stating their preferences for whatever reasons. What do they have in common? They're all javascript frameworks.

"I love chakra ui", "Vuetify is what's available to me", "I';; go with Angular Material UI", "Imma just stick to different packages", "Well flowbite I guess".

Now that's their respective component libraries of choice.

How could they contribute to each other's development across frameworks? Well it's everyone for himself.

Now that's where Zag JS comes in.

Now react developers says "I found a bug in my Popover component", the rest say "shit, let's fix that".

Which of this conversation will be more beautiful to have? Instead of a cross framework community, they're now all one community, that can work together regardless of framework.

History

Chakra UI is a component library for react. It's beautiful, and just makes development easier and easy going. Chakra UI for vue came along and the experience wasn't really nice. There was a lot of logic used in react, and it had to be copied to the vue version, then reengineered to vue syntax, cause logic that depended on react hooks can't be used seamlessly in vue.

So the creator of Chakra UI. Sage wanted a way to make this seamless, and forth came. Zag JS.

Zag JS

It's a collection of framework-agnostic UI component patterns like accordion, menu, and dialog that can be used to build design systems for React, Vue and Solid.js. And it's powered my state machines.

How does it work? Zag Js uses state machines to manage the state and logic of the components, so they're not reliant on the framework, they don't need useState or useEffect from react. Or createSignal from solid JS.
The machine for the component you need is exported from zag Js and a useMachine method to interpret it and bring it t life.
Then there's a connect method, that accepts the state of the interpreted machine and constructs the attributes and events needed for your dom elements.
The connect method also accepts a normalizeProps method which is exported from your framework adapter in zagjs.
It's job is to resolve the the irregularities across framework attributes' naming.
Now all you need to do is spread the derived props on your html elements.
Well they say, code speaks louder than words, so let's get to it.

We'll practice with a number input component. The native number input is quite resistant to styling, so we'll create one that has all it's attributes, accessibility and functions. But easy to style.

First, you install the component.

npm install @zag-js/number-input

One good thing about this, is you don't need to pull in a bunch of components you might not use. Just install the one you need. In this case we're only installing number input.

Then we install the adapter for our framework

npm @zag-js/react
//or
npm @zag-js/vue
//or
npm @zag-js/solid

Only three frameworks are available currently, more incoming.
But the requirements for a framework to be accepted is to support props spreading on elements <element {...props}>.

Now let's move on. We've installed the two things we need.
First we import our machine, then we import the useMachine and useSetup methods from our framework adapter

import * as numberInput from "@zag-js/number-input"
import { useMachine, useSetup } from "@zag-js/react"

could be

import { useMachine, useSetup } from "@zag-js/vue"
//or
import { useMachine, useSetup } from "@zag-js/solid"

Next we interprete the machine, which returns the state of the machine and a method to send events to the machine.

const [state, send] = useMachine(numberInput.machine)

Next we setup the machine, this helps zagJs have access to any kinds of DOM, whether an iframe, or an electron dom.

const ref = useSetup({ send, id: "1" })

The ref is attached to the root of your component. If you have multiple instances of the component, give them different IDs

Then we pass the machine state and it's send method to the connect method, which as I said earlier constructs the pieces to bring the elements to life.

const api = numberInput.connect(state, send)

Now all the attributes and events needed to make up our number input are available in the api variable. Let's see the full code.
React:

import * as numberInput from "@zag-js/number-input"
import { useMachine, useSetup } from "@zag-js/react"

export function NumberInput() {
  const [state, send] = useMachine(numberInput.machine)
  const ref = useSetup({ send, id: "1" })
  const api = numberInput.connect(state, send)

  return (
    <div ref={ref} {...api.rootProps}>
      <label {...api.labelProps}>Enter number:</label>
      <div>
        <button {...api.decrementButtonProps}>DEC</button>
        <input {...api.inputProps} />
        <button {...api.incrementButtonProps}>INC</button>
      </div>
    </div>
  )
}

Vue:

<script setup>
import * as numberInput from "@zag-js/number-input";
import { normalizeProps, useMachine, useSetup } from "@zag-js/vue";
import { computed } from "vue";

const [state, send] = useMachine(numberInput.machine);
const ref = useSetup({ send, id: "1" });
const api = computed(() =>
  numberInput.connect(state.value, send, normalizeProps)
);
</script>

<template>
  <div ref="ref" v-bind="api.rootProps">
    <label v-bind="api.labelProps">Enter number</label>
    <div>
      <button v-bind="api.decrementButtonProps">DEC</button>
      <input v-bind="api.inputProps" />
      <button v-bind="api.incrementButtonProps">INC</button>
    </div>
  </div>
</template>

Solid:

import * as numberInput from "@zag-js/number-input"
import { normalizeProps, useMachine, useSetup } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

export function NumberInput() {
  const [state, send] = useMachine(numberInput.machine)
  const ref = useSetup({ send, id: createUniqueId() })
  const api = createMemo(() => numberInput.connect(state, send, normalizeProps))

  return (
    <div ref={ref} {...api().rootProps}>
      <label {...api().labelProps}>Enter number:</label>
      <div>
        <button {...api().decrementButtonProps}>DEC</button>
        <input {...api().inputProps} />
        <button {...api().incrementButtonProps}>INC</button>
      </div>
    </div>
  )
}

See how in each of these frameworks, we just get what we need from api. Cool right?

Now api also provides some other methods we might need.

api.value
// => "12"

api.valueAsNumber
// => 12

api.setValue("300")
api.clearValue() // => new value: ""
api.increment() // => new value: "1"
api.decrement() // => new value: "0"

api.setToMax() // => new value: "100"
api.setToMin() // => new value: "0"
api.focus()

Still cool right?

Now styling. Quite same across all frameworks. Every part of the component already has data attributes from the props api just provided them, which can be used for styling.

[data-part="root"]{

}

[data-part="input"]{

}

[data-part="label"]{

}

[data-part="spin-button"]{
  // for decrement and increment buttons
}

You can also style based on states of the component.

Disabled state:

[data-part="root"][data-disabled] {
  /* disabled styles for the input */
}

[data-part="input"][data-disabled] {
  /* disabled styles for the input */
}

[data-part="label"][data-disabled] {
  /* disabled styles for the label */
}

[data-part="spin-button"][data-disabled] {
  /* disabled styles for the spin buttons */
}

Invalid state:

[data-part="root"][data-invalid] {
  /* disabled styles for the input */
}

[data-part="input"][data-invalid] {
  /* invalid styles for the input */
}

[data-part="label"][data-invalid] {
  /* invalid styles for the label */
}

You can head over to the docs if you want to find out more: https://zagjs.com/

And of course, it's open source 🤪
Repo: https://github.com/chakra-ui/zag
Docs Repo: https://github.com/chakra-ui/zag-docs

Also feel free to contact me if you have questions.😎

Thanks for reading. Have a nice day.🚀

Transparent Background in Vscode

Abraham — Thu, 25 Mar 2021 13:56:40 +0000

So I came across the Show off your VSCode Setup 👩🏻‍💻💯 Post on Dev.to, and
I decided to post a screenshot of my setup.

So as a reply to a comment, by @FidoHUN, I'll be telling you how to accomplish this.

Applying on Windows

Install the Glass-it Extension from the vscode marketplace

Press ctrl+alt+z to increase the transparency, ctrl+alt+c to decrease.

Applying on Linux

Requirements

Xorg display server
xprop package.

Then like on windows, install the Glass-it Extension from the vscode marketplace

Press ctrl+alt+z to increase the transparency, ctrl+alt+c to decrease.

Applying on Mac-Os(Untested)

Tweaking Vscode has proven to be harder on the MacOs. But we can try.

Install yabai
Then:



yabai -m rule --add app="Visual Studio Code" opacity=0.7

Happy Vscoding!!!

Build SPA's fast in Laravel

Abraham — Sun, 14 Feb 2021 12:30:06 +0000

Sorry what?😒

Calm down. I'll explain myself.
What I'm trying to tell you is an opinionated way to build an SPA with a PHP Laravel backend; Supposedly very fast.

Laravel SPAs

Norms... This means a Laravel API Connected to a React, Vue, Svelte or whatever frontend. Maybe Sanctum to handle your API's. Pusher and Echo, and many other bla blas...🤔

So what?🤨

Well let's roll that back. Shall we? ⏪
Let's Drop the API part, so we have Laravel and InertiaJs with React, Vue or any other of your choice.

Hmm😳

Now Tush up your SPA Authentication with everything Fortify has to offer by using Fortify UI.
Fortify gives you the prebuilt authentication pages in all their raw glory. No styling and confusion.
All you have to do is follow it's lead. Create your components, and post your forms to the same routes used in FOrtify UI's views.

Happy Coding!

Intro to Choc UI, a Chakra UI Component library.

Abraham — Mon, 25 Jan 2021 23:48:38 +0000

Chakra UI

According to the Chakra UI website,

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Choc UI

According to the Choc UI website,

Choc UI is a set of accessible and reusable components that are commonly used in web applications.

So Choc UI is basically a collection of reusable components, built on the Chakra UI library.

It's safe to say Choc UI is to the Chakra UI library as Tailwind UI is to Tailwind CSS.

It's in active development on Github, built on NextJS and is hosted on Vercel.

It Presently consists a lot of useful and beautiful components.

The Site's sidebar even shows what component are under development.

Oh! and don't worry it also has light mode.

So Every Component on the site has 5 options.

1. Show/Hide Code

This toggles the code for the component. Fun fact It's editable. And all Chakra UI Components, Icons are automatically imported behind the scenes. As well as all Icons in the React Icons Library.

2. Copy Code

You know what that means.😉

3. Open Demo in New Tab

It basically gives you a full page preview of the component in a new tab where you can still copy component's code, toggle the theme mode, or just go home.

4. Open in Codesandbox

It opens components' code on Codesandbox.

Couldn't I just edit the code in the site's provided code editor? Well not,if you wanted to test the code with some other library, e.g. react-table

NB:

The Codesandbox opened is a completely setup React and Chakra UI environment.
The sandbox is generated on the fly. They wouldn't prebuild a sandbox for all their components.

5. Reset Component Code.

Use this if you want the code editor to reset to The original component's code.

Long story short. Save your designs some time, Star and contribute to this project on Github.