Мне было предложено воспользоваться новой UI библиотекой Themeor и высказать своё мнение о ней. На данный момент она еще находится в разработке, однако уже существующих компонентов достаточно для построения mid-tier проектов. В документации уже расписано взаимодействие с такими компонентами как Box, Font, Fit и Gap, которыми можно воспользоваться для построения полноценного UI. Компоненты по типу Line, Align и Icon помогают кастомизировать и упрощают работу с настройкой вашего UI на ваш вкус.
Если пройтись по всей библиотеке, то можно увидеть следующее:
· Colors – Themeor предоставляет доступ к 7 пренастроенным цветовым палитрам: base, faint, accent, complement, critic, warning и success. Каждый из них имеет разделение на strong и weak. Также в арсенале цветов имеется возможность создавать цветовые палитры для дальнейшего использования элементами библиотеки. В случае, если вы имеете собственную цветовую палитру, Themeor предлагает вам доступ к customVariables их палитры, куда вы можете добавлять цвета, используя переменные CSS.
· Scaled CSS – Themeor предлагает собственную градацию размеров от самого маленького (x3s) до самого большого (x3l). По моему мнению, такая градация намного удобнее и имеет больше места для «маневра», чем, допустим, существующая таблица размеров Bootstrap. Однако, хочу добавить от себя, что мне было непривычно видеть такие названия размеров: я больше привык к наименованию размеров от 3xs до 3xl, да и думаю, что я буду не один такой.
· Box – представляет собой компонент для разбиения контента на прямоугольники, как это обычно делается на макетах в Photoshop, Figma или Adobe XD. Основными кастомизациями являются полная настройка палитры для компонента, тени и границы, а также возможность вставки изображения на фон компонента. В итоге мы получаем достаточно простую, но в то же время удобную и функциональную компоненту для отображения какого-либо списка или, к примеру, любого отдельного блока под сервис у приложения.
· Font – наверное один из самых полюбившихся мне компонентов. Он обладает ВСЕМИ нужными свойствами для кастомизации текста любого уровня сложности, будь то параграф или ссылка. Один из таких, которые можно назвать «малый, да удалый».
· Line – мне кажется, что идеей данного компонента является вынос рамок компонента за его пределы для более удобного последующего их контроля. И знаете что? Мне эта идея понравилась. Он позволяет изменять границы как только возможно: хотите поменять цвет? Пожалуйста. Хотите выделить какой-то компонент на фоне остальных? Запросто. Всё, что вам нужно, просто добавить границы для него и кастомизировать так, как вам нужно.
· Icon – позволяет добавлять ваши svg иконки в проект, а в последующем менять из размер или цвет. Всё просто и со вкусом.
· Gap – заменяет собой лишние телодвижения по изменению margin и padding у блоков в CSS и позволяет делать это всё программно. Экономит кучу времени + улучшает взаимодействие с padding и margin.
· Align – к сожалению, страница документации для него не готова, однако использование его в других примерах позволяет понять, как им пользоваться. Если кратко, то позволяет настроить расположение компонентов в проекте, как это бы сделал display: grid. Однако опять же позволяет уменьшить время пребывания в CSS файлах, что помогает сконцетрироваться на программном построении UI. Мне показался очень удобным и полезным, поэтому с нетерпением жду появления его полной документации.
· Fit – в отличие от Align, позволяет контролировать расположение вложенных объектов, а также их размеры. Очень удобен при необходимости более понятного поведения, чем position: absolute.
В целом, Themeor оставил только положительные эмоции от использования и позволил мне справиться с простроением UI приложения на 25-30% быстрее, чем я это делал обычно. Также надеюсь на скорейшее появление документации для остальных компонентов и очень надеюсь увидеть другие компоненты, такие как их собственная имплементация Input и Dropdown. Так что буду следить за развитием данной библиотеки!
Моё тестовое приложение, построенное при помощи библиотеки, можно увидеть здесь: https://eriscot.github.io/themeor-test/
Код главной страницы:
class App extends Component {
constructor(props) {
super(props);
this.state = {
jobs: [],
searchField: ''
}
}
componentDidMount() {
fetch('https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?search=react')
.then(res => res.json())
.then(jobs => this.setState({
jobs
}));
}
handleChange = (e) => {
this.setState({
searchField: e.target.value
})
}
render() {
const {jobs, searchField} = this.state;
const filteredJobs = jobs.filter(job => job.company.toLowerCase().includes(searchField.toLowerCase()));
return(
<Box fill="--demo-var">
<Gap top="md">
<Font fill="base" align="center" size="lg" >Jobs App</Font>
</Gap>
<SearchBox handleChange={this.handleChange}/>
<CardList jobs={filteredJobs}/>
</Box>
)
}
}
Код поискового поля:
export const SearchBox = ({ placeholder, handleChange }) => (
<>
<Align hor="center">
<input
style={{ width: '150px' }}
type="search"
placeholder={placeholder}
onChange={handleChange}
/>
</Align>
</>
)
Код списка работ:
export const CardList = ({ jobs }) => (
<Align pattern='1fr 1fr 1fr 1fr'>
{
jobs.map(job => <Card key={job.id} job={job} />)
}
</Align>
)
Код карточки работы:
export const Card = ({ job }) => (
<Box fill="accent" radius="sm" style={{ border: '2px solid black', margin: '1rem', padding: '.5rem' }}>
<Align hor="center">
<img alt="card" src={job.company_logo} width="70" height="70" />
<Font size="xl" align="center">{job.company}</Font>
<Font size="sm">{job.title}</Font>
<Font size="xs">{job.type}</Font>
</Align>
</Box>
)