maltesa · lys-0243 · Jun 7, 2022 · Jun 7, 2022 · Jun 7, 2022 · Jun 8, 2022
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: yarn build
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -3,7 +3,7 @@ name: Publish
 on:
   push:
     tags:
-      - "v*"
+      - 'v*'
 
 jobs:
   publish:
@@ -12,10 +12,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 12
-      - run: npm install
-      - run: npm run build
-      - run: npm test
+          node-version: 14
+      - run: yarn install
+      - run: yarn build
+      - run: yarn test
       - uses: JS-DevTools/npm-publish@v1
         with:
           token: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/size.yml b/.github/workflows/size.yml
@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
diff --git a/.gitignore b/.gitignore
@@ -1,119 +1,7 @@
-
-# Logs
-logs
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
+.DS_Store
+node_modules
 .cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
 dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-.DS_Store
+.parcel-cache
+.idea/
diff --git a/.husky/.gitignore b/.husky/.gitignore
diff --git a/.husky/commit-msg b/.husky/commit-msg
diff --git a/.husky/common.sh b/.husky/common.sh
diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,45 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
+  //addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        cssLoaderOptions: {
+          // When you have splitted your css over multiple files
+          // and use @import('./other-styles.css')
+          importLoaders: 1,
+        },
+        postcssLoaderOptions: {
+          // When using postCSS 8
+          implementation: require('postcss'),
+        },
+      },
+    },
+  ],
+  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
+  typescript: {
+    check: true, // type-check stories during Storybook build
+  },
+  /* webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: {
+              plugins: [require('tailwindcss'), require('autoprefixer')],
+            },
+          },
+        },
+      ],
+      include: path.resolve(__dirname, '../'),
+    });
+    return config;
+  }, */
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,6 @@
+import '../tailwind.css';
+// https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
+export const parameters = {
+  // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
+  actions: { argTypesRegex: '^on.*' },
+};
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 snoopForms (snoopForms.com)
+Copyright (c) 2022 Matthias Nannt
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 React Library with form- & survey-elements for the snoopForms platform
 
-[![npm package](https://img.shields.io/badge/npm%20i-@snoopforms/react)](https://www.npmjs.com/package/@snoopforms/react) [![version number](https://img.shields.io/npm/v/@snoopforms/react?color=green&label=version)](https://github.com/snoopforms/snoopforms-react/releases) [![Actions Status](https://github.com/snoopForms/snoopforms-react/workflows/Test/badge.svg)](https://github.com/snoopForms/snoopforms-react/actions) [![License](https://img.shields.io/github/license/snoopforms/snoopforms-react)](https://github.com/snoopForms/snoopforms-react/blob/main/LICENSE)
+[![npm package](https://img.shields.io/badge/npm%20i-@snoopforms/react)](https://www.npmjs.com/package/@snoopforms/react) [![version number](https://img.shields.io/npm/v/@snoopforms/react?color=green&label=version)](https://github.com/snoopforms/react/releases) [![Actions Status](https://github.com/snoopForms/snoopforms-react/workflows/Test/badge.svg)](https://github.com/snoopForms/snoopforms-react/actions) [![License](https://img.shields.io/github/license/snoopforms/snoopforms-react)](https://github.com/snoopForms/snoopforms-react/blob/main/LICENSE)
 
 <br/>
 
@@ -14,26 +14,50 @@ React Library with form- & survey-elements for the snoopForms platform
 npm install @snoopforms/react
 ```
 
-## How to use
+## How to use it 🤓
 
-Use the SnoopForm components to build your form easily. Use the `SnoopForm` wrapper to make the connection to the SnoopForm Data-Platform. Use `SnoopPage` to tell the Form where you need an new page. The SnoopForms library will only show the current page to the user. That way you can build long, more complex forms or a Typeform-like form-view, where you change the page after every question.
-You can choose your `SnoopElements` from a wide range of pre-coded components, including text, email, checkboxes, radio-buttons, color-pickers, and many more.
+Use the SnoopForm components to build your form easily.
+
+- `SnoopForm:` Use the `SnoopForm` wrapper to make the connection to the SnoopForm Data-Platform.
+- `SnoopPage:` Use `SnoopPage` to tell the Form where you need an new page. The SnoopForms library will only show the current page to the user. That way you can build long, more complex forms or a Typeform-like form-view, where the page changes after every question.
+- `SnoopElement:` You can choose your `SnoopElement` from a wide range of pre-coded components, including text, email, checkboxes, radio-buttons, and many more.
+
+## Example
 
 ```jsx
-<SnoopForm domain="example.com" formId={"abcde123"}>
-  <SnoopPage name="first">
-    <SnoopElement type="text" name={"name"} label="Your name" />
+<SnoopForm formId="abcd">
+  <SnoopPage name="basicInfo">
+    <SnoopElement
+      type="text"
+      name="name"
+      label="Your name"
+      help="Please use your real name"
+      required
+    />
     <SnoopElement
-      type="radio"
-      name={"importance"}
-      label="What's your favorite food?"
-      options={["Pizza", "Pasta", "Sushi"]}
+      type="textarea"
+      name="about"
+      label="About you"
+      help="e.g. your hobbies etc."
+      required
     />
-    <SnoopSubmit label="Submit 💪">
+    <SnoopElement name="submit" type="submit" label="Submit" />
+  </SnoopPage>
+  <SnoopPage name="advancedInfo">
+    <SnoopElement
+      type="checkbox"
+      name="programming-lanuguages"
+      label="What programming languages do you love?"
+      options={['C++', 'Javascript', 'Scala', 'Assembler']}
+    />
+    <SnoopElement name="submit" type="submit" label="Submit" />
+  </SnoopPage>
+  <SnoopPage name="thankyou" thankyou>
+    <p>Thanks a lot for your time and insights 🙏</p>
   </SnoopPage>
 </SnoopForm>
 ```
 
-## Contributing
+## Contribute 🙏
 
 Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
diff --git a/commitlint.config.js b/commitlint.config.js
diff --git a/config/fileTransformer.js b/config/fileTransformer.js
diff --git a/config/tsconfig.cjs.json b/config/tsconfig.cjs.json