@depict-ai/react-ui 0.0.10 → 0.0.11

package/dist/styles/helpers/custom_input.scss

@@ -0,0 +1,162 @@
+@use "sass:string";
+@use "sass:color";
+@use "supports-hover";
+@use "./utils";
+
+// https://selleo.com/til/posts/rc5qli22jp-pass-hex-color-to-fill-svg-in-background-url-scss
+@function escape-url-hex-color($hex_color) {
+  $ie-color-string: color.ie-hex-str($hex_color);
+  $string: string.quote($ie-color-string);
+  $color: string.slice($string, 4);
+  @return "%23" + $color;
+}
+
+@mixin custom_input(
+  $checkbox-background-color,
+  $checkbox-checked-background-color,
+  $checkbox-checkmark-color,
+  $checkbox-border-radius,
+  $checkbox-border,
+  $checkbox-left-offset,
+  $checkbox-top-offset,
+  $radio-border,
+  $radio-background-color,
+  $radio-selected-dot-color,
+  $radio-selected-dot-size,
+  $radio-selected-offset,
+  $hovered-checkbox-bg,
+  $hovered-checkbox-checked-background-color,
+  $hovered-checkbox-border,
+  $hovered-radio-border,
+  $width-and-height
+) {
+  /* Customize the label (the container) */
+  .input_row {
+    position: relative;
+    cursor: pointer;
+
+    .custom-indicator {
+      position: relative;
+      // space to text
+      margin-right: 10px;
+    }
+
+    /* Hide the browser's default radio/checkbox input element */
+    input {
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      height: 0;
+      width: 0;
+    }
+    /* Create the custom-indicator (hidden when not checked) */
+    .custom-indicator:after {
+      content: "";
+      position: absolute;
+      display: none;
+    }
+
+    /* Create a custom checkbox */
+    input[type="checkbox"] {
+      & ~ .custom-indicator {
+        padding: calc(#{$width-and-height} / 2);
+        background-color: $checkbox-background-color;
+        border-radius: $checkbox-border-radius;
+        border: $checkbox-border;
+      }
+      /* When the checkbox is checked, add a blue background */
+      &:checked ~ .custom-indicator {
+        // background-color: #000;
+        background-color: $checkbox-checked-background-color;
+        &:after {
+          background-image: url('data:image/svg+xml;utf8,<svg fill="#{escape-url-hex-color($checkbox-checkmark-color)}" width="12" height="10" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.0001L10.6 0.600098L4 7.2001L1.4 4.6001L0 6.0001L4 10.0001L12 2.0001Z" /></svg>');
+          fill: #fff;
+          color: #fff;
+          position: absolute;
+          top: calc(50% + $checkbox-top-offset);
+          left: calc(50% + $checkbox-left-offset);
+          transform: translate(-50%, -50%);
+
+          display: block; // Show the custom-indicator when checked
+
+          /* Style the custom-indicator */
+          width: 12px;
+          height: 10px;
+        }
+      }
+      &:focus-visible ~ .custom-indicator {
+        background-color: $hovered-checkbox-bg;
+      }
+      &:checked:focus-visible ~ .custom-indicator {
+        background-color: $hovered-checkbox-checked-background-color;
+      }
+    }
+    @include supports-hover.supports-hover() {
+      &:hover input[type="checkbox"] {
+        & ~ .custom-indicator {
+          background-color: $hovered-checkbox-bg;
+          border: $hovered-checkbox-border;
+          $hovered-border-width: get_border_width($hovered-checkbox-border);
+          $border-width: get_border_width($checkbox-border);
+          padding: calc(calc(#{$width-and-height} / 2) - calc(#{$hovered-border-width} - #{$border-width}));
+        }
+        &:checked ~ .custom-indicator {
+          background-color: $hovered-checkbox-checked-background-color;
+        }
+      }
+    }
+
+    /* Create a custom radio button */
+    input[type="radio"] {
+      ~ .custom-indicator {
+        padding: calc(#{$width-and-height} / 2);
+        border-radius: 50%;
+        border: $radio-border;
+        background-color: $radio-background-color;
+      }
+      &:checked ~ .custom-indicator {
+        background-color: transparent;
+        &:after {
+          display: block; // Show the custom-indicator when checked
+
+          /* Style the custom-indicator */
+          width: $radio-selected-dot-size;
+          height: $radio-selected-dot-size;
+          left: calc(50% + $radio-selected-offset);
+          top: calc(50% + $radio-selected-offset);
+          transform: translate(-50%, -50%);
+
+          // width: 8px;
+          // height: 8px;
+          // top: 6px;
+          // left: 6px;
+          background-color: $radio-selected-dot-color;
+          border-radius: 50%;
+        }
+      }
+      &:focus-visible ~ .custom-indicator {
+        @include utils.highlight-background($radio-background-color);
+      }
+      &:checked:focus-visible ~ .custom-indicator:after {
+        @include utils.highlight-background($radio-selected-dot-color, 15%, 25%);
+      }
+    }
+    @include supports-hover.supports-hover() {
+      &:hover input[type="radio"] ~ .custom-indicator {
+        border: $hovered-radio-border;
+        $hovered-border-width: get_border_width($hovered-radio-border);
+        $border-width: get_border_width($radio-border);
+        padding: calc(calc(#{$width-and-height} / 2) - calc(#{$hovered-border-width} - #{$border-width}));
+      }
+    }
+    @content;
+  }
+}
+
+@function get_border_width($border-declaration) {
+  @if $border-declaration == "none" or $border-declaration == "unset" {
+    @return 0px;
+  } @else {
+    @return nth($border-declaration, 1);
+  }
+}

package/dist/styles/helpers/supports-hover.scss

@@ -0,0 +1,5 @@
+@mixin supports-hover {
+  @media not all and (hover: none) {
+    @content;
+  }
+}

package/dist/styles/helpers/utils.scss

@@ -0,0 +1,82 @@
+@use "sass:math";
+@use "sass:color";
+
+@mixin modal-backdrop($background: rgba(0, 0, 0, 0.4), $z-index) {
+  position: fixed;
+  background: $background;
+  z-index: $z-index;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  touch-action: none;
+}
+
+@mixin highlight-background($normal-background, $darken-factor: 10%, $lighten-factor: 10%) {
+  @if color.lightness($normal-background) >= 50% {
+    background: color.adjust($normal-background, $lightness: -$darken-factor);
+  } @else {
+    background: color.adjust($normal-background, $lightness: $lighten-factor);
+  }
+}
+
+// can't use flex gap due to poor compatibility
+// source of below: https://gist.github.com/mashirozx/c0691c3b8ed3f1f63722883649d41c18
+@mixin _flex-gap($gap, $row: true, $use_nth_child: true) {
+  $margin: math.div($gap, 2);
+  $transform: -$margin;
+
+  @if $use_nth_child {
+    > * {
+      @if $row {
+        // modified to be worse by Daniel (probable broke row-reverse and order property) due to him being opinionated on avoiding negative margins when possible
+        &:not(:first-child) {
+          margin-left: $margin;
+        }
+        &:not(:last-child) {
+          margin-right: $margin;
+        }
+      } @else {
+        &:not(:first-child) {
+          margin-top: $margin;
+        }
+        &:not(:last-child) {
+          margin-bottom: $margin;
+        }
+      }
+    }
+  } @else {
+    @if $row {
+      margin-left: $transform;
+      margin-right: $transform;
+    } @else {
+      margin-top: $transform;
+      margin-bottom: $transform;
+    }
+    > * {
+      @if $row {
+        margin-left: $margin;
+        margin-right: $margin;
+      } @else {
+        margin-top: $margin;
+        margin-bottom: $margin;
+      }
+    }
+  }
+}
+
+@mixin flex-gap($gap, $flex-flow: "row nowrap") {
+  @if $flex-flow== "row nowrap" or $flex-flow== "row-reverse nowrap" {
+    @include _flex-gap($gap, true);
+  } @else if $flex-flow== "column nowrap" or $flex-flow== "column-reverse nowrap" {
+    @include _flex-gap($gap, false);
+  } @else if $flex-flow== "row wrap" or $flex-flow== "row-reverse wrap" {
+    @include _flex-gap($gap, true, false);
+    @include _flex-gap($gap, false, false);
+  } @else if $flex-flow== "column wrap" or $flex-flow== "column-reverse wrap" {
+    @include _flex-gap($gap, true, false);
+    @include _flex-gap($gap, false, false);
+  } @else {
+    @error "The second paramater $flex-flow is set to be '#{$flex-flow}', which is illegal.";
+  }
+}

package/dist/styles/variables.scss

@@ -0,0 +1,10 @@
+$brand-black: #0f0f0f;
+$brand-grey: #868689;
+$brand-dark-grey: #333335;
+$brand-light-grey: #bcbcbe;
+$brand-lighter-grey: #eeeef0;
+$brand-lightest-grey: #fafafc;
+$hovered-secondary-button-grey: #e7e8e7;
+$base-z-index: 5000;
+$search-page-base-z-index: 1;
+$border-radius: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "packageManager": "yarn@3.2.2",
   "source": "src/main.ts",
   "main": "dist/main.js",
@@ -9,7 +9,7 @@
   "license": "MIT",
   "scripts": {
     "clear-dist": "rm -r -f ./dist",
-    "build": "yarn build-server && parcel build --no-source-maps",
+    "build": "yarn build-server && parcel build --no-source-maps && cp -a src/styles/plp-styling/. dist/styles/",
     "build-server": "yarn clear-dist && parcel build --no-source-maps ./src-server/main.ts && cp -r ./dist/ ./dist-server && yarn clear-dist",
     "print-included-package-files": "yarn pack --dry-run",
     "typecheck": "yarn g:tsc --build tsconfig.json"
@@ -32,7 +32,7 @@
       "optimize": false
     },
     "css": {
-      "source": "src/styling/default.scss",
+      "source": "src/styles/default.scss",
       "distDir": "dist"
     }
   },
@@ -42,7 +42,7 @@
         "development": {
           "import": {
             "types": "./dist/index.d.ts",
-            "default": "./dist/module.js"
+            "default": "./difstylst/module.js"
           },
           "require": "./dist/main.js"
         },
@@ -71,9 +71,9 @@
       },
       "require": "./dist/main.js"
     },
-    "./styling/default.css": {
-      "import": "./dist/styling/default.css",
-      "require": "./dist/styling/default.css"
+    "./styles/default.css": {
+      "import": "./dist/styles/default.css",
+      "require": "./dist/styles/default.css"
     }
   },
   "files": [
@@ -81,7 +81,6 @@
     "/dist-server"
   ],
   "dependencies": {
-    "@depict-ai/plp-styling": "^0.0.3",
     "@depict-ai/react-solid-bridge": "^1.0.26",
     "@depict-ai/ui": "^0.0.3",
     "@depict-ai/utilishared": "^0.0.3",
@@ -95,6 +94,7 @@
     "@babel/preset-typescript": "latest",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
+    "@depict-ai/plp-styling": "^0.0.3",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",