@dev-crew-berlin/enter-js-utils 0.70.2 → 0.80.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/api-client/api-base.d.ts +11 -5
- package/dist/api-client/api-base.js +13 -12
- package/dist/api-client/index.d.ts +20 -20
- package/dist/api-client/index.js +38 -38
- package/dist/generated/api-schema.d.ts +208 -20
- package/dist/lib/result.js +0 -1
- package/dist/models/attendee.d.ts +16 -15
- package/dist/models/attendee.js +43 -25
- package/dist/models/branch.d.ts +9 -0
- package/dist/models/branch.js +7 -0
- package/dist/models/checkin-counter.d.ts +2 -0
- package/dist/models/checkin-counter.js +1 -0
- package/dist/models/checkin.d.ts +5 -2
- package/dist/models/checkin.js +4 -1
- package/dist/models/checkins.d.ts +2 -2
- package/dist/models/checkins.js +6 -6
- package/dist/models/event.d.ts +2 -1
- package/dist/models/field.d.ts +9 -0
- package/dist/models/index.d.ts +3 -0
- package/dist/models/index.js +1 -0
- package/dist/models/instance.d.ts +2 -1
- package/dist/models/instance.js +6 -3
- package/dist/models/rsvp.d.ts +3 -2
- package/dist/models/rsvp.js +7 -4
- package/dist/ui/button.js +7 -6
- package/dist/ui/button.stories.d.ts +16 -59
- package/dist/ui/button.stories.js +66 -54
- package/dist/ui/checkin-count-indicator.stories.d.ts +14 -84
- package/dist/ui/checkin-count-indicator.stories.js +60 -52
- package/dist/ui/checkin-progress-bar.js +11 -11
- package/dist/ui/checkin-progress-bar.stories.d.ts +12 -59
- package/dist/ui/checkin-progress-bar.stories.js +45 -39
- package/dist/ui/companion-info.js +6 -6
- package/dist/ui/companion-info.stories.d.ts +8 -44
- package/dist/ui/companion-info.stories.js +29 -27
- package/dist/ui/enter-logo.js +2 -2
- package/dist/ui/enter-logo.stories.d.ts +7 -12
- package/dist/ui/enter-logo.stories.js +11 -12
- package/dist/ui/form-elements/input.js +6 -6
- package/dist/ui/form-elements/input.stories.d.ts +8 -15
- package/dist/ui/form-elements/input.stories.js +26 -24
- package/dist/ui/form-elements/label.js +6 -6
- package/dist/ui/form-elements/label.stories.d.ts +6 -5
- package/dist/ui/form-elements/label.stories.js +6 -6
- package/dist/ui/form-elements/search-input.js +10 -10
- package/dist/ui/form-elements/search-input.stories.d.ts +7 -18
- package/dist/ui/form-elements/search-input.stories.js +18 -17
- package/dist/ui/form-elements/segmented-control.js +8 -8
- package/dist/ui/form-elements/segmented-control.stories.d.ts +6 -17
- package/dist/ui/form-elements/segmented-control.stories.js +7 -7
- package/dist/ui/guest-card.d.ts +2 -1
- package/dist/ui/guest-card.js +17 -16
- package/dist/ui/guest-card.stories.d.ts +14 -124
- package/dist/ui/guest-card.stories.js +93 -76
- package/dist/ui/icons/add-guest-icon.stories.d.ts +7 -12
- package/dist/ui/icons/add-guest-icon.stories.js +11 -12
- package/dist/ui/icons/caret-icon.stories.d.ts +7 -15
- package/dist/ui/icons/caret-icon.stories.js +11 -12
- package/dist/ui/icons/filter-icon.stories.d.ts +7 -12
- package/dist/ui/icons/filter-icon.stories.js +11 -12
- package/dist/ui/icons/search-icon.stories.d.ts +7 -12
- package/dist/ui/icons/search-icon.stories.js +11 -12
- package/dist/ui/icons/settings-icon.stories.d.ts +7 -12
- package/dist/ui/icons/settings-icon.stories.js +11 -12
- package/dist/ui/icons/sort-list-icon.stories.d.ts +7 -15
- package/dist/ui/icons/sort-list-icon.stories.js +11 -12
- package/dist/ui/tag.js +5 -5
- package/dist/ui/tag.stories.d.ts +6 -9
- package/dist/ui/tag.stories.js +6 -6
- package/package.json +18 -17
package/dist/models/checkin.js
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
export class Checkin {
|
|
2
|
+
counterName = 'main';
|
|
2
3
|
constructor(json) {
|
|
3
4
|
this.id = json.id;
|
|
4
5
|
this.time = new Date(json.time);
|
|
6
|
+
this.counterName = json.counterName ?? 'main';
|
|
5
7
|
}
|
|
6
8
|
toJSON() {
|
|
7
9
|
return {
|
|
8
10
|
id: this.id,
|
|
9
|
-
time: this.time.toISOString()
|
|
11
|
+
time: this.time.toISOString(),
|
|
12
|
+
counterName: this.counterName
|
|
10
13
|
};
|
|
11
14
|
}
|
|
12
15
|
}
|
|
@@ -4,10 +4,10 @@ export declare type CheckinsJSON = components['schemas']['Checkins-Output'];
|
|
|
4
4
|
declare type CheckinsJSONInput = components['schemas']['Checkins-Input'];
|
|
5
5
|
export declare class Checkins {
|
|
6
6
|
checkins: Checkin[];
|
|
7
|
-
deleted: string
|
|
7
|
+
deleted: Set<string>;
|
|
8
8
|
constructor(json?: CheckinsJSONInput);
|
|
9
9
|
toJSON(): CheckinsJSON;
|
|
10
|
-
getActiveCheckins(): Checkin[];
|
|
10
|
+
getActiveCheckins(counterName?: string): Checkin[];
|
|
11
11
|
merge(otherCheckin: Checkins): Checkins;
|
|
12
12
|
}
|
|
13
13
|
export {};
|
package/dist/models/checkins.js
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { Checkin } from './checkin';
|
|
2
2
|
export class Checkins {
|
|
3
3
|
checkins = [];
|
|
4
|
-
deleted =
|
|
4
|
+
deleted = new Set();
|
|
5
5
|
constructor(json) {
|
|
6
6
|
// if constructor is called without params use default values
|
|
7
7
|
if (!json) return;
|
|
8
8
|
this.checkins = (json.checkins ?? []).map(checkinJSON => new Checkin(checkinJSON));
|
|
9
|
-
this.deleted = json.deleted
|
|
9
|
+
this.deleted = new Set(json.deleted);
|
|
10
10
|
}
|
|
11
11
|
toJSON() {
|
|
12
12
|
return {
|
|
13
13
|
checkins: this.checkins.map(checkin => checkin.toJSON()),
|
|
14
|
-
deleted: this.deleted
|
|
14
|
+
deleted: Array.from(this.deleted)
|
|
15
15
|
};
|
|
16
16
|
}
|
|
17
|
-
getActiveCheckins() {
|
|
18
|
-
return this.checkins.filter(
|
|
17
|
+
getActiveCheckins(counterName = 'main') {
|
|
18
|
+
return this.checkins.filter(checkin => checkin.counterName === counterName && !this.deleted.has(checkin.id));
|
|
19
19
|
}
|
|
20
20
|
merge(otherCheckin) {
|
|
21
21
|
const checkins = new Map([...this.checkins, ...otherCheckin.checkins].map(checkin => [checkin.id, checkin])).values();
|
|
22
22
|
const deleted = new Set([...this.deleted, ...otherCheckin.deleted]);
|
|
23
23
|
const newCheckins = new Checkins();
|
|
24
24
|
newCheckins.checkins = Array.from(checkins);
|
|
25
|
-
newCheckins.deleted =
|
|
25
|
+
newCheckins.deleted = deleted;
|
|
26
26
|
return newCheckins;
|
|
27
27
|
}
|
|
28
28
|
}
|
package/dist/models/event.d.ts
CHANGED
|
@@ -5,7 +5,8 @@ export declare type AttendeeRespondedEvent = components['schemas']['AttendeeResp
|
|
|
5
5
|
export declare type AttendeeDeletedEvent = components['schemas']['AttendeeDeletedEvent'];
|
|
6
6
|
export declare type AttendeeAuthCodeRequestedEvent = components['schemas']['AttendeeAuthCodeRequested'];
|
|
7
7
|
export declare type EmailUnsubscribedEvent = components['schemas']['EmailUnsubscribedEvent'];
|
|
8
|
+
export declare type EmailStatusUpdatedEvent = components['schemas']['EmailStatusUpdatedEvent'];
|
|
8
9
|
export declare type CheckinCreatedEvent = components['schemas']['CheckinCreatedEvent'];
|
|
9
10
|
export declare type CheckinDeletedEvent = components['schemas']['CheckinDeletedEvent'];
|
|
10
11
|
export declare type PaymentPaidEvent = components['schemas']['PaymentPaidEvent'];
|
|
11
|
-
export declare type Event = components['schemas']['
|
|
12
|
+
export declare type Event = components['schemas']['RootModel_list_Annotated_Union_AttendeeCreatedEvent__AttendeeUpdatedEvent__AttendeeRespondedEvent__AttendeeAuthCodeRequested__EmailStatusUpdatedEvent__EmailUnsubscribedEvent__AttendeeDeletedEvent__CheckinCreatedEvent__CheckinDeletedEvent__PaymentPaidEvent___FieldInfo_annotation_NoneType__required_True__discriminator__event_____'][number];
|
package/dist/models/field.d.ts
CHANGED
|
@@ -5,6 +5,9 @@ export declare type StaticField = components['schemas']['StaticField-Output'] &
|
|
|
5
5
|
export declare type TextField = components['schemas']['TextField-Output'] & {
|
|
6
6
|
group: string;
|
|
7
7
|
};
|
|
8
|
+
export declare type LongtextField = components['schemas']['LongtextField-Output'] & {
|
|
9
|
+
group: string;
|
|
10
|
+
};
|
|
8
11
|
export declare type EmailField = components['schemas']['EmailField-Output'] & {
|
|
9
12
|
group: string;
|
|
10
13
|
};
|
|
@@ -23,6 +26,12 @@ export declare type RadioField = components['schemas']['RadioButtonGroupField-Ou
|
|
|
23
26
|
export declare type SelectField = components['schemas']['DropdownField-Output'] & {
|
|
24
27
|
group: string;
|
|
25
28
|
};
|
|
29
|
+
export declare type CodeField = components['schemas']['CodeField-Output'] & {
|
|
30
|
+
group: string;
|
|
31
|
+
};
|
|
32
|
+
export declare type DateField = components['schemas']['DateField-Output'] & {
|
|
33
|
+
group: string;
|
|
34
|
+
};
|
|
26
35
|
export declare type Field = components['schemas']['FieldGroup-Output']['questions'][number] & {
|
|
27
36
|
group: string;
|
|
28
37
|
};
|
package/dist/models/index.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
export { Attendee } from './attendee';
|
|
2
2
|
export type { AttendeeJSON } from './attendee';
|
|
3
|
+
export { Branch } from './branch';
|
|
4
|
+
export type { BranchJSON } from './branch';
|
|
5
|
+
export type { CheckinCounter } from './checkin-counter';
|
|
3
6
|
export type { CheckinCounts } from './checkin-counts';
|
|
4
7
|
export { Checkin } from './checkin';
|
|
5
8
|
export { Rsvp } from './rsvp';
|
package/dist/models/index.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { components } from '../generated/api-schema';
|
|
2
2
|
import { Attendee } from './attendee';
|
|
3
|
+
import { Branch } from './branch';
|
|
3
4
|
export declare type InstanceJSON = components['schemas']['PublicInstance'];
|
|
4
5
|
export declare class Instance {
|
|
5
6
|
name: string;
|
|
6
7
|
title: string;
|
|
7
8
|
description: string;
|
|
8
|
-
|
|
9
|
+
branches: Map<string, Branch>;
|
|
9
10
|
hasTumbnail: boolean;
|
|
10
11
|
frontend: {
|
|
11
12
|
domain: string;
|
package/dist/models/instance.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
import { Branch } from './branch';
|
|
1
2
|
export class Instance {
|
|
2
3
|
constructor(json) {
|
|
3
4
|
this.name = json.name;
|
|
4
5
|
this.title = json.title;
|
|
5
6
|
this.description = json.description;
|
|
6
|
-
this.
|
|
7
|
+
this.branches = new Map(Object.entries(json.branches).map(([branchName, branchJSON]) => [branchName, new Branch(branchJSON)]));
|
|
7
8
|
this.hasTumbnail = json.thumbnail;
|
|
8
9
|
this.frontend = json.frontend;
|
|
9
10
|
this.registration = {
|
|
@@ -18,11 +19,13 @@ export class Instance {
|
|
|
18
19
|
this.tagColors = json.tagColors;
|
|
19
20
|
}
|
|
20
21
|
toJSON() {
|
|
22
|
+
// convert each branch to its json representation
|
|
23
|
+
const branches = Object.fromEntries(new Map(Object.entries(this.branches).map(([branchName, branch]) => [branchName, branch.toJSON()])));
|
|
21
24
|
return {
|
|
22
25
|
name: this.name,
|
|
23
26
|
title: this.title,
|
|
24
27
|
description: this.description,
|
|
25
|
-
|
|
28
|
+
branches: branches,
|
|
26
29
|
thumbnail: this.hasTumbnail,
|
|
27
30
|
frontend: this.frontend,
|
|
28
31
|
registration: {
|
|
@@ -64,7 +67,7 @@ export class Instance {
|
|
|
64
67
|
// just use the first value we can find
|
|
65
68
|
return Object.values(guest.userdata).slice(0, 1).join('');
|
|
66
69
|
}
|
|
67
|
-
return this.guestNameFields.map(fieldKey => guest.userdata
|
|
70
|
+
return this.guestNameFields.map(fieldKey => guest.userdata.get(fieldKey) ?? '').join(' ');
|
|
68
71
|
}
|
|
69
72
|
getTagColor(tag) {
|
|
70
73
|
return this.tagColors[tag] ?? undefined;
|
package/dist/models/rsvp.d.ts
CHANGED
|
@@ -5,9 +5,10 @@ export declare class Rsvp {
|
|
|
5
5
|
tieBreaker: string;
|
|
6
6
|
time: Date | null;
|
|
7
7
|
personCount: number;
|
|
8
|
+
checkinCounters: Set<string>;
|
|
8
9
|
constructor(args: RsvpJSONInput | number);
|
|
9
|
-
static
|
|
10
|
-
static
|
|
10
|
+
static confirming(personCount?: number): Rsvp;
|
|
11
|
+
static declining(): Rsvp;
|
|
11
12
|
get confirmed(): boolean;
|
|
12
13
|
toJSON(): RsvpJSON;
|
|
13
14
|
}
|
package/dist/models/rsvp.js
CHANGED
|
@@ -5,19 +5,21 @@ export class Rsvp {
|
|
|
5
5
|
this.tieBreaker = uuidv4();
|
|
6
6
|
this.time = new Date();
|
|
7
7
|
this.personCount = args;
|
|
8
|
+
this.checkinCounters = new Set(['main']);
|
|
8
9
|
return;
|
|
9
10
|
}
|
|
10
11
|
this.tieBreaker = args.tieBreaker ?? uuidv4();
|
|
11
12
|
this.time = args.time ? new Date(args.time) : null;
|
|
12
13
|
this.personCount = args.personCount;
|
|
14
|
+
this.checkinCounters = new Set(args.checkinCounters ?? ['main']);
|
|
13
15
|
}
|
|
14
|
-
static
|
|
16
|
+
static confirming(personCount = 1) {
|
|
15
17
|
if (personCount < 1) {
|
|
16
|
-
throw new Error('negative person count is not a positive response');
|
|
18
|
+
throw new Error('zero or negative person count is not a positive response');
|
|
17
19
|
}
|
|
18
20
|
return new Rsvp(personCount);
|
|
19
21
|
}
|
|
20
|
-
static
|
|
22
|
+
static declining() {
|
|
21
23
|
return new Rsvp(0);
|
|
22
24
|
}
|
|
23
25
|
get confirmed() {
|
|
@@ -28,7 +30,8 @@ export class Rsvp {
|
|
|
28
30
|
tieBreaker: this.tieBreaker,
|
|
29
31
|
time: this.time ? this.time.toISOString() : null,
|
|
30
32
|
personCount: this.personCount,
|
|
31
|
-
confirmed: this.confirmed
|
|
33
|
+
confirmed: this.confirmed,
|
|
34
|
+
checkinCounters: Array.from(this.checkinCounters)
|
|
32
35
|
};
|
|
33
36
|
}
|
|
34
37
|
}
|
package/dist/ui/button.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (
|
|
2
|
+
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); }
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import 'styled-jsx';
|
|
5
|
-
import {
|
|
5
|
+
import { classNames } from '../lib/class-names';
|
|
6
|
+
import { colors, fonts } from '../lib/theme';
|
|
6
7
|
export const Button = ({
|
|
7
8
|
appearance = 'default',
|
|
8
9
|
borderless,
|
|
@@ -10,13 +11,13 @@ export const Button = ({
|
|
|
10
11
|
...props
|
|
11
12
|
}) => {
|
|
12
13
|
return /*#__PURE__*/React.createElement("button", _extends({}, props, {
|
|
13
|
-
className: _JSXStyle.dynamic([["
|
|
14
|
+
className: _JSXStyle.dynamic([["4186526764", [fonts.secondary, colors.enterBackground, colors.enterDarkGrey, colors.enterGrey, colors.enterError, colors.enterGrey, colors.enterError, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterGreen]]]) + " " + (classNames({
|
|
14
15
|
[appearance]: true,
|
|
15
16
|
'full-width': fullWidth,
|
|
16
17
|
borderless
|
|
17
18
|
}) || "")
|
|
18
19
|
}), props.children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
19
|
-
id: "
|
|
20
|
-
dynamic: [
|
|
21
|
-
}, `button.__jsx-style-dynamic-selector{font-family:${
|
|
20
|
+
id: "4186526764",
|
|
21
|
+
dynamic: [fonts.secondary, colors.enterBackground, colors.enterDarkGrey, colors.enterGrey, colors.enterError, colors.enterGrey, colors.enterError, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterGreen]
|
|
22
|
+
}, `button.__jsx-style-dynamic-selector{font-family:${fonts.secondary};margin:1em 0 0.8em;padding:0.8em 1.5em;min-width:150px;font-size:1em;font-weight:500;white-space:nowrap;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;-webkit-letter-spacing:0.06em;-moz-letter-spacing:0.06em;-ms-letter-spacing:0.06em;letter-spacing:0.06em;line-height:1;cursor:pointer;border-radius:2px;background-color:${colors.enterBackground};color:${colors.enterDarkGrey};border:1px solid ${colors.enterGrey};box-shadow:0px 0px 2px 0px rgba(0,0,0,0.12), 0px 1px 2px 0px rgba(0,0,0,0.24);}button.__jsx-style-dynamic-selector:disabled{opacity:0.5;cursor:not-allowed;}button.borderless.__jsx-style-dynamic-selector{background-color:transparent;border:0;box-shadow:none;margin:0.2em 0;}.full-width.__jsx-style-dynamic-selector{display:block;width:100%;}.danger.__jsx-style-dynamic-selector{color:${colors.enterError};border:1px solid ${colors.enterGrey};}.danger.borderless.__jsx-style-dynamic-selector{color:${colors.enterError};}.primary.__jsx-style-dynamic-selector{background-color:${colors.enterDarkGrey};color:white;border:1px solid ${colors.enterDarkGrey};}.primary.borderless.__jsx-style-dynamic-selector{color:${colors.enterDarkGrey};font-weight:bold;}.green.__jsx-style-dynamic-selector{background-color:${colors.enterGreen};color:white;border:1px solid ${colors.enterGreen};}.green.borderless.__jsx-style-dynamic-selector{color:${colors.enterGreen};}`));
|
|
22
23
|
};
|
|
@@ -1,59 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
declare const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export
|
|
9
|
-
export declare const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
export declare const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
fullWidth?: boolean | undefined;
|
|
18
|
-
}>>;
|
|
19
|
-
export declare const Primary: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
|
|
20
|
-
appearance?: "default" | "primary" | "danger" | "green" | undefined;
|
|
21
|
-
borderless?: boolean | undefined;
|
|
22
|
-
fullWidth?: boolean | undefined;
|
|
23
|
-
}>>;
|
|
24
|
-
export declare const Danger: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
|
|
25
|
-
appearance?: "default" | "primary" | "danger" | "green" | undefined;
|
|
26
|
-
borderless?: boolean | undefined;
|
|
27
|
-
fullWidth?: boolean | undefined;
|
|
28
|
-
}>>;
|
|
29
|
-
export declare const Green: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
|
|
30
|
-
appearance?: "default" | "primary" | "danger" | "green" | undefined;
|
|
31
|
-
borderless?: boolean | undefined;
|
|
32
|
-
fullWidth?: boolean | undefined;
|
|
33
|
-
}>>;
|
|
34
|
-
export declare const Borderless: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
|
|
35
|
-
appearance?: "default" | "primary" | "danger" | "green" | undefined;
|
|
36
|
-
borderless?: boolean | undefined;
|
|
37
|
-
fullWidth?: boolean | undefined;
|
|
38
|
-
}>>;
|
|
39
|
-
export declare const BorderlessPrimary: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
|
|
40
|
-
appearance?: "default" | "primary" | "danger" | "green" | undefined;
|
|
41
|
-
borderless?: boolean | undefined;
|
|
42
|
-
fullWidth?: boolean | undefined;
|
|
43
|
-
}>>;
|
|
44
|
-
export declare const BorderlessDanger: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
|
|
45
|
-
appearance?: "default" | "primary" | "danger" | "green" | undefined;
|
|
46
|
-
borderless?: boolean | undefined;
|
|
47
|
-
fullWidth?: boolean | undefined;
|
|
48
|
-
}>>;
|
|
49
|
-
export declare const BorderlessGreen: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
|
|
50
|
-
appearance?: "default" | "primary" | "danger" | "green" | undefined;
|
|
51
|
-
borderless?: boolean | undefined;
|
|
52
|
-
fullWidth?: boolean | undefined;
|
|
53
|
-
}>>;
|
|
54
|
-
export declare const Disabled: ComponentStory<React.FunctionComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color"> & {
|
|
55
|
-
appearance?: "default" | "primary" | "danger" | "green" | undefined;
|
|
56
|
-
borderless?: boolean | undefined;
|
|
57
|
-
fullWidth?: boolean | undefined;
|
|
58
|
-
}>>;
|
|
59
|
-
export declare const OnePrimaryAndTwoBorderless: () => React.JSX.Element;
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Button } from './button';
|
|
3
|
+
declare const meta: Meta<typeof Button>;
|
|
4
|
+
export default meta;
|
|
5
|
+
declare type Story = StoryObj<typeof Button>;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export declare const FullWidth: Story;
|
|
8
|
+
export declare const Primary: Story;
|
|
9
|
+
export declare const Danger: Story;
|
|
10
|
+
export declare const Green: Story;
|
|
11
|
+
export declare const Borderless: Story;
|
|
12
|
+
export declare const BorderlessPrimary: Story;
|
|
13
|
+
export declare const BorderlessDanger: Story;
|
|
14
|
+
export declare const BorderlessGreen: Story;
|
|
15
|
+
export declare const Disabled: Story;
|
|
16
|
+
export declare const OnePrimaryAndTwoBorderless: Story;
|
|
@@ -1,69 +1,81 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Button } from './button';
|
|
3
|
-
|
|
3
|
+
const meta = {
|
|
4
4
|
title: 'Button',
|
|
5
5
|
component: Button
|
|
6
6
|
};
|
|
7
|
-
|
|
8
|
-
export const Basic =
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
export default meta;
|
|
8
|
+
export const Basic = {
|
|
9
|
+
args: {
|
|
10
|
+
children: 'default'
|
|
11
|
+
}
|
|
11
12
|
};
|
|
12
|
-
export const FullWidth =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
export const FullWidth = {
|
|
14
|
+
args: {
|
|
15
|
+
children: 'full width',
|
|
16
|
+
fullWidth: true
|
|
17
|
+
}
|
|
16
18
|
};
|
|
17
|
-
export const Primary =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
export const Primary = {
|
|
20
|
+
args: {
|
|
21
|
+
children: 'primary',
|
|
22
|
+
appearance: 'primary'
|
|
23
|
+
}
|
|
21
24
|
};
|
|
22
|
-
export const Danger =
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
export const Danger = {
|
|
26
|
+
args: {
|
|
27
|
+
children: 'danger',
|
|
28
|
+
appearance: 'danger'
|
|
29
|
+
}
|
|
26
30
|
};
|
|
27
|
-
export const Green =
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
+
export const Green = {
|
|
32
|
+
args: {
|
|
33
|
+
children: 'green',
|
|
34
|
+
appearance: 'green'
|
|
35
|
+
}
|
|
31
36
|
};
|
|
32
|
-
export const Borderless =
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
37
|
+
export const Borderless = {
|
|
38
|
+
args: {
|
|
39
|
+
children: 'borderless',
|
|
40
|
+
borderless: true
|
|
41
|
+
}
|
|
36
42
|
};
|
|
37
|
-
export const BorderlessPrimary =
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
43
|
+
export const BorderlessPrimary = {
|
|
44
|
+
args: {
|
|
45
|
+
children: 'borderless primaray',
|
|
46
|
+
borderless: true,
|
|
47
|
+
appearance: 'primary'
|
|
48
|
+
}
|
|
42
49
|
};
|
|
43
|
-
export const BorderlessDanger =
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
50
|
+
export const BorderlessDanger = {
|
|
51
|
+
args: {
|
|
52
|
+
children: 'borderless danger',
|
|
53
|
+
borderless: true,
|
|
54
|
+
appearance: 'danger'
|
|
55
|
+
}
|
|
48
56
|
};
|
|
49
|
-
export const BorderlessGreen =
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
57
|
+
export const BorderlessGreen = {
|
|
58
|
+
args: {
|
|
59
|
+
children: 'borderless green',
|
|
60
|
+
borderless: true,
|
|
61
|
+
appearance: 'green'
|
|
62
|
+
}
|
|
54
63
|
};
|
|
55
|
-
export const Disabled =
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
64
|
+
export const Disabled = {
|
|
65
|
+
args: {
|
|
66
|
+
children: 'default',
|
|
67
|
+
disabled: true
|
|
68
|
+
}
|
|
59
69
|
};
|
|
60
|
-
export const OnePrimaryAndTwoBorderless =
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
+
export const OnePrimaryAndTwoBorderless = {
|
|
71
|
+
render: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
|
|
72
|
+
fullWidth: true,
|
|
73
|
+
appearance: "primary"
|
|
74
|
+
}, "Primary"), /*#__PURE__*/React.createElement(Button, {
|
|
75
|
+
fullWidth: true,
|
|
76
|
+
borderless: true
|
|
77
|
+
}, "1st secondary option"), /*#__PURE__*/React.createElement(Button, {
|
|
78
|
+
fullWidth: true,
|
|
79
|
+
borderless: true
|
|
80
|
+
}, "2nd secondary option"))
|
|
81
|
+
};
|
|
@@ -1,84 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
export
|
|
13
|
-
export declare const
|
|
14
|
-
|
|
15
|
-
response: "positive-response";
|
|
16
|
-
rsvpCount: number;
|
|
17
|
-
} | {
|
|
18
|
-
checkins: Checkin[];
|
|
19
|
-
response: "no-response" | "negative-response";
|
|
20
|
-
}>>;
|
|
21
|
-
export declare const Decline: ComponentStory<React.FunctionComponent<{
|
|
22
|
-
checkins: Checkin[];
|
|
23
|
-
response: "positive-response";
|
|
24
|
-
rsvpCount: number;
|
|
25
|
-
} | {
|
|
26
|
-
checkins: Checkin[];
|
|
27
|
-
response: "no-response" | "negative-response";
|
|
28
|
-
}>>;
|
|
29
|
-
export declare const NoResponse: ComponentStory<React.FunctionComponent<{
|
|
30
|
-
checkins: Checkin[];
|
|
31
|
-
response: "positive-response";
|
|
32
|
-
rsvpCount: number;
|
|
33
|
-
} | {
|
|
34
|
-
checkins: Checkin[];
|
|
35
|
-
response: "no-response" | "negative-response";
|
|
36
|
-
}>>;
|
|
37
|
-
export declare const MultipleResponses: ComponentStory<React.FunctionComponent<{
|
|
38
|
-
checkins: Checkin[];
|
|
39
|
-
response: "positive-response";
|
|
40
|
-
rsvpCount: number;
|
|
41
|
-
} | {
|
|
42
|
-
checkins: Checkin[];
|
|
43
|
-
response: "no-response" | "negative-response";
|
|
44
|
-
}>>;
|
|
45
|
-
export declare const CheckinAndResponse: ComponentStory<React.FunctionComponent<{
|
|
46
|
-
checkins: Checkin[];
|
|
47
|
-
response: "positive-response";
|
|
48
|
-
rsvpCount: number;
|
|
49
|
-
} | {
|
|
50
|
-
checkins: Checkin[];
|
|
51
|
-
response: "no-response" | "negative-response";
|
|
52
|
-
}>>;
|
|
53
|
-
export declare const MultipleCheckinsAndResponse: ComponentStory<React.FunctionComponent<{
|
|
54
|
-
checkins: Checkin[];
|
|
55
|
-
response: "positive-response";
|
|
56
|
-
rsvpCount: number;
|
|
57
|
-
} | {
|
|
58
|
-
checkins: Checkin[];
|
|
59
|
-
response: "no-response" | "negative-response";
|
|
60
|
-
}>>;
|
|
61
|
-
export declare const CheckinsWithDecline: ComponentStory<React.FunctionComponent<{
|
|
62
|
-
checkins: Checkin[];
|
|
63
|
-
response: "positive-response";
|
|
64
|
-
rsvpCount: number;
|
|
65
|
-
} | {
|
|
66
|
-
checkins: Checkin[];
|
|
67
|
-
response: "no-response" | "negative-response";
|
|
68
|
-
}>>;
|
|
69
|
-
export declare const CheckinWithoutResponse: ComponentStory<React.FunctionComponent<{
|
|
70
|
-
checkins: Checkin[];
|
|
71
|
-
response: "positive-response";
|
|
72
|
-
rsvpCount: number;
|
|
73
|
-
} | {
|
|
74
|
-
checkins: Checkin[];
|
|
75
|
-
response: "no-response" | "negative-response";
|
|
76
|
-
}>>;
|
|
77
|
-
export declare const MultipleCheckins: ComponentStory<React.FunctionComponent<{
|
|
78
|
-
checkins: Checkin[];
|
|
79
|
-
response: "positive-response";
|
|
80
|
-
rsvpCount: number;
|
|
81
|
-
} | {
|
|
82
|
-
checkins: Checkin[];
|
|
83
|
-
response: "no-response" | "negative-response";
|
|
84
|
-
}>>;
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { CheckinCountIndicator } from './checkin-count-indicator';
|
|
3
|
+
declare const meta: Meta<typeof CheckinCountIndicator>;
|
|
4
|
+
export default meta;
|
|
5
|
+
declare type Story = StoryObj<typeof CheckinCountIndicator>;
|
|
6
|
+
export declare const SingleResponse: Story;
|
|
7
|
+
export declare const Decline: Story;
|
|
8
|
+
export declare const NoResponse: Story;
|
|
9
|
+
export declare const MultipleResponses: Story;
|
|
10
|
+
export declare const CheckinAndResponse: Story;
|
|
11
|
+
export declare const MultipleCheckinsAndResponse: Story;
|
|
12
|
+
export declare const CheckinsWithDecline: Story;
|
|
13
|
+
export declare const CheckinWithoutResponse: Story;
|
|
14
|
+
export declare const MultipleCheckins: Story;
|