zds-pickers 4.0.5 → 4.0.7

package/lib/utils.ts

@@ -0,0 +1,41 @@
+// this just creates and fills a zero-indexed array array; 0, 1, 2, 3, etc
+const arraySequence = (numberOfElements: number) =>
+  Array.from(new Array(numberOfElements).keys())
+
+const assertRange = (value: number | string, max = 127, min = 0) => {
+  let result: number =
+    typeof value === 'string' ? Number.parseInt(value, 10) : value
+
+  if (Number.isNaN(result) || result === null) {
+    result = min
+  }
+  return result >= min ? (result <= max ? result : max) : min
+}
+
+const findObj =
+  <T>(key: keyof T, value: T[keyof T]) =>
+  (arr: T[]) =>
+    arr?.find(item => item?.[key] === value)
+
+const omit =
+  <T extends Record<string, unknown>>(...keys: string[]) =>
+  (obj: T) =>
+    Object.entries(obj)
+      .filter(([key]) => !keys.flat().map(String).includes(key))
+      .reduce((_obj, [key, val]) => Object.assign(_obj, { [key]: val }), {})
+
+const pick =
+  <T extends object>(...keys: (keyof T)[]) =>
+  (obj: T) =>
+    Object.entries(obj)
+      .filter(([key]) => keys.flat().map(String).includes(key))
+      .reduce((_obj, [key, val]) => Object.assign(_obj, { [key]: val }), {})
+
+const set =
+  <T>(key: keyof T, value: T[keyof T]) =>
+  (obj: T) => ({
+    ...obj,
+    [key]: value,
+  })
+
+export { arraySequence, assertRange, findObj, omit, pick, set }

package/package.json

@@ -1,13 +1,9 @@
 {
   "name": "zds-pickers",
-  "version": "4.0.5",
+  "version": "4.0.7",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
-  "types": "dist/types/index.d.ts",
-  "files": [
-    "dist",
-    "dist/types"
-  ],
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",

package/stories/assets/sampleStyles.css

@@ -0,0 +1,349 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+
+body {
+  background: #333;
+  font-family: 'Open Sans', sans-serif;
+}
+
+body .zds-pickers__label {
+  color: #fff;
+  min-width: 100px;
+  height: 100%;
+}
+
+body .zds-pickers__container > span,
+body .zds-pickers__container > div {
+  display: inline-block;
+  margin-bottom: 3px;
+}
+/* body .zds-pickers__container > span { max-width: 100px; } */
+body .zds-pickers__container > div { min-width: 300px; }
+
+body .zds-pickers__input { color: #fff; }
+
+body .zds-pickers__control {
+  background: #222;
+  min-width: 120px;
+  min-height: 20px;
+  border-color: #4b4a4b;
+}
+body .zds-pickers__control div[class$="singleValue"] { color: #fff; }
+body .zds-pickers__control .zds-pickers__indicator-separator { display: none; }
+body .zds-pickers__control .zds-pickers__dropdown-indicator { padding: 0 4px; }
+body .zds-pickers--is-disabled,
+body .zds-pickers__single-value--is-disabled,
+body .zds-pickers--is-disabled input,
+body .zds-pickers--is-disabled div[class$="singleValue"],
+body .zds-pickers--is-disabled .zds-pickers__dropdown-indicator {
+  font-style: italic !important;
+  color: grey !important;
+  text-shadow: none !important;
+}
+
+body .zds-pickers__placeholder {color: grey}
+body .zds-pickers__placeholder.shrunk {color: #fff}
+
+body .zds-pickers__menu { color: #4b4a4b; }
+/* .zds-pickers__menu .zds-pickers__menu-list { }
+.zds-pickers__menu .zds-pickers__option{ } */
+
+body .channel-picker .zds-pickers__menu {
+  width: 160px;
+  min-width: 160px;
+  max-width: 160px;
+  margin: 0;
+}
+body .channel-picker .zds-pickers__menu .zds-pickers__menu-list {
+  display: flex;
+  flex-flow: row wrap;
+  padding: 0;
+}
+body .channel-picker .zds-pickers__menu .zds-pickers__option {
+  width: 40px;
+  min-width: 40px;
+  max-width: 40px;
+  padding: 0;
+  border: 1px solid #e1e1e1;
+  text-align: center;
+}
+
+body .channel-mapping-picker .empty-mapping-entry .mapping-entry-label {
+  font-style: italic;
+  color: grey;
+}
+body .channel-mapping-picker .mapping-entry b {
+  display: inline-block;
+  width: 25px;
+}
+
+body .value-picker__label {
+  position: relative;
+  top: -12px;
+}
+body .value-picker .zds-pickers__control {
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+}
+body .value-picker .zds-pickers__control:hover {
+  border-color: #e1e1e1;
+}
+body .value-picker .zds-pickers__control:focus-within {
+  border-color: #2684ff;
+}
+body .value-picker .zds-pickers__control:focus-within:hover {
+  border-color: #2684ff;
+  /* border-width: 2px; */
+}
+body .value-picker .zds-pickers__value-container  {
+  height: 36px;
+}
+body .value-picker .zds-pickers__value-container .react-numeric-input {
+  position: absolute !important;
+  right: 0;
+  left: 0;
+}
+body .value-picker .zds-pickers__value-container .react-numeric-input input {
+  border: unset !important;
+  color: #fff;
+  height: 36px;
+  background-color: inherit;
+  outline: none;
+  padding-left: 10px !important;
+  width: 100% !important;
+}
+body .value-picker .zds-pickers__value-container .react-numeric-input b:nth-of-type(1) i {
+  border-color: transparent transparent #fff !important;
+}
+body .value-picker .zds-pickers__value-container .react-numeric-input b:nth-of-type(2) i {
+  border-color: #fff transparent transparent !important;
+}
+
+body .response-curve-picker rect.container { fill: #e6e6e8 }
+body .response-curve-picker text.axis {
+  font-size: 10pt;
+  font-style: italic;
+  fill: #12131b;
+}
+body .response-curve-picker line.axis { stroke: #12131b }
+body .response-curve-picker path.curve {
+  stroke: #4d505b;
+  stroke-dasharray: 8;
+  fill: transparent;
+  pointer-events: visibleStroke;
+}
+body .response-curve-picker path.curve-selected {
+  stroke: #222;
+  stroke-dasharray: 0;
+  fill: transparent;
+}
+body .response-curve-picker rect.button {
+  fill: #ddd;
+  stroke: #4d505b;
+  cursor: pointer;
+}
+body .response-curve-picker rect.button:hover {
+  fill: #666;
+  stroke: #222;
+}
+body .response-curve-picker rect.button-selected { fill: #222 }
+body .response-curve-picker text.button {
+  font-size: 8pt;
+  pointer-events: none;
+}
+body .response-curve-picker text.button-selected {
+  font-size: 8pt;
+  fill: white;
+  font-weight: bold;
+}
+
+/* **************************************************************** */
+
+.Knob {
+  background: #eee;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.Knob-label {
+  flex: none;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.Knob-value {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  text-align: center;
+  position: relative;
+  left: -1px;
+}
+.Knob-value.no-label::selection {
+  background: transparent;
+}
+
+.Knob-value::-webkit-inner-spin-button,
+.Knob-value::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.Knob-spinner {
+  display: flex;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgb(243, 243, 243);
+  border: 1px solid rgb(232, 232, 232);
+  border-radius: 50%;
+  z-index: 1;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.Knob-spinner::before {
+  content: "";
+  width: 4px;
+  height: 4px;
+  margin: 4px;
+  border-radius: 50%;
+  background: #000;
+}
+
+/* ************************************************************************** */
+
+.ReactPiano__Keyboard {
+  /* Used for absolute positioning of .ReactPiano__Key--accidental elements */
+  position: relative;
+  /* Used to lay out .ReactPiano__Key--natural elements */
+  display: flex;
+}
+
+.ReactPiano__Key {
+  /* Used for flexbox layout of the child .ReactPiano__NoteLabelContainer elements */
+  display: flex;
+}
+
+/*
+ * Styles of accidental notes (flat or sharp)
+ */
+.ReactPiano__Key--accidental {
+  background: #000;
+  /* border: 1px solid #fff; */
+  /* border-top: 1px solid transparent; */
+  border-radius: 0 0 4px 4px;
+  cursor: pointer;
+  height: 66%;
+  /* Overlay on top of natural keys */
+  z-index: 1;
+  /* Use absolute positioning along with inline styles specified in JS to put keys in correct locations. */
+  position: absolute;
+  top: 0;
+}
+
+/*
+ * Styles of natural notes (white keys)
+ */
+.ReactPiano__Key--natural {
+  background: #f6f5f3;
+  border: 1px solid #000;
+  border-radius: 0 0 3px 3px;
+  cursor: pointer;
+  z-index: 0;
+  /*
+   * Uses flexbox with margin instead of absolute positioning to have more consistent margin rendering.
+   * This causes inline styles to be ignored.
+   */
+  flex: 1;
+  /* margin-right: 1px; */
+}
+
+.ReactPiano__Key--natural:last-child {
+  /* Don't render extra margin on the last natural note */
+  margin-right: 0;
+}
+
+/*
+ * Styles of "active" or pressed-down keys
+ */
+.ReactPiano__Key--active {
+  background: #3ac8da;
+}
+
+.ReactPiano__Key--active.ReactPiano__Key--accidental {
+  /* border: 1px solid #fff; */
+  border-top: 1px solid #3ac8da;
+  /* Slight height reduction for "pushed-down" effect */
+  height: 65%;
+}
+
+.ReactPiano__Key--active.ReactPiano__Key--natural {
+  border: 1px solid #3ac8da;
+  /* Slight height reduction for "pushed-down" effect */
+  height: 98%;
+}
+
+.ReactPiano__Key--middleC > div::before {
+  content: "◆";
+  position: absolute;
+  top: 30%;
+}
+
+/*
+ * Styles for disabled state
+ */
+.ReactPiano__Key--disabled.ReactPiano__Key--accidental {
+  background: #ddd;
+  border: 1px solid #999;
+}
+
+.ReactPiano__Key--disabled.ReactPiano__Key--natural {
+  background: #eee;
+  border: 1px solid #aaa;
+}
+
+/*
+ * Styles for the note label inside a piano key
+ */
+.ReactPiano__NoteLabelContainer {
+  flex: 1;
+  /* Align children .ReactPiano__NoteLabel to the bottom of the key */
+  align-self: flex-end;
+}
+
+.ReactPiano__NoteLabel {
+  font-size: 12px;
+  text-align: center;
+  text-transform: capitalize;
+  /* Disable text selection */
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.ReactPiano__NoteLabel--accidental {
+  color: #f8e8d5;
+  margin-bottom: 3px;
+}
+
+.ReactPiano__NoteLabel--natural {
+  color: #888;
+  margin-bottom: 3px;
+}
+
+.ReactPiano__NoteLabel--natural.ReactPiano__NoteLabel--active {
+  color: #f8e8d5;
+}
+

package/stories/assets/utils.js

@@ -0,0 +1,7 @@
+/* ---------------------------- Arrays -------------------------------------- */
+
+// this just creates and fills a zero-indexed array array; 0, 1, 2, 3, etc
+export const arraySequence = numberOfElements =>
+  Array.from(new Array(numberOfElements).keys())
+
+export default arraySequence