@dev-crew-berlin/enter-js-utils 0.2.2 → 0.3.2

package/README.md

@@ -1 +1,11 @@
 # js utils
+
+## lib
+
+Some common helper functions and types.  
+This also contains the dcb colors.
+
+## ui
+
+react ui components for enter and dcb apps.  
+see: https://js-utils-main.mrdcb.vercel.app

package/dist/lib/index.d.ts

@@ -1 +1,2 @@
-export * as result from './result';
+export * from './result';
+export * as theme from './theme';

package/dist/lib/index.js

@@ -1,2 +1,3 @@
-export * as result from './result';
+export * from './result';
+export * as theme from './theme';
 //# sourceMappingURL=index.js.map

package/dist/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAA"}

package/dist/lib/theme.d.ts

@@ -0,0 +1,18 @@
+export declare const colors: {
+    enterDarkGrey: string;
+    enterLightGrey: string;
+    enterMediumGrey: string;
+    enterGrey: string;
+    enterBackground: string;
+    enterModalBackground: string;
+    enterError: string;
+    enterRed: string;
+    enterCyan: string;
+    enterGreen: string;
+    enterYellow: string;
+    enterPink: string;
+};
+export declare const fonts: {
+    primary: string;
+    secondary: string;
+};

package/dist/lib/theme.js

@@ -0,0 +1,19 @@
+export var colors = {
+    enterDarkGrey: '#483E47',
+    enterLightGrey: '#EEE',
+    enterMediumGrey: '#A09999',
+    enterGrey: '#D8D8D8',
+    enterBackground: '#F8FAFB',
+    enterModalBackground: '#FFFEFC',
+    enterError: '#CE1E3D',
+    enterRed: '#FF5555',
+    enterCyan: '#74ACBC',
+    enterGreen: '#89B859',
+    enterYellow: '#E7C700',
+    enterPink: '#E66084',
+};
+export var fonts = {
+    primary: 'PTSans, sans-serif',
+    secondary: 'Iosevka monospaced',
+};
+//# sourceMappingURL=theme.js.map

package/dist/lib/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,MAAM,GAAG;IACpB,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,MAAM;IACtB,eAAe,EAAE,SAAS;IAC1B,SAAS,EAAE,SAAS;IACpB,eAAe,EAAE,SAAS;IAC1B,oBAAoB,EAAE,SAAS;IAC/B,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,SAAS;IACrB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;CACrB,CAAA;AAED,MAAM,CAAC,IAAM,KAAK,GAAG;IACnB,OAAO,EAAE,oBAAoB;IAC7B,SAAS,EAAE,oBAAoB;CAChC,CAAA"}

package/dist/ui/checkin-count-indicator.d.ts

@@ -1,10 +1,12 @@
 import { FunctionComponent } from 'react';
-declare type Checkin = {
+import 'styled-jsx';
+export declare type Checkin = {
     id: string;
     time: Date;
 };
 declare type Props = {
-    checkins: [Checkin];
+    checkins: Checkin[];
+    rsvp: number | null;
 };
 export declare const CheckinCountIndicator: FunctionComponent<Props>;
 export {};

package/dist/ui/checkin-count-indicator.js

@@ -1,5 +1,53 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import React from 'react';
+import { colors, fonts } from '../lib/theme';
+import 'styled-jsx';
+var CHUNK_SIZE = 5;
 export var CheckinCountIndicator = function (props) {
-    return React.createElement("div", null, "hello");
+    var _a;
+    var checkinCount = props.checkins.length;
+    var hasCheckins = checkinCount > 0;
+    var didRsvp = props.rsvp !== null;
+    var rsvpCount = (_a = props.rsvp) !== null && _a !== void 0 ? _a : 0;
+    var rsvpsWithoutCheckin = rsvpCount > checkinCount ? rsvpCount - checkinCount : 0;
+    var checkinsAndRsvp = __spreadArray(__spreadArray([], props.checkins, true), Array.from({ length: rsvpsWithoutCheckin }, function () { return 'rsvp'; }), true);
+    var chunked = [];
+    for (var i = 0; i < checkinsAndRsvp.length; i += CHUNK_SIZE) {
+        var chunk = checkinsAndRsvp.slice(i, i + CHUNK_SIZE);
+        chunked.push(chunk);
+    }
+    var text = getText({ checkinCount: checkinCount, rsvpCount: rsvpCount, didRsvp: didRsvp });
+    return (React.createElement("div", { className: 'checkin-count-indicator' },
+        didRsvp && rsvpCount == 0 && !hasCheckins ? (React.createElement("div", { className: 'box-wrapper' },
+            React.createElement("span", { className: 'decline-box' }, "\u00D7"),
+            React.createElement("span", { className: 'text' }, "Declined"))) : (React.createElement("div", { className: "box-wrapper ".concat(chunked.length > 1 ? 'multiple-chunks' : '', " ") },
+            chunked.map(function (chunk, idx) { return (React.createElement("div", { key: idx, className: 'chunk' }, chunk.map(function (checkinOrRsvp, idx) {
+                return typeof checkinOrRsvp === 'string' ? (React.createElement("span", { key: idx, className: 'rsvp' })) : (React.createElement("span", { key: idx, className: 'checkin', "data-toggle": 'tooltip', title: checkinOrRsvp.time.toLocaleString() }));
+            }))); }),
+            text && React.createElement("span", { className: 'text' }, text))),
+        React.createElement("style", { jsx: true }, "\n        .checkin-count-indicator {\n          font-family: ".concat(fonts.primary, ";\n        }\n\n        .text {\n          color: ").concat(colors.enterDarkGrey, ";\n          text-transform: uppercase;\n          font-size: 10px;\n          line-height: 15px;\n          font-weight: bold;\n          white-space: nowrap;\n          width: 100%;\n          margin-top: 0.2em;\n        }\n\n        .text:nth-child(2) {\n          width: auto;\n          margin-top: 0;\n        }\n\n        .box-wrapper {\n          display: flex;\n          min-width: 100px;\n        }\n        .box-wrapper.multiple-chunks {\n          flex-flow: wrap;\n        }\n\n        .chunk {\n          display: flex;\n          margin-right: 5px;\n          margin-bottom: 4px;\n          width: 95px;\n          white-space: nowrap;\n        }\n\n        .chunk:first-of-type.chunk:last-of-type {\n          width: auto;\n          margin-right: 2px;\n        }\n\n        .checkin,\n        .rsvp,\n        .decline-box {\n          box-sizing: border-box;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 120%;\n          width: 15px;\n          height: 15px;\n          border-radius: 2px;\n          border: 3px solid ").concat(colors.enterGreen, ";\n          margin: 0 4px 0 0;\n          vertical-align: middle;\n          color: white;\n        }\n\n        .checkin {\n          background-color: ").concat(colors.enterGreen, ";\n        }\n\n        .decline-box {\n          background-color: ").concat(colors.enterError, ";\n          border-color: ").concat(colors.enterError, ";\n        }\n      "))));
 };
+function getText(args) {
+    if (args.checkinCount === 1 && args.rsvpCount === 1) {
+        return 'checked in';
+    }
+    if (args.checkinCount > 0) {
+        return "".concat(args.checkinCount, " / ").concat(args.rsvpCount, " Checkins");
+    }
+    if (args.rsvpCount == 1) {
+        return 'Confirmed';
+    }
+    if (args.rsvpCount > 0) {
+        return "".concat(args.rsvpCount, " Confirmations");
+    }
+    return 'no response';
+}
 //# sourceMappingURL=checkin-count-indicator.js.map

package/dist/ui/checkin-count-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkin-count-indicator.js","sourceRoot":"","sources":["../../src/ui/checkin-count-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAMhD,MAAM,CAAC,IAAM,qBAAqB,GAA6B,UAAC,KAAK;IACnE,OAAO,yCAAgB,CAAA;AACzB,CAAC,CAAA"}
+{"version":3,"file":"checkin-count-indicator.js","sourceRoot":"","sources":["../../src/ui/checkin-count-indicator.tsx"],"names":[],"mappings":"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"}

package/dist/ui/checkin-count-indicator.stories.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Checkin } from './checkin-count-indicator';
+declare const _default: ComponentMeta<React.FunctionComponent<{
+    checkins: Checkin[];
+    rsvp: number | null;
+}>>;
+export default _default;
+export declare const SingleResponse: ComponentStory<React.FunctionComponent<{
+    checkins: Checkin[];
+    rsvp: number | null;
+}>>;
+export declare const Decline: ComponentStory<React.FunctionComponent<{
+    checkins: Checkin[];
+    rsvp: number | null;
+}>>;
+export declare const NoResponse: ComponentStory<React.FunctionComponent<{
+    checkins: Checkin[];
+    rsvp: number | null;
+}>>;
+export declare const MultipleResponses: ComponentStory<React.FunctionComponent<{
+    checkins: Checkin[];
+    rsvp: number | null;
+}>>;
+export declare const CheckinAndResponse: ComponentStory<React.FunctionComponent<{
+    checkins: Checkin[];
+    rsvp: number | null;
+}>>;
+export declare const MultipleCheckinsAndResponse: ComponentStory<React.FunctionComponent<{
+    checkins: Checkin[];
+    rsvp: number | null;
+}>>;
+export declare const CheckinsWithDecline: ComponentStory<React.FunctionComponent<{
+    checkins: Checkin[];
+    rsvp: number | null;
+}>>;
+export declare const CheckinWithoutResponse: ComponentStory<React.FunctionComponent<{
+    checkins: Checkin[];
+    rsvp: number | null;
+}>>;
+export declare const MultipleCheckins: ComponentStory<React.FunctionComponent<{
+    checkins: Checkin[];
+    rsvp: number | null;
+}>>;

package/dist/ui/checkin-count-indicator.stories.js

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { CheckinCountIndicator } from './checkin-count-indicator';
+export default {
+    title: 'Checkin-Count Indicator',
+    component: CheckinCountIndicator,
+    argTypes: { rsvp: { type: { name: 'number' } } },
+};
+var exampleCheckin = { id: 'dummy-id', time: new Date('2022-01-01') };
+var Template = function (args) { return (React.createElement(CheckinCountIndicator, __assign({}, args))); };
+export var SingleResponse = Template.bind({});
+SingleResponse.args = { checkins: [], rsvp: 1 };
+export var Decline = Template.bind({});
+Decline.args = { checkins: [], rsvp: 0 };
+export var NoResponse = Template.bind({});
+NoResponse.args = { checkins: [], rsvp: null };
+export var MultipleResponses = Template.bind({});
+MultipleResponses.args = { checkins: [], rsvp: 16 };
+export var CheckinAndResponse = Template.bind({});
+CheckinAndResponse.args = { checkins: [exampleCheckin], rsvp: 1 };
+export var MultipleCheckinsAndResponse = Template.bind({});
+MultipleCheckinsAndResponse.args = {
+    checkins: [exampleCheckin, exampleCheckin],
+    rsvp: 1,
+};
+export var CheckinsWithDecline = Template.bind({});
+CheckinsWithDecline.args = { checkins: [exampleCheckin], rsvp: 0 };
+export var CheckinWithoutResponse = Template.bind({});
+CheckinWithoutResponse.args = { checkins: [exampleCheckin], rsvp: null };
+export var MultipleCheckins = Template.bind({});
+MultipleCheckins.args = {
+    checkins: [exampleCheckin, exampleCheckin, exampleCheckin, exampleCheckin],
+    rsvp: 2,
+};
+//# sourceMappingURL=checkin-count-indicator.stories.js.map

package/dist/ui/checkin-count-indicator.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkin-count-indicator.stories.js","sourceRoot":"","sources":["../../src/ui/checkin-count-indicator.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAW,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAE1E,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;CACF,CAAA;AAEhD,IAAM,cAAc,GAAY,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE,CAAA;AAEhF,IAAM,QAAQ,GAAiD,UAAC,IAAI,IAAK,OAAA,CACvE,oBAAC,qBAAqB,eAAK,IAAI,EAAI,CACpC,EAFwE,CAExE,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAA;AAE/C,MAAM,CAAC,IAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAA;AAExC,MAAM,CAAC,IAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC3C,UAAU,CAAC,IAAI,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;AAE9C,MAAM,CAAC,IAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAClD,iBAAiB,CAAC,IAAI,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAA;AAEnD,MAAM,CAAC,IAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACnD,kBAAkB,CAAC,IAAI,GAAG,EAAE,QAAQ,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAA;AAEjE,MAAM,CAAC,IAAM,2BAA2B,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5D,2BAA2B,CAAC,IAAI,GAAG;IACjC,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;IAC1C,IAAI,EAAE,CAAC;CACR,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACpD,mBAAmB,CAAC,IAAI,GAAG,EAAE,QAAQ,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAA;AAElE,MAAM,CAAC,IAAM,sBAAsB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvD,sBAAsB,CAAC,IAAI,GAAG,EAAE,QAAQ,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;AAExE,MAAM,CAAC,IAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjD,gBAAgB,CAAC,IAAI,GAAG;IACtB,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,CAAC;IAC1E,IAAI,EAAE,CAAC;CACR,CAAA"}

package/lib.d.ts

@@ -0,0 +1 @@
+export * from './dist/lib'

package/lib.js

@@ -0,0 +1 @@
+export * from './dist/lib'

package/package.json

@@ -1,17 +1,36 @@
 {
   "name": "@dev-crew-berlin/enter-js-utils",
-  "version": "0.2.2",
+  "version": "0.3.2",
   "description": "utils such as vaildation and other helpers to work with data from the enter app",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "lib.js",
+    "lib.d.ts",
+    "ui.js",
+    "ui.d.ts"
   ],
+  "targets": {
+    "lib": {
+      "source": "src/lib/index.ts",
+      "outputFormat": "esmodule",
+      "isLibrary": true,
+      "includeNodeModules": false
+    },
+    "ui": {
+      "source": "src/ui/index.ts",
+      "outputFormat": "esmodule",
+      "isLibrary": true,
+      "includeNodeModules": false
+    }
+  },
   "scripts": {
     "prepare": "husky install && npm run build",
-    "build": "rm -rf dist && tsc",
-    "dev": "tsc -w",
+    "build": "rm -r dist & parcel build && tsc -d",
     "lint": "eslint src/ --ext .ts",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
@@ -27,19 +46,38 @@
   },
   "homepage": "https://gitlab.com/dcb-enter/js-utils#readme",
   "devDependencies": {
+    "@babel/core": "^7.18.2",
+    "@parcel/packager-ts": "^2.6.0",
+    "@parcel/transformer-typescript-tsc": "^2.6.0",
+    "@parcel/transformer-typescript-types": "^2.6.0",
+    "@storybook/addon-actions": "^6.5.8",
+    "@storybook/addon-essentials": "^6.5.8",
+    "@storybook/addon-interactions": "^6.5.8",
+    "@storybook/addon-links": "^6.5.8",
+    "@storybook/builder-webpack4": "^6.5.8",
+    "@storybook/manager-webpack4": "^6.5.8",
+    "@storybook/react": "^6.5.8",
+    "@storybook/testing-library": "^0.0.11",
     "@types/node": "^17.0.38",
     "@types/react": "^18.0.10",
+    "@types/react-dom": "^18.0.5",
+    "babel-loader": "^8.2.5",
     "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
     "husky": "^7.0.1",
+    "parcel": "^2.6.0",
     "prettier": "^2.6.2",
     "react": "^18.1.0",
-    "typescript": "^4.7.2"
+    "react-dom": "^18.1.0",
+    "typescript": "^4.7.3"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.1.0"
+    "react": "^17.0.0 || ^18.1.0",
+    "react-dom": "^17.0.0 || ^18.1.0"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.27.0"
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "styled-jsx": "^5.0.2"
   }
 }

package/ui.d.ts

@@ -0,0 +1 @@
+export * from 'dist/ui/'

package/ui.js

@@ -0,0 +1 @@
+export * from 'dist/ui/'