initial core components and setup

.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+  extends: ['react-app', 'react-app/jest', 'plugin:jsx-a11y/recommended', 'plugin:storybook/recommended'],
+  plugins: ['jsx-a11y'],
+  rules: {
+    'react/jsx-curly-brace-presence': 'error',
+    'react/jsx-fragments': 'error',
+    'react/jsx-key': 'error',
+    'react/jsx-no-duplicate-props': 'error',
+    'react/jsx-no-undef': 'error',
+    'react/jsx-no-useless-fragment': 'error',
+    'react/jsx-uses-react': 'error',
+    'react/jsx-uses-vars': 'error',
+    'react/no-array-index-key': 'error',
+    'react/no-danger': 'error',
+    'react/no-deprecated': 'error',
+    'react/no-unescaped-entities': 'error',
+    'react/no-unused-prop-types': 'error',
+    'react/prop-types': 'error',
+    'react/react-in-jsx-scope': 'error',
+    'react/self-closing-comp': 'error',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+    'testing-library/no-container': 'off',
+    'testing-library/no-node-access': 'off',
+    'testing-library/prefer-screen-queries': 'off'
+  },
+  overrides: [{
+    files: ['*.stories.tsx'],
+    rules: {
+      'import/no-anonymous-default-export': 'off'
+    }
+  }]
+};

.github/workflows/deploy.yaml

@@ -0,0 +1,18 @@
+name: Build and Publish storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - 'main'
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.build-publish.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - id: build-publish
+        uses: bitovi/[email protected]
+        with:
+          path: storybook-static
+          build_command: npm run storybook:build

.gitignore

@@ -128,3 +128,6 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+*.DS_Store
+build

.storybook/main.js

@@ -0,0 +1,46 @@
+module.exports = {
+  stories: [
+    '../src/components/EasyForm/EasyForm.stories.tsx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/**/*.stories.mdx',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions', 
+    '@storybook/addon-mdx-gfm',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  core: {
+    disableTelemetry: true
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  },
+  webpackFinal: async config => {
+    const cssModel = config.module.rules.find(i => i.test.toString() === '/\\.css$/');
+    const lessRule = {
+      test: /\.less$/,
+      sideEffects: true,
+      use: [...cssModel.use, {
+        loader: 'less-loader',
+        options: {
+          lessOptions: {
+            javascriptEnabled: true
+          }
+        }
+      }]
+    };
+    // if (handleLessRule) lessRule = handleLessRule(lessRule);
+    config.module.rules.push(lessRule);
+
+    // const includeLessConfig = useLessLoader(config);
+    return config;
+  },
+  docs: {
+    autodocs: true
+  }
+};

.storybook/preview.js

@@ -0,0 +1,71 @@
+/**
+ * Read https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
+ * for more information about the purpose of this file.
+ *
+ * Use preview.js for global code (such as CSS imports or JavaScript mocks)
+ * that applies to all stories. For example, `import thirdPartyCss.css`.
+ *
+ * This file can have three exports:
+ * - decorators - an array of global decorators
+ * - parameters - an object of global parameters
+ * - globalTypes - definition of globalTypes
+ */
+
+/**
+ * Decorators
+ *
+ * A decorator is a way to wrap a story in extra “rendering” functionality.
+ *
+ * Example:
+ *
+ * import React from 'react';
+ * export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];
+ *
+ * Each story throughout the library will be wrapped in a div with a margin of 3
+ */
+
+/**
+ * Parameters
+ *
+ * Most Storybook addons are configured via a parameter-based API.
+ * You can set global parameters in this file
+ *
+ * export const parameters = {
+ *   backgrounds: {
+ *     values: [
+ *       { name: 'red', value: '#f00' },
+ *       { name: 'green', value: '#0f0' },
+ *     ],
+ *   },
+ * };
+ *
+ * With backgrounds, you configure the list of backgrounds that every story can render in.
+ */
+
+/**
+ * Global Types
+ *
+ * Global Types allow you to add your own toolbars by creating
+ * globalTypes with a toolbar annotation:
+ *
+ * For example:
+ *
+ * export const globalTypes = {
+ *   theme: {
+ *     name: 'Theme',
+ *     description: 'Global theme for components',
+ *     defaultValue: 'light',
+ *     toolbar: {
+ *       icon: 'circlehollow',
+ *       // array of plain string values or MenuItem shape
+ *       items: ['light', 'dark'],
+ *       },
+ *     },
+ *   };
+ *
+ * Will add a new dropdown in your toolbar with options light and dark.
+ **/
+
+export const parameters = {
+  controls: { expanded: true },
+};

README.md

@@ -0,0 +1,78 @@
+# rea11y-easy-form (IN PROGRESS!)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
+[![npm version](https://img.shields.io/npm/v/rea11y-easy-form.svg)](http://npm.im/rea11y-easy-form)
+
+The (hopefully!) easiest way to build highly performant and accessible forms in React.
+
+Built on top of `react-final-form` (for its subscription-based form state management), the key goals and features of `rea11y-easy-form` are:
+
+1. Accessibility
+2. Simplicity
+3. Extensibility
+4. Performance
+
+In that order too!
+
+With a number of built-in components developed for accessibility, and the ability to easily use your own, `rea11y-easy-form` should have you covered.
+
+[View the components and docs in Storybook](https://mynamesleon.github.io/rea11y-easy-form/).
+
+## Development
+
+### Testing
+
+```
+npm run test
+```
+
+### Building
+
+```
+npm run build
+```
+
+### Storybook
+
+To run a live-reload Storybook server on your local machine:
+
+```
+npm run storybook
+```
+
+### Generating New Components
+
+```
+npm run generate YourComponentName
+```
+
+This will generate:
+
+```
+/src
+  /YourComponentName
+    YourComponentName.tsx
+    YourComponentName.stories.tsx
+    YourComponentName.test.tsx
+    YourComponentName.types.ts
+```
+
+### Installing Component Library Locally
+
+Let's say you have another project (`test-app`) on your machine that you want to try installing the component library into without having to first publish the component library. In the `test-app` directory, you can run:
+
+```
+npm i --save ../react-component-library
+```
+
+which will install the local component library as a dependency in `test-app`. It'll then appear as a dependency in `package.json` like:
+
+```
+  ...
+  "dependencies": {
+    ...
+    "react-component-library": "file:../react-component-library",
+    ...
+  },
+  ...
+```

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+};

jest.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  roots: ['src'],
+  setupFilesAfterEnv: ['./jest.setup.ts'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  testPathIgnorePatterns: ['node_modules/'],
+  testEnvironment: 'jest-environment-jsdom',
+  coverageReporters: ['text'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(react-markdown).*/)',
+  ],
+  testMatch: ['**/*.(test|spec).(ts|tsx|js|jsx)'],
+  moduleNameMapper: {
+    // Mocks out all these file formats when tests are run.
+    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      'identity-obj-proxy',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+  },
+};

jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';