Идеи для Code Conventions

[aak-lear]

Предлагаю отмечать здесь моменты, которые стоит занести в описание Code Conventions, чтобы разработчики могли учитывать их при разработке новых компонентов

[aak-lear]

Например:
Мы не используем енамы в библиотеке, так как они не позволяют правильно типизировать пропсы компонентов. Вместо них создаются константные объекты вида { key: 'key' }, в которых каждому ключу соответствует аналогичное значение. Также можно отметить, что работы с такими объектами есть несколько вспомогательных инструментов:

• valuesAsKeysFromArray() – упрощает создание константного объекта
• Values<typeof constObj> – позволяет получить Union-тип значений константного объекта
• createValuesAsKeysTypeGuard() – позволяет создавать функции проверки типа для константных объектов

[ISAYwtf]

У нас есть небольшие правила применяемые ко всему проекту, предлагаю их тоже фиксировать. Ниже указал, по которым были какие-то замечания/нововведения в последнее время и, кажется, хорошо было бы стандартизировать:

1. Если компонент использует children, указывать его в пропсах явно;
2. Для добавления ref и className в пропсы использовать готовый объект BaseProps;
3. При использовании в пропсах в качестве основы интерфейс другого компонента исключать из них classes, styles и cssVars, это можно сделать дженериком OmitClassesAndStyles<Props>;
4. При наличии фокуса у компонента по возможности использовать baseFocusStyles;
5. Использовать If, Switch;
6. Писать jsDoc;
7. Использовать css-переменные;
8. При использовании css-переменных инициализировать их в root-классе;
9. Cтруктура файлов компонента;
10. Наименования стандартных объектов, ...StyleParams, ...WithoutHtml, и тд;
11. Разделение компонентов на main и system.

[maximzadorkin]

Правила написания storybook

1. Структура каталогов:

    - Component
        - storybook
            - story1
                - index.tsx
                - description.md (опционально)
            - story2
                - index.tsx
                - description.md (опционально)
            Component.story.tsx

2. Наименование каждой истории должно быть с постфиксом Story. Пример: SizeStory
3. DefaultArgs описываются только в Component.story.tsx при экспорте. Дополнительно применять к каждой нет необходимости, за исключением случаев, когда вам необходимо проставить конкретной истории параметры. В таком случае присваивать сразу в файле index.tsx вашей истории
4. Story в Component.story.tsx экспортируются в следующем формате export { SandBoxStory } from './sandbox'
5. Каждая история должна иметь типизацию. Пример: const SizeStory: Story<ComponentProps> = () => {};
6. Код компонента для каждой истории должно отображаться корректно, чтобы можно было его сразу скопировать и использовать на практике.