@dev-crew-berlin/enter-js-utils 0.6.1 → 0.7.0

package/dist/models/_helpers.js

@@ -69,7 +69,7 @@ export function parseTimestamp(value) {
 }
 export function maybe(validator, defaultValue = null) {
   return value => {
-    if (value === null) return success(defaultValue);
+    if (value === null || value === undefined) return success(defaultValue);
     return validator(value);
   };
 }

package/dist/models/field.js

@@ -1,15 +1,15 @@
-import { array, object, string, enumerate, boolean, defaultTo, union, number } from 'fefe';
+import { array, object, string, enumerate, boolean, union, number } from 'fefe';
 import { apiValidator } from '../lib';
 import { dictionary, maybe } from './_helpers';
 const basicFieldProps = {
   name: string({
     minLength: 1
   }),
-  title: defaultTo(maybe(union(string(), dictionary(string()))), null),
-  info: defaultTo(maybe(union(string(), dictionary(string()))), null),
-  required: defaultTo(boolean(), false),
-  if: defaultTo(maybe(string()), null),
-  class: defaultTo(maybe(string()), null)
+  title: maybe(union(string(), dictionary(string()))),
+  info: maybe(union(string(), dictionary(string()))),
+  required: maybe(boolean(), false),
+  if: maybe(string()),
+  class: maybe(string())
 };
 const staticField = object({
   type: enumerate('static'),
@@ -46,7 +46,7 @@ const checkboxField = object({
   ...basicFieldProps,
   items: array(object({
     name: union(string(), dictionary(string())),
-    value: defaultTo(maybe(string()), null)
+    value: maybe(string())
   }))
 }, {
   allowExcessProperties: true
@@ -54,7 +54,7 @@ const checkboxField = object({
 const singleCheckboxField = object({
   type: enumerate('checkbox'),
   ...basicFieldProps,
-  value: defaultTo(number(), 0)
+  value: maybe(number(), 0)
 }, {
   allowExcessProperties: true
 });
@@ -63,7 +63,7 @@ const radioField = object({
   ...basicFieldProps,
   items: array(object({
     name: union(string(), dictionary(string())),
-    value: defaultTo(maybe(string()), null)
+    value: maybe(string())
   }))
 }, {
   allowExcessProperties: true
@@ -71,7 +71,7 @@ const radioField = object({
 const singleRadioField = object({
   type: enumerate('radiobutton'),
   ...basicFieldProps,
-  itemval: defaultTo(maybe(string()), null)
+  itemval: maybe(string())
 }, {
   allowExcessProperties: true
 });
@@ -80,7 +80,7 @@ const selectField = object({
   ...basicFieldProps,
   items: array(object({
     name: union(string(), dictionary(string())),
-    value: defaultTo(maybe(string()), null)
+    value: maybe(string())
   }))
 }, {
   allowExcessProperties: true

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

@@ -23,32 +23,32 @@ export const CheckinCountIndicator = props => {
     rsvpCount
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3032748268", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'checkin-count-indicator'
+    className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'checkin-count-indicator'
   }, props.response === 'negative-repsone' && !hasCheckins ? /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3032748268", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'box-wrapper'
+    className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'box-wrapper'
   }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3032748268", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'decline-box'
+    className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'decline-box'
   }, "\xD7"), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3032748268", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'text'
+    className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'text'
   }, "Declined")) : /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3032748268", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + `box-wrapper ${chunked.length > 1 ? 'multiple-chunks' : ''} `
+    className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + `box-wrapper ${chunked.length > 1 ? 'multiple-chunks' : ''} `
   }, chunked.map((chunk, idx) => /*#__PURE__*/React.createElement("div", {
     key: idx,
-    className: _JSXStyle.dynamic([["3032748268", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'chunk'
+    className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'chunk'
   }, chunk.map((checkinOrRsvp, idx) => typeof checkinOrRsvp === 'string' ? /*#__PURE__*/React.createElement("span", {
     key: idx,
-    className: _JSXStyle.dynamic([["3032748268", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'rsvp'
+    className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'rsvp'
   }) : /*#__PURE__*/React.createElement("span", {
     key: idx,
     "data-toggle": "tooltip",
     title: checkinOrRsvp.time.toLocaleString(),
-    className: _JSXStyle.dynamic([["3032748268", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'checkin'
+    className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'checkin'
   })))), text && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3032748268", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'text'
+    className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'text'
   }, text)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3032748268",
+    id: "103743971",
     dynamic: [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]
-  }, `.checkin-count-indicator.__jsx-style-dynamic-selector{font-family:${fonts.primary};}.text.__jsx-style-dynamic-selector{color:${colors.enterDarkGrey};text-transform:uppercase;font-size:10px;line-height:15px;font-weight:bold;white-space:nowrap;width:100%;margin-top:0.2em;}.text.__jsx-style-dynamic-selector:nth-child(2){width:auto;margin-top:0;}.box-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:100px;}.box-wrapper.multiple-chunks.__jsx-style-dynamic-selector{-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;}.chunk.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:5px;margin-bottom:4px;width:95px;white-space:nowrap;}.chunk.__jsx-style-dynamic-selector:first-of-type.chunk.__jsx-style-dynamic-selector:last-of-type{width:auto;margin-right:2px;}.checkin.__jsx-style-dynamic-selector,.rsvp.__jsx-style-dynamic-selector,.decline-box.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:120%;width:15px;height:15px;border-radius:2px;border:3px solid ${colors.enterGreen};margin:0 4px 0 0;vertical-align:middle;color:white;}.checkin.__jsx-style-dynamic-selector{background-color:${colors.enterGreen};}.decline-box.__jsx-style-dynamic-selector{background-color:${colors.enterError};border-color:${colors.enterError};}`));
+  }, `.checkin-count-indicator.__jsx-style-dynamic-selector{font-family:${fonts.primary};min-height:20px;}.text.__jsx-style-dynamic-selector{color:${colors.enterDarkGrey};text-transform:uppercase;font-size:10px;line-height:15px;font-weight:bold;white-space:nowrap;width:100%;margin-top:0.2em;}.text.__jsx-style-dynamic-selector:nth-child(2){width:auto;margin-top:0;}.box-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:100px;}.box-wrapper.multiple-chunks.__jsx-style-dynamic-selector{-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;}.chunk.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:5px;margin-bottom:4px;width:95px;white-space:nowrap;}.chunk.__jsx-style-dynamic-selector:first-of-type.chunk.__jsx-style-dynamic-selector:last-of-type{width:auto;margin-right:2px;}.checkin.__jsx-style-dynamic-selector,.rsvp.__jsx-style-dynamic-selector,.decline-box.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:120%;width:15px;height:15px;border-radius:2px;border:3px solid ${colors.enterGreen};margin:0 4px 0 0;vertical-align:middle;color:white;}.checkin.__jsx-style-dynamic-selector{background-color:${colors.enterGreen};}.decline-box.__jsx-style-dynamic-selector{background-color:${colors.enterError};border-color:${colors.enterError};}`));
 };
 
 function getText(args) {

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

@@ -0,0 +1,6 @@
+import { FunctionComponent, InputHTMLAttributes } from 'react';
+declare type Props = InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+};
+export declare const Input: FunctionComponent<Props>;
+export {};

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

@@ -0,0 +1,22 @@
+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); }
+
+import React from 'react';
+import { theme } from '../../lib';
+import { Label } from './label';
+export const Input = ({
+  label,
+  ...props
+}) => {
+  const id = props.id ?? label;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
+    htmlFor: id
+  }, label), /*#__PURE__*/React.createElement("input", _extends({}, props, {
+    id: id,
+    className: _JSXStyle.dynamic([["3631038054", [theme.fonts.primary, theme.colors.enterDarkGrey, theme.colors.enterMediumGrey, theme.colors.enterRed]]]) + " " + (props && props.className != null && props.className || "")
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3631038054",
+    dynamic: [theme.fonts.primary, theme.colors.enterDarkGrey, theme.colors.enterMediumGrey, theme.colors.enterRed]
+  }, `input.__jsx-style-dynamic-selector{font-family:${theme.fonts.primary};font-size:1.1em;display:block;width:100%;padding:0.2em 0;margin-bottom:1.1em;border:none;outline:none;background-color:transparent;color:${theme.colors.enterDarkGrey};border-bottom:1px solid ${theme.colors.enterMediumGrey};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};}`));
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+}>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+}>>;
+export declare const NumberInput: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+}>>;
+export declare const WithValue: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+}>>;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Input } from './input';
+export default {
+  title: 'Form Elements/Input',
+  component: Input
+};
+
+const Template = args => /*#__PURE__*/React.createElement(Input, args);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  type: 'text',
+  label: 'Text input',
+  placeholder: 'Enter text here',
+  value: '',
+  onClick: () => undefined
+};
+export const NumberInput = Template.bind({});
+NumberInput.args = {
+  type: 'number',
+  label: 'Number input',
+  placeholder: 'Enter number here',
+  value: '',
+  onClick: () => undefined
+};
+export const WithValue = Template.bind({});
+WithValue.args = {
+  type: 'text',
+  label: 'Text input',
+  placeholder: 'Enter text here',
+  value: 'Text value',
+  onClick: () => undefined
+};

package/dist/ui/form-elements/label.d.ts

@@ -0,0 +1,4 @@
+import React, { LabelHTMLAttributes } from 'react';
+declare type Props = LabelHTMLAttributes<HTMLLabelElement>;
+export declare const Label: React.FunctionComponent<Props>;
+export {};

package/dist/ui/form-elements/label.js

@@ -0,0 +1,14 @@
+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); }
+
+import React from 'react';
+import { theme } from '../../lib';
+export const Label = props => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2896178063", [theme.fonts.secondary, theme.colors.enterDarkGrey]]]) + " " + (props && props.className != null && props.className || "")
+  }), props.children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2896178063",
+    dynamic: [theme.fonts.secondary, theme.colors.enterDarkGrey]
+  }, `label.__jsx-style-dynamic-selector{font-family:${theme.fonts.secondary};font-weight:400;font-size:0.9em;color:${theme.colors.enterDarkGrey};-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;margin-bottom:0.6em;}`));
+};

package/dist/ui/form-elements/label.stories.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FunctionComponent<React.LabelHTMLAttributes<HTMLLabelElement>>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FunctionComponent<React.LabelHTMLAttributes<HTMLLabelElement>>>;

package/dist/ui/form-elements/label.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Label } from './label';
+export default {
+  title: 'Form Elements/Label',
+  component: Label
+};
+
+const Template = args => /*#__PURE__*/React.createElement(Label, args);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  children: 'Label text'
+};

package/dist/ui/index.d.ts

@@ -1,3 +1,5 @@
+export { Input } from './form-elements/input';
+export { Label } from './form-elements/label';
 export { Button } from './button';
 export { CheckinCountIndicator } from './checkin-count-indicator';
 export { CompanionInfo } from './companion-info';

package/dist/ui/index.js

@@ -1,3 +1,5 @@
+export { Input } from './form-elements/input';
+export { Label } from './form-elements/label';
 export { Button } from './button';
 export { CheckinCountIndicator } from './checkin-count-indicator';
 export { CompanionInfo } from './companion-info';

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

@@ -0,0 +1,9 @@
+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;
+}>>;

package/dist/ui/tag.stories.js

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

package/package.json

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