Future of SFC

Ratel

Atomic design

  • ​Atoms
  • Molecules
  • Organisms
  • Templates
  • Pages

Atomic design in Ratel

  1. ​​Atoms (Buttons, input fields, etc.) 
  2. Molecules (Panel, navigation elements)
  3. Organisms (Forms, tables)
  4. Templates
  5. Pages

Moving towards Ratel

  1. ​Fix form and input fields
  2. Remove all objects/array from properties
  3. Test and document
  4. Introduce styling
  5. Remove legacy components/code

​1. Fix form and input fields

  1. ​There should be no objects/arrays required to create an input field
  2. All fields must act as an actual input field so PHP could read them
  3. Proper naming (-field)
  4. Introduce creating forms with basic HTML, move JSON to Tatu
  5. Form field validation

​2. Remove all objects/array from properties

  1. ​There are many components that rely on objects/arrays. All should be replaced with simple string/number properties and slots/additional components
  2. This involves breaking down tables and merging @simbuka/tables into collection of components

​3. Test and document

  1. ​All components require tests
  2. New website with actual documentation(probably a Storybook, but not meant for development)

​4. Introduce styling

  1. ​Introduce a set of CSS variables that can modify the look of Ratel
  2. Write a styling guide how to change or apply different customizations

​5. Remove legacy components/code

  1. ​Remove all legacy code
  2. Move layouts to actual projects
  3. Go over all components, revise them, add missing comments and give proper naming if required

Some clarifications

FieldInterface

1. Enforces properties and methods
2. Allows easy refactoring
3. Gives a real hint that component is an input field

Naming

1. All field components must end with `-field`
2. All atoms that only combines to the molecule are grouped by their name
navigation > navigation-dropdown > navigation-dropdown-item

Legacy components

  1. ​browser-history
  2. global-search-box
  3. form-type-provider
  4. connect-inputs
  5. hidden-field

Folder structure

1. Flatten components folders into one
2. Move all global helpers and global interfaces out of components folder
3. Move Tailwind configuration file to `src/`

Capitalization

Constants

New things

React bindings

import { SfcPanel, SfcPanelHeader, SfcPanelHeaderTitle } from "@simbuka/sfc-react/dist"; const Page = () => ( <SfcPanel> <SfcPanelHeader> <SfcPanelHeaderTitle>My panel</SfcPanelHeaderTitle> </SfcPanelHeader> Hello World </SfcPanel> );

Bindings

React, Angular and Vue

Is Ratel ready?

https://is-ratel-ready.simbuka.now.sh

The end