codewithkyle / brixi-ui Goto Github PK

We should offer an XD file that contains all the colours, components, and icons.

Add a radio group component.

Reference: https://www.carbondesignsystem.com/components/dropdown/usage/#multiselect

See https://gerireid.com/forms.html

Add a -round option to the -image class.

https://tailwindcss.com/docs/animation#ping

1. The component viewer can't be resized on touch devices.
2. The component viewer isn't resizing correctly when the window size changes after it's be adjusted.

• extendable
• accessible

Model

export class ColorComponent extends HTMLElement{
    private input:HTMLInputElement;
    private label:HTMLLabelElement;
    private textInput:HTMLInputElement;

    constructor(){
        super();
        this.input = this.querySelector(`input[type="color"]`);
        this.label = this.querySelector("label");
        this.textInput = this.querySelector(`input[type="text"]`);
    }

    private handleColor:EventListener = () => {
        this.label.style.backgroundColor = this.input.value;
        this.textInput.value = this.input.value;
    }

    private handleTextColor:EventListener = () => {
        const value = `${this.textInput.value.replace("#", "")}`;
        this.input.value = `#${value}`;
        this.label.style.backgroundColor = `#${value}`;
    }

    private focusInput:EventListener = () => {
        this.textInput.value = this.textInput.value.replace("#", "");
    }

    private blurInput:EventListener = () => {
        this.textInput.value = `#${this.textInput.value.replace("#", "")}`;
        this.input.value = this.textInput.value;
        this.label.style.backgroundColor = this.textInput.value;
    }

    connectedCallback(){
        this.input.addEventListener("change", this.handleColor);
        this.textInput.addEventListener("input", this.handleTextColor);
        this.textInput.addEventListener("focus", this.focusInput);
        this.textInput.addEventListener("blur", this.blurInput);
    }
}

View

<color-component>
    <label class="sample" for="custom-background-color"></label>
    <input @change=${e => this.updateColor(e.currentTarget.value)} id="custom-background-color" type="color" />
    <div style="width:100%;flex:1;">
        <label class="label" for="custom-color-hex">Background Color</label>
        <input @blur=${e => this.updateColor(e.currentTarget.value)} type="text" value="#000000" id="custom-color-hex">
    </div>
</color-component>

Stylesheet

color-component{
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;

    input[type="color"]{
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }

    .sample{
        width: 55px;
        height: 55px;
        border-radius: 0.25rem;
        display: inline-block;
        box-shadow: inset 0 0 3px rgba(0,0,0,0.15);
        background-color: #000;
        cursor: pointer;
        margin-right: 1rem;
    }

    .label{
        display: block;
        width: 100%;
        font-size: var(--font-xs);
        font-weight: var(--font-medium);
        color: var(--grey-800);
        margin-bottom: 0.25rem;
    }

    input[type="text"]{
        height: 36px;
        line-height: 36px;
        padding: 0 0.5rem;
        background-color: var(--grey-100);
        border: 1px solid var(--grey-300);
        border-radius: 0.25rem;
        color: var(--grey-900);
        transition: all 150ms var(--ease-in-out);
        width: 100%;
        display: block;

        &::placeholder {
            color: var(--grey-700);
        }

        &:hover {
            border-color: var(--primary-400);
        }

        &:focus {
            border-color: var(--primary-400);
            box-shadow: 0 0 0 5px var(--primary-100);
            background-color: var(--white);
        }
    }
}

• grey
• neutral
• lights styles
  • success
  • danger
  • warning
  • primary

We should provide a base component that handles internal application moveable windows.

Reference

References

https://kyleandrews.dev/

Create a skeleton frame class:

.skeleton{
    display: block;
    position: relative;
    border-radius: 0.25rem;
    overflow: hidden;
    background-color: var(--grey-200);

    &.-image{
        &::before{
            content: "";
            display: block;
            width: 100%;
            padding-bottom: 75%;
        }
    }

    &.-heading{
        height: 36px;
    }

    &.-copy{
        height: 24px;
    }

    &.-button{
        height: 36px;
        width: 96px;
    }

    &::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, transparent, var(--grey-300), transparent);
        animation: skeleton 900ms linear infinite;
    }
}
@keyframes skeleton{
    from{
        transform: translateX(-200%);
    }
    to{
        transform: translateX(100%);
    }
}

Add a URL input component.

Update Inputs and Selects to support icons:

<input-wrapper>
    <i style="pointer-events:none;">
        <svg/>
    </i>
    <input />
</input-wrapper>

Add a pin input component.

Provide developers with the ability to generate <form> elements where the onSubmit callback returns the JSON or FormData based on the inputs. Currently developers have to query the input components themselves and it's kinda clunky. It would also be helpful if the submit button could transition to a sending state and the developer needs to call a function such as pass() or fail() to end the submitting state. Fail could also take an array of strings that we could render as an error alert component.

Refer to https://gerireid.com/forms.html#notifications for additional details.

This component should be updated to use lit-html.

import {html, render} from 'https://unpkg.com/lit-html?module';

Data tables should support these features:

• rows per page (10-50)
• row count information (xx - xx of xxx)
• page jump callbacks
• dynamic header and body cell rendering

Functionality reference

Reference

https://polaris.shopify.com/components/actions/button-group#navigation

Functionality reference

Add a checkbox group component.

• Rework example page (less example)
• Add focus ring to solid buttons (not raised)

All CSS required for a component should be injected into each pages <head> while the actual components files are bundled with the zip.

We should also provide a CSS version of the SCSS file in the download.

We should remove the modal maker dependency and in turn create our own modal base class along with a few generic modals such as passive and confirm.

Add a help modal that includes the following:

1. What is Brixi UI
2. How Brixi UI works
3. Who should use Brixi UI
4. Contributing to Brixi UI
5. Attribution

We should figure out how to create a configurable global API controller. Ideally we would allow developers to configure (optional) default headers, GET params, and Body objects along with setting the API's URL (defaults to origin).

Style basic order and unordered lists.

References

https://lusaxweb.github.io/vuesax/components/list.html#icon

References

https://lusaxweb.github.io/vuesax/components/collapse.html
https://www.carbondesignsystem.com/components/accordion/usage#live-demo

Currently mobile is basically useless because the navigation menu takes up to much space.

References

https://tailwindui.com/components/application-ui/elements/button-groups#component-bfc7e9cc9d7b5762cb139096ac3266c1

https://tailwindcss.com/docs/animation#pulse

Add a basic carousel component that uses the Web Animations API. The component should be easy to extend allowing developers to create custom transitions when a render() function is called.

• Allow users to create a table with a single column and n+1 number of rows. Initially support text, number, email, tel, and date inputs.
• Users should be able to past in newline or comma separated data.
• Users should be able to clear all data with a single click.
• Users should be able to remove individual rows.

Also add a dark/light theme lightswitch.

References

https://lusaxweb.github.io/vuesax/components/divider.html#color

Create a button component that displays a loading state when activated. Support the following states:

• infinite spinner
• infinite progress bar
• progress bar
  • accepts a float between 0 and 1
• progress circle
  • accepts a float between 0 and 1