Beer CSS

Installation

npm i @sjsf-lab/beercss-theme

yarn add @sjsf-lab/beercss-theme

pnpm add @sjsf-lab/beercss-theme

bun add @sjsf-lab/beercss-theme

Extra widgets

You can connect extra widgets using the following include imports:

// Used by default in the following fields: multiEnumField
import "@sjsf-lab/beercss-theme/extra-widgets/checkboxes-include"
import "@sjsf-lab/beercss-theme/extra-widgets/date-picker-include"
// Used by default in the following fields: fileField, filesField
import "@sjsf-lab/beercss-theme/extra-widgets/file-include"
import "@sjsf-lab/beercss-theme/extra-widgets/radio-include"
import "@sjsf-lab/beercss-theme/extra-widgets/range-include"
import "@sjsf-lab/beercss-theme/extra-widgets/switch-include"
import "@sjsf-lab/beercss-theme/extra-widgets/textarea-include"

Widgets demo

{
  "type": "object",
  "properties": {
    "checkbox": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      },
      "required": [
        "default"
      ]
    },
    "checkboxes": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        }
      },
      "required": [
        "default"
      ]
    },
    "file": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "format": "data-url"
        },
        "error": {
          "type": "string",
          "format": "data-url"
        }
      },
      "required": [
        "default"
      ]
    },
    "multiFile": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        }
      },
      "required": [
        "default"
      ]
    },
    "number": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      },
      "required": [
        "default"
      ]
    },
    "select": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      },
      "required": [
        "default"
      ]
    },
    "text": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      },
      "required": [
        "default"
      ]
    },
    "datePicker": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      },
      "required": [
        "default"
      ]
    },
    "radio": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      },
      "required": [
        "default"
      ]
    },
    "range": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      },
      "required": [
        "default"
      ]
    },
    "switch": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      },
      "required": [
        "default"
      ]
    },
    "textarea": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      },
      "required": [
        "default"
      ]
    }
  }
}

{
  "checkbox": {
    "default": {
      "ui:options": {
        "title": "checkbox"
      }
    },
    "error": {
      "ui:options": {
        "title": "checkbox"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "checkboxes": {
    "default": {
      "ui:components": {
        "arrayField": "multiEnumField"
      },
      "ui:options": {
        "title": "checkboxes"
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "multiEnumField"
      },
      "ui:options": {
        "title": "checkboxes"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "file": {
    "default": {
      "ui:components": {
        "stringField": "fileField"
      },
      "ui:options": {
        "title": "file"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "fileField"
      },
      "ui:options": {
        "title": "file"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "multiFile": {
    "default": {
      "ui:components": {
        "arrayField": "arrayFilesField"
      },
      "ui:options": {
        "title": "multiFile"
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "arrayFilesField"
      },
      "ui:options": {
        "title": "multiFile"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "number": {
    "default": {
      "ui:options": {
        "title": "number"
      }
    },
    "error": {
      "ui:options": {
        "title": "number"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "select": {
    "default": {
      "ui:components": {
        "stringField": "enumField"
      },
      "ui:options": {
        "title": "select"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "enumField"
      },
      "ui:options": {
        "title": "select"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "text": {
    "default": {
      "ui:options": {
        "title": "text"
      }
    },
    "error": {
      "ui:options": {
        "title": "text"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "datePicker": {
    "default": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      },
      "ui:options": {
        "title": "datePicker"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      },
      "ui:options": {
        "title": "datePicker"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "radio": {
    "default": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "radio"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "radio"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "range": {
    "default": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      },
      "ui:options": {
        "title": "range"
      }
    },
    "error": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      },
      "ui:options": {
        "title": "range"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "switch": {
    "default": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      },
      "ui:options": {
        "title": "switch"
      }
    },
    "error": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      },
      "ui:options": {
        "title": "switch"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "textarea": {
    "default": {
      "ui:components": {
        "textWidget": "textareaWidget"
      },
      "ui:options": {
        "title": "textarea"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "textareaWidget"
      },
      "ui:options": {
        "title": "textarea"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  }
}

Supported validation events

checkbox	oninput, onchange, onblur
checkboxes
file	onchange, onblur
multiFile	onchange, onblur
number	oninput, onchange, onblur
select	oninput, onchange, onblur
text	oninput, onchange, onblur
datePicker	oninput, onchange, onblur
radio
range	oninput, onchange, onblur
switch	oninput, onchange, onblur
textarea	oninput, onchange, onblur