@meduza/ui-kit-2 0.8.4 → 0.8.5

package/README.md

@@ -4,7 +4,7 @@
 
 - `yarn start` - запускает development сборку с hot reload, пишет все в папку dist
 - `cd example && yarn start` - запускает сборку тестового проекта с hot reload,
-в который можно импортировать компоненты из кита
+  в который можно импортировать компоненты из кита
 - `yarn storybook` - запускает storybook
 
 `yarn generate` - генератор компонентов. Вводим название компонента, получаем все файлы и импорты
@@ -14,3 +14,17 @@
 Необходимо глобально импортировать в проект файл ui-kit.css (туда собираются все модули)
 Любые компоненты просто импортятся из кита
 
+## Сборка
+
+### Режимы сборки
+
+- `yarn build --mode development` - сборка стилей с переменными сайта
+- `yarn build --mode production` - сборка стилей без переменных
+
+### Особенности production сборки
+
+- Запускается без подключения переменных в silent-режиме
+- CSS-модули собираются в `ui-kit.css`
+- После сборки запускается `build.sh`:
+  1. Создает `ui-kit-game.css` с игровыми переменными
+  2. Перезаписывает `ui-kit.css` с переменными сайта

package/dist/Button/Button.types.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-export type ButtonThemes = 'sand' | 'gold' | 'light' | 'gray' | 'ghost' | 'dark' | 'black' | 'red';
-export type ButtonStates = 'isLoading' | 'isDefault';
-export type ButtonSizes = 'auto' | 'default';
-export type ButtonStyleContexts = 'isInToolbar' | 'isInSpoiler' | 'isInDropdown';
-export type ButtonAppearance = 'isFancy' | 'isClassic';
-export interface ButtonProps {
-    theme?: ButtonThemes;
-    appearance?: ButtonAppearance;
-    size?: ButtonSizes;
-    state?: ButtonStates;
-    styleContext?: ButtonStyleContexts;
-    disabled?: boolean;
-    onClick?: () => void;
-    children: React.ReactNode | JSX.Element[] | JSX.Element;
-}

package/dist/Button/ButtonLoader.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ButtonLoader: React.FC;

package/dist/Button/index.d.ts

@@ -1,2 +0,0 @@
-export { Button } from './Button';
-export { ButtonLoader } from './ButtonLoader';

package/dist/Image/Image.types.d.ts

@@ -1,35 +0,0 @@
-import { OptimizedImageItem } from '../types';
-export interface ImageProps {
-    alt?: string;
-    display?: string;
-    optimized?: {
-        original?: string;
-        w325: OptimizedImageItem;
-        w520?: OptimizedImageItem;
-        w650?: OptimizedImageItem;
-        w980?: OptimizedImageItem;
-        w1335?: OptimizedImageItem;
-    };
-    width?: number;
-    height?: number;
-    source?: string[];
-    lazy?: boolean;
-    ratio?: number;
-    fullscreen?: boolean;
-    styleContext?: string[] | string;
-}
-export interface PictureProps {
-    source?: string[];
-    optimized?: {
-        original?: string;
-        w325: OptimizedImageItem;
-        w520?: OptimizedImageItem;
-        w650?: OptimizedImageItem;
-        w980?: OptimizedImageItem;
-        w1335?: OptimizedImageItem;
-    };
-    alt?: string;
-    fallbackSource: string;
-    display: string;
-    onLoad: (boolean: any) => void;
-}

package/dist/SvgSymbol/SvgSymbol.types.d.ts

@@ -1,8 +0,0 @@
-export type SvgSymbolStyleContexts = 'isInFeature' | 'isInCard' | 'isInTopicBlockItem' | 'isInPageStatic' | 'isInMaterialMeta' | 'isInToolbar' | 'isInEpisodeBlock' | 'isInAudioPlayer' | 'isInAudioPanel' | 'isInPlaylist' | 'PodcastMaterial' | 'isInHeader' | 'isInProfile' | 'isInBookmark';
-export type Icons = 'meduzaLogo' | 'meduzaSymbol' | 'menu' | 'fb' | 'tw' | 'vk' | 'ok' | 'tg' | 'chat' | 'magic' | 'backward' | 'forward' | 'download' | 'play' | 'pause' | 'shareBookmark' | 'speedHalf' | 'speedOne' | 'speedOneHalf' | 'speedTwo' | 'podcastBookmark' | 'reaction' | 'cross' | 'link' | 'search' | 'card' | 'podcast' | 'arrow' | 'brent' | 'user' | 'bookmark' | 'receipt' | 'read' | 'listened';
-export type Sizes = 'small' | 'normal' | 'medium' | 'large' | 'unset';
-export interface SvgSymbolProps {
-    styleContext?: SvgSymbolStyleContexts;
-    size?: Sizes;
-    icon: Icons;
-}

package/dist/SvgSymbol/icons.d.ts

@@ -1,167 +0,0 @@
-export declare const icons: {
-    meduzaLogo: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    menu: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    fb: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    tw: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    vk: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    ok: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    tg: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    meduzaSymbol: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    backward: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    forward: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    download: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    play: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    pause: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    speedHalf: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    speedOne: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    speedOneHalf: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    speedTwo: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    podcastBookmark: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    reaction: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    cross: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    link: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    search: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    card: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    podcast: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    arrow: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    brent: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    user: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    bookmark: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    shareBookmark: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    receipt: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    read: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    listened: {
-        width: number;
-        height: number;
-        content: string;
-    };
-    magic: {
-        width: number;
-        height: number;
-        content: string;
-    };
-};

package/dist/Switcher/Switcher.types.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export type SwitcherStyleContexts = 'isInLive' | 'isInPanel' | 'isInMenu';
-export type SwitcherThemes = 'light' | 'dark';
-export type SwitcherChildrenPositions = 'left' | 'right';
-export interface SwitcherProps {
-    enabled: boolean;
-    styleContext: SwitcherStyleContexts;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    theme?: SwitcherThemes;
-    children: JSX.Element[] | JSX.Element;
-    childrenPosition?: SwitcherChildrenPositions;
-}

package/dist/index.d.ts

@@ -1,45 +0,0 @@
-export * from './Button';
-export * from './SvgSymbol';
-export * from './Switcher';
-export * from './Image';
-export * from './DotsOnImage';
-export * from './Lazy';
-export * from './Tag';
-export * from './Table';
-export * from './MediaCaption';
-export * from './MaterialNote';
-export * from './BookmarkButton';
-export * from './MaterialTitle';
-export * from './Dropdown';
-export * from './Toolbar';
-export * from './Popover';
-export * from './Meta';
-export * from './Timestamp';
-export * from './EmbedBlock';
-export * from './QuoteBlock';
-export * from './CardTitle';
-export * from './ChapterBlock';
-export * from './Cover';
-export * from './RenderBlocks';
-export * from './GroupedBlock';
-export * from './HalfBlock';
-export * from './RawHtmlBlock';
-export * from './ImportantLead';
-export * from './ListBlock';
-export * from './RelatedBlock';
-export * from './RichTitle';
-export * from './SimpleBlock';
-export * from './SimpleTitle';
-export * from './SourceBlock';
-export * from './Spoiler';
-export * from './MetaItem';
-export * from './MetaItemLive';
-export * from './DocumentItemsCount';
-export * from './ToolbarButton';
-export * from './Footnote';
-export * from './RelatedRichBlock';
-export * from './SensitiveBlock';
-export * from './DonatesTeaser';
-export * from './ShopRelatedBlock';
-export * from './AnnouncementInText';
-export * from './Tooltip';

package/dist/types.d.ts

@@ -1,20 +0,0 @@
-export interface OptimizedImageItem {
-    '1x': string;
-    '2x': string;
-    '1x_webp': string;
-    '2x_webp': string;
-}
-export type CallToActions = 'fb' | 'tw' | 'vk' | 'ok' | 'tg' | 'wp' | 'reaction' | 'pdf' | 'bookmark' | 'cross';
-export type LightboxImage = {
-    original: string;
-    w325: OptimizedImageItem;
-    w520: OptimizedImageItem;
-    w650: OptimizedImageItem;
-    w980: OptimizedImageItem;
-    w1335: OptimizedImageItem;
-};
-export interface LightboxContext {
-    show: (image: LightboxImage, alt?: string) => void;
-    hide: () => void;
-    visible: boolean;
-}