@dev-crew-berlin/enter-js-utils 0.72.0 → 0.80.1

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

@@ -1,27 +1,27 @@
 import _JSXStyle from "styled-jsx/style";
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 { theme } from '../../lib';
+import { colors, fonts } from '../../lib/theme';
 import { SearchIcon } from '../icons/search-icon';
 export const SearchInput = ({
-  textColor = theme.colors.enterDarkGrey,
-  borderColor = theme.colors.enterMediumGrey,
+  textColor = colors.enterDarkGrey,
+  borderColor = colors.enterMediumGrey,
   placeholder = 'Search',
   ...props
 }) => {
   const id = useId();
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["914481870", [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]]]) + " " + 'search-input'
+    className: _JSXStyle.dynamic([["1969077888", [fonts.primary, textColor, borderColor, colors.enterRed]]]) + " " + 'search-input'
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["914481870", [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]]]) + " " + 'icon'
+    className: _JSXStyle.dynamic([["1969077888", [fonts.primary, textColor, borderColor, colors.enterRed]]]) + " " + 'icon'
   }, /*#__PURE__*/React.createElement(SearchIcon, {
     color: textColor
   })), /*#__PURE__*/React.createElement("input", _extends({}, props, {
     placeholder: placeholder,
     id: id,
-    className: _JSXStyle.dynamic([["914481870", [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]]]) + " " + (props && props.className != null && props.className || "")
+    className: _JSXStyle.dynamic([["1969077888", [fonts.primary, textColor, borderColor, colors.enterRed]]]) + " " + (props && props.className != null && props.className || "")
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "914481870",
-    dynamic: [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]
-  }, `.search-input.__jsx-style-dynamic-selector{display:grid;grid-template-areas:'icon-input';-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:1.1em;}.icon.__jsx-style-dynamic-selector{grid-area:icon-input;width:12px;height:16px;margin:0 0 0 0.2em;}input.__jsx-style-dynamic-selector{grid-area:icon-input;font-family:${theme.fonts.primary};font-size:1.1em;display:block;width:calc(100% - 20px);padding:0.2em 0 0.2em 20px;border:none;outline:none;background-color:transparent;color:${textColor};border-bottom:1px solid ${borderColor};border-radius:0;-webkit-transition:border-color 0.2s;transition:border-color 0.2s;}input.__jsx-style-dynamic-selector:focus{border-color:${theme.colors.enterRed};}`));
+    id: "1969077888",
+    dynamic: [fonts.primary, textColor, borderColor, colors.enterRed]
+  }, `.search-input.__jsx-style-dynamic-selector{display:grid;grid-template-areas:'icon-input';-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:1.1em;}.icon.__jsx-style-dynamic-selector{grid-area:icon-input;width:12px;height:16px;margin:0 0 0 0.2em;}input.__jsx-style-dynamic-selector{grid-area:icon-input;font-family:${fonts.primary};font-size:1.1em;display:block;width:calc(100% - 20px);padding:0.2em 0 0.2em 20px;border:none;outline:none;background-color:transparent;color:${textColor};border-bottom:1px solid ${borderColor};border-radius:0;-webkit-transition:border-color 0.2s;transition:border-color 0.2s;}input.__jsx-style-dynamic-selector:focus{border-color:${colors.enterRed};}`));
 };

package/dist/ui/form-elements/search-input.stories.d.ts

@@ -1,18 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    textColor?: string | undefined;
-    borderColor?: string | undefined;
-    placeholder?: string | undefined;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    textColor?: string | undefined;
-    borderColor?: string | undefined;
-    placeholder?: string | undefined;
-}>>;
-export declare const WhiteText: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    textColor?: string | undefined;
-    borderColor?: string | undefined;
-    placeholder?: string | undefined;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { SearchInput } from './search-input';
+declare const meta: Meta<typeof SearchInput>;
+export default meta;
+declare type Story = StoryObj<typeof SearchInput>;
+export declare const Basic: Story;
+export declare const WhiteText: Story;

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

@@ -1,24 +1,25 @@
-import React from 'react';
 import { SearchInput } from './search-input';
-import { theme } from '../../lib';
-export default {
+import { colors } from '../../lib/theme';
+const meta = {
   title: 'Form Elements/SearchInput',
   component: SearchInput
 };
-const Template = args => /*#__PURE__*/React.createElement(SearchInput, args);
-export const Basic = Template.bind({});
-Basic.args = {
-  textColor: theme.colors.enterDarkGrey,
-  borderColor: theme.colors.enterMediumGrey,
-  placeholder: 'Search'
-};
-export const WhiteText = Template.bind({});
-WhiteText.parameters = {
-  backgrounds: {
-    default: 'dark'
+export default meta;
+export const Basic = {
+  args: {
+    textColor: colors.enterDarkGrey,
+    borderColor: colors.enterMediumGrey,
+    placeholder: 'Search'
   }
 };
-WhiteText.args = {
-  textColor: 'white',
-  borderColor: 'white'
+export const WhiteText = {
+  parameters: {
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+  args: {
+    textColor: 'white',
+    borderColor: 'white'
+  }
 };

package/dist/ui/form-elements/segmented-control.js

@@ -1,13 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-import { theme } from '../../lib';
+import { colors, fonts } from '../../lib/theme';
 export const SegmentedControl = props => {
   const name = props.segments.join('');
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]]) + " " + 'segmented-controll'
+    className: _JSXStyle.dynamic([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]]) + " " + 'segmented-controll'
   }, props.segments.map((segment, index) => /*#__PURE__*/React.createElement("div", {
     key: segment,
-    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]]) + " " + 'segment'
+    className: _JSXStyle.dynamic([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]]) + " " + 'segment'
   }, /*#__PURE__*/React.createElement("input", {
     type: "radio",
     id: segment,
@@ -15,15 +15,15 @@ export const SegmentedControl = props => {
     checked: segment === props.activeSegment,
     onChange: () => props.onChange(segment),
     onFocus: props.onFocus,
-    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]])
+    className: _JSXStyle.dynamic([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]])
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: segment,
     style: props.colors && {
       backgroundColor: props.colors[index] && segment === props.activeSegment ? props.colors[index] : undefined
     },
-    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]])
+    className: _JSXStyle.dynamic([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]])
   }, segment))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "235524868",
-    dynamic: [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]
-  }, `.segmented-controll.__jsx-style-dynamic-selector{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-gap:2px;}.segment.__jsx-style-dynamic-selector{position:relative;}.segment.__jsx-style-dynamic-selector:first-child label.__jsx-style-dynamic-selector,.segment.__jsx-style-dynamic-selector:first-child input.__jsx-style-dynamic-selector{border-radius:2px 0 0 2px;}.segment.__jsx-style-dynamic-selector:last-child label.__jsx-style-dynamic-selector,.segment.__jsx-style-dynamic-selector:last-child input.__jsx-style-dynamic-selector{border-radius:0 2px 2px 0;}label.__jsx-style-dynamic-selector{font-family:${theme.fonts.secondary};text-transform:uppercase;font-size:0.9em;-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;padding:0.7em 0.5em;text-align:center;background-color:${theme.colors.enterLightGrey};box-sizing:border-box;display:block;width:100%;height:100%;-webkit-transition:background-color 0.1s;transition:background-color 0.1s;cursor:pointer;}label.__jsx-style-dynamic-selector:hover{background-color:${theme.colors.enterMediumGrey};color:white;}input.__jsx-style-dynamic-selector:checked+label.__jsx-style-dynamic-selector{background-color:${theme.colors.enterDarkGrey};color:white;}input.__jsx-style-dynamic-selector{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;left:0;top:0;margin:0;width:100%;height:100%;background-color:transparent;pointer-events:none;}`));
+    id: "2098643240",
+    dynamic: [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]
+  }, `.segmented-controll.__jsx-style-dynamic-selector{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-gap:2px;}.segment.__jsx-style-dynamic-selector{position:relative;}.segment.__jsx-style-dynamic-selector:first-child label.__jsx-style-dynamic-selector,.segment.__jsx-style-dynamic-selector:first-child input.__jsx-style-dynamic-selector{border-radius:2px 0 0 2px;}.segment.__jsx-style-dynamic-selector:last-child label.__jsx-style-dynamic-selector,.segment.__jsx-style-dynamic-selector:last-child input.__jsx-style-dynamic-selector{border-radius:0 2px 2px 0;}label.__jsx-style-dynamic-selector{font-family:${fonts.secondary};text-transform:uppercase;font-size:0.9em;-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;padding:0.7em 0.5em;text-align:center;background-color:${colors.enterLightGrey};box-sizing:border-box;display:block;width:100%;height:100%;-webkit-transition:background-color 0.1s;transition:background-color 0.1s;cursor:pointer;}label.__jsx-style-dynamic-selector:hover{background-color:${colors.enterMediumGrey};color:white;}input.__jsx-style-dynamic-selector:checked+label.__jsx-style-dynamic-selector{background-color:${colors.enterDarkGrey};color:white;}input.__jsx-style-dynamic-selector{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;left:0;top:0;margin:0;width:100%;height:100%;background-color:transparent;pointer-events:none;}`));
 };

package/dist/ui/form-elements/segmented-control.stories.d.ts

@@ -1,17 +1,6 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<(<Segment extends string>(props: {
-    segments: Segment[];
-    activeSegment?: Segment | undefined;
-    colors?: string[] | undefined;
-    onChange: (segment: Segment) => void;
-    onFocus?: (() => void) | undefined;
-}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
-export default _default;
-export declare const Basic: ComponentStory<(<Segment extends string>(props: {
-    segments: Segment[];
-    activeSegment?: Segment | undefined;
-    colors?: string[] | undefined;
-    onChange: (segment: Segment) => void;
-    onFocus?: (() => void) | undefined;
-}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
+import { Meta, StoryObj } from '@storybook/react';
+import { SegmentedControl } from './segmented-control';
+declare const meta: Meta<typeof SegmentedControl>;
+export default meta;
+declare type Story = StoryObj<typeof SegmentedControl>;
+export declare const Basic: Story;

package/dist/ui/form-elements/segmented-control.stories.js

@@ -1,12 +1,12 @@
-import React from 'react';
 import { SegmentedControl } from './segmented-control';
-export default {
+const meta = {
   title: 'Form Elements/Segmented Control',
   component: SegmentedControl
 };
-const Template = args => /*#__PURE__*/React.createElement(SegmentedControl, args);
-export const Basic = Template.bind({});
-Basic.args = {
-  segments: ['One', 'Two', 'Three'],
-  activeSegment: 'One'
+export default meta;
+export const Basic = {
+  args: {
+    segments: ['One', 'Two', 'Three'],
+    activeSegment: 'One'
+  }
 };

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

@@ -3,7 +3,8 @@ import 'styled-jsx';
 import { Attendee } from '../models';
 declare type Props = {
     attendee: Attendee;
-    checkinTag: string;
+    branchName: string;
+    counterName: string;
     plain?: boolean;
     dense?: boolean;
     infoText?: string;

package/dist/ui/guest-card.js

@@ -1,25 +1,26 @@
 import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import 'styled-jsx';
-import { classNames as cx, theme } from '../lib';
+import { colors, fonts } from '../lib/theme';
+import { classNames as cx } from '../lib/class-names';
 import { CheckinCountIndicator } from './checkin-count-indicator';
 import { CompanionInfo } from './companion-info';
 import { Tag } from './tag';
 export const GuestCard = props => {
   const filterTags = props.filterTags ?? (() => true);
-  const tags = (props.attendee.tags || []).filter(filterTags);
+  const tags = Array.from(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([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + (cx({
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + (cx({
       'guest-card-wrapper': true,
       plain: props.plain
     }) || "")
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-color-list'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-color-list'
   }, tags.map(tag => [tag, getTagColor(tag)]).filter(([, tagColor]) => tagColor).map(([tag, tagColor]) => /*#__PURE__*/React.createElement("div", {
     key: tag,
     title: tag,
@@ -27,30 +28,30 @@ export const GuestCard = props => {
       backgroundColor: tagColor,
       height: '100%'
     },
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-color'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-color'
   }))), /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'guest-card'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'guest-card'
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]])
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]])
   }, /*#__PURE__*/React.createElement("h2", {
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'name'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'name'
   }, props.formatName(props.attendee)), /*#__PURE__*/React.createElement(CompanionInfo, {
     companionStatus: props.attendee.companions,
     findMainGuest: props.findMainGuest,
     formatName: props.formatName
   }), /*#__PURE__*/React.createElement(CheckinCountIndicator, {
-    checkins: props.attendee.getCheckinsForTag(props.checkinTag).getActiveCheckins(),
-    response: props.attendee.getResponseForTag(props.checkinTag),
-    rsvpCount: props.attendee.getRsvpCountForTag(props.checkinTag)
+    checkins: props.attendee.getCheckinsForBranch(props.branchName).getActiveCheckins(props.counterName),
+    response: props.attendee.getResponse(props.branchName, props.counterName),
+    rsvpCount: props.attendee.getRsvpCount(props.branchName, props.counterName)
   })), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-list'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-list'
   }, tags.map(tag => /*#__PURE__*/React.createElement(Tag, {
     key: tag
   }, tag)), props.infoText && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'info'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'info'
   }, " ", props.infoText))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2947209375",
-    dynamic: [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']
-  }, `.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:${props.dense ? '0.5em 0' : '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.35em;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;}`));
+    id: "1739379681",
+    dynamic: [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']
+  }, `.guest-card-wrapper.__jsx-style-dynamic-selector{border-radius:2px;border:1px solid ${colors.enterGrey};background-color:${colors.enterBackground};font-family:${fonts.primary};margin:${props.dense ? '0.5em 0' : '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.35em;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

@@ -1,124 +1,14 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Attendee } from '../models';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: 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;
-}>>;
-export default _default;
-export declare const WithBackground: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: 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;
-}>>;
-export declare const Plain: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: 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;
-}>>;
-export declare const Dense: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: 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;
-}>>;
-export declare const FilteredTags: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: 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;
-}>>;
-export declare const WithColorLabel: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: 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;
-}>>;
-export declare const WithMultipleColorLabels: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: 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;
-}>>;
-export declare const WithInfoText: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: 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;
-}>>;
-export declare const WithCompanion: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: 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;
-}>>;
-export declare const WithCompanionButNoMainGuestInfo: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: 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;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { GuestCard } from './guest-card';
+declare const meta: Meta<typeof GuestCard>;
+export default meta;
+declare type Story = StoryObj<typeof GuestCard>;
+export declare const WithBackground: Story;
+export declare const Plain: Story;
+export declare const Dense: Story;
+export declare const FilteredTags: Story;
+export declare const WithColorLabel: Story;
+export declare const WithMultipleColorLabels: Story;
+export declare const WithInfoText: Story;
+export declare const WithCompanion: Story;
+export declare const WithCompanionButNoMainGuestInfo: Story;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { GuestCard } from './guest-card';
 import { Attendee } from '../models';
-import { theme } from '../lib';
-export default {
+import { colors } from '../lib/theme';
+const meta = {
   title: 'Guest Card',
   component: GuestCard,
   argTypes: {
@@ -11,6 +10,7 @@ export default {
     }
   }
 };
+export default meta;
 const attendee = new Attendee({
   id: 'my-attendee',
   language: 'de',
@@ -79,95 +79,112 @@ const companion = new Attendee({
   payment: null
 });
 const tagColors = {
-  VIP: theme.colors.enterPink,
-  tester: theme.colors.enterCyan
+  VIP: colors.enterPink,
+  tester: colors.enterCyan
 };
-const Template = args => /*#__PURE__*/React.createElement(GuestCard, args);
-export const WithBackground = Template.bind({});
-WithBackground.args = {
-  attendee: attendee,
-  checkinTag: 'default',
-  formatName(attendee) {
-    return attendee.userdata.name?.toString() ?? '';
+export const WithBackground = {
+  args: {
+    attendee: attendee,
+    branchName: 'default',
+    counterName: 'main',
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    }
   }
 };
-export const Plain = Template.bind({});
-Plain.args = {
-  plain: true,
-  attendee: attendee,
-  checkinTag: 'default',
-  formatName(attendee) {
-    return attendee.userdata.name?.toString() ?? '';
+export const Plain = {
+  args: {
+    plain: true,
+    attendee: attendee,
+    branchName: 'default',
+    counterName: 'main',
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    }
   }
 };
-export const Dense = Template.bind({});
-Dense.args = {
-  dense: true,
-  attendee: attendee,
-  checkinTag: 'default',
-  formatName(attendee) {
-    return attendee.userdata.name?.toString() ?? '';
+export const Dense = {
+  args: {
+    dense: true,
+    attendee: attendee,
+    branchName: 'default',
+    counterName: 'main',
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    }
   }
 };
-export const FilteredTags = Template.bind({});
-FilteredTags.args = {
-  attendee: attendee,
-  checkinTag: 'default',
-  filterTags(tag) {
-    const allowedTags = ['VIP'];
-    return allowedTags.includes(tag);
-  },
-  formatName(attendee) {
-    return attendee.userdata.name?.toString() ?? '';
+export const FilteredTags = {
+  args: {
+    attendee: attendee,
+    branchName: 'default',
+    counterName: 'main',
+    filterTags(tag) {
+      const allowedTags = ['VIP'];
+      return allowedTags.includes(tag);
+    },
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    }
   }
 };
-export const WithColorLabel = Template.bind({});
-WithColorLabel.args = {
-  attendee: attendee,
-  checkinTag: 'default',
-  formatName(attendee) {
-    return attendee.userdata.name?.toString() ?? '';
-  },
-  getTagColor(tag) {
-    return tagColors[tag] ?? undefined;
+export const WithColorLabel = {
+  args: {
+    attendee: attendee,
+    branchName: 'default',
+    counterName: 'main',
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    },
+    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;
+export const WithMultipleColorLabels = {
+  args: {
+    attendee: attendeeWithMultipleTags,
+    branchName: 'default',
+    counterName: 'main',
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    },
+    getTagColor(tag) {
+      return tagColors[tag] ?? undefined;
+    }
   }
 };
-export const WithInfoText = Template.bind({});
-WithInfoText.args = {
-  attendee: attendee,
-  checkinTag: 'default',
-  infoText: '🥦 Vegetarian',
-  formatName(attendee) {
-    return attendee.userdata.name?.toString() ?? '';
+export const WithInfoText = {
+  args: {
+    attendee: attendee,
+    branchName: 'default',
+    counterName: 'main',
+    infoText: '🥦 Vegetarian',
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    }
   }
 };
-export const WithCompanion = Template.bind({});
-WithCompanion.args = {
-  attendee: companion,
-  checkinTag: 'default',
-  findMainGuest: () => {
-    return attendee;
-  },
-  formatName(attendee) {
-    return attendee.userdata.name?.toString() ?? '';
+export const WithCompanion = {
+  args: {
+    attendee: companion,
+    branchName: 'default',
+    counterName: 'main',
+    findMainGuest: () => {
+      return attendee;
+    },
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    }
   }
 };
-export const WithCompanionButNoMainGuestInfo = Template.bind({});
-WithCompanionButNoMainGuestInfo.args = {
-  attendee: companion,
-  checkinTag: 'default',
-  formatName(attendee) {
-    return attendee.userdata.name?.toString() ?? '';
+export const WithCompanionButNoMainGuestInfo = {
+  args: {
+    attendee: companion,
+    branchName: 'default',
+    counterName: 'main',
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    }
   }
 };