@kbss-cvut/s-forms 0.4.1 → 0.4.2-alpha-8c711c4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbss-cvut/s-forms",
-  "version": "0.4.1",
+  "version": "0.4.2-alpha-8c711c4.0",
   "description": "Semantic forms generator and processor",
   "keywords": [
     "react",
@@ -36,6 +36,7 @@
   },
   "type": "module",
   "source": "src/s-forms.js",
+  "main": "dist/s-forms.js",
   "exports": "./dist/s-forms.modern.js",
   "module": "./dist/s-forms.js",
   "unpkg": "./dist/s-forms.umd.js",
@@ -71,7 +72,6 @@
     "react-bootstrap": "1.0.1",
     "react-dom": ">= 17.0.2"
   },
-  "main": "dist/s-forms.js",
   "devDependencies": {
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
@@ -94,6 +94,7 @@
     "query-string": "^6.13.5",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
+    "standard-version": "^9.3.2",
     "style-loader": "^1.2.1",
     "typescript": "^4.5.5",
     "watchify": "^3.11.1",
@@ -105,9 +106,20 @@
     "build": "microbundle --jsx React.createElement",
     "build-storybook": "build-storybook",
     "chromatic": "npx chromatic",
+    "release:patch": "npm test && standard-version --release-as patch && npm publish",
+    "release:major": "npm test && standard-version --release-as major && npm publish",
+    "release:minor": "npm test && standard-version --release-as minor && npm publish",
     "prettier:check": "npx prettier --check .",
     "prettier:format": "npx prettier --write .",
     "prepare": "husky install"
   },
+  "standard-version": {
+    "releaseCommitMessageFormat": "[{{currentTag}}] Bump version"
+  },
+  "files": [
+    "dist/",
+    "css/",
+    "types/"
+  ],
   "types": "./dist/s-forms.d.ts"
 }

package/.babelrc

@@ -1,22 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-typescript",
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "useBuiltIns": "usage",
-        "corejs": {
-          "version": 3,
-          "proposals": true
-        }
-      }
-    ],
-    "@babel/preset-react"
-  ],
-  "env": {
-    "test": {
-      "presets": ["@babel/preset-env", "@babel/preset-react"]
-    }
-  }
-}

package/.github/workflows/check-format.yml

@@ -1,21 +0,0 @@
-name: Check code format
-
-on:
-  push:
-    branches:
-      - "*"
-
-jobs:
-  check-format:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org
-      - run: npm ci
-      - run: npm run prettier:check

package/.github/workflows/chromatic.yml

@@ -1,24 +0,0 @@
-# Workflow name
-name: "Chromatic"
-
-# Event for the workflow
-on: push
-
-# List of jobs
-jobs:
-  chromatic-deployment:
-    # Operating System
-    runs-on: ubuntu-latest
-    # Job steps
-    steps:
-      - uses: actions/checkout@v1
-      - name: Install dependencies
-        run: npm install
-        # 👇 Adds Chromatic as a step in the workflow
-      - name: Publish to Chromatic
-        uses: chromaui/action@v1
-        # Chromatic GitHub Action options
-        with:
-          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npm run prettier:check

package/.prettierignore

@@ -1,4 +0,0 @@
-package.json
-package-lock.json
-dist
-README.md

package/.storybook/main.cjs

@@ -1,11 +0,0 @@
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@luigiminardim/storybook-addon-globals-controls",
-    "@storybook/addon-a11y",
-  ],
-  framework: "@storybook/react",
-};

package/.storybook/preview.js

@@ -1,103 +0,0 @@
-import Constants from "../src/constants/Constants";
-import { addDecorator } from "@storybook/react";
-import IntlContextProvider from "../src/contexts/IntlContextProvider";
-import { FormGenContextProvider } from "../src/contexts/FormGenContext";
-import { ConfigurationContextProvider } from "../src/contexts/ConfigurationContext";
-
-import "react-datepicker/dist/react-datepicker.css";
-import "bootstrap/dist/css/bootstrap.min.css";
-import "../src/styles/s-forms.css";
-import possibleValues from "../src/stories/assets/possibleValues.json";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
-export const globalTypes = {
-  iconBehavior: {
-    name: "Icon behavior",
-    description: "Set the behavior for the icons",
-    defaultValue: Constants.ICON_BEHAVIOR.ON_HOVER,
-    options: [
-      Constants.ICON_BEHAVIOR.ON_HOVER,
-      Constants.ICON_BEHAVIOR.ENABLE,
-      Constants.ICON_BEHAVIOR.DISABLE,
-    ],
-    control: { type: "radio" },
-  },
-  locale: {
-    name: "Locale",
-    description: "Internationalization locale",
-    defaultValue: "en",
-    options: ["en", "cs"],
-    control: { type: "radio" },
-  },
-  debugMode: {
-    name: "Debug Mode",
-    description: "Show irrelevant questions",
-    defaultValue: false,
-    control: { type: "boolean" },
-  },
-};
-
-const options = {
-  i18n: {
-    "wizard.next": "Next",
-    "wizard.previous": "Previous",
-    "section.expand": "Expand",
-    "section.collapse": "Collapse",
-  },
-  intl: {
-    locale: "en",
-  },
-  modalView: false,
-  horizontalWizardNav: false,
-  wizardStepButtons: true,
-  enableForwardSkip: true,
-  startingStep: 1,
-  debugMode: false,
-  users: [
-    { id: "http://fel.cvut.cz/people/max-chopart", label: "Max Chopart" },
-    {
-      id: "http://fel.cvut.cz/people/miroslav-blasko",
-      label: "Miroslav Blasko",
-    },
-  ],
-  currentUser: "http://fel.cvut.cz/people/max-chopart",
-  icons: [
-    {
-      id: Constants.ICONS.QUESTION_HELP,
-      behavior: Constants.ICON_BEHAVIOR.ENABLE,
-    },
-    {
-      id: Constants.ICONS.QUESTION_LINK,
-      behavior: Constants.ICON_BEHAVIOR.ENABLE,
-    },
-    {
-      id: Constants.ICONS.QUESTION_COMMENTS,
-      behavior: Constants.ICON_BEHAVIOR.ENABLE,
-    },
-  ],
-};
-
-const fetchTypeAheadValues = () => {
-  return new Promise((resolve) =>
-    setTimeout(() => resolve(possibleValues), 1500)
-  );
-};
-
-addDecorator((story) => (
-  <ConfigurationContextProvider options={options}>
-    <FormGenContextProvider fetchTypeAheadValues={fetchTypeAheadValues}>
-      <IntlContextProvider locale={globalTypes.locale.defaultValue}>
-        {story()}
-      </IntlContextProvider>
-    </FormGenContextProvider>
-  </ConfigurationContextProvider>
-));

package/dist/stories/MediaContent.stories.d.ts

@@ -1,5 +0,0 @@
-import MediaContent from "../components/MediaContent";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-declare const _default: ComponentMeta<typeof MediaContent>;
-export default _default;
-export declare const Default: ComponentStory<typeof MediaContent>;

package/jest.config.cjs

@@ -1,20 +0,0 @@
-module.exports = {
-  roots: ["<rootDir>"],
-  moduleFileExtensions: ["js", "jsx", "json", "ts", "tsx"],
-  setupFiles: ["<rootDir>/test/setup.js"],
-  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$"],
-  testEnvironment: "jsdom",
-  testURL: "http://localhost",
-  transform: {
-    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
-  },
-  reporters: ["default"],
-  moduleNameMapper: {
-    "\\.(css)$": "<rootDir>/test/__mocks__/styleMock.js",
-  },
-  globals: {
-    "s-forms": {
-      tsconfig: "tsconfig.spec.json",
-    },
-  },
-};

package/test/__mocks__/styleMock.js

@@ -1 +0,0 @@
-module.exports = {};

package/test/__tests__/Answer.test.js

@@ -1,399 +0,0 @@
-import React from "react";
-import { format } from "date-fns";
-import DatePicker from "react-datepicker";
-import Select from "react-select";
-
-import * as Generator from "../environment/Generator";
-import Answer from "../../src/components/Answer";
-import Constants from "../../src/constants/Constants";
-import TypeaheadAnswer from "../../src/components/answer/TypeaheadAnswer";
-import MaskedInput from "../../src/components/MaskedInput";
-import { FormGenContext } from "../../src/contexts/FormGenContext";
-import { ConfigurationContext } from "../../src/contexts/ConfigurationContext";
-import DefaultInput from "../../src/components/DefaultInput";
-
-describe("Answer component", () => {
-  let question,
-    onChange,
-    answer,
-    getOptions,
-    loadFormOptions,
-    options,
-    inputComponent,
-    componentsOptions;
-
-  beforeEach(() => {
-    question = {
-      "@id": Generator.getRandomUri(),
-    };
-    question[Constants.LAYOUT_CLASS] = [];
-    question[Constants.RDFS_LABEL] = {
-      "@language": "en",
-      "@value": "1 - Aerodrome General",
-    };
-    question[Constants.RDFS_COMMENT] = {
-      "@language": "en",
-      "@value":
-        "The identification of the aerodrome/helicopter landing area by name, location and status.",
-    };
-    onChange = jest.fn();
-    options = {
-      intl: {
-        locale: "en",
-      },
-    };
-    componentsOptions = {
-      readOnly: false,
-      dateTimeAnswer: {
-        dateFormat: "yyyy-MM-dd",
-        timeFormat: "HH:mm:ss",
-        dateTimeFormat: "yyyy-MM-dd HH:mm:ss",
-      },
-    };
-    inputComponent = DefaultInput;
-    getOptions = jest.fn(() => []);
-    loadFormOptions = jest.fn();
-  });
-
-  it("renders a Typeahead when layout class is typeahead", () => {
-    question[Constants.LAYOUT_CLASS].push(Constants.LAYOUT.QUESTION_TYPEAHEAD);
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent,
-          options,
-        }}
-      >
-        <FormGenContext.Provider value={{ getOptions, loadFormOptions }}>
-          <Answer answer={{}} question={question} onChange={onChange} />
-        </FormGenContext.Provider>
-      </ConfigurationContext.Provider>
-    );
-
-    const typeahead = component.find(Select);
-    expect(typeahead).not.toBeNull();
-  });
-
-  it("maps answer object value to string label for the typeahead component", () => {
-    const value = Generator.getRandomUri();
-    const valueLabel = "masterchief";
-    const typeAheadOptions = Generator.generateTypeaheadOptions(
-      value,
-      valueLabel
-    );
-    answer = answerWithCodeValue(value);
-    getOptions = jest.fn(() => typeAheadOptions);
-    question[Constants.HAS_ANSWER] = [answer];
-    question[Constants.LAYOUT_CLASS].push(Constants.LAYOUT.QUESTION_TYPEAHEAD);
-    question[Constants.HAS_OPTIONS_QUERY] = "SELECT * WHERE {?x ?y ?z. }";
-
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent,
-          options,
-        }}
-      >
-        <FormGenContext.Provider
-          value={{ getOptions, loadFormOptions: () => typeAheadOptions }}
-        >
-          <Answer answer={answer} question={question} onChange={onChange} />
-        </FormGenContext.Provider>
-      </ConfigurationContext.Provider>
-    );
-
-    waitForComponentToPaint(component);
-    const typeahead = component.find(Answer).find(TypeaheadAnswer).find(Select);
-
-    expect(typeahead).not.toBeNull();
-
-    expect(typeahead.state("value")[0].name).toEqual(valueLabel);
-  });
-
-  it("loads typeahead options when layout class is typeahead and no possible values are specified", () => {
-    question[Constants.LAYOUT_CLASS].push(Constants.LAYOUT.QUESTION_TYPEAHEAD);
-    const query = "SELECT * WHERE { ?x ?y ?z .}";
-    question[Constants.HAS_OPTIONS_QUERY] = query;
-
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent,
-          options,
-        }}
-      >
-        <FormGenContext.Provider value={{ getOptions, loadFormOptions }}>
-          <Answer answer={{}} question={question} onChange={onChange} />
-        </FormGenContext.Provider>
-      </ConfigurationContext.Provider>
-    );
-
-    waitForComponentToPaint(component);
-
-    expect(loadFormOptions).toHaveBeenCalled();
-    expect(loadFormOptions.mock.calls[0][1]).toEqual(query);
-  });
-
-  function answerWithCodeValue(value) {
-    const res = {
-      "@id": Generator.getRandomUri(),
-    };
-    res[Constants.HAS_OBJECT_VALUE] = {
-      "@id": value,
-    };
-    return res;
-  }
-
-  it("shows input with text value of the answer when no layout class is specified", () => {
-    const value = "masterchief";
-    answer = answerWithTextValue(value);
-    question[Constants.HAS_ANSWER] = [answer];
-
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent,
-          options,
-        }}
-      >
-        <Answer answer={answer} question={question} onChange={onChange} />s
-      </ConfigurationContext.Provider>
-    );
-    const input = component.find("input");
-
-    expect(input).not.toBeNull();
-    expect(input.props().type).toEqual("text");
-    expect(input.props().value).toEqual(value);
-  });
-
-  function answerWithTextValue(value) {
-    const res = {
-      "@id": Generator.getRandomUri(),
-    };
-    res[Constants.HAS_DATA_VALUE] = {
-      "@language": "en",
-      "@value": value,
-    };
-    return res;
-  }
-
-  it("renders date picker with answer value when date layout class is specified", () => {
-    const date = new Date("2000-01-01");
-    const value = format(date, "yyyy-MM-dd HH:mm:ss");
-
-    answer = answerWithTextValue(value);
-    question[Constants.HAS_ANSWER] = [answer];
-    question[Constants.LAYOUT_CLASS].push(Constants.LAYOUT.DATE);
-
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent,
-          options,
-        }}
-      >
-        <Answer answer={answer} question={question} onChange={onChange} />
-      </ConfigurationContext.Provider>
-    );
-    const picker = component.find(DatePicker);
-
-    expect(picker).not.toBeNull();
-    expect(picker.props().showTimeSelect).toEqual(false);
-    expect(picker.props().showTimeSelectOnly).toEqual(false);
-    expect(picker.props().selected).toEqual(date);
-  });
-
-  it("renders time picker with answer value when time layout class is specified", () => {
-    const date = new Date();
-    const value = format(date, "HH:mm:ss");
-
-    answer = answerWithTextValue(value);
-    question[Constants.HAS_ANSWER] = [answer];
-    question[Constants.LAYOUT_CLASS].push(Constants.LAYOUT.TIME);
-
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent,
-          options,
-        }}
-      >
-        <Answer answer={answer} question={question} onChange={onChange} />
-      </ConfigurationContext.Provider>
-    );
-    const picker = component.find(DatePicker);
-
-    expect(picker).not.toBeNull();
-    expect(picker.props().showTimeSelect).toEqual(true);
-    expect(picker.props().showTimeSelectOnly).toEqual(true);
-    expect(picker.props().selected).toEqual(new Date(`0 ${value}`));
-  });
-
-  it("renders datetime picker with answer value when datetime layout class is specified", () => {
-    const date = new Date();
-    const value = format(date, "yyyy-MM-dd HH:mm:ss");
-    answer = answerWithTextValue(value);
-    question[Constants.HAS_ANSWER] = [answer];
-    question[Constants.LAYOUT_CLASS].push(Constants.LAYOUT.DATETIME);
-
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent,
-          options,
-        }}
-      >
-        <Answer answer={answer} question={question} onChange={onChange} />
-      </ConfigurationContext.Provider>
-    );
-    const picker = component.find(DatePicker);
-
-    expect(picker).not.toBeNull();
-    expect(picker.props().showTimeSelect).toEqual(true);
-    expect(picker.props().showTimeSelectOnly).toEqual(false);
-    expect(picker.props().selected).toEqual(new Date(value));
-  });
-
-  it("renders datetime picker with answer value when no layout class is specified and numeric answer value is used", () => {
-    const value = Number(new Date());
-    answer = {
-      "@id": Generator.getRandomUri(),
-    };
-    answer[Constants.HAS_DATA_VALUE] = value;
-    question[Constants.HAS_ANSWER] = [answer];
-    question[Constants.LAYOUT_CLASS].push(Constants.LAYOUT.DATETIME);
-
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent: { inputComponent },
-          options,
-        }}
-      >
-        <Answer answer={answer} question={question} onChange={onChange} />
-      </ConfigurationContext.Provider>
-    );
-    const picker = component.find(DatePicker);
-
-    expect(picker).not.toBeNull();
-    expect(picker.props().showTimeSelect).toEqual(true);
-    expect(picker.props().showTimeSelectOnly).toEqual(false);
-    expect(picker.props().selected).toEqual(new Date(value));
-  });
-
-  it("renders checkbox with answer value when checkbox layout class is specified", () => {
-    const answer = {
-      "@id": Generator.getRandomUri(),
-    };
-    answer[Constants.HAS_DATA_VALUE] = true;
-    question[Constants.HAS_ANSWER] = [answer];
-    question[Constants.LAYOUT_CLASS].push(Constants.LAYOUT.CHECKBOX);
-
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent,
-          options,
-        }}
-      >
-        <Answer answer={answer} question={question} onChange={onChange} />
-      </ConfigurationContext.Provider>
-    );
-    const input = component.find("input");
-
-    expect(input).toBeDefined();
-    expect(input.props().type).toEqual("checkbox");
-    expect(input.props().checked).toBeTruthy();
-  });
-
-  it("renders numeric input with answer value when number layout class is specified", () => {
-    const value = 117;
-    const answer = {
-      "@id": Generator.getRandomUri(),
-    };
-    answer[Constants.HAS_DATA_VALUE] = value;
-    question[Constants.HAS_ANSWER] = [answer];
-    question[Constants.HAS_DATATYPE] = Constants.XSD.INT;
-
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent,
-          options,
-        }}
-      >
-        <Answer answer={answer} question={question} onChange={onChange} />
-      </ConfigurationContext.Provider>
-    );
-    const input = component.find("input");
-
-    expect(input).toBeDefined();
-    expect(input.props().type).toEqual("number");
-    expect(input.props().value).toEqual(value);
-  });
-
-  it("renders textarea for answer with long value", () => {
-    let value = "";
-    for (let i = 0; i < Constants.INPUT_LENGTH_THRESHOLD + 1; i++) {
-      value += "a";
-    }
-    answer = answerWithTextValue(value);
-    answer[Constants.HAS_DATA_VALUE] = value;
-    question[Constants.HAS_ANSWER] = [answer];
-
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent,
-          options,
-        }}
-      >
-        <Answer answer={answer} question={question} onChange={onChange} />
-      </ConfigurationContext.Provider>
-    );
-    const input = component.find("textarea");
-
-    expect(input).toBeDefined();
-    expect(input.props().value).toEqual(value);
-  });
-
-  it("renders masked input for question with masked-input layout class", () => {
-    const value = "08/2016";
-    const mask = "11/1111";
-    const answer = {
-      "@id": Generator.getRandomUri(),
-    };
-    answer[Constants.HAS_DATA_VALUE] = value;
-    question[Constants.HAS_ANSWER] = [answer];
-    question[Constants.LAYOUT_CLASS].push(Constants.LAYOUT.MASKED_INPUT);
-    question[Constants.INPUT_MASK] = mask;
-
-    const component = mount(
-      <ConfigurationContext.Provider
-        value={{
-          componentsOptions,
-          inputComponent,
-          options,
-        }}
-      >
-        <Answer answer={answer} question={question} onChange={onChange} />
-      </ConfigurationContext.Provider>
-    );
-    const input = component.find(MaskedInput);
-
-    expect(input).toBeDefined();
-    expect(input.props().value).toEqual(value);
-    expect(input.props().mask).toEqual(mask);
-  });
-});