v3.0.0

.editorconfig

@@ -10,7 +10,8 @@ trim_trailing_whitespace = true
 [*.md]
 indent_style = space
 insert_final_newline = false
+indent_size = 4
 
-[package.json]
+[{*.yaml,*.yml,package.json}]
 indent_style = space
 indent_size = 2

.eslintignore

@@ -1,5 +1,4 @@
 node_modules
 dist
 coverage
-example
-docs
+styleguide

.github/dependabot.yml

@@ -8,4 +8,4 @@ updates:
   - package-ecosystem: "npm"
     directory: "/" # Location of package manifests
     schedule:
-      interval: "daily"
+      interval: "weekly"

.github/workflows/push.yml → .github/workflows/coverage.yml

@@ -1,4 +1,4 @@
-name: Lint and test
+name: Coverage
 
 on:
   push:
@@ -8,37 +8,14 @@ on:
       - '**.md'
     branches:
       - main
-  pull_request:
 
 jobs:
-  lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 16
-      - run: npm ci
-      - run: npm run lint
-  test:
-    name: Test
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@master
-        with:
-          node-version: 16
-      - run: npm ci
-      - run: npm run test:ci
   coverage:
-    needs: [ test ]
-    if: github.ref == 'refs/heads/main'
     name: Sending test coverage to Code Climate
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: 16
       - run: npm ci

.github/workflows/docs.yml

@@ -0,0 +1,26 @@
+name: Publish documentation
+
+on:
+  workflow_call:
+    inputs:
+      targetFolder:
+        required: true
+        type: string
+
+jobs:
+  docs:
+    name: Build & publish documentation
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm run build:docs
+      - uses: JamesIves/[email protected]
+        with:
+          branch: docs
+          folder: styleguide
+          target-folder: ${{ inputs.targetFolder }}
+          git-config-name: github-pages-deploy-action

.github/workflows/release.yml → .github/workflows/publish.yml

@@ -1,39 +1,50 @@
-name: Lint, test, build and publish
+name: Publish
+
 on:
   release:
     types: [ published ]
+
 jobs:
   lint:
     name: Lint
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: 16
       - run: npm ci
       - run: npm run lint
+
   test:
     name: Test
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: 16
       - run: npm ci
       - run: npm run test:ci
+
   publish:
     needs: [ lint, test ]
-    name: Build & publish
+    name: Build & publish package
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: 16
       - run: npm ci
       - run: npm run build
       - uses: JS-DevTools/npm-publish@v1
         with:
           token: ${{ secrets.NPM_TOKEN }}
+
+  docs:
+    needs: [ publish ]
+    steps:
+      - uses: ./.github/workflows/docs.yml
+        with:
+          targetFolder: docs

.github/workflows/verify.yml

@@ -0,0 +1,34 @@
+name: Verify
+
+on:
+  push:
+    tags-ignore:
+      - '*'
+    paths-ignore:
+      - '**.md'
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm run lint
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm run test:ci

.gitignore

@@ -15,5 +15,5 @@ node_modules/
 .npm
 
 dist/
-
+styleguide/
 *.code-workspace

.npmignore

@@ -0,0 +1,8 @@
+*
+.*
+!CHANGELOG
+!dist/*/*
+!src/**/*
+**/*.test.ts
+**/*.spec.ts
+**/.*

.nvmrc

@@ -1 +1 @@
-16.12
+16

.styleguidist/components/Button.js

@@ -0,0 +1,30 @@
+import React, {forwardRef, useMemo} from 'react';
+
+const Button = forwardRef(({type, ...props}, ref) => {
+	const className = useMemo(() => {
+		const classes = ['btn me-3'];
+
+		if (type === 'reset') {
+			classes.push('btn-secondary')
+		}
+		else {
+			classes.push('btn-primary')
+		}
+
+		return classes.join(' ');
+	}, [type]);
+
+
+	return (
+		<button
+			ref={ref}
+			type={type || 'button'}
+			className={className}
+			{...props}
+		/>
+	);
+});
+
+Button.displayName = 'Button';
+
+export default Button;

.styleguidist/components/Checks.js

@@ -0,0 +1,90 @@
+import React, {forwardRef, useMemo} from 'react';
+
+const Checks = forwardRef(({
+	items,
+	description,
+	label,
+	required,
+	id,
+	name,
+	['aria-invalid']: invalid,
+}, ref) => {
+	const inputClassName = useMemo(() => {
+		const classes = ['form-check-input'];
+
+		if (invalid === true) {
+			classes.push('is-invalid');
+		}
+
+		if (invalid === false) {
+			classes.push('is-valid');
+		}
+
+		return classes.join(' ');
+	}, [invalid]);
+
+	const fieldsetClassName = useMemo(() => {
+		const classes = [];
+
+		if (invalid === true) {
+			classes.push('is-invalid');
+		}
+
+		if (invalid === false) {
+			classes.push('is-valid');
+		}
+
+		return classes.join(' ');
+	}, [invalid]);
+
+	const children = items.map(([itemLabel, value]) => {
+		const itemId = `${id}-${itemLabel.toLowerCase().replace(/\s:#/ui, '-')}`;
+		return (
+			<div className="form-check" key={itemId}>
+				<input
+					className={inputClassName}
+					type="checkbox"
+					value={value}
+					id={itemId}
+					name={name}
+				/>
+				<label
+					className="form-check-label"
+					htmlFor={itemId}
+				>
+					{itemLabel}
+				</label>
+			</div>
+		);
+	});
+
+	return (
+		<div className="mb-3">
+			<legend>
+				{label}
+				{required && <span aria-hidden="true"> *</span>}
+			</legend>
+			<fieldset
+				ref={ref}
+				id={id}
+				aria-invalid={invalid}
+				aria-describedby={id && description && `${id}-description`}
+				className={fieldsetClassName}
+			>
+				{children}
+			</fieldset>
+			{description && (
+				<p
+					id={id && `${id}-description`}
+					className={invalid ? 'invalid-feedback' : 'valid-feedback'}
+				>
+					{description}
+				</p>
+			)}
+		</div>
+	)
+});
+
+Checks.displayName = 'Checks';
+
+export default Checks;

.styleguidist/components/Form.js

@@ -0,0 +1,16 @@
+import React, {forwardRef, useState, useCallback} from 'react';
+
+const Form = forwardRef((props, ref) => {
+
+	return (
+		<form
+			ref={ref}
+			noValidate
+			{...props}
+		/>
+	);
+});
+
+Form.displayName = 'Form';
+
+export default Form;

.styleguidist/components/Input.js

@@ -0,0 +1,55 @@
+import React, {forwardRef, useMemo} from 'react';
+
+const Input = forwardRef(({
+	id,
+	label,
+	description,
+	required,
+	['aria-invalid']: invalid,
+	...props
+}, ref) => {
+
+	const inputClassName = useMemo(() => {
+		const classes = ['form-control'];
+
+		if (invalid === true) {
+			classes.push('is-invalid');
+		}
+
+		if (invalid === false) {
+			classes.push('is-valid');
+		}
+
+		return classes.join(' ');
+	}, [invalid]);
+
+	return (
+		<div className="mb-3">
+			<label htmlFor={id} className="form-label">
+				{label}
+				{required && <span aria-hidden="true"> *</span>}
+			</label>
+			<input
+				ref={ref}
+				id={id}
+				className={inputClassName}
+				aria-describedby={id && description && `${id}-description`}
+				autoComplete="off"
+				aria-invalid={invalid}
+				{...props}
+			/>
+			{description && (
+				<p
+					id={id && `${id}-description`}
+					className={invalid ? 'invalid-feedback' : 'valid-feedback'}
+				>
+					{description}
+				</p>
+			)}
+		</div>
+	);
+});
+
+Input.displayName = 'Input';
+
+export default Input;