@dev-crew-berlin/enter-js-utils 0.70.2 → 0.80.0

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');
+    }
   }
 };

package/dist/ui/icons/add-guest-icon.stories.d.ts

@@ -1,12 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
-export declare const White: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { AddGuestIcon } from './add-guest-icon';
+declare const meta: Meta<typeof AddGuestIcon>;
+export default meta;
+declare type Story = StoryObj<typeof AddGuestIcon>;
+export declare const Basic: Story;
+export declare const White: Story;

package/dist/ui/icons/add-guest-icon.stories.js

@@ -1,18 +1,17 @@
-import React from 'react';
 import { AddGuestIcon } from './add-guest-icon';
-export default {
+const meta = {
   title: 'Icons/Add Guest',
   component: AddGuestIcon
 };
-const Template = args => /*#__PURE__*/React.createElement(AddGuestIcon, args);
-export const Basic = Template.bind({});
-Basic.args = {};
-export const White = Template.bind({});
-White.parameters = {
-  backgrounds: {
-    default: 'dark'
+export default meta;
+export const Basic = {};
+export const White = {
+  parameters: {
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+  args: {
+    color: '#fff'
   }
-};
-White.args = {
-  color: '#fff'
 };

package/dist/ui/icons/caret-icon.stories.d.ts

@@ -1,15 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    color?: string | undefined;
-    rotateDeg: number;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-    rotateDeg: number;
-}>>;
-export declare const White: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-    rotateDeg: number;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { CaretIcon } from './caret-icon';
+declare const meta: Meta<typeof CaretIcon>;
+export default meta;
+declare type Story = StoryObj<typeof CaretIcon>;
+export declare const Basic: Story;
+export declare const White: Story;

package/dist/ui/icons/caret-icon.stories.js

@@ -1,18 +1,17 @@
-import React from 'react';
 import { CaretIcon } from './caret-icon';
-export default {
+const meta = {
   title: 'Icons/Caret',
   component: CaretIcon
 };
-const Template = args => /*#__PURE__*/React.createElement(CaretIcon, args);
-export const Basic = Template.bind({});
-Basic.args = {};
-export const White = Template.bind({});
-White.parameters = {
-  backgrounds: {
-    default: 'dark'
+export default meta;
+export const Basic = {};
+export const White = {
+  parameters: {
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+  args: {
+    color: '#fff'
   }
-};
-White.args = {
-  color: '#fff'
 };

package/dist/ui/icons/filter-icon.stories.d.ts

@@ -1,12 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
-export declare const White: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { FilterIcon } from './filter-icon';
+declare const meta: Meta<typeof FilterIcon>;
+export default meta;
+declare type Story = StoryObj<typeof FilterIcon>;
+export declare const Basic: Story;
+export declare const White: Story;

package/dist/ui/icons/filter-icon.stories.js

@@ -1,18 +1,17 @@
-import React from 'react';
 import { FilterIcon } from './filter-icon';
-export default {
+const meta = {
   title: 'Icons/Filter',
   component: FilterIcon
 };
-const Template = args => /*#__PURE__*/React.createElement(FilterIcon, args);
-export const Basic = Template.bind({});
-Basic.args = {};
-export const White = Template.bind({});
-White.parameters = {
-  backgrounds: {
-    default: 'dark'
+export default meta;
+export const Basic = {};
+export const White = {
+  parameters: {
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+  args: {
+    color: '#fff'
   }
-};
-White.args = {
-  color: '#fff'
 };

package/dist/ui/icons/search-icon.stories.d.ts

@@ -1,12 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
-export declare const White: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { SearchIcon } from './search-icon';
+declare const meta: Meta<typeof SearchIcon>;
+export default meta;
+declare type Story = StoryObj<typeof SearchIcon>;
+export declare const Basic: Story;
+export declare const White: Story;

package/dist/ui/icons/search-icon.stories.js

@@ -1,18 +1,17 @@
-import React from 'react';
 import { SearchIcon } from './search-icon';
-export default {
+const meta = {
   title: 'Icons/Search',
   component: SearchIcon
 };
-const Template = args => /*#__PURE__*/React.createElement(SearchIcon, args);
-export const Basic = Template.bind({});
-Basic.args = {};
-export const White = Template.bind({});
-White.parameters = {
-  backgrounds: {
-    default: 'dark'
+export default meta;
+export const Basic = {};
+export const White = {
+  parameters: {
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+  args: {
+    color: '#fff'
   }
-};
-White.args = {
-  color: '#fff'
 };

package/dist/ui/icons/settings-icon.stories.d.ts

@@ -1,12 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
-export declare const White: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { SettingsIcon } from './settings-icon';
+declare const meta: Meta<typeof SettingsIcon>;
+export default meta;
+declare type Story = StoryObj<typeof SettingsIcon>;
+export declare const Basic: Story;
+export declare const White: Story;

package/dist/ui/icons/settings-icon.stories.js

@@ -1,18 +1,17 @@
-import React from 'react';
 import { SettingsIcon } from './settings-icon';
-export default {
+const meta = {
   title: 'Icons/Settings',
   component: SettingsIcon
 };
-const Template = args => /*#__PURE__*/React.createElement(SettingsIcon, args);
-export const Basic = Template.bind({});
-Basic.args = {};
-export const White = Template.bind({});
-White.parameters = {
-  backgrounds: {
-    default: 'dark'
+export default meta;
+export const Basic = {};
+export const White = {
+  parameters: {
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+  args: {
+    color: '#fff'
   }
-};
-White.args = {
-  color: '#fff'
 };

package/dist/ui/icons/sort-list-icon.stories.d.ts

@@ -1,15 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    color?: string | undefined;
-    ascending: boolean;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-    ascending: boolean;
-}>>;
-export declare const White: ComponentStory<React.FunctionComponent<{
-    color?: string | undefined;
-    ascending: boolean;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { SortListIcon } from './sort-list-icon';
+declare const meta: Meta<typeof SortListIcon>;
+export default meta;
+declare type Story = StoryObj<typeof SortListIcon>;
+export declare const Basic: Story;
+export declare const White: Story;

package/dist/ui/icons/sort-list-icon.stories.js

@@ -1,18 +1,17 @@
-import React from 'react';
 import { SortListIcon } from './sort-list-icon';
-export default {
+const meta = {
   title: 'Icons/Sort List',
   component: SortListIcon
 };
-const Template = args => /*#__PURE__*/React.createElement(SortListIcon, args);
-export const Basic = Template.bind({});
-Basic.args = {};
-export const White = Template.bind({});
-White.parameters = {
-  backgrounds: {
-    default: 'dark'
+export default meta;
+export const Basic = {};
+export const White = {
+  parameters: {
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+  args: {
+    color: '#fff'
   }
-};
-White.args = {
-  color: '#fff'
 };

package/dist/ui/tag.js

@@ -1,12 +1,12 @@
 import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import 'styled-jsx';
-import { theme } from '../lib';
+import { colors, fonts } from '../lib/theme';
 export const Tag = props => {
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2407016309", [theme.fonts.primary, theme.colors.enterDarkGrey, theme.colors.enterGrey]]]) + " " + 'tag'
+    className: _JSXStyle.dynamic([["3070421237", [fonts.primary, colors.enterDarkGrey, colors.enterGrey]]]) + " " + 'tag'
   }, props.children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2407016309",
-    dynamic: [theme.fonts.primary, theme.colors.enterDarkGrey, theme.colors.enterGrey]
-  }, `.tag.__jsx-style-dynamic-selector{font-family:${theme.fonts.primary};font-size:0.8em;color:${theme.colors.enterDarkGrey};text-transform:uppercase;display:inline-block;background-color:transparent;border-radius:2px;border:1px solid ${theme.colors.enterGrey};padding:2px 8px;margin:0 0 0.5em 0.5em;word-wrap:anywhere;}`));
+    id: "3070421237",
+    dynamic: [fonts.primary, colors.enterDarkGrey, colors.enterGrey]
+  }, `.tag.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:0.8em;color:${colors.enterDarkGrey};text-transform:uppercase;display:inline-block;background-color:transparent;border-radius:2px;border:1px solid ${colors.enterGrey};padding:2px 8px;margin:0 0 0.5em 0.5em;word-wrap:anywhere;}`));
 };

package/dist/ui/tag.stories.d.ts

@@ -1,9 +1,6 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    children: React.ReactNode;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<{
-    children: React.ReactNode;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { Tag } from './tag';
+declare const meta: Meta<typeof Tag>;
+export default meta;
+declare type Story = StoryObj<typeof Tag>;
+export declare const Basic: Story;

package/dist/ui/tag.stories.js

@@ -1,11 +1,11 @@
-import React from 'react';
 import { Tag } from './tag';
-export default {
+const meta = {
   title: 'Tag',
   component: Tag
 };
-const Template = args => /*#__PURE__*/React.createElement(Tag, args);
-export const Basic = Template.bind({});
-Basic.args = {
-  children: 'my tag'
+export default meta;
+export const Basic = {
+  args: {
+    children: 'my tag'
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-crew-berlin/enter-js-utils",
-  "version": "0.70.2",
+  "version": "0.80.0",
   "description": "utils such as vaildation and other helpers to work with data from the enter app",
   "files": [
     "dist",
@@ -20,8 +20,8 @@
     "build": "rm -r dist & babel src --extensions '.ts','.tsx' -d dist && tsc -d",
     "lint": "eslint src/ --ext .ts",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "generate-client": "openapi-typescript https://api.enter.events/openapi.json --output src/generated/api-schema.ts --empty-objects-unknown --export-type"
   },
   "lint-staged": {
@@ -38,19 +38,20 @@
   },
   "homepage": "https://gitlab.com/dcb-enter/js-utils#readme",
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-react": "^7.17.12",
-    "@babel/preset-typescript": "^7.17.12",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-interactions": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/builder-webpack4": "^6.5.15",
-    "@storybook/manager-webpack4": "^6.5.15",
-    "@storybook/react": "^6.5.15",
-    "@storybook/testing-library": "^0.0.13",
+    "@babel/cli": "^7.25.7",
+    "@babel/core": "^7.25.8",
+    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
+    "@babel/preset-typescript": "^7.25.7",
+    "@storybook/addon-actions": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/nextjs": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-webpack5": "^8.3.5",
+    "@storybook/test": "^8.3.5",
     "@types/cookie": "^0.6.0",
     "@types/jws": "^3.2.9",
     "@types/node": "^17.0.38",
@@ -75,7 +76,7 @@
   "dependencies": {
     "cookie": "^0.6.0",
     "jws": "^4.0.0",
-    "styled-jsx": "^5.0.2",
+    "styled-jsx": "^5.1.6",
     "uuid": "^9.0.0"
   }
 }