@dev-crew-berlin/enter-js-utils 0.80.3 → 0.81.0

package/dist/models/attendee.js

@@ -57,10 +57,10 @@ export class Attendee {
     // so we implement it here again by hand
 
     // convert each checkin to its json representation
-    const checkin = Object.fromEntries(new Map(Object.entries(this.checkin).map(([checkinTag, checkin]) => [checkinTag, checkin.toJSON()])));
+    const checkin = Object.fromEntries(this.checkin.entries().map(([checkinTag, checkin]) => [checkinTag, checkin.toJSON()]));
 
     // convert each rsvp to its json representation
-    const rsvp = Object.fromEntries(new Map(Object.entries(this.rsvp).map(([checkinTag, rsvp]) => [checkinTag, rsvp ? rsvp.toJSON() : null])));
+    const rsvp = Object.fromEntries(this.rsvp.entries().map(([checkinTag, rsvp]) => [checkinTag, rsvp ? rsvp.toJSON() : null]));
     return {
       ...this,
       time: this.time?.toISOString(),
@@ -110,10 +110,7 @@ export class Attendee {
     newCheckins.checkins = [args.checkin];
     const mergedCheckins = exsitingCheckins.merge(newCheckins);
     const newAttendee = new Attendee(this.toJSON());
-    newAttendee.checkin = {
-      ...this.checkin,
-      [args.branchName]: mergedCheckins
-    };
+    newAttendee.checkin.set(args.branchName, mergedCheckins);
     return newAttendee;
   }
   deleteCheckinForBranch(args) {
@@ -124,10 +121,7 @@ export class Attendee {
     });
     const mergedCheckins = exsitingCheckins.merge(deletedCheckins);
     const newAttendee = new Attendee(this.toJSON());
-    newAttendee.checkin = {
-      ...this.checkin,
-      [args.branchName]: mergedCheckins
-    };
+    newAttendee.checkin.set(args.branchName, mergedCheckins);
     return newAttendee;
   }
   getFieldValueString(fieldKey) {

package/dist/ui/form-elements/input.js

@@ -1,13 +1,14 @@
 import _JSXStyle from "styled-jsx/style";
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
+import React, { useId } from 'react';
 import { colors, fonts } from '../../lib/theme';
 import { Label } from './label';
 export const Input = ({
   label,
   ...props
 }) => {
-  const id = props.id ?? label;
+  const _id = useId();
+  const id = props.id ?? _id;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
     htmlFor: id
   }, label), /*#__PURE__*/React.createElement("input", _extends({}, props, {

package/dist/ui/form-elements/select.d.ts

@@ -0,0 +1,11 @@
+import React, { SelectHTMLAttributes } from 'react';
+type Props<Option> = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange' | 'value'> & {
+    label: string;
+    value?: Option;
+    options: Option[];
+    onChange: (option: Option) => void;
+    optionFormat?: (option: Option) => string;
+    optionDisabled?: (option: Option) => boolean;
+};
+export declare function Select<Option extends string>({ optionFormat, optionDisabled, ...props }: Props<Option>): React.JSX.Element;
+export {};

package/dist/ui/form-elements/select.js

@@ -0,0 +1,37 @@
+import _JSXStyle from "styled-jsx/style";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useId } from 'react';
+import { colors, fonts } from '../../lib/theme';
+import { Label } from './label';
+export function Select({
+  optionFormat = option => option,
+  optionDisabled = () => false,
+  ...props
+}) {
+  const {
+    options,
+    value,
+    onChange,
+    ...inputProps
+  } = props;
+  const _id = useId();
+  const id = props.id ?? _id;
+  const uriEncodedChevronSVG = encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' ><polygon fill='${colors.enterBackground}' points='0,0 100,0 50,50'/></svg>`);
+  const chevronSVGImageURL = `data:image/svg+xml,${uriEncodedChevronSVG}`;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
+    htmlFor: id
+  }, props.label), /*#__PURE__*/React.createElement("select", _extends({}, inputProps, {
+    id: id,
+    value: value,
+    onChange: e => onChange(e.target.value),
+    className: _JSXStyle.dynamic([["2093301006", [fonts.primary, colors.enterDarkGrey, colors.enterMediumGrey, chevronSVGImageURL, colors.enterRed]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "")
+  }), options.map(option => /*#__PURE__*/React.createElement("option", {
+    key: option,
+    value: option,
+    disabled: optionDisabled(option),
+    className: _JSXStyle.dynamic([["2093301006", [fonts.primary, colors.enterDarkGrey, colors.enterMediumGrey, chevronSVGImageURL, colors.enterRed]]])
+  }, optionFormat(option)))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2093301006",
+    dynamic: [fonts.primary, colors.enterDarkGrey, colors.enterMediumGrey, chevronSVGImageURL, colors.enterRed]
+  }, `select.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:1.1em;display:block;width:100%;padding:0.2em 0;margin-bottom:1.1em;border:none;outline:none;background-color:transparent;color:${colors.enterDarkGrey};border-bottom:1px solid ${colors.enterMediumGrey};border-radius:0;-webkit-transition:border-color 0.2s;transition:border-color 0.2s;background:url('${chevronSVGImageURL}');background-repeat:no-repeat;background-position:right 0.5em center;background-size:12px;}select.__jsx-style-dynamic-selector:focus{border-color:1px solid ${colors.enterRed};}`));
+}

package/dist/ui/form-elements/select.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Select } from './select';
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Basic: Story;
+export declare const WithPleaseSelect: Story;
+export declare const WithCustomFormat: Story;

package/dist/ui/form-elements/select.stories.js

@@ -0,0 +1,30 @@
+import { Select } from './select';
+const meta = {
+  title: 'Form Elements/Select',
+  component: Select
+};
+export default meta;
+export const Basic = {
+  args: {
+    label: 'Select',
+    options: ['One', 'Two'],
+    onClick: () => undefined
+  }
+};
+export const WithPleaseSelect = {
+  args: {
+    label: 'Select',
+    options: ['Please Select', 'One', 'Two'],
+    value: 'Please Select',
+    optionDisabled: option => option === 'Please Select',
+    onClick: () => undefined
+  }
+};
+export const WithCustomFormat = {
+  args: {
+    label: 'Select',
+    options: ['one', 'two'],
+    optionFormat: option => option.toUpperCase(),
+    onClick: () => undefined
+  }
+};

package/dist/ui/index.d.ts

@@ -2,6 +2,7 @@ export { Input } from './form-elements/input';
 export { Label } from './form-elements/label';
 export { SearchInput } from './form-elements/search-input';
 export { SegmentedControl } from './form-elements/segmented-control';
+export { Select } from './form-elements/select';
 export { AddGuestIcon } from './icons/add-guest-icon';
 export { CaretIcon } from './icons/caret-icon';
 export { FilterIcon } from './icons/filter-icon';

package/dist/ui/index.js

@@ -2,6 +2,7 @@ export { Input } from './form-elements/input';
 export { Label } from './form-elements/label';
 export { SearchInput } from './form-elements/search-input';
 export { SegmentedControl } from './form-elements/segmented-control';
+export { Select } from './form-elements/select';
 export { AddGuestIcon } from './icons/add-guest-icon';
 export { CaretIcon } from './icons/caret-icon';
 export { FilterIcon } from './icons/filter-icon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-crew-berlin/enter-js-utils",
-  "version": "0.80.3",
+  "version": "0.81.0",
   "description": "utils such as vaildation and other helpers to work with data from the enter app",
   "files": [
     "dist",