A simple way to create your theme for @yandex/ui with Themekit
- Update @yandex/ui to version where the component is introduced
npm i @yandex/ui@latest- Rebuild theme tokens
npm ci
npm run tokens:build- Add new component into componentList in themekit.config.js
NOTE: It is better to add components in alphabetical order.
const componentsList = [
"attach",
"badge",
...,
"componentName"
...
]- Add the showcase for the component in src/components/Showcase/Showcases/ComponentShowcase.tsx
NOTE: Showcase should cover all possible tokens of the component. Otherwise, designers could not tune all of the tokens in Theme Constructor.
import React from 'react';
import { Component } from '@yandex/ui/Component/desktop/bundle';
import { Headline } from '../../Headline';
export const ComponentShowcase = () => {
return (
<Headline>ComponentName</Headline>
<div className="Showcase-Item">
<Component />
</div>
)
}- Add the component showcase to componentsMap in src/components/Showcase/Showcase.tsx
import { ComponentShowcase } from './Showcases/ComponentShowcase';
const componentsMap: Record<string, ComponentType> = {
button: ButtonShowcase,
buttonGroup: ButtonGroupShowcase,
...,
component: ComponentShowcase,
...
}