guestbell-forms 3.0.38 → 3.0.40

package/src/stories/Schedule.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Schedule from './Schedule';
+
+const meta = {
+  title: 'Example/Schedule',
+  component: Schedule,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+  },
+} satisfies Meta<typeof Schedule>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/Schedule.tsx

@@ -0,0 +1,73 @@
+import moment, { duration, Moment } from 'moment';
+import * as React from 'react';
+import { BookingCalendar, BookingCalendarItemT } from '../lib';
+import { itemsOverlap } from '../lib/components/bookingCalendar/utils';
+
+function randomIntFromInterval(min: number, max: number) {
+  // min and max included
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+const generateBookingItemsBetweenDates = (
+  from: Moment,
+  till: Moment,
+  count = 50
+) => {
+  const width = till.valueOf() - from.valueOf();
+  const startMs = from.valueOf();
+  return new Array(count).fill(0).map(() => {
+    const _from = randomIntFromInterval(0, till.valueOf() - startMs) + startMs;
+    const _width = randomIntFromInterval(width / 100, width / 50);
+    return {
+      from: moment(_from),
+      till: moment(_from).add(_width, 'ms'),
+      laneKey:
+        randomIntFromInterval(1, 3) === 1
+          ? undefined
+          : randomIntFromInterval(1, 3),
+    } as BookingCalendarItemT;
+  });
+};
+
+export const Schedule = () => {
+  const [{ from, till }, setRange] = React.useState({
+    from: moment().startOf('day').subtract(0, 'day'),
+    till: moment().startOf('day').add(7, 'days'),
+  });
+
+  const bookings = React.useMemo(
+    () =>
+      generateBookingItemsBetweenDates(
+        from.clone().subtract(10, 'day'),
+        till.clone().add(10, 'day')
+      ),
+    []
+  );
+  const items = React.useMemo(
+    () => bookings.filter((b) => itemsOverlap(b, { from, till })),
+    [from, till, bookings]
+  );
+  return (
+    <div className="container">
+      <BookingCalendar
+        bookings={items}
+        from={from}
+        till={till}
+        step={duration(1, 'day')}
+        onRangeChange={setRange}
+        // lanesCount={3}
+        lanesSource={new Array(3).fill(0).map((_, index) => ({
+          laneKey: index,
+          data: { data: 'test' },
+          rowClassName: 'test',
+        }))}
+        zoomLevels={[
+          { step: duration(1, 'day'), label: 'Day' },
+          { step: duration(1, 'week'), label: 'Week' },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default Schedule;

package/src/stories/ValidationPage.tsx

@@ -0,0 +1,417 @@
+import * as React from 'react';
+import {
+  Form,
+  Select,
+  Submit,
+  Checkbox,
+  Radio,
+  RadioContainer,
+  MoneyWithCurrency,
+  OpeningHoursDayObj,
+  OpeningHoursSpecialDayObj,
+  InputHeader,
+  Button,
+  ButtonTypes,
+  Tags,
+  Tag,
+  SelectValue,
+  ButtonProps,
+  FormValidationSummary,
+  ValidatorTypes,
+} from '../lib';
+
+export interface TestProps {}
+
+export interface TestState {
+  name: string;
+  gender: 'M' | 'F' | '';
+  email: string;
+  age: string;
+  min1: string;
+  checkbox1: boolean;
+  checkbox2: boolean;
+  validateFormSubmit: boolean;
+  food: string;
+  drink: string;
+  touchOn: 'blur' | 'focus';
+  submitDisablesInputs: boolean;
+  simulateUnmount: boolean;
+  prices1: MoneyWithCurrency[];
+  prices2: MoneyWithCurrency[];
+  time1: Date;
+  time2: Date;
+  openingHours: OpeningHoursDayObj;
+  openingHoursWeek: OpeningHoursDayObj[];
+  openingHoursWeekDay: OpeningHoursDayObj;
+  openingHoursSpecial: OpeningHoursSpecialDayObj[];
+  website: string;
+  tags: Tag[];
+  selectedValues: SelectValue[];
+  multipleValues: SelectValue[];
+  multipleReadonly: boolean;
+  textAreaText: string;
+}
+
+export class AgeValidator {
+  public static instance = new AgeValidator();
+  public Validate(
+    value: string,
+    isRequired: boolean,
+    addError: (error: string) => void
+  ): boolean {
+    let num = Number(value);
+    if (!isNaN(num)) {
+      if (num <= 0) {
+        addError('Not born yet?');
+        return false;
+      }
+      if (num > 122) {
+        addError('Older than Jeanne Calment? Really?');
+        return false;
+      }
+      return true;
+    } else {
+      addError('Invalid age');
+    }
+    return false;
+  }
+}
+
+const tagsValidators: ValidatorTypes[] = ['email'];
+
+const types: ButtonTypes[] = [
+  'primary',
+  'warning',
+  'error',
+  'info',
+  'success',
+  'gray',
+  'white',
+  'none',
+];
+const ButtonsShowcase: React.FC<ButtonProps> = (props) => {
+  return (
+    <div
+      className="px-2"
+      style={{
+        backgroundColor: 'rgb(248, 247, 247)',
+        display: 'flex',
+        flexWrap: 'wrap',
+      }}
+    >
+      {types.map((item, index) => (
+        <Button key={index} type={item} {...props}>
+          {item}
+        </Button>
+      ))}
+    </div>
+  );
+};
+
+ButtonsShowcase.defaultProps = {
+  className: 'my-2 mr-2',
+};
+
+export class Test extends React.PureComponent<TestProps, TestState> {
+  private form: Form;
+
+  private initialState: TestState = {
+    gender: '',
+    name: '',
+    email: '',
+    age: '',
+    min1: '',
+    checkbox1: true,
+    checkbox2: false,
+    validateFormSubmit: true,
+    food: 'breakfast',
+    drink: 'breakfast',
+    touchOn: 'focus',
+    submitDisablesInputs: true,
+    simulateUnmount: false,
+    prices1: [],
+    prices2: [],
+    time1: new Date(),
+    time2: new Date(),
+    openingHours: {
+      times: [],
+    },
+    openingHoursWeek: [],
+    openingHoursWeekDay: {
+      times: [],
+    },
+    openingHoursSpecial: [],
+    website: '',
+    tags: [],
+    selectedValues: [],
+    multipleValues: [
+      { value: 'One option' },
+      { value: 'Second option' },
+      { value: 'Third option' },
+      { value: 'one more option' },
+      { value: 'rly long last option' },
+    ],
+    multipleReadonly: false,
+    textAreaText: '',
+  };
+
+  constructor(props: TestProps) {
+    super(props);
+    this.state = this.initialState;
+    this.handleGenderChange = this.handleGenderChange.bind(this);
+    this.submitForm = this.submitForm.bind(this);
+    this.dynamicSubmitSuccessForm = this.dynamicSubmitSuccessForm.bind(this);
+    this.dynamicSubmitErrorForm = this.dynamicSubmitErrorForm.bind(this);
+  }
+
+  public render() {
+    let time2Max = new Date();
+    time2Max.setHours(time2Max.getHours() + 1);
+    time2Max.setMinutes(time2Max.getMinutes() + 5);
+
+    let time2Min = new Date();
+    time2Min.setHours(time2Min.getHours() - 1);
+    time2Min.setMinutes(time2Min.getMinutes() - 5);
+
+    return (
+      <div className="container">
+        <div className="row  mt-5">
+          <div className="col-lg-12">
+            <div className="card">
+              <div className="card-block p-0 input__form">
+                <Checkbox
+                  label="Turn form validation on or off"
+                  onChecked={this.formValidationToggle}
+                  checked={this.state.validateFormSubmit}
+                  title="Validate form submit"
+                />
+                <RadioContainer title="Touch on">
+                  <Radio
+                    name="touch"
+                    value="blur"
+                    label="Blur"
+                    result={this.state.touchOn}
+                    onChecked={this.touchOnChecked}
+                  />
+                  <Radio
+                    name="touch"
+                    value="focus"
+                    label="Focus"
+                    result={this.state.touchOn}
+                    onChecked={this.touchOnChecked}
+                  />
+                </RadioContainer>
+                <Checkbox
+                  label="Disables inputs"
+                  onChecked={this.disablesInputsChecked}
+                  checked={this.state.submitDisablesInputs}
+                  title="Submit"
+                />
+                <Checkbox
+                  label="Unmount"
+                  onChecked={this.simulateUnmountChecked}
+                  checked={this.state.simulateUnmount}
+                  title="Simulate"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row my-5">
+          <div className="col-lg-12">
+            <div className={'card '}>
+              <div className="card-block p-0">
+                {!this.state.simulateUnmount && (
+                  <Form
+                    noValidate={true}
+                    ref={this.formRef}
+                    onSubmit={this.submitForm}
+                    extraComponents={{
+                      'extra-check': {
+                        validation: {
+                          isValid: this.state.checkbox2,
+                          errors: this.state.checkbox2
+                            ? []
+                            : ['Please check custom context'],
+                          name: 'Extra context',
+                        },
+                        componentApi: undefined,
+                      },
+                    }}
+                  >
+                    <InputHeader
+                      icon={<i className="material-icons md-48">edit</i>}
+                      title={'Example form'}
+                      subTitle={
+                        "And this is subtitle. There's also icon on the left"
+                      }
+                      showExpandAll={true}
+                      type="hero"
+                      collapsible={true}
+                      collapsedDefault={false}
+                      mainButton={
+                        <Submit
+                          type="primary"
+                          onClick={this.submitForm}
+                          validateForm={this.state.validateFormSubmit}
+                        >
+                          Submit
+                        </Submit>
+                      }
+                      extraButtons={[
+                        <Button key={1} dropdown={true} onClick={this.touchAll}>
+                          Touch all
+                        </Button>,
+                        <Button
+                          key={2}
+                          dropdown={true}
+                          onClick={this.unTouchAll}
+                        >
+                          Un-touch all
+                        </Button>,
+                      ]}
+                    >
+                      <InputHeader
+                        className={''}
+                        title={'Multiple'}
+                        collapsible={true}
+                        collapsedDefault={false}
+                      >
+                        {true && (
+                          <Tags
+                            title="Tags only email"
+                            required={true}
+                            validationName="Tags only email"
+                            label="With label"
+                            maxTags={1}
+                            allowNew={true}
+                            readOnly={this.state.multipleReadonly}
+                            tags={this.state.tags}
+                            onTagsChanged={this.tagsChanged}
+                            suggestionsEmptyComponent={null}
+                            validators={tagsValidators}
+                            existingTags={[
+                              { id: 1, name: 'petokottas@gmail.com' },
+                            ]}
+                            valueNotAddedError={'Email not added'}
+                          />
+                        )}
+                        {false && (
+                          <Select
+                            required={true}
+                            label="One or more"
+                            title="Multiselect"
+                            validationName="Multiselect"
+                            multiple={true}
+                            defaultEmpty={true}
+                            readOnly={this.state.multipleReadonly}
+                            selectedValues={this.state.selectedValues}
+                            values={this.state.multipleValues}
+                            onSelectedValuesChange={this.selectedValuesChanged}
+                          />
+                        )}
+                        <Checkbox
+                          required={true}
+                          label="Smart"
+                          onChecked={this.checkbox1Checked}
+                          checked={this.state.checkbox1}
+                          title="Dress code"
+                        />
+                        <Checkbox
+                          label="Foreign context check"
+                          onChecked={this.checkbox2Checked}
+                          checked={this.state.checkbox2}
+                          title="Custom context"
+                        />
+                      </InputHeader>
+                      <FormValidationSummary />
+                    </InputHeader>
+                  </Form>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private checkbox1Checked = () =>
+    this.setState({ checkbox1: !this.state.checkbox1 });
+
+  private checkbox2Checked = () =>
+    this.setState({ checkbox2: !this.state.checkbox2 });
+
+  private formRef = (el: Form) => (this.form = el);
+
+  private selectedValuesChanged = (selectedValues: SelectValue[]) =>
+    this.setState({ selectedValues });
+
+  private tagsChanged = (tags: Tag[]) => this.setState({ tags });
+
+  private unTouchAll = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    this.form.unTouchAll();
+  };
+
+  private simulateUnmountChecked = () =>
+    this.setState({ simulateUnmount: !this.state.simulateUnmount });
+
+  private disablesInputsChecked = () =>
+    this.setState({ submitDisablesInputs: !this.state.submitDisablesInputs });
+
+  private touchOnChecked = (value: 'blur' | 'focus') =>
+    this.setState({ touchOn: value });
+
+  private formValidationToggle = () =>
+    this.setState({ validateFormSubmit: !this.state.validateFormSubmit });
+
+  private touchAll = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    this.form.touchAll();
+  };
+
+  private handleGenderChange(e: React.ChangeEvent<HTMLSelectElement>) {
+    const val = e.target.value;
+    if (val === 'M' || val === 'F') {
+      this.setState({ gender: val });
+    }
+  }
+
+  private submitForm(e?: React.MouseEvent<HTMLButtonElement>) {
+    e && e.preventDefault();
+    this.setState(this.initialState);
+  }
+
+  private dynamicSubmitSuccessForm(
+    e: React.MouseEvent<HTMLButtonElement>,
+    submitting: () => void,
+    error: () => void,
+    success: () => void,
+    reset: () => void
+  ) {
+    e.preventDefault();
+    submitting();
+    setTimeout(() => {
+      error();
+      setTimeout(() => reset(), 3000);
+    }, 1000);
+  }
+
+  private dynamicSubmitErrorForm(
+    e: React.MouseEvent<HTMLButtonElement>,
+    submitting: () => void,
+    error: () => void,
+    success: () => void,
+    reset: () => void
+  ) {
+    e.preventDefault();
+    submitting();
+    setTimeout(() => {
+      success();
+      setTimeout(() => reset(), 3000);
+    }, 1000);
+  }
+}
+
+export default Test;

package/tsconfig.json

@@ -1,11 +1,12 @@
 {
   "compilerOptions": {
-    "rootDirs": ["src/lib", "src/demo"],
-    "outDir": "build",
+    "rootDir": "./src/lib",
+    "outDir": "./dist",
+    "declarationDir": "./dist/dts",
     "baseUrl": ".",
     "moduleResolution": "node",
-    "target": "es5",
-    "module": "esnext",
+    "target": "es2016",
+    "module": "es6",
     "jsx": "react",
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
@@ -15,23 +16,9 @@
     "noUnusedLocals": true,
     "declaration": true,
     "lib": ["es7", "dom"],
-    "types": ["webpack-env", "node"],
-    "paths": {
-      "reusables/*": ["./ClientApp/components/reusables/*"],
-      "structure/*": ["./ClientApp/components/structure/*"],
-      "pages/*": ["./ClientApp/components/pages/*"],
-      "reduxStores/*": ["./ClientApp/redux/*"],
-      "styleVars/*": ["./ClientApp/scss/variables/*"],
-      "types/*": ["./ClientApp/types/*"],
-      "assets/*": ["./ClientApp/assets/*"],
-      // Fix "Duplicate identifier" errors caused by multiple dependencies fetching their own copies of type definitions.
-      // We tell TypeScript which type definitions module to treat as the canonical one (instead of combining all of them).
-      "history": ["./node_modules/@types/history/index"],
-      "redux": ["./node_modules/@types/redux/index"],
-      "react-day-picker": [
-        "./src/demo/ClientApp/declartions/react-day-picker.d.ts"
-      ]
-    }
+    "types": ["node"],
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
   },
-  "exclude": ["bin", "node_modules"]
+  "include": ["src/**/*", ".storybook/theme.ts"]
 }

package/typedoc.json

@@ -0,0 +1,6 @@
+{
+  // Comments are supported, like tsconfig.json
+  "entryPoints": ["src/lib/index.ts"],
+  "out": "api-docs",
+  "plugin": ["typedoc-plugin-markdown"]
+}

package/webpack/webpack.config.base.js

@@ -0,0 +1,139 @@
+const path = require('path');
+const webpack = require('webpack');
+var isLocalBuild =
+  process.env &&
+  process.env.NODE_ENV &&
+  process.env.NODE_ENV.trim().toString() == 'local';
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  target: 'web',
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+  entry: {
+    'guestbell-forms': './src/lib/index.ts',
+    'guestbell-forms': './src/lib/scss/index.scss',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(j|t)sx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+            babelrc: false,
+            presets: [
+              [
+                '@babel/preset-env',
+                { targets: { browsers: 'last 2 versions' } }, // or whatever your project requires
+              ],
+              '@babel/preset-typescript',
+              '@babel/preset-react',
+            ],
+            plugins: [
+              // plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
+              // ["@babel/plugin-proposal-decorators", { legacy: true }],
+              ['@babel/plugin-proposal-class-properties', { loose: true }],
+              'react-hot-loader/babel',
+            ],
+          },
+        },
+      },
+      /*{
+          test: /\.tsx?$/,
+          include: /src/,
+          use: {
+              loader: 'ts-loader',//'awesome-typescript-loader?silent=true',
+              options: {
+                  // disable type checker - we will use it in fork plugin
+                  transpileOnly: true,
+                  experimentalWatchApi: true,
+              }
+          }
+      },*/
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          isLocalBuild
+            ? {
+                loader: 'style-loader',
+              }
+            : {
+                loader: MiniCssExtractPlugin.loader,
+              },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: true,
+              postcssOptions: {
+                plugins: (loader) => [require('autoprefixer')()],
+              },
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(svg)$/,
+        use: {
+          loader: 'svg-react-loader',
+          options: {
+            query: {
+              props: {
+                className: 'material-design-icon',
+              },
+            },
+          },
+        },
+        include: /material-design-icons/,
+      },
+      {
+        test: /\.(png|jpg|jpeg|gif|svg)$/,
+        use: 'url-loader?limit=8192&name=images/[name]-[hash].[ext]',
+        exclude: /material-design-icons/,
+      },
+    ],
+  },
+  output: {
+    path: path.join(__dirname, '../build/dist'),
+    filename: '[name].js',
+    publicPath: '../build/', // Webpack dev middleware, if enabled, handles requests for this URL prefix
+    libraryTarget: 'umd',
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+    // new ForkTsCheckerWebpackPlugin(),
+    //new DtsBundlePlugin()
+  ],
+};
+
+function DtsBundlePlugin() {}
+DtsBundlePlugin.prototype.apply = function (compiler) {
+  compiler.plugin('done', function () {
+    var dts = require('dts-bundle');
+
+    dts.bundle({
+      name: 'guestbell-forms',
+      main: 'src/lib/index.d.ts',
+      out: '../index.d.ts',
+      //removeSource: true,
+      outputAsModuleFolder: true, // to use npm in-package typings
+    });
+  });
+};