@sio-group/form-react 0.1.0 → 0.1.3

package/src/assets/scss/components/form-states.scss

@@ -0,0 +1,80 @@
+@use "sass:color";
+
+:where(.form-field--has-value .form-field__control) {
+  color: var(--sio-color-black);
+  border-color: var(--sio-color-primary);
+}
+
+:where(.form-field--has-value .form-field__icon) {
+  color: var(--sio-color-primary);
+}
+
+:where(.form-field--focused .form-field__control) {
+  color: var(--sio-color-black);
+  border-color: var(--sio-color-primary);
+  box-shadow: inset 2px 0 10px 0 rgba(var(--sio-color-primary-rgb), 0.3);
+}
+
+:where(.form-field--focused .form-field__icon) {
+  color: var(--sio-color-primary);
+}
+
+:where(.form-field--disabled label) {
+  color: var(--sio-color-gray);
+}
+
+:where(.form-field--disabled .form-field__control) {
+  color: var(--sio-color-light-gray);
+  border-color: var(--sio-color-light-gray);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 20%, white);
+}
+
+:where(.form-field--disabled input),
+:where(.form-field--disabled textarea) {
+  color: var(--sio-color-light-gray);
+  cursor: not-allowed;
+}
+
+:where(.form-field--disabled .form-field__icon) {
+  color: var(--sio-color-light-gray);
+}
+
+:where(.form-field--has-errors label) {
+  color: var(--sio-color-error);
+}
+
+:where(.form-field--has-errors .form-field__control) {
+  background-color: color-mix(in srgb, var(--sio-color-error) 15%, white);
+  border-color: var(--sio-color-error);
+}
+
+:where(.form-field--has-errors.form-field--focused .form-field__control) {
+  box-shadow: inset 2px 0 10px 0 rgba(var(--sio-color-error-rgb), 0.3);
+}
+
+:where(.form-field--has-errors input[type="range"])::-webkit-slider-runnable-track {
+  background: var(--sio-color-error);
+}
+
+:where(.form-field--has-errors .form-field__icon) {
+  color: var(--sio-color-error) !important;
+}
+
+:where(.form-field--hidden-layout .form-field__control) {
+  display: block;
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 0;
+  box-shadow: unset;
+}
+
+:where(.form-field--hidden-layout input),
+:where(.form-field--hidden-layout textarea) {
+  color: unset;
+  width: unset;
+  padding: 0;
+  resize: unset;
+  display: unset;
+  border: unset;
+}

package/src/assets/scss/components/grid.scss

@@ -0,0 +1,134 @@
+@use "sass:map";
+@use "sass:math";
+
+$grid-columns: 12;
+$grid-breakpoints: (
+        xs: 0,
+        sm: 576px,
+        md: 768px,
+        lg: 992px,
+        xl: 1200px,
+) !default;
+
+:root {
+  --sio-grid-gutter: 15px;
+}
+
+@function breakpoint($name) {
+  @return map.get($grid-breakpoints, $name);
+}
+
+@mixin media-breakpoint($name) {
+  $min: breakpoint($name);
+
+  @if $min != 0 {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+
+
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.sio-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(var(--sio-grid-gutter) * -1);
+  margin-right: calc(var(--sio-grid-gutter) * -1);
+}
+
+.sio-row .no-gutters {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.sio-row .no-gutters > .sio-col,
+.sio-row .no-gutters > [class*='sio-col-'] {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+%sio-grid-column {
+  position: relative;
+  width: 100%;
+  padding-left: var(--sio-grid-gutter);
+  padding-right: var(--sio-grid-gutter);
+}
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+  $infix: if(sass(breakpoint($breakpoint) == null): ''; else: '-#{$breakpoint}');
+
+  @for $i from 1 through $grid-columns {
+    .sio-col#{$infix}-#{$i} {
+      @extend %sio-grid-column;
+    }
+  }
+
+  .sio-col#{$infix},
+  .sio-col#{$infix}-auto {
+    @extend %sio-grid-column;
+  }
+
+  @include media-breakpoint($breakpoint) {
+    .sio-col#{$infix} {
+      flex-basis: 0;
+      flex-grow: 1;
+      max-width: 100%;
+    }
+    .sio-col#{$infix}-auto {
+      flex: 0 0 auto;
+      width: auto;
+      max-width: 100%;
+    }
+
+    @for $i from 1 through $grid-columns {
+      .sio-col#{$infix}-#{$i} {
+        flex: 0 0 math.percentage(math.div($i, $grid-columns));
+        max-width: math.percentage(math.div($i, $grid-columns));
+      }
+    }
+
+    .sio-order#{$infix}-first {
+      order: -1;
+    }
+
+    .sio-order#{$infix}-last {
+      order: $grid-columns + 1;
+    }
+
+    @for $i from 0 through $grid-columns {
+      .sio-order#{$infix}-#{$i} {
+        order: $i;
+      }
+    }
+
+    @for $i from 0 through ($grid-columns - 1) {
+      @if not($infix == '' and $i == 0) {
+        .sio-offset#{$infix}-#{$i} {
+          margin-left: if(sass(math.div($i, $grid-columns) == 0): 0; else: math.percentage(math.div($i, $grid-columns)));
+        }
+      }
+    }
+
+    @if not($infix == '') {
+      .sio-d#{$infix}-none {
+        display: none;
+      }
+    }
+
+    @if not($infix == '') {
+      .d#{$infix}-block {
+        display: block;
+      }
+    }
+  }
+}

package/src/assets/scss/components/input.scss

@@ -0,0 +1,112 @@
+@use "sass:color";
+
+:where(.form-field__control) {
+  border: 1px solid var(--sio-form-border);
+  background: var(--sio-form-bg);
+  position: relative;
+  font-size: 1em;
+  padding: 0;
+  margin: 2px 0 0;
+  display: flex;
+  justify-content: space-between;
+  border-radius: var(--sio-form-border-radius);
+  transition: color 300ms ease;
+}
+
+:where(.form-field__control input),
+:where(.form-field__control textarea) {
+  display: block;
+  color: var(--sio-color-gray);
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: var(--sio-form-padding-y) var(--sio-form-padding-x);
+  resize: vertical;
+  transition: color 300ms ease;
+}
+
+:where(.form-field__control input:focus),
+:where(.form-field__control textarea:focus),
+:where(.form-field__control select:focus) {
+  outline: none;
+  box-shadow: none;
+}
+
+:where(.form-field__control input::placeholder),
+:where(.form-field__control textarea::placeholder) {
+  color: var(--sio-color-light-gray);
+  font-weight: 200;
+  font-size: 1em;
+}
+
+:where(.form-field__icon) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  color: var(--sio-color-light-gray);
+  font-size: 1em;
+  margin-top: -1px;
+}
+
+:where(.form-field__action) {
+  color: var(--sio-color-white);
+  background-color: var(--sio-color-primary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0 3px 3px 0;
+  margin: -1px -1px -1px 0;
+  cursor: pointer;
+}
+
+:where(.form-field__spinner) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--sio-color-light-gray);
+  gap: 1px;
+  margin-right: 1px;
+}
+
+:where(.form-field__spinner .btn) {
+  padding: 0 5px;
+  min-height: unset;
+  font-size: .5em;
+  height: 11px;
+}
+
+:where(.form-field__spinner-btn) {
+  padding: 0 .5rem;
+  font-size: 1.2em;
+  text-decoration: none;
+}
+
+:where(.form-field input)::-webkit-resizer,
+:where(.form-field input)::-webkit-inner-spin-button,
+:where(.form-field input)::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+:where(.form-field input[type="date" i]) {
+  font-family: Arial;
+}
+
+:where(.form-field input::-webkit-datetime-edit-text) {
+  color: var(--sio-color-primary);
+}
+
+:where(.form-field input)::-webkit-datetime-edit-day-field,
+:where(.form-field input)::-webkit-datetime-edit-month-field,
+:where(.form-field input)::-webkit-datetime-edit-year-field {
+  color: var(--sio-color-black);
+}
+
+:where(.form-field input)::-webkit-datetime-edit-day-field:focus,
+:where(.form-field input)::-webkit-datetime-edit-month-field:focus,
+:where(.form-field input)::-webkit-datetime-edit-year-field:focus {
+  background-color: color-mix(in srgb, rgb(var(--sio-color-primary)) 60%, white);
+  color: var(--sio-color-black);
+  border-radius: var(--sio-form-border-radius);
+}

package/src/assets/scss/components/link.scss

@@ -0,0 +1,66 @@
+@use "../utilities/mixins" as *;
+@use "../tokens/colors" as *;
+
+:where(.btn--link) {
+  --sio-btn-bg: var(--sio-btn-link-bg);
+  --sio-btn-border: var(--sio-btn-link-border);
+  --sio-btn-text: var(--sio-btn-link-text);
+
+  --sio-btn-bg-hover: var(--sio-btn-bg);
+  --sio-btn-border-hover: var(--sio-btn-border);
+  --sio-btn-text-hover: color-mix(in srgb, var(--sio-btn-text) 85%, black);
+
+  --sio-btn-bg-disabled: var(--sio-btn-bg);
+  --sio-btn-border-disabled: var(--sio-btn-border);
+  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
+}
+:where(.link) {
+  display: inline;
+  user-select: none;
+  transition: all 0.3s ease-in;
+  text-decoration: underline;
+}
+
+:where(.link:hover),
+:where(.link:active),
+:where(.link:focus),
+:where(.link.link--active) {
+  background: var(--sio-btn-bg-hover, var(--sio-btn-bg));
+  border-color: var(--sio-btn-border-hover, var(--sio-btn-border));
+  color: var(--sio-btn-text-hover, var(--sio-btn-text));
+}
+
+:where(.link:disabled),
+:where(.link.link--disabled) {
+  cursor: not-allowed;
+
+  background: var(--sio-btn-bg-disabled, var(--sio-btn-bg));
+  border-color: var(--sio-btn-border-disabled, var(--sio-btn-border));
+  color: var(--sio-btn-text-disabled, var(--sio-btn-text));
+}
+
+@each $name, $color in $colors {
+  :where(.link--#{$name}) {
+    --sio-btn-bg: transparent;
+    --sio-btn-border: transparent;
+    --sio-btn-text: var(--sio-color-#{$name});
+  }
+}
+
+:where(.link--block) {
+  display: block;
+  width: 100%;
+}
+
+:where(.link--lg) {
+  font-size: 1.1em;
+}
+
+:where(.link--sm) {
+  font-size: .7em;
+}
+
+:where(.link--loading) {
+  position: relative;
+  cursor: wait !important;
+}

package/src/assets/scss/components/radio.scss

@@ -0,0 +1,104 @@
+:where(.form-field__radio .form-field__control) {
+  display: flex !important;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+:where(.form-field__radio .form-field__control label) {
+  position: relative;
+  padding-left: 32px;
+}
+
+:where(.form-field__radio .form-field__control label > div) {
+  display: inline;
+  color: var(--sio-color-black);
+  font-weight: normal;
+}
+
+:where(.form-field__radio .form-field__control label):before {
+  content: '';
+  position: absolute;
+  border: 1px solid var(--sio-form-border);
+  background-color: var(--sio-form-bg);
+  border-radius: 50%;
+  cursor: pointer;
+  width: 17px;
+  height: 17px;
+  top: -1px;
+  left: 0;
+}
+
+:where(.form-field__radio .form-field__control label):after {
+  content: '';
+  background-color: var(--sio-color-primary);
+  position: absolute;
+  border-radius: 50%;
+  cursor: pointer;
+  width: 13px;
+  height: 13px;
+  top: 2px;
+  left: 3px;
+  transform: scale(0);
+  transition: all .4s;
+}
+
+
+:where(.form-field__radio input[type='radio']) {
+  display: none !important;
+}
+
+:where(.form-field__radio label.form-field--has-value):before {
+  border-color: var(--sio-color-primary);
+}
+
+:where(.form-field__radio label.form-field--has-value):after {
+      transform: scale(1);
+}
+
+:where(.form-field__radio-inline .form-field__control) {
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+:where(.form-field__radio.form-field--has-errors label):before {
+  border-color: var(--sio-color-error);
+  background: rgba(var(--sio-color-error-rgb), .06);
+}
+
+:where(.form-field__radio.form-field--has-errors label.form-field--has-value):after {
+  border-color: var(--sio-color-error);
+  background: var(--sio-color-error);
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label) {
+  cursor: not-allowed;
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label):before,
+:where(.form-field__radio.form-field--disabled .form-field__control label):after {
+  cursor: not-allowed;
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label):before {
+  border-color: var(--sio-color-light-gray);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, white);
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label):after {
+  border-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, black);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, black);
+
+  transform: scale(0);
+  transition: all .4s;
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label.form-field--has-value):before {
+  border-color: var(--sio-color-light-gray);
+}
+
+:where(.form-field__radio.form-field--disabled .form-field__control label.form-field--has-value):after {
+  transform: scale(1);
+}

package/src/assets/scss/components/range.scss

@@ -0,0 +1,52 @@
+:where(.form-field__range .form-field__control) {
+  background: transparent !important;
+  border: none;
+  padding: 0;
+  box-shadow: none !important;
+  gap: 15px;
+}
+
+:where(.form-field__range-value) {
+  color: var(--sio-color-gray);
+  align-content: center;
+  min-width: 25px;
+}
+
+:where(.form-field input[type="range"]) {
+  appearance: none;
+  width: 100%;
+  cursor: pointer;
+  outline: none;
+  padding: 12px 0 15px;
+  margin: 0;
+  height: 6px;
+  background: transparent;
+}
+
+:where(.form-field input[type="range"])::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  background: var(--sio-color-light-gray);
+  border-radius: 2px;
+}
+
+:where(.form-field input[type="range"])::-webkit-slider-thumb {
+  appearance: none;
+  margin-top: -5.5px;
+  height: 14px;
+  width: 14px;
+  background-color: var(--sio-color-primary);
+  border-radius: 50%;
+  border: none;
+  transition: .2s ease-in-out;
+}
+
+:where(.form-field input[type="range"])::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 0 10px rgba(var(--sio-color-primary-rgb), .1)
+}
+
+:where(.form-field input[type="range"]):active::-webkit-slider-thumb,
+:where(.form-field input[type="range"]):focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 13px rgba(var(--sio-color-primary-rgb), .2)
+}

package/src/assets/scss/components/select.scss

@@ -0,0 +1,35 @@
+:where(.form-field__select select) {
+  display: block;
+  width: 100%;
+  background: transparent;
+  border: none;
+  color: var(--var-color-gray);
+  font-size: 1em;
+  appearance: none;
+  cursor: pointer;
+}
+
+:where(.form-field__select-single .form-field__control) {
+  position: relative;
+}
+
+:where(.form-field__select-single .form-field__control):after {
+  content: "";
+  position: absolute;
+  right: 10px;
+  top: 11px;
+  width: 6px;
+  height: 6px;
+  border-right: 2px solid var(--sio-color-light-gray);
+  border-bottom: 2px solid var(--sio-color-light-gray);
+  transform: translateY(-50%) rotate(45deg);
+  pointer-events: none;
+}
+
+:where(.form-field__select-single select) {
+  padding: 5px 28px 5px 10px;
+}
+
+:where(.form-field__select-multiple select) {
+  padding: 5px 10px;
+}

package/src/assets/scss/components/upload.scss

@@ -0,0 +1,52 @@
+:where(.form-field__upload-file) {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 0;
+}
+
+:where(.form-field input[type="file" i]) {
+  color: transparent;
+}
+
+:where(.form-field input)::file-selector-button {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: transparent;
+  color: var(--sio-color-light-gray);
+  font-weight: 200;
+  font-size: 1em;
+}
+
+:where(.form-field__upload-file-label) {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--sio-color-black);
+}
+
+:where(.form-field__upload-file-section button) {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  padding: 3px 5px;
+  border-radius: 3px;
+}
+
+:where(.form-field__upload-file-remove-button) {
+  background: transparent;
+  color: var(--sio-color-error);
+}
+
+:where(.form-field__upload-buttons) {
+  display: flex;
+  justify-content: flex-end;
+  gap: 5px;
+}
+
+:where(.form-field__upload-remove-all-button) {
+  gap: 5px;
+  background: transparent;
+  color: var(--sio-color-error);
+}

package/src/assets/scss/index.scss

@@ -0,0 +1,19 @@
+@forward "tokens/colors";
+@forward "tokens/form";
+@forward "utilities/mixins";
+
+@use "components/grid";
+
+@use "components/button";
+@use "components/link";
+
+@use "components/input";
+@use "components/form-field";
+@use "components/form-states";
+
+@use "components/checkbox";
+@use "components/radio";
+@use "components/select";
+@use "components/upload";
+@use "components/range";
+@use "components/color";

package/src/assets/scss/tokens/_colors.scss

@@ -0,0 +1,49 @@
+$color-white: #ffffff;
+$color-black: #000000;
+$color-gray: #655f5d;
+$color-light-gray: #c6c6c6;
+
+$color-default: #3B82F6;
+$color-success: #10B981;
+$color-error: #EF4444;
+$color-warning: #F59E0B;
+$color-info: #06B6D4;
+
+$colors: (
+        success: $color-success,
+        error: $color-error,
+        warning: $color-warning,
+        info: $color-info,
+);
+
+:root {
+  --sio-color-white: #{$color-white};
+  --sio-color-black: #{$color-black};
+  --sio-color-gray: #{$color-gray};
+  --sio-color-light-gray: #{$color-light-gray};
+
+  --sio-color-primary: #{$color-default};
+  --sio-color-success: #{$color-success};
+  --sio-color-error: #{$color-error};
+  --sio-color-warning: #{$color-warning};
+  --sio-color-info: #{$color-info};
+
+  --sio-color-primary-rgb: 59, 130, 246;
+  --sio-color-error-rgb: 239, 68, 68;
+
+  --sio-form-label: var(--sio-color-primary);
+  --sio-form-border: var(--sio-color-light-gray);
+  --sio-form-bg: var(--sio-color-white);
+
+  --sio-btn-primary-bg: var(--sio-color-primary);
+  --sio-btn-primary-border: var(--sio-color-primary);
+  --sio-btn-primary-text: var(--sio-color-white);
+
+  --sio-btn-secondary-bg: transparent;
+  --sio-btn-secondary-border: var(--sio-color-primary);
+  --sio-btn-secondary-text: var(--sio-color-primary);
+
+  --sio-btn-link-bg: transparent;
+  --sio-btn-link-border: transparent;
+  --sio-btn-link-text: var(--sio-color-primary);
+}

package/src/assets/scss/tokens/_form.scss

@@ -0,0 +1,6 @@
+:root {
+  --sio-form-border-radius: 3px;
+
+  --sio-form-padding-x: 10px;
+  --sio-form-padding-y: 5px;
+}