Implement custom roles and improve permissions logic

The commit refactors the handling of account roles and enhances permissions checks. The account role has been shifted to use a string type, providing the ability to define custom roles. It also introduces the RolesDataProvider component, which stipulates role-related data for different forms and tables. The modification goes further to consider user role hierarchy in permissions checks, offering a more granular access control.

packages/ui/src/makerkit/hooks/use-sidebar-state.ts

@@ -1,26 +0,0 @@
-import { useCallback, useState } from 'react';
-
-const SIDEBAR_COLLAPSED_STORAGE_KEY = 'sidebarState';
-
-function useCollapsible(initialValue?: boolean) {
-  const [isCollapsed, setIsCollapsed] = useState(initialValue);
-
-  const onCollapseChange = useCallback((collapsed: boolean) => {
-    setIsCollapsed(collapsed);
-    storeCollapsibleState(collapsed);
-  }, []);
-
-  return [isCollapsed, onCollapseChange] as [boolean, typeof onCollapseChange];
-}
-
-function storeCollapsibleState(collapsed: boolean) {
-  // TODO: implement below
-  /*
-  setCookie(
-    SIDEBAR_COLLAPSED_STORAGE_KEY,
-    collapsed ? 'collapsed' : 'expanded',
-  );
-   */
-}
-
-export default useCollapsible;

packages/ui/src/makerkit/image-upload-input.tsx

@@ -138,7 +138,6 @@ export const ImageUploadInput = forwardRef<React.ElementRef<'input'>, Props>(
     }
 
     return (
-      // eslint-disable-next-line jsx-a11y/label-has-associated-control
       <label
         id={'image-upload-input'}
         className={`relative flex h-10 w-full cursor-pointer rounded-md border border-dashed border-input

packages/ui/src/makerkit/image-uploader.tsx

@@ -71,7 +71,6 @@ export function ImageUploader(
 
   return (
     <div className={'flex items-center space-x-4'}>
-      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label className={'relative h-20 w-20 animate-in fade-in zoom-in-50'}>
         <Image fill className={'h-20 w-20 rounded-full'} src={image} alt={''} />
 

packages/ui/src/makerkit/mdx/mdx-renderer.tsx

@@ -2,7 +2,7 @@ import type { MDXComponents } from 'mdx/types';
 import { getMDXComponent } from 'next-contentlayer/hooks';
 
 import Components from './mdx-components';
-// @ts-ignore
+// @ts-expect-error: weird typescript error with css modules
 import styles from './mdx-renderer.module.css';
 
 export function Mdx({