Separation of duties

[igorlima]

So... in essence... this PR divides the business logic from the view of the component. Why? By doing so, it allows another React component to extend the main class, and renders a different view.

Several projects do not take advantages of style-components, it means this limits other projects to import that great library, because it forces others to use style-components. For instance, to import a new framework in a big project, such as style-components, it takes sometime to work between architecture and design teams. So, by having two classes, it makes possible to render another view without the need to install style-component. See example below - another library extending from CreditCardUtilities:

• https://igorlima.github.io/react-cc-input

At the end, this PR makes possible to have different React components working in harmony. See others sample below:

Sample A	Sample B

[jxom]

Nice! I think separating the business logic from the view of the component is a good idea. However, I think the abstraction may need to be thought out a little more.

My main concern is that the 'utility' component assumes the children input props are set up properly (e.g. correct refs, handlers, etc). I think there should be a way to 'fetch' the correct props from the utility component to attach to the custom inputs.

My other concern is allowing the 'view' component to extend the 'utility' component. Extending other components are commonly considered an anti-pattern in React due to shared namespaces & the user is forced to use a class component.

I'd recommend either: converting the 'utility' component into a React Hook, or using the 'render prop' pattern. This will not force the user to using a class component to implement their input fields, and will have clear understanding of where the utility functions are coming from.

Here could be a possible React Hook example (pretty high level):

import { useCreditCardInputs } from 'react-credit-card-input';

export default function CreditCardInputs() {
  const { cardNumberProps, expiryProps, cvcProps } = useCreditCardInputs();
  
  return (
    <div>
      <input name="card-number" {...cardNumberProps} />
      <input name="expiry" {...expiryProps} />
      <input name="cvc" {...cvcProps} />
    </div>
  )
}

and maybe a render props example:

import { CreditCardInputsContainer } from 'react-credit-card-input';

export default function CreditCardInputs() {
  return (
    <CreditCardInputsContainer>
      {({ cardNumberProps, expiryProps, cvcProps }) => (
        <div>
          <input name="card-number" {...cardNumberProps} />
          <input name="expiry" {...expiryProps} />
          <input name="cvc" {...cvcProps} />
        </div>
      )}
    </CreditCardInputsContainer>
  )
}

[igorlima]

not sure if that change handles all concerns - at least, there's no extension from the 'utility' component anymore. Below is an example how it looks like now on...

The PR was marked as WIP - Working In Progress - there are some other minor things to tackle later.

Let me know if there's any thing else missing - would be great to have some feedback...

<Container>
  <FieldWrapper>
    <CardImage />
    <InputWrapper>
      <CardNumberInput/>
    </InputWrapper>
    <InputWrapper>
      <CardExpiryInput />
    </InputWrapper>
    <InputWrapper>
      <CardCvcInput />
    </InputWrapper>
    <InputWrapper>
      <CardZipInput />
    </InputWrapper>
  </FieldWrapper>
</Container>

[igorlima]

@jxom the business logic is separated from the view of the component by using the React Hook.