@dev-crew-berlin/enter-js-utils 0.33.0 → 0.34.1

package/dist/generated/api-schema.d.ts

@@ -67,17 +67,17 @@ export declare type components = {
          * @description New attendee was created
          */
         AttendeeCreatedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default attendee-created
              * @enum {string}
              */
             event: "attendee-created";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             attendee: components["schemas"]["PublicAttendee"];
             /** Instancename */
             instanceName: string;
@@ -87,17 +87,17 @@ export declare type components = {
          * @description Attendee was deleted
          */
         AttendeeDeletedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default attendee-deleted
              * @enum {string}
              */
             event: "attendee-deleted";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Attendeeid */
             attendeeId: string;
             /** Instancename */
@@ -113,17 +113,17 @@ export declare type components = {
          * Alternatively you can set `is_edit` to trigger email that are sent on edit instead.
          */
         AttendeeRespondedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default attendee-responded
              * @enum {string}
              */
             event: "attendee-responded";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Instancename */
             instanceName: string;
             /** Attendeeid */
@@ -163,17 +163,17 @@ export declare type components = {
          * @description Attendee was updated. This includes `userdata` but also other data such as `payment`, `rsvp` or `tags`
          */
         AttendeeUpdatedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default attendee-updated
              * @enum {string}
              */
             event: "attendee-updated";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Instancename */
             instanceName: string;
             /** Attendeeid */
@@ -401,17 +401,17 @@ export declare type components = {
          * @description A new checkin was created
          */
         CheckinCreatedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default checkin-created
              * @enum {string}
              */
             event: "checkin-created";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Instancename */
             instanceName: string;
             /** Attendeeid */
@@ -425,17 +425,17 @@ export declare type components = {
          * @description An existing checkin was deleted
          */
         CheckinDeletedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default checkin-deleted
              * @enum {string}
              */
             event: "checkin-deleted";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Instancename */
             instanceName: string;
             /** Attendeeid */
@@ -853,15 +853,6 @@ export declare type components = {
              */
             isCompanion: false;
         };
-        /** MetaField */
-        MetaField: {
-            /** Type */
-            type: "list" | "checkbox" | "text" | "textfield";
-            /** Values */
-            values?: string[];
-            /** Default */
-            default?: string;
-        };
         /** NumberField */
         NumberField: {
             /**
@@ -919,6 +910,8 @@ export declare type components = {
         Payment: {
             /** Paid */
             paid: boolean;
+            /** Title */
+            title?: string;
             /**
              * Provider
              * @enum {string}
@@ -936,17 +929,17 @@ export declare type components = {
          * This triggers mails that are atomatically sent on payment
          */
         PaymentPaidEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default payment-paid
              * @enum {string}
              */
             event: "payment-paid";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Attendeeid */
             attendeeId: string;
             /** Instancename */
@@ -1019,9 +1012,9 @@ export declare type components = {
             registration: components["schemas"]["RegistrationInfo"];
             /** Guestnamefields */
             guestNameFields: string[];
-            /** Metafields */
-            metaFields: {
-                [key: string]: components["schemas"]["MetaField"];
+            /** Tagcolors */
+            tagColors: {
+                [key: string]: string;
             };
         };
         /**

package/dist/models/instance.d.ts

@@ -27,9 +27,11 @@ export declare class Instance {
         editEnd?: Date;
     };
     guestNameFields: string[];
+    tagColors: Record<string, string>;
     constructor(json: InstanceJSON);
     toJSON(): InstanceJSON;
     isRegistrationClosed(): boolean;
     canEditRegistration(): boolean;
     formatName(guest: Attendee): string;
+    getTagColor(tag: string): string | undefined;
 }

package/dist/models/instance.js

@@ -14,6 +14,7 @@ export class Instance {
       editEnd: json.registration.editEnd ? new Date(json.registration.editEnd) : undefined
     };
     this.guestNameFields = json.guestNameFields;
+    this.tagColors = json.tagColors;
   }
 
   toJSON() {
@@ -32,7 +33,7 @@ export class Instance {
         editEnd: this.registration.editEnd?.toISOString()
       },
       guestNameFields: this.guestNameFields,
-      metaFields: {}
+      tagColors: this.tagColors
     };
   }
 
@@ -69,4 +70,8 @@ export class Instance {
     return this.guestNameFields.map(fieldKey => guest.userdata[fieldKey] ?? '').join(' ');
   }
 
+  getTagColor(tag) {
+    return this.tagColors[tag] ?? undefined;
+  }
+
 }

package/dist/ui/guest-card.d.ts

@@ -5,10 +5,10 @@ declare type Props = {
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean;
-    labelColor?: string;
     infoText?: string;
     formatName: (attendee: Attendee) => string;
     filterTags?: (tag: string) => boolean;
+    getTagColor?: (tag: string) => string | undefined;
     findMainGuest?: (attendeeId: string) => Attendee | undefined;
     onClick?: (attendeeId: string) => void;
 };

package/dist/ui/guest-card.js

@@ -9,21 +9,35 @@ export const GuestCard = props => {
   const filterTags = props.filterTags ?? (() => true);
 
   const tags = (props.attendee.tags || []).filter(filterTags);
+
+  const getTagColor = props.getTagColor ?? (() => undefined);
+
   const onClick = props.onClick ? () => {
     if (!props.onClick) return;
     props.onClick(props.attendee.id);
   } : undefined;
   return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'guest-card-wrapper'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'tag-color-list'
+  }, tags.map(tag => [tag, getTagColor(tag)]).filter(([, tagColor]) => tagColor).map(([tag, tagColor]) => /*#__PURE__*/React.createElement("div", {
+    key: tag,
+    title: tag,
+    style: {
+      backgroundColor: tagColor,
+      height: '100%'
+    },
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'tag-color'
+  }))), /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
-    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + (cx({
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + (cx({
       'guest-card': true,
-      plain: props.plain,
-      labeled: props.labelColor !== undefined
+      plain: props.plain
     }) || "")
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]])
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]])
   }, /*#__PURE__*/React.createElement("h2", {
-    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + 'name'
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'name'
   }, props.formatName(props.attendee)), /*#__PURE__*/React.createElement(CompanionInfo, {
     companionStatus: props.attendee.companions,
     findMainGuest: props.findMainGuest,
@@ -33,13 +47,13 @@ export const GuestCard = props => {
     response: props.attendee.getResponseForTag(props.checkinTag),
     rsvpCount: props.attendee.getRsvpCountForTag(props.checkinTag)
   })), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + 'tag-list'
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'tag-list'
   }, tags.map(tag => /*#__PURE__*/React.createElement(Tag, {
     key: tag
   }, tag)), props.infoText && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + 'info'
-  }, " ", props.infoText)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2201546649",
-    dynamic: [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]
-  }, `.guest-card.__jsx-style-dynamic-selector{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;border-radius:2px;border:1px solid ${theme.colors.enterGrey};background-color:${theme.colors.enterBackground};font-family:${theme.fonts.primary};padding:1.1em 1em 0.9em;margin:1.5em 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.plain.__jsx-style-dynamic-selector{border:none;background-color:transparent;}.labeled.__jsx-style-dynamic-selector::before{content:'';position:absolute;top:-1px;right:-1px;width:3px;height:100%;background-color:${props.labelColor};border:1px solid ${props.labelColor};border-radius:0 2px 2px 0;}.name.__jsx-style-dynamic-selector{font-size:1.15em;margin:-0.1em 0 0.3em;}.tag-list.__jsx-style-dynamic-selector{max-width:40%;text-align:right;}.info.__jsx-style-dynamic-selector{display:block;width:100%;text-align:right;}`));
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'info'
+  }, " ", props.infoText))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4235458019",
+    dynamic: [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]
+  }, `.guest-card-wrapper.__jsx-style-dynamic-selector{border-radius:2px;border:1px solid ${theme.colors.enterGrey};background-color:${theme.colors.enterBackground};font-family:${theme.fonts.primary};margin:1.5em 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.guest-card.__jsx-style-dynamic-selector{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;padding:1.1em 1em 0.9em;-webkit-flex:1;-ms-flex:1;flex:1;}.tag-color-list.__jsx-style-dynamic-selector{width:0.5em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.tag-color.__jsx-style-dynamic-selector:first-child{border-top-left-radius:1px;}.tag-color.__jsx-style-dynamic-selector:last-child{border-bottom-left-radius:1px;}.plain.__jsx-style-dynamic-selector{border:none;background-color:transparent;}.name.__jsx-style-dynamic-selector{font-size:1.15em;margin:-0.1em 0 0.3em;}.tag-list.__jsx-style-dynamic-selector{max-width:40%;text-align:right;font-size:0.9em;}.info.__jsx-style-dynamic-selector{display:block;width:100%;text-align:right;}`));
 };

package/dist/ui/guest-card.stories.d.ts

@@ -5,10 +5,10 @@ declare const _default: ComponentMeta<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string | undefined) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -17,10 +17,10 @@ export declare const WithBackground: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string | undefined) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -28,10 +28,10 @@ export declare const Plain: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string | undefined) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -39,10 +39,10 @@ export declare const FilteredTags: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string | undefined) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -50,10 +50,21 @@ export declare const WithColorLabel: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string | undefined) | undefined;
+    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
+    onClick?: ((attendeeId: string) => void) | undefined;
+}>>;
+export declare const WithMultipleColorLabels: ComponentStory<React.FunctionComponent<{
+    attendee: Attendee;
+    checkinTag: string;
+    plain?: boolean | undefined;
+    infoText?: string | undefined;
+    formatName: (attendee: Attendee) => string;
+    filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string | undefined) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -61,10 +72,10 @@ export declare const WithInfoText: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string | undefined) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -72,10 +83,10 @@ export declare const WithCompanion: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string | undefined) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -83,10 +94,10 @@ export declare const WithCompanionButNoMainGuestInfo: ComponentStory<React.Funct
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string | undefined) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;

package/dist/ui/guest-card.stories.js

@@ -28,10 +28,27 @@ const attendee = new Attendee({
   },
   deleted: false
 });
+const attendeeWithMultipleTags = new Attendee({
+  id: 'my-attendee-2',
+  language: 'de',
+  tags: ['VIP', 'tester', 'Import-200-02-10'],
+  time: new Date('2022-01-01').toISOString(),
+  rsvp: {
+    default: 1
+  },
+  checkin: {},
+  companions: {
+    isCompanion: false
+  },
+  userdata: {
+    name: 'Max Mustermann'
+  },
+  deleted: false
+});
 const companion = new Attendee({
   id: 'my-companion',
   language: 'de',
-  tags: ['VIP', 'Import-200-02-10'],
+  tags: ['VIP'],
   time: new Date('2022-01-01').toISOString(),
   rsvp: {
     default: 1
@@ -42,10 +59,14 @@ const companion = new Attendee({
     mainGuestId: 'my-attendee'
   },
   userdata: {
-    name: 'Jhon Doe'
+    name: 'John Doe'
   },
   deleted: false
 });
+const tagColors = {
+  VIP: theme.colors.enterPink,
+  tester: theme.colors.enterCyan
+};
 
 const Template = args => /*#__PURE__*/React.createElement(GuestCard, args);
 
@@ -89,10 +110,27 @@ export const WithColorLabel = Template.bind({});
 WithColorLabel.args = {
   attendee: attendee,
   checkinTag: 'default',
-  labelColor: theme.colors.enterPink,
 
   formatName(attendee) {
     return attendee.userdata.name?.toString() ?? '';
+  },
+
+  getTagColor(tag) {
+    return tagColors[tag] ?? undefined;
+  }
+
+};
+export const WithMultipleColorLabels = Template.bind({});
+WithMultipleColorLabels.args = {
+  attendee: attendeeWithMultipleTags,
+  checkinTag: 'default',
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  },
+
+  getTagColor(tag) {
+    return tagColors[tag] ?? undefined;
   }
 
 };

package/package.json

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