feat: improve Formbit examples

.github/workflows/build-publish.yaml

@@ -18,10 +18,10 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: "20"
-      - run: yarn install
+      - run: yarn install --frozen-lockfile
       - run: yarn test
       - uses: JS-DevTools/npm-publish@v3
         if: startsWith(github.ref, 'refs/tags/v')
         with:
           token: ${{ secrets.NPM_TOKEN }}
-          access: public
+          access: public

example/.eslintrc.cjs

@@ -1,13 +1,77 @@
 module.exports = {
   root: true,
-  env: { browser: true, es2020: true },
+  parser: '@typescript-eslint/parser',
+  plugins: [
+    'sonarjs',
+    '@typescript-eslint',
+    'react-refresh',
+  ],
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
+    'standard',
+    'standard-react',
+    'plugin:sonarjs/recommended',
     'plugin:react-hooks/recommended',
   ],
+  env: {
+    browser: true,
+    node: true,
+    es2020: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
   ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {},
+  overrides: [
+    {
+      files: ['cypress/**/*.ts', 'cypress/**/*.tsx', 'src/__tests__/**/*.ts', 'src/__tests__/**/*.tsx'],
+      env: {
+        'cypress/globals': true,
+      },
+      plugins: ['cypress'],
+      rules: {
+        'sonarjs/no-duplicate-string': 'off',
+      },
+    },
+    {
+      files: ['**/*.d.ts'],
+      rules: {
+        'no-undef': 'off',
+      },
+    },
+  ],
+  settings: {
+    react: {
+      version: '18',
+    },
+  },
+  rules: {
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        args: 'all',
+        argsIgnorePattern: '^_',
+        caughtErrors: 'all',
+        caughtErrorsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
+    'no-use-before-define': 'off',
+    'no-shadow': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'standard/no-callback-literal': 'off',
+    'no-unused-expressions': 'off',
+    'space-before-function-paren': 0,
+    'react/prop-types': 0,
+    'react/jsx-handler-names': 0,
+    'react/jsx-fragments': 0,
+    'react/no-unused-prop-types': 0,
+    'import/export': 0,
+    'max-len': ['error', { code: 120 }],
+  },
 }

example/cypress.config.ts

@@ -1,12 +1,12 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress'
 
 export default defineConfig({
   component: {
     devServer: {
-      framework: "react",
-      bundler: "vite",
+      framework: 'react',
+      bundler: 'vite'
     },
     viewportWidth: 1200,
     viewportHeight: 800
-  },
-});
+  }
+})

example/cypress/support/commands.ts

@@ -36,16 +36,12 @@
 //   }
 // }
 
+const getTab = (tab: string) => cy.get('[role="tab"]').contains(tab, { matchCase: false })
 
-
-
-const getTab = (tab: string) => cy.get(`[role="tab"]`).contains(tab, { matchCase: false })
-
-const shouldSubmit = (...args: unknown[]) => cy.get('@console-log').should('be.calledWith','Submitted Form', ...args)
+const shouldSubmit = (...args: unknown[]) => cy.get('@console-log').should('be.calledWith', 'Submitted Form', ...args)
 
 const shouldNotSubmit = () => { cy.get('@console-log').should('not.be.called') }
 
 const button = (text: string) => cy.get('button').contains(text, { matchCase: false }).parent()
 
-
-Cypress.Commands.addAll({ button, getTab, shouldSubmit, shouldNotSubmit})
+Cypress.Commands.addAll({ button, getTab, shouldSubmit, shouldNotSubmit })

example/cypress/support/component.tsx

@@ -1,6 +1,5 @@
 /// <reference types="./index.d.ts" />
 
-/* eslint-disable @typescript-eslint/no-namespace */
 // ***********************************************************
 // This example support/component.ts is processed and
 // loaded automatically before your test files.
@@ -19,21 +18,19 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
+import { mount } from 'cypress/react18'
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-
-global.process = global.process || {};
-global.process.env = global.process.env || {};
-
-import { mount } from 'cypress/react18'
-
+global.process = global.process || {}
+global.process.env = global.process.env || {}
 
 Cypress.Commands.add('mount', mount)
 
 beforeEach(() => {
-    cy.spy(window.console, 'log').as('console-log')
+  cy.spy(window.console, 'log').as('console-log')
 })
 
 // Example use:
-// cy.mount(<MyComponent />)
+// cy.mount(<MyComponent />)

example/cypress/support/index.d.ts

@@ -1,4 +1,4 @@
-import { mount } from "cypress/react18";
+import { mount } from 'cypress/react18'
 
 declare global {
     namespace Cypress {
@@ -10,4 +10,4 @@ declare global {
         shouldNotSubmit: () => void
       }
     }
-  }
+  }

example/package.json

@@ -26,9 +26,17 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
+    "eslint": "8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-config-standard-react": "^13.0.0",
+    "eslint-plugin-cypress": "^2.15.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-sonarjs": "^0.25.0",
     "tailwindcss": "3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"

example/src/App.tsx

@@ -1,20 +1,39 @@
-import { Tabs } from "@radicalbit/radicalbit-design-system"
-import { BasicFormContext } from './forms/basic-form-context'
-import { BasicFormHook } from './forms/basic-form-hook'
-import { MultipleStepsForm } from './forms/multiple-steps'
-import { AddableFieldsForm } from './forms/addable-fields'
-import { EditLikeForm } from './forms/edit-like'
-import { FakeApiProvider } from "./forms/context/api-context"
-import Logo from "./img/LogoRB_PositivoBN.png"
-import { WriteRemoveAllForm } from "./forms/remove-all"
+import { Tabs } from '@radicalbit/radicalbit-design-system'
+import { BasicFormHook } from './forms/a-basic-form-hook'
+import { BasicFormContext } from './forms/b-basic-form-context'
+import { AddableFieldsForm } from './forms/c-addable-fields'
+import { EditLikeForm } from './forms/d-edit-like'
+import { MultipleStepsForm } from './forms/e-multiple-steps'
+import { WriteRemoveAllForm } from './forms/f-remove-all'
+import { FakeApiProvider } from './forms/fake-api-context'
+import Logo from './img/LogoRB_PositivoBN.png'
 
 enum EXAMPLES {
   CONTEXT = 'context',
   HOOK = 'hook',
   MULTI = 'multi',
   ADDABLE = 'addable',
   EDIT = 'edit',
-  WRITEREMOVEALL = 'write/remove all',
+  WRITEREMOVEALL = 'write-remove-all',
+}
+
+const QUERY_PARAM = 'example'
+
+const getActiveTab = (): string => {
+  const params = new URLSearchParams(window.location.search)
+  const tab = params.get(QUERY_PARAM)
+
+  if (tab && Object.values<string>(EXAMPLES).includes(tab)) {
+    return tab
+  }
+
+  return EXAMPLES.HOOK
+}
+
+const setActiveTab = (key: string) => {
+  const params = new URLSearchParams(window.location.search)
+  params.set(QUERY_PARAM, key)
+  window.history.replaceState({}, '', `?${params.toString()}`)
 }
 
 function App() {
@@ -28,7 +47,8 @@ function App() {
         <FakeApiProvider>
           <Tabs
             destroyInactiveTabPane
-            defaultActiveKey={EXAMPLES.HOOK}
+            defaultActiveKey={getActiveTab()}
+            onChange={setActiveTab}
             modifier='flex flex-col'
             centered
             items={[
@@ -42,11 +62,6 @@ function App() {
                 key: EXAMPLES.CONTEXT,
                 children: <BasicFormContext />
               },
-              {
-                label: 'Multi-step Form',
-                key: EXAMPLES.MULTI,
-                children: <MultipleStepsForm />
-              },
               {
                 label: 'Addable-Fields Form',
                 key: EXAMPLES.ADDABLE,
@@ -57,20 +72,33 @@ function App() {
                 key: EXAMPLES.EDIT,
                 children: <EditLikeForm />
               },
+              {
+                label: 'Multi-step Form',
+                key: EXAMPLES.MULTI,
+                children: <MultipleStepsForm />
+              },
               {
                 label: 'Write/Remove All Form',
                 key: EXAMPLES.WRITEREMOVEALL,
                 children: <WriteRemoveAllForm />
-              },
+              }
             ]} />
         </FakeApiProvider>
       </div>
 
       <footer className="text-right text-sm text-gray-500 py-8 pr-8">
-        powered by <a href="https://github.com/radicalbit/radicalbit-design-system" target="_blank" rel="noopener noreferrer" className="underline hover:text-gray-700">@radicalbit/rbit-design-system</a>
+        powered by{' '}
+        <a
+          href="https://github.com/radicalbit/radicalbit-design-system"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline hover:text-gray-700"
+        >
+          @radicalbit/rbit-design-system
+        </a>
       </footer>
     </div>
   )
 }
 
-export default App
+export default App