@spothero/ui 14.8.0 → 14.8.1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 14.8.1 - 05/20/2022
+## Miscellaneous Updates
+* [[63d43ff](https://github.com/spothero/fe-ui/commit/63d43ff)] - Sear 2077 - replace rollup with dex ([#297](https://github.com/spothero/fe-ui/pull/297)) (Tyler Williams)
+
 # 14.8.0 - 05/19/2022
 
 ## New Features

package/CHANGELOG.tmp

@@ -1,5 +1,4 @@
-# 14.8.0 - 05/19/2022
-
-## New Features
-* [[c5dcc22](https://github.com/spothero/fe-ui/commit/c5dcc22)] - Removed textButton and textButtonOnDark from fe-ui.  Also removed underline for now ([#296](https://github.com/spothero/fe-ui/pull/296)) (Max Rashes)
+# 14.8.1 - 05/20/2022
+## Miscellaneous Updates
+* [[63d43ff](https://github.com/spothero/fe-ui/commit/63d43ff)] - Sear 2077 - replace rollup with dex ([#297](https://github.com/spothero/fe-ui/pull/297)) (Tyler Williams)
 

package/dex.config.js

@@ -0,0 +1,48 @@
+const path = require('path');
+
+const targetEntry = process.env.TARGET_ENTRY;
+
+module.exports = {
+    client: {
+        plugins: [],
+    },
+    production: {
+        client: {
+            entry: [`./src/${targetEntry}/components/index.js`],
+            output: {
+                filename: 'index.js',
+                path: path.resolve(__dirname, targetEntry),
+                library: {
+                    name: '@spothero/ui',
+                    type: 'umd',
+                },
+                globalObject: 'this'
+            },
+            externals: {
+                react: {
+                    root: 'React',
+                    commonjs2: 'react',
+                    commonjs: 'react',
+                    amd: 'react'
+                },
+                'react-dom': {
+                    root: 'ReactDOM',
+                    commonjs2: 'react-dom',
+                    commonjs: 'react-dom',
+                    amd: 'react-dom'
+                },
+                'lodash': {
+                    commonjs2: 'lodash',
+                    commonjs: 'lodash',
+                    amd: 'lodash',
+                    root: '_'
+                },
+                'prop-types': 'prop-types',
+                '@chakra-ui/react': '@chakra-ui/react'
+
+            }
+        },
+
+    },
+
+};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@spothero/ui",
-  "version": "14.8.0",
+  "version": "14.8.1",
   "description": "SpotHero's React component UI library.",
-  "main": "v2/index-bundled.cjs.js",
+  "main": "v2/index.js",
   "module": "v2/index.js",
   "repository": "https://github.com/spothero/fe-ui",
   "author": "SpotHero",
@@ -64,8 +64,8 @@
     "test:unit": "npm run test:template -- --coverage",
     "test:unit:watch": "DEBUG_PRINT_LIMIT=-1 npm run test:template -- --watch",
     "clone:styles": "rsync -a src/ styles && rm -rf styles/**/*.{js,jsx} styles/**/stories",
-    "build:v1": "rollup --config rollup/v1.config.js",
-    "build:v2": "rollup --config rollup/v2.config.js",
+    "build:v1": "TARGET_ENTRY=v1 NODE_ENV=production dex",
+    "build:v2": "TARGET_ENTRY=v2 NODE_ENV=production dex",
     "build:backlog": "NODE_ENV=production babel src -d backlog --ignore \"**/*.spec.js\",\"**/stories/**\",\"**/v2/**\"",
     "build": "npm run clean && npm run clone:styles && npm run build:backlog && npm run build:v1 && npm run build:v2",
     "build:storybook": "build-storybook -o ./docs",
@@ -88,8 +88,6 @@
     "@babel/runtime-corejs3": "7.14.7",
     "@cypress/browserify-preprocessor": "3.0.1",
     "@jackfranklin/test-data-bot": "1.3.0",
-    "@rollup/plugin-alias": "3.1.2",
-    "@rollup/plugin-node-resolve": "11.2.0",
     "@spothero/babel-preset-spothero": "0.2.0",
     "@spothero/browserslist-config": "1.0.0",
     "@spothero/commitlint-config": "3.1.1",
@@ -132,13 +130,6 @@
     "react-redux": "7.2.8",
     "redux": "4.1.2",
     "regenerator-runtime": "0.13.7",
-    "rollup": "2.40.0",
-    "rollup-plugin-babel": "4.4.0",
-    "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-replace": "2.2.0",
-    "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "4.2.0",
     "start-server-and-test": "1.12.6",
     "style-loader": "1.2.1",
     "webpack-merge": "5.1.4"

package/styles/Alert/_Alert.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .Alert {
     margin: 6px 0 10px;
     display: block;
@@ -13,7 +15,7 @@
     display: inline-block;
 
     .Alert-danger & {
-        background: lighten($color-stop, 35%);
+        background: color.adjust($color-stop, $lightness: 35%);
         color: $color-stop;
     }
 

package/styles/AutoSuggestInput/_AutoSuggestInput.scss

@@ -61,7 +61,7 @@
 }
 
 .AutoSuggestInput-item {
-    @include ellipsis();
+    @include ellipsis;
     font-size: 14px;
     cursor: pointer;
     padding: 7px 10px 7px 16px;
@@ -107,6 +107,7 @@
     .Icon {
         width: 18px;
         height: 18px;
+
         // Updated to account for small positioning changes
         // due to the Chakra implementation. Allowed the icon
         // to inherit 'display: inline-block;', and the margin

package/styles/Chart/_Chart.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @import "chartist";
 
 .ct-area,
@@ -14,7 +15,7 @@
 .ct-series {
     @for $i from 0 to length($ct-series-colors) {
         .ct-circle-#{$i} {
-            stroke: nth($ct-series-colors, $i + 1);
+            stroke: list.nth($ct-series-colors, $i + 1);
         }
     }
 }
@@ -61,10 +62,12 @@
     }
 
     @for $i from 0 to length($ct-series-colors) {
+        /* stylelint-disable */
         .ct-series-#{$i}::before {
-            background-color: nth($ct-series-colors, $i + 1);
-            border-color: nth($ct-series-colors, $i + 1);
+            background-color: list.nth($ct-series-colors, $i + 1);
+            border-color: list.nth($ct-series-colors, $i + 1);
         }
+        /* stylelint-enable */
     }
 }
 

package/styles/Checkbox/_Checkbox.scss

@@ -51,6 +51,7 @@
 
     .Icon {
         position: absolute;
+
         // Chakra's implementation created some small issues
         // with how elements were positioned, this updates the
         // element to parody the original design
@@ -72,6 +73,7 @@
 
         &::before {
             @extend %checkbox-common;
+
             // Chakra's implementation created some small issues
             // with how elements were positioned, this updates the
             // element to parody the original design

package/styles/DateTime/_DatePickerCalendar.scss

@@ -79,16 +79,20 @@
     outline: none;
     border-radius: 19px;
 
+    /* stylelint-disable */
     &:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected) {
         &:hover {
             border: 1px solid $color-go;
             border-radius: 100%;
         }
     }
+    /* stylelint-enable */
 }
 
-.DayPicker--interactionDisabled .DayPicker-Day {
-    cursor: default;
+.DayPicker--interactionDisabled {
+    .DayPicker-Day {
+        cursor: default;
+    }
 }
 
 .DayPicker-Day--today {
@@ -99,11 +103,12 @@
     color: $color-cement;
     cursor: default;
 }
-
+/* stylelint-disable */
 .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
     color: $color-white;
     background-color: $color-go;
 }
+/* stylelint-enable */
 
 .DatePicker-calendar-with-range {
     .DayPicker-Day {
@@ -116,6 +121,7 @@
         }
     }
 
+    /* stylelint-disable */
     .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
         color: $color-white;
         background-color: rgba($color-go, 0.33);
@@ -124,6 +130,7 @@
             background-color: transparent;
         }
     }
+    /* stylelint-enable */
 
     .DayPicker-Day--start,
     .DayPicker-Day--end {

package/styles/DateTime/_DateTimePicker.scss

@@ -1,6 +1,8 @@
+@use "sass:color";
+
 @keyframes HIGHLIGHT {
     5% {
-        background-color: lighten($color-highlight, 40%);
+        background-color: color.adjust($color-highlight, $lightness: 40%);
     }
 }
 

package/styles/PasswordControl/_PasswordControl.scss

@@ -35,6 +35,7 @@
 
     .Checkbox {
         display: none;
+
         // Chakra's implementation created some small issues
         // with how elements were positioned, this updates the
         // element to parody the original design
@@ -54,8 +55,10 @@
         color: $color-cement;
         text-transform: uppercase;
 
-        &:not([disabled]):hover {
-            color: $color-cement;
+        &:not([disabled]) {
+            &:hover {
+                color: $color-cement;
+            }
         }
     }
 

package/styles/Radio/_Radio.scss

@@ -60,6 +60,7 @@
 
         &::before {
             @extend %radio-common;
+
             // Chakra's implementation created some small issues
             // with how elements were positioned, this updates the
             // element to parody the original design

package/styles/Select/_Select.scss

@@ -11,7 +11,7 @@
     }
 
     .Select-icon {
-        @include center();
+        @include center;
         line-height: 1;
 
         .Icon {

package/styles/TextInput/_TextInput.scss

@@ -2,7 +2,7 @@
     @extend %form-element;
 
     .Icon {
-        @include center();
+        @include center;
         width: 16px;
         fill: $color-cement;
     }

package/styles/common/sass/_forms.scss

@@ -22,7 +22,7 @@
 }
 
 %form-element-item {
-    @include font-family();
+    @include font-family;
     display: block;
     width: 100%;
     background-color: $color-white;

package/styles/v1/components/Button/_Button.scss

@@ -8,10 +8,9 @@
     }
 }
 
-a.Button,
 .Button {
     @extend %control-size;
-    @include font-family();
+    @include font-family;
     padding: 10px 30px;
     text-align: center;
     font-weight: $font-weight-semi-bold;
@@ -57,27 +56,23 @@ a.Button,
     }
 }
 
-a.Button-block,
 .Button-block {
     display: block;
     width: 100%;
 }
 
-a.Button-with-icon-left,
 .Button-with-icon-left {
     .Icon {
         margin-right: 5px;
     }
 }
 
-a.Button-with-icon-right,
 .Button-with-icon-right {
     .Icon {
         margin-left: 5px;
     }
 }
 
-a.Button-primary,
 .Button-primary {
     background-color: $color-shift;
     color: $color-white;
@@ -98,7 +93,6 @@ a.Button-primary,
     }
 }
 
-a.Button-secondary,
 .Button-secondary {
     background-color: $color-white;
     color: $color-shift;
@@ -117,7 +111,6 @@ a.Button-secondary,
     }
 }
 
-a.Button-tertiary,
 .Button-tertiary {
     background-color: $color-white;
     color: $color-cement;
@@ -136,7 +129,6 @@ a.Button-tertiary,
     }
 }
 
-a.Button-loading,
 .Button-loading {
     position: relative;
     pointer-events: none;

package/styles/v1/components/Image/_Image.scss

@@ -14,7 +14,7 @@
     }
 
     .PulseLoader-pulse {
-        @include center();
+        @include center;
     }
 }
 

package/styles/v1/components/TextButton/_TextButton.scss

@@ -9,7 +9,7 @@
 }
 
 .TextButton {
-    @include font-family();
+    @include font-family;
     display: inline-block;
     cursor: pointer;
     white-space: nowrap;

package/styles/v1/components/index.js

@@ -1,6 +1,6 @@
-export { default as Panel } from './Panel/Panel';
-export { default as Button } from './Button/Button';
-export { default as Table } from './Table/Table';
-export { default as TextButton } from './TextButton/TextButton';
-export { default as Image } from './Image/Image';
-export { default as Loader } from './Loader/Loader';
+export {default as Panel} from './Panel/Panel';
+export {default as Button} from './Button/Button';
+export {default as Table} from './Table/Table';
+export {default as TextButton} from './TextButton/TextButton';
+export {default as Image} from './Image/Image';
+export {default as Loader} from './Loader/Loader';

package/styles/v2/components/Select/Select.jsx

@@ -1,8 +1,10 @@
-import React, {forwardRef} from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
+import React, {forwardRef} from 'react';
 import {Select as ChakraSelect} from '@chakra-ui/react';
+import IconChevronDown from '@spothero/icons/chevron-down';
 
+import Icon from '../Icon/Icon';
 import FormControl from '../FormControl/FormControl';
 
 const Select = forwardRef(
@@ -31,6 +33,8 @@ const Select = forwardRef(
                 inputId={props.id}
             >
                 <ChakraSelect
+                    icon={<Icon as={IconChevronDown} />}
+                    iconSize={12}
                     fontWeight="regular"
                     fontSize="sm"
                     ref={ref}

package/v1/assets-manifest.json

@@ -0,0 +1,5 @@
+{
+  "index.html": "index.html",
+  "index.js.license.txt": "index.js.LICENSE.txt",
+  "main.js": "index.js"
+}

package/v1/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="/index.js"></script></head><body><div id="root"></div></body></html>