Building components with Sage - like in React

So am building a system that I can re-use across projects I work. I’ve started with a tailwindcss config, and now am heading up building components.

It would be nice if we can just call a button, or an input etc… and specify exactly how we want, perhaps do some error handling as well.

I wonder, anyone has any ideas on how we could make this, in Sage using blade?

Example from React/TS:

import './button.scss';

import classnames from 'classnames';
import React, { ButtonHTMLAttributes, FC } from 'react';

export interface ButtonProps {
    kind?: 'solid' | 'outline' | 'clear';
    variant?: 'primary' | 'success' | 'warning' | 'danger' | 'brand' | 'white' | 'secondary';
    radius?: 'none' | 'small' | 'medium' | 'large' | 'full';
    shadow?: boolean;
    size?: 'small' | 'medium' | 'large';
}

const Button: FC<ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>> = ({
    kind,
    variant,
    radius,
    shadow,
    size,
    ...props
}) => {
    const classes = classnames('button', props.className, kind, size, variant, `radius-${radius}`, {
        shadow
    });
    return (
        <button type="button" {...props} className={classes}>
            {props.children}
        </button>
    );
};

Button.defaultProps = {
    kind: 'solid',
    variant: 'white',
    radius: 'small',
    size: 'medium',
    shadow: false
};

export default Button;

Something along these lines. It would be nice to have components where wen can do these things.

I’m wondering if all I can do is just create the keys and then create CSS for it by abstracting it into names, and then put that CSS withing the component. Now, I don’t want any performance issues or anything, but I believe it should compile so all should be just fine right if there was some way to go about this.

Any ideas?

I think wp acorn make:component TestComponent fits your question.

Is this a normal component? Because I’ve created components before with Sage, but am looking to create a sophisticated component - where the user has only X choices for the size, and if it doesn’t exist we break the page and throw in the error telling what’s wrong. Where we can have a combination of certain things. A boolean if the button is meant to be linked or not, etc…

I can’t get that working anyway, so couldn’t test it, but posted the error in that threat :slight_smile:

Oh, so there’s soemthing more to it. I’ve created components differently than what I’ve read there. Interesting.

https://laravel.com/docs/7.x/blade#components - that’s interesting

Who do you mean by “user” is that you/client that ads an element to the page or post? And is able to select options in the WP editor. If so, you might need blocks. Log1x/poet has a nice plugin for this. The documentation is not complete. But it seems to work.
You can add gutenberg blocks with this plugin. See the gutenberg docs for more info

By user I mean dev, my bad with the word usage.

I’m going to use ACF Flexible Content as Gutenberg doesn’t seem good enough.

This topic was automatically closed after 42 days. New replies are no longer allowed.