Based Components

🚧 WIP! 🚧

This is work in progress and nowhere near ready to use. Feel free to install it but be prepared for a few errors! 😉

Installation

# using npm
npm install based-components

# using yarn
yarn add based-components

Documentation

Check out the docs ➡️ here

Usage

import React, {useState} from 'react';
import {
  BasedProvider,
  Form,
  Input,
  Button,
  useForm
} from 'based-components';

interface Values {
  text: string;
  type?: string;
}

function App() {
  const {handleSubmit} = useForm();
  const [loading, setLoading] = useState<boolean>(false);
  const [active, setActive] = useState<boolean>(false);
  const [values] = useState<Values[]>([
    {text: 'Name'},
    {text: 'Email'},
    {text: 'Password', type: 'password'},
  ]);

  function submitData(data: any): void {
    setLoading(false);
    console.log(data);
  }

  return (
    <BasedProvider>
      <Form onSubmit={handleSubmit(submitData)}>
        {values.map(({type, text, password = false}) => (
          <Input type={type || 'text'} text={text} />
        ))}
        <Button
          text="Submit"
          shape="pill"
          isLoading={loading}
          onClick={() => setActive(!active)}
        />
      </Form>
    </BasedProvider>
  );
}

Todos

• [ ] Add styled-components for basic styling & overrides

• <Button />

  • [ ] add colours etc
  • [ ] add button sizes
  • [ ] option for a skeleton loader
  • [ ] better names for pre/end icons
  • [ ] option to add a href
  • [ ] option to add a tooltip ala

• [ ] remove storybook & example from npm

• [ ] think about base/global styles: css vars? how do others do it?

• [ ] snapshot storybook testing?

• [ ] jest/react-testing-library testing

• [ ] check out hooks for hooks

• [ ] make types more consistent

Internal (process)

• component
• styles
• storybook
• tests

License

MIT © nialldbarber