utfsrb-ui-kit v0.1.0

This project was bootstrapped with Create React App.

• Create React App
• Mobx
• Styled-components
• Typescript
• Gulp
• react-app-rewired

Версии node и npm

node: v14.10.0 npm: 7.20.0

Внимание! При использовании иконок в разработке необходимо выполнить команды

Сгенерировать иконки: npm run convertSvgToTsx

Переписать по tslint сгенерированные файлы: npm run prettier:write

Сборка проекта

npm run build

Publish в NPM

Для компонентов в корне проекта в консоли выполнить команду make publish_components При этом сначала будет произведено тестирование собранных компонентов в проекте потребителе Если тест не прошел, то Publish будет остановлен.

Для иконок в корне проекта в консоли выполнить команду make publish_icons

Посмотреть последовательность можно в Makefile

Так же в ./src/components/package.json в секции scripts команды для компиляции .ts

Описание story

В каждом компоненте есть файл example.tsx, в нем формат описания.

// @Важно вернуть Info
export const Info = {
  name: 'Button',
  component: Example,
};

В файле /components/examples.ts экспорт всех example компонентов.

Этого хватит чтобы добавить ссылку в меню компонентов и вывести описание на страницу.

Формат описания может меняться в будущем.

Основные компоненты в секции ./src/components

Иконки в ./src/Icons

Скрипты сборки иконок находятся в ./src/Icons/src

Запуск приложения с помощью - react-app-rewired

В файле config-overrides.js добавлены алиасы для webpack

Тестирование собранных компонентов

команда - make .test_components запускает цепочку задач

    #build typescript компонентов
    npm run tsc:components;\  
    
    #копирование в корень сайта
    npm run gulp:components;\
    
    #удаление файлов прошлой сборки
    rm -rf ./inject-components-test/build;\
    rm -rf ./inject-components-test/node_modules;\
    rm -rf ./inject-components-test/publish-components;\
    
    #копирование собранных компонентов в сайт потребитель  
    cp -R ./publish-components ./inject-components-test;\
    
    #установка зависимостей потребителя
    cd ./inject-components-test && npm i;\
    
    #установка зависимостей компонентов
    cd ./publish-components && npm i;\
    
    #MERGE зависимостей потребителя и компонентов
    cp -R ./node_modules/ ../node_modules/;\
    rm -rf ./node_modules;\
    
    #выхожу из компонентов в корень потребителя
    cd ../;\        
    
    #копирую сами компоненты в зависимости @utfsrb-ui-kit/core/
    #эмуляция установки из NPM
    cp -R ./publish-components/ ./node_modules/@utfsrb-ui-kit/core/;\
    rm -rf ./publish-components;\
    
    #запуск билда в docker
    docker-compose stop && docker-compose rm -f && docker-compose build --no-cache && docker-compose up -d --force-recreate

Копирование файлов и установка зависимостей происходит на хост машине. Затем запускается docker-compose и сам build собирается в контейнере, для того чтобы исключить поиск зависимостей пакетов npm по директориям выше

Яндекс.Метрика Данные аккаунта

login: holism-metrika password: holism/2019!

Темизация

В библиотеке реализована возможность темизации компонентов. Компоненты используют в своих стилях переменные, заданные в дефолтной теме (import { DefaultTheme } from '@utfsrb-ui-kit/core';), с помощью темизации значения данных переменных можно перезадать, тем самым изменив внешний вид компонентов. Механизм темизации позаимствован из styled-components.

Как внедрить темизацию в свой проект: 1) с помощью функции createTheme нужно создать новую тему. Для этого в функцию необходимо передать объект, с теми свойствами, которые вы хотите перезадать. Внутри себя createTheme смерджит заданные вами опции с дефолтной темой. 2) затем нужно импортировать компонент ThemeProvider из @utfsrb-ui-kit/core или styled-components. В ThemeProvider вы можете обернуть тот компонент, который хотите стилизовать, или сразу целую часть приложения, тогда тема будет применена сразу к нескольким компонентам. 3) В ThemeProvider задайте параметр theme, в который передайте результат выполнения функции createTheme

Подробнее о механизме темизации можно прочесть здесь https://styled-components.com/docs/advanced. Возможен вариант, когда один ThemeProvider вложен в другой и так далее.

Примеры темизации:

1) import { ThemeProvider, createTheme, Button } from '@utfsrb-ui-kit/core';

render ( <ThemeProvider theme={createTheme({ borderWidth: '4px', shape: { borderRadiusSmall: '5px' } })}> Привет );

2) Если вы используйте в своем приложении ThemeProvider из styled-components и оборачиваете в него компоненты, но не передаете в нем дефолтную тему, возникнут ошибки в компонентах. Обязательно передайте в компоненты DefaultTheme, как в примере ниже!

import { ThemeProvider } from 'styled-components'; import { DefaultTheme } from '@utfsrb-ui-kit/core';

const globalTheme = {
  primary: {
    bg: '#fff',
    logo: '#fff',
    colorText: '#000',
  },
  secondary: {
    bg: '#fff',
    logo: '#000',
    colorText: '#000',
  },
};

render (
  <ThemeProvider theme={{ ...globalTheme, ...DefaultTheme }}>
    // содержит компоненты из '@utfsrb-ui-kit/core'
    <AppComponent/>
  <ThemeProvider theme={{ ...globalTheme, ...DefaultTheme }}>
);