withvoid / melting-pot Goto Github PK

Add an npm ignore file & remove

• docs
• dev

& other directories from being published to npm.

Currently the demos in the docs for hooks are like below;

docs/hooks/useActive/index.mdx

We need to change the structure to this

docs/hooks/useActive.mdx

Add a Pull request template that tells the user what is the protocol for creating a pull request. You can take some content from the Contributing.md docs for this.

Reference: https://github.com/withvoid/melting-pot/blob/master/CONTRIBUTING.md

Things that the template should have

• format of the pull request title
• details description of what the pull request does
• reference to already open issue if any that is related to the pull request

Please add eslint react hooks plugin to ensure enforcement of Rules of Hooks.

npm package eslint-plugin-react-hooks, should be added.

Current useFormField returns the follow;

const { value, set, reset, bind } = useFormField(''); 

Let's add dirty, pristine states to useFormField hook, similar to Angular form handling hooks

We need to come up with a better getting started guide content wise in the documentation.

Add a similar hook that replicates React componentWillUnmount life cycle as hook.

Idea:
We can have a similar approach as useDidMount

We need to come up with an API design that uses the event listener mousemove

// usage
const { x, y } = useMouseMove();

const useMouseMove = () => {
    const [coords, setCoords] = React.useState({ 0, 0 });
    const onHandleMouseMove = event => {
         setCoords({ x, y }) 
    };
    React.useEffect(() => {
       window.addEventListener()
       return () => {
         window.removeEventListener()
       }
    });
    return coords;
}

Add an example of using useScreenType in the documentation.

+ git remote add upstream http://github.com/withvoid/melting-pot.git
- git remote add upstream [email protected]:withvoid/melting-pot.git

Update a valid upstream path in Contributing.md file.

We need to add a PULL_REQUEST template.

[x] I have looked at the documentation Melting-pot

What can be improved?

• useToggle Documentation
• Add a better demo, illustrating useToggle hook.

[x] I have looked at the documentation Melting-pot

What can be improved?

• useInterval Documentation
• Add a better demo, illustrating useInterval hook.

Add templates for when someone want to file an issue.

Currently in docs we have to access the core modules via relative paths e.g, import { useOnlineStatus } from '../../../src'; we need to replace it with import { useOnlineStatus } from @withvoid/melting-pot;

For this we need to add a plugin in the doczrc.js that handles an alias similar to what webpack does.

This could help in reducing boilerplate using DUCKS while writing actions and reducers. Use would need to include respective creators utils for constants, actions and reducers. Hence it will help in writing much cleaner code and fast development.

Proposal for hook

const [on, set] = React.useState(initialState);
return { on, set, reset, toggle }; 

Where

• on Boolean
• set Function
• reset Function (That resets to initial state)
• toggle Functions (That toggles the current state on on)

Add a similar hook that replicates React componentDidUpdate life cycle as hook.

Idea:
We can have a similar approach as useDidMount

Proposed API

const form = useForm({
   name: { value: '', isRequired: true },
   age: { value: '' }, // isRequired not given, consider false.
});

const onSubmit = e => {
   e.preventDefault();
   if (!form.isValid) {
      alert('Missing required fields*'); 
      return;
   }

   // after some operations
   // reset form.
   form.reset();
};

return (
   <form onSubmit={onSubmit}>
        <input type="text" {...form.name.bind} />
        {form.name.isDirty && form.name.isRequired && <p>Required field*</p>}
        <input type="text" {...form.age.bind} />
        {form.age.isDirty && form.age.isRequired && <p>Required field*</p>}
        <button type="submit">Send</button>
    </form>
)

This will be built on top of useFormField hook

Currently there is a issue with CodeSandbox, that is causing error for docz to open in code snippets in codeSandbox

Referece
codesandbox/codesandboxer#33
doczjs/docz#481

We need to add an issue template for when someone wants to suggest a new feature & he/she creates an issue for that.