functional-ui / functional-ui-kit Goto Github PK

Hey there 👋

Looking through this for the first time - so much good stuff to see here! Just wanted to flag up a mis-naming - the boolean property for when the checkbox is neither checked or unchecked should be "indeterminate" not "intermediate". See: https://css-tricks.com/indeterminate-checkboxes/

The package simply does not work under a few react frameworks

Receiving this error when trying to render any FUI component

Uncaught TypeError: Cannot read properties of null (reading 'useMemo')

Starter Environments (react 18.2.0, react-dom 18.2.0):

• latest create-react-app: https://github.com/facebook/create-react-app
• latest vite-react-starter: https://github.com/fabri4c/vite-react-starter

Steps to Reproduce:

1. Install any of the 2 local dev environments mentioned above
2. Install functional-ui-kit
3. Import any functional-ui-kit component & add it to main render function in App.js (see code snippet in the end)
4. Run npm run start (for create-react-app) OR npm run dev (for vite-react-starter)
5. Page does not render at all & receives above mentioned error

App.js Code

import { FuiBadge } from 'functional-ui-kit/fui-badge';
import 'functional-ui-kit/style';

function App() {
  return (
    <div>
      <FuiBadge label="label" />
    </div>
  );
}

export default App;

Playing with your docs and adding a label to the example generates this React code

<FuiTextInput
  label="label"
  onChange={function noRefCheck(){}}
  placeholder="Placeholder"
  value=""
/>

which is rendered as divs with no association between the label an field nor even a role of label for the div that contains the label

<div class="fui-text-input-wrapper undefined">
   <div class="fui-text-input-label">label</div>
   <div class="fui-text-input-container ">  
      <div class="fui-text-input-input-container fui-interactable">
         <input type="text" placeholder="Placeholder" class="fui-text-input-input" value="">
      </div>
   </div>
</div>

also worth noting that the default example uses placeholder instead of a label.

None of this adheres to WCAG guidelines nor do any of the form components.