Слои

1. Theme: tokens (colors, spaces, animations), settings

   Константы пробрасываются в react-контекст и css-переменные чтобы при изменении темы всё динамически обновлялось. Все стандартные настройки можно поменять.

   classes, propses, renderers: 1) конструктивные, 2) визуальные, 3) контентные (slot aimed). См. так же Style customising: Visual/Frame segregation.

   Тут же прописываются breakpoints

   На этом уровне так же фиксируются внутренние переиспользуемые наборы стилей

   1rem забивается на 1unit

   Настройка высокоуровневых композиций может включать: пути для обращения к серверу или кастомный api-слой,

2. Components:

   Aspects:

   • Core components для дизайн системы aka UI Kit конструктор — визуал может быть легко и очень гибко изменён, компоненты содержат в себе всю сложную UI-логику. В текущем положении вещей, такое часто реализуется отдельными разрозненными библиотеками, лишь некоторые из которых не тянут за собой конкретное сложно изменяемое оформление: Popper,,,

   • Компонуемость. Все можно вкладывать и сочетать со всем

     Частые проблемы: 1) принимается только текст, нельзя кастомизировать Select.Item, Tooltip.children 2) иконка неправильно позиционируется по умолчанию внутри Button, Input* prefix/postfix,,,

   • Сквозное применение во всей системе, вебе и приложениях. Высокая кастомизируемость. See also CSS Гудини

   Elements:

   • Layout

     • invisible: Box, Center, Flow, Grid, Cluster, GroupOf (Button, Radio, Checkbox/Chip/Toggle, Avatar), Paragraph, Swipe (bars: boolean)
     • general: Card, Drawer, Modal, Callout
     • app: Header,
     • micro: Divider,

   • Data (Input/view/InPlace, Composite Groups):

     composite: Table/List, Attrs (.Row), Form (.Label), Tree-View

     input/view/inplace: Input*, Unilect, Checkbox, Radio, Rating, Date/Time

   • Data view only, Markup

     • containers: Span, Typography (_Heading, _Body), Icon, Image, Emoji, EmptyCell, Callout, Quote, TextList (_Ordered, _Unordered, .Item)
     • general: Tooltips, <BetterTip,
     • Avatars, ChipBadge, CounterBadge,
     • Embed (Tweet,,,), Video, Audio, Canvas

   • Utilitary

     • Animations (Fade, Collapse, Grow, Slide, Zoom),
     • MirroredActionBox (подсвечивать одновременно 2 или больше элементов)
     • Shadelock, ReactPortal, Popper,
     • hooks (micro state mgrs)

   • Actions

     Button, ToggleButton, Link (_Bookmark), Clickable, Dropdown,

   • Feedback

     • Status (Status Feedback), Progress, Skeleton loader, Alert
     • Snackbar
     • Dialog, Notification

   • App

     • navigation: Menu (Super Smart Menu)
     • Header, Footer, Sidebar, Logo, AppProfile

   • не закончено

3. Patterns: state-keepers, compositions, semantic markup

   <aside> 🚧 С паттернами пока всё сложно

   </aside>

   E.g.: Login, Index-Show, AppShell, AppState, DataGrid+Pagination,,,

   Доменная модель в UI

   UX By Default

   Паттерны — в код

   Relearn CSS layout

   Box, Center, Grid, Cluster,,, Там и немного кода есть.

   Patterns

   DS Gov.UK. Patterns often use one or more components and explain how to adapt them to the context. Есть немного кода

   kdeldycke/awesome-falsehood

   Как валидировать формы, как правильно работать со временем и тд.

   Levels:

   1. Principles/Conceptions: no code solution exist
      • Ask users for… address, bank card,,,
      • Help users to… create account,,,
      • Inform user about... no access, service problems,,,
   2. Markup, Semantic
      • Micro data (e.g. vCard, vEvent,,,)
   3. Visual, Motion
   4. State management
   5. Server aware, Full stack

   Elements (take all appropriate levels):

   • Complex Constructions

     e.g.: Stepper, Tasks, TwoColumnLists (TransferListColumns), RichTextEditor,,,

   • Micro Constructions

     e.g. Icon with updates count badge, Spoiler, CrossLink/NestedPageLink, TransclusionBlock, Diff (.Ins, .Del), IFrame, Math (LaTeX/MathML),,,

   • Micro Container Components [ Markup ] [ Visual ]

     docs: Aside, Main, Article, Section, Figure (.Caption), Fieldset, Nav, Em, Strong, Code, Kbd, Dfn, Abbr,,,

     apps: Toolbar, Panel, ContextMenu

   • ? Behavior Components

     ? <WhyDisabledTip, disableReasons, <NewFeature, aka NewUI, <UndoSnackBar, SpyingMenu (scroll tracking sidetree menu), List search,

   • Micro Actions [ State ] [ Server ]

     e.g. Button type= delete|update|submit-create|submit-change|call-action|load|toggle-ui|show-more todo: тут смешаны разные уровни абстракции, нужно отделить базис и паттерны

     не допускает двойные нажатия, показывает статус запроса

4. Develop time helpers

   IDE AS ECOSYSTEM GUIDELINES PROVIDER

Бонусы

• Isomorphic interfaces
• Forced Exposed App Actions&Objects
• Более мощный скринридер и обработчик команд для людей с ограничениями. #A11y_By_Default

Story

Во всех дизайн системах разумно реализуют только базовые кирпичики

А в гайдах могут дополнительно описывать разные правила и показывать композитные примеры использования базовых компонентов вместе для типовых задач.

Мне же кажется, что стоило бы выносить в реализацию как можно больше разных паттернов.

Например, список с поиском, Автосаджест с правильной работой с сервером, Карточка сущности с CRUD провязкой и тд.

Чтобы почти любая ситуация решалась набором чуть более высокоуровневых композитов.

Такие паттерны должны быть ui agnostic. Это не всегда что-то про управление состояним и работу с сервером, это может быть и что-то про правильные анимации или какие-то статичные визуальные фишечки типа простановки висящей пунктуации и переносов, визуальной компенсации смещений.

Чтобы написание такого с нуля было чем-то фриковым. Так разные хорошие практики будут отлиты в коде.

Такая семантичность на максималках

В качетсве бонуса, эта провязка Доменной Модели в UI, кажется может дать хороший скринридер и набор команд, что им и обычные люди смогут пользоваться через продвинутый Spotlight, соединённый с опциональным голосовым интерфейсом.