PLASMA-GIGA

Набор компонентов и утилит для создания web-приложений на базе ReactJS.

Использование

Библиотека реализована с помощью:

typescript
styled-components (рекомендуем использовать версию 5.3.1)

Однако их использование необязательно!

Установка зависимостей

info

Убедитесь, что у вас установлен ReactJS!

$ npm install --save @salutejs/plasma-giga @salutejs/plasma-themes

Для работы со styled-components, необходимо установить

$ npm install --save styled-components@5.3.1

Использование компонентов

Все компоненты доступны напрямую из пакета

import styled from 'styled-components';
import { Button } from '@salutejs/plasma-giga';
import { textAccent } from '@salutejs/plasma-themes/tokens';

export const App = () => {
    const StyledP = styled.p`
        color: ${textAccent};
    `;

    return (
        <>
            <Button>Hello, Plasma!</Button>

            <StyledP>
                Token usage example
            </StyledP>
        </>
    );
};

Так же библиотека поставляет компоненты собранные с помощью styled-components

import { Button } from '@salutejs/plasma-giga/styled-components';

Подключение шрифтов

Типографическая система основана на фирменных шрифтах.

Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на CDN.

Для использования типографической системы необходимо загрузить два css файла в зависимости от используемых шрифтов в теме.

html
NextJS

info

Если в качестве основы web-приложения вы используете create-react-app, вам необходимо изменить файл ./public/index.html.

Добавить внутрь тега head.

<html>
    <head>
        <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
        />
        <title>Wep App</title>
    </head>
    <body>
    ...
    </body>
</html>

info

Если в качестве основы web-приложения вы используете Next, вам необходимо изменить файл ./pages/index.html.

import Head from "next/head";

import { H2, Button } from "@salutejs/plasma-giga";

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App with plasma-giga components</title>
        <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
        />
      </Head>
      <div>
        <main>
            <div>
                <H2> Salute </H2>
                <Button text="Hello" />
            </div>
        </main>
      </div>
    </>
  );
}

Подключение темы

info

Точкой входа является корень приложения:

Если вы используете Create React App, делайте вызов внутри src/index.tsx.
Если вы используете Next.js, создайте файл pages/_app.tsx и подключите стили в нем.

styled-components
css
sass
css-module
sass-module

import React from 'react';
import { createGlobalStyle } from 'styled-components';
import { Button, BodyL } from '@salutejs/plasma-giga/styled-components';
import { plasma_giga__light } from '@salutejs/plasma-themes';

const Theme = createGlobalStyle(plasma_giga__light);

const App = () => {
    return (
        <>
            <Theme />
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </>
    );
};

export default App;

tip

Возможные дополнительные настройки в проекте:

Bundle tools:

import React from 'react';
import { Button, BodyL } from '@salutejs/plasma-giga';

import 'index.css';

const App = () => {
    return (
        <>
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </>
    );
};

export default App;

В файле, где происходит подключение всех стилей, например index.css

@import '@salutejs/plasma-themes/css/plasma_giga__dark.css';

tip

Возможные дополнительные настройки в проекте:

Bundle tools:

import React from 'react';
import { Button, BodyL } from '@salutejs/plasma-giga';

import './index.sass';

const App = () => {
    return (
        <>
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </>
    );
};

export default App;

В файле, где происходит подключение всех стилей, например index.sass

@use '@salutejs/plasma-themes/css/plasma-giga__dark.css';
// остальные стили

tip

Возможные дополнительные настройки в проекте:

Bundle tools:

TS:

Создайте global.d.ts

declare module "*.css" {
  export default {
    [index: string]: string;
  }
}

import React from 'react';
import { Button, BodyL } from '@salutejs/plasma-giga';

import styles from '@salutejs/plasma-themes/css/plasma_giga.module.css';

const App = () => {
    return (
        <div className={styles.dark}>
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </div>
    );
};

export default App;

tip

Возможные дополнительные настройки в проекте:

Bundle tools:

TS:

Создайте global.d.ts

declare module "*.css" {
  export default {
    [index: string]: string;
  }
}

import React from 'react';
import { Button, BodyL } from '@salutejs/plasma-giga';

import styles from './index.module.sass';

const App = () => {
    return (
        <div className={styles.dark}>
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </div>
    );
};

export default App;

В файле, где происходит подключение всех стилей, например index.module.sass

@use '@salutejs/plasma-themes/css/plasma-giga.module.css'

Переключение тем

styled-components
css
sass
css-module
sass-module

import React, { useState } from 'react';
import { createGlobalStyle } from 'styled-components';

import { Switch } from '@salutejs/plasma-giga';
import { plasma_giga__light, plasma_giga__dark } from '@salutejs/plasma-themes';

import './style.css';

const LightTheme = createGlobalStyle(plasma_giga__light);
const DarkTheme = createGlobalStyle(plasma_giga__dark);

const App = () => {
    const [theme, setTheme] = useState('light');

    return (
        <>
            {theme === 'light' ? <LightTheme /> : <DarkTheme />}

            <div className="wrapper">
                <Switch
                    label={`app theme: ${theme}`}
                    onChange={() => {
                        setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
                    }}
                />
            </div>
        </>
    );
};

export default App;

tip

Возможные дополнительные настройки в проекте:

Bundle tools:

import React, { useLayoutEffect, useState } from 'react';
import { Switch } from '@salutejs/plasma-giga';

import './index.css';

const App = () => {
    const [theme, setTheme] = useState('light');

    useLayoutEffect(() => {
        document.documentElement.className = theme;
    }, [theme]);

    return (
        <div className="wrapper">
            <Switch
                label={`app theme: ${theme}`}
                onChange={() => {
                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
                }}
            />
        </div>
    );
};

export default App;

В файле, где происходит подключение всех стилей, например index.css

@import '@salutejs/plasma-themes/css/plasma_giga.module.css';

tip

Возможные дополнительные настройки в проекте:

Bundle tools:

import React, { useLayoutEffect, useState } from 'react';
import { Switch } from '@salutejs/plasma-giga';

import './index.sass';

const App = () => {
    const [theme, setTheme] = useState('light');

    useLayoutEffect(() => {
        document.documentElement.className = theme;
    }, [theme]);

    return (
        <div className="wrapper">
            <Switch
                label={`app theme: ${theme}`}
                onChange={() => {
                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
                }}
            />
        </div>
    );
};

export default App;

В файле, где происходит подключение всех стилей, например index.sass

@use '@salutejs/plasma-themes/css/plasma-giga__dark.css'
// остальные стили

tip

Возможные дополнительные настройки в проекте:

Bundle tools:

TS:

Создайте global.d.ts

declare module "*.css" {
  export default {
    [index: string]: string;
  }
}

import React, { useLayoutEffect, useState } from 'react';

import { Switch } from '@salutejs/plasma-giga';
import webThemes from '@salutejs/plasma-themes/css/plasma_giga.module.css';

import './style.css';

const App = () => {
    const [theme, setTheme] = useState('light');

    useLayoutEffect(() => {
        document.documentElement.className = webThemes[theme];
    }, [theme]);

    return (
        <div className="wrapper">
            <Switch
                label={`app theme: ${theme}`}
                onChange={() => {
                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
                }}
            />
        </div>
    );
};

export default App;

tip

Возможные дополнительные настройки в проекте:

Bundle tools:

TS:

Создайте global.d.ts

declare module "*.css" {
  export default {
    [index: string]: string;
  }
}

import React, { useLayoutEffect, useState } from 'react';
import { Switch } from '@salutejs/plasma-giga';

import './style.sass';

const App = () => {
    const [theme, setTheme] = useState('light');

    useLayoutEffect(() => {
        document.documentElement.className = theme;
    }, [theme]);

    return (
        <div className="wrapper">
            <Switch
                label={`app theme: ${theme}`}
                onChange={() => {
                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
                }}
            />
        </div>
    );
};

export default App;

В файле, где происходит подключение всех стилей, например index.sass

@use '@salutejs/plasma-themes/css/plasma-giga.module.css'

Использование​

Установка зависимостей​

Использование компонентов​

Подключение шрифтов​

Подключение темы​

Переключение тем​

Использование

Установка зависимостей

Использование компонентов

Подключение шрифтов

Подключение темы

Переключение тем