yandex-ui-themer

A simple way to create your theme for @yandex/ui with Themekit

How to add new component to Theme Constructor

1. Update @yandex/ui to version where the component is introduced

npm i @yandex/ui@latest

2. Rebuild theme tokens

npm ci
npm run tokens:build

3. Add new component into componentList in themekit.config.js

NOTE: It is better to add components in alphabetical order.

const componentsList = [
  "attach",
  "badge",
  ...,
  "componentName"
  ...
]

4. 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>
    )
}

5. 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,
    ...
}

License

MPL-2.0