[Discussion] Abstractions / patterns for the kit

[sdelrio0]

I think it would be necessary to start defining exactly what the purpose is and what the main abstraction for the UI kit could be.

By stating this I'm detonating the following questions:

• [ ] 1. What is the main differentiation from reactomikit to frameworks/libraries like Bootstrap, Foundation, etc.
• [ ] 2. How are the components going to be structured, ie. what is the directory structure?
• [ ] 3. What is a suitable API interface for developers so that they can also extend the components with their custom CSS / code / themes?
• [ ] 4. How broad/general is the UI Kit going to be? How many components will it contain? Will it be a component for every use case? (See image one for an idea of all types of component use I can currently come up with)

[sdelrio0]

I like the idea of having LAYOUT components, like <Center> <Inline> <Padder> etc... for common css patterns.

A good starting point IMO would be defining the categories aka. dir. structure...

[sdelrio0]

Regarding question 2, we could include a css prop that lets the developer include their own custom css that could potentially override the default component's css via the styled-component css function.

Something like:

import NavBar from 'reactomikit/NavBar'
import { css } from 'styled-components'

<NavBar 
  title="some title"
  css={css`
    background: red;
  `}
/>

[carl0zen]

Hey @sdelrio0

I think this is a great contribution, let me break down my answers to each one of your points

1) One of the main differences between bootstrap and foundation vs reactomikit is that the current implementation of such libraries relies heavily in global css, it's hard to consume reactomikit uses styled-components which is a technology that let's you encapsulate atomic visual primitives that you can compose later to build UI. I believe is where things are going in terms of implementing reusable and easily maintainable composable ui blocks.

The core difference I see is that everything in styled-components is JS so the implementation is faster, no more uneessesary css hacks, styled-components lets us use the full power of js to compute.

I see a lot of future in this approach because it leads to Atomicly designed architectures where reusability is achieved by composing and inheriting a core style structure. It even supports theming which is something currently lacking in this kit but definitely in the immediate roadmap

The protocol is simple and theming makes it possible to define a singletheme.json file perhaps that would be responsible of holding style definition of all the app in a single file. Making it easier for designers to jump in and customize the components at will

These "globals" should be treated as defaults and easily overridable depending on the component's context. e.g.

import { Button } from 'ui-kit/base'
import styled from 'styled-components'

const CloseModalButton = styled(Button)`
  position: absolute;
  top: 0;
  right: 0;
`; 

This pattern is extremely useful because it let's us see CSS as composing blocks, no more needing to define properties all over again. I see true reusability in this pattern

Immediate goals:

• Stabilize most common patterns and implement theming
• Enhance package consumption mechanism.
• Build a product that lets us see in real time how different configurations affect the ui. this product is more focused towards designers so they can focus on designing themes (this tool should output theme.jsx).
• Deploy a universal repository of components that anyone can contribute to and benefit from. It can be from themes to more complex components

2)Directory structure:

Based on the most common patterns I've found I suggest we follow:

• Layout: For anything related to layout, possibly a grid system here? do we need it?, I think for we can live with flex for now
• Base: Where most of the core tags styling is defined, things like Buttons, Menu, Logo, Link, still a bit doubtful If keeping base or segregating buttons to its own sheet and menu to navigation, something like the structure you suggested, keen on hearing your thoughts on this.
• Form: Anything related to input, Textare, Input, Radio, Checkbox, Form, etc...
• Helpers: Any helpers like Center, Padder, Inline, Ellipsis, Relative, Absolute, etc.
• Typography: Headings like H1, H2, H3.., Title, etc.

3) I think the api you suggest works well, another option would be the traditional approach as sugggested in the example above,

import { Button } from "ui-kit/base"
import styled from "styled-components"

const StyledButton = styled(Button)``
  ... ALL THE CUSTOM PROPERTiES ...
`

but I guess your proposal is more elgant.

<Button
  primary
  css={css`
    background: red;
  `}
/>

4) I think we should limit the scope to the most immediate needs and gradually extend it over, synthesizing from your list I think the most important ones for now are:

• Avatar
• Tabs
• Forms (checkbox, radio, dropdown)
• Base (Label, Table, Breadcrumb, Footer)
• Helpers (Absolute, Ellipsis, Hidden)
• MediaQueries

Based on your list I think it's important to differentiate in simple components from complex ones, I am not saying that we should not scope this project to complex components but in the meantime I think we should focus on keeping the roadmap simple.

I see more complex patterns emerge once we stabilize our core simple patterns.

What do you think?