@topcreator/ui

Як оновити library?

1. Створити новий branch від development_x
2. Додаєш зміни та пушиш в новий branch
3. Відкриваєш pull request з нового бранчу в development_x
4. Merge новий pull request
5. Пишеш git pull origin development_x
6. Змінюєш версію в package.json на ту, яка випущена останньою
7. Пишеш yarn changeset

8. git add .
   git commit -m "Ваше повідомлення коміту"
   

9. Відкриваєш pull request з development_x в main та мерджиш
10. Очікуєш 2 хвилини поки створиться pull request 'Version Package' в main
11. Мержиш 'Version Package' в main і через 5 хвилин library оновиться

Library Configuration:

You need to import it in your <App /> to have gobal styles and variables:

import 'topcreator/global.css'
import 'topcreator/root.css'

if you using scss you have to create vars.scss file:

// COLORS
$lightSystem25Color: var(--lightSystem25Color);
$lightSystem40Color: var(--lightSystem40Color);
$lightSystem50Color: var(--lightSystem50Color);
$lightSystem100Color: var(--lightSystem100Color);
$lightSystem150Color: var(--lightSystem150Color);
$lightSystem200Color: var(--lightSystem200Color);
$lightSystem300Color: var(--lightSystem300Color);
$lightSystem400Color: var(--lightSystem400Color);
$lightSystem500Color: var(--lightSystem500Color);

$lightPrimary25Color: var(--lightPrimary25Color);
$lightPrimary50Color: var(--lightPrimary50Color);
$lightPrimary100Color: var(--lightPrimary100Color);
$lightPrimary150Color: var(--lightPrimary150Color);
$lightPrimary200Color: var(--lightPrimary200Color);
$lightPrimary300Color: var(--lightPrimary300Color);
$lightPrimary400Color: var(--lightPrimary400Color);
$lightPrimary500Color: var(--lightPrimary500Color);
$lightPrimary600Color: var(--lightPrimary600Color);
$lightPrimary700Color: var(--lightPrimary700Color);
$lightPrimary800Color: var(--lightPrimary800Color);

$lightSecondary100Color: var(--lightSecondary100Color);
$lightSecondary500Color: var(--lightSecondary500Color);
$lightSecondaryBlue900Color: var(--lightSecondaryBlue900Color);
$lightSecondaryBlue950Color: var(--lightSecondaryBlue950Color);
$lightSecondaryBrandColor: var(--lightSecondaryBrandColor);

$blackSecondary2Color: var(--blackSecondary2Color);
$blackSecondary10Color: var(--blackSecondary10Color);
$blackSecondary40Color: var(--blackSecondary40Color);
$blackSecondary60Color: var(--blackSecondary60Color);
$blackSecondary70Color: var(--blackSecondary70Color);
$blackSecondary90Color: var(--blackSecondary90Color);
$blackSecondary500Color: var(--blackSecondary500Color);
$blackSecondary600Color: var(--blackSecondary600Color);
$blackSecondary700Color: var(--blackSecondary700Color);
$blackSecondary800Color: var(--blackSecondary800Color);
$blackSecondary950Color: var(--blackSecondary950Color);

$whiteSecondary5Color: var(--whiteSecondary5Color);
$whiteSecondary10Color: var(--whiteSecondary10Color);
$whiteSecondary20Color: var(--whiteSecondary20Color);
$whiteSecondary40Color: var(--whiteSecondary40Color);
$whiteSecondary60Color: var(--whiteSecondary60Color);
$whiteSecondary100Color: var(--whiteSecondary100Color);

$brandBlueGradient: var(--brandBlueGradient);
$brandBlueHoverGradient: var(--brandBlueHoverGradient);
$brandGradient: var(--brandGradient);

$whiteSecondary20Color: var(--whiteSecondary20Color);

$statusGreen15Color: var(--statusGreen15Color);
$statusGreen100Color: var(--statusGreen100Color);
$statusGreen500Color: var(--statusGreen500Color);
$statusRed15Color: var(--statusRed15Color);
$statusRed100Color: var(--statusRed100Color);
$statusRed300Color: var(--statusRed300Color);
$statusRed500Color: var(--statusRed500Color);
$statusBlue15Color: var(--statusBlue15Color);
$statusBlue100Color: var(--statusBlue100Color);
$statusBlue300Color: var(--statusBlue300Color);
$statusBlue500Color: var(--statusBlue500Color);
$statusOrange500Color: var(--statusOrange500Color);
$statusOrange700Color: var(--statusOrange700Color);

$gradientSkeleton: var(--gradientSkeleton);

// GLOBAL
$fontSize: 16px;
$lineHeight: 100%;
$transition: 0.2s ease;

$point: 4px;

// MEDIA
$screen-xxl: 1440px;
$screen-xl: 1200px;
$screen-lg: 992px;
$screen-md: 768px;
$screen-sm: 576px;

// MIXINS
@mixin ui($property, $count) {
    #{$property}: $count * $point;
}

@mixin flexVerticalSpace($count) {
    display: flex;
    flex-direction: column;
    gap: $count * $point;
}

@mixin flexHorizontalSpace($count) {
    display: flex;
    gap: $count * $point;
}

Usages

Components usage:

import React, { type FC } from 'react'
import { Button } from 'topcreator'

const Component: FC = () => {
    return <section>
        <Button variant='primary' size='large'>Hello Button</Button>
    </section>
}

Utilities usage:

import React, { type FC } from 'react'
import { Button } from 'topcreator'
import { classnames } from 'topcreator/utils'

const Component: FC = () => {
    return <section className={classnames('flex', 'justify_center')}>
        <Button variant='primary' size='large'>Hello Button</Button>
    </section>
}

Types usage:

import React, { type FC } from 'react'
import { Button } from 'topcreator'
import { type ButtonProps } from 'topcreator/types'

const Component: FC<{ buttonProps: ButtonProps }> = ({ buttonProps }) => {
    return <section className={classnames('flex', 'justify_center')}>
        <Button {...buttonProps}>Hello Button</Button>
    </section>
}