feat: Add Style API

[cleitonper]

Style API ✨

Default Style | Dark Mode

Changes proposed

Provide a default style to unform components and a way to customize it's style
with css custom properties and styled-components.

With the changes proposed by this PR, you'll be able to use stylezed components with a beatiful apparence. To get started import the input elements from @rocketseat/unform/styled:

// Other dependencies ...
import { Form } from '@rocketseat/unform';
import { Input, FileInput, Select } from '@rocketseat/unform/styled'; // <-- Attention here

function MyAwesomeForm() {
  return (
    <Form>
      <Input 
        name="name"
        label="Name"
        placeholder="Your name"
      />
      <Input
        multiline
        name="profile"
        label="Profile"
        placeholder="Talk about you"
      />
      <Select
        name="gender"
        label="Gender"
        placeholder="Select..."
        options={[
          { id: 'male', title: 'Male' },
          { id: 'female', title: 'Female' },
        ]}
      />
    </Form>
  );
}

You can also customize your form with css custom properties

const MyAwesomeStyledForm = styled(MyAwesomeForm)`
  --border-color: #512DA8;
  --placeholder-color: rgba(150, 150, 150, 0.85);
  --error-color: #E53935; // <-- Issue #49 request
`;

Additional context

Breaking changes

BREAKING CHANGE: All input elements are now wrapped with a div element

Related issues

Related to #48 and #49.

Screenshots

Without Style

Default Style

Focus Style

With Error

With Content

Disabled Style

File Input: No File | Single File | Many Files

Dark Mode Example

TODO

• Implementation
• Request code review
• Docs

[cleitonper]

Hi @diego3g, is it something that we can include in the unform?

[diego3g]

@cleitonper First of all, great work! That's beautiful. I think we should have an easy way to add standard styles to Unform components, but i don't know if the best idea is to keep this inside the same unform repository.

I was thinking about maybe creating one package named rocket-ui that includes unform and have all the styles based on Rocketseat interface guidelines, what you think?

If you find it cool and want to contribute i can send you all the information :)

If not, we can still discuss about implementing these styles :)

[cleitonper]

First of all, great work! That's beautiful.

Thanks man.

I was thinking about maybe creating one package named rocket-ui that includes unform and have all the styles based on Rocketseat interface guidelines, what you think?

I agree with the rocket-ui idea. Keeping the core of the unform together with a ui library bring us some drawbacks. One of then is the fact of we need to add dependencies that not are related to unform core.

Make the rocket-ui a open source project and the PRs will come.

[converge]

rocket-ui approach is perfect! using templates/themes is a nice option, but I believe most people won't use it. And, less code to maintain, is better for a project that is in it's begining.

[diego3g]

I'll close this PR for now, we are working in Rocket UI and soon it will be available for the community. BTW thanks for you contribution @cleitonper! 🎉