feat(plasma-giga-docs): add docs for plasma-giga

website/plasma-giga-docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/plasma-giga-docs/.npmrc

@@ -0,0 +1,11 @@
+@salutejs:registry=https://registry.npmjs.org/
+
+save-exact=true
+
+# disabled auto-installing peer dependencies
+legacy-peer-deps=true
+
+# for specify Node, NPM Version to use
+engine-strict=true
+
+//registry.npmjs.org/:_authToken=${NPM_REGISTRY_TOKEN}

website/plasma-giga-docs/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Salute Devices
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

website/plasma-giga-docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

website/plasma-giga-docs/docs/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "PLASMA-GIGA",
+    "position": 2
+}

website/plasma-giga-docs/docs/components/Attach.mdx

@@ -0,0 +1,151 @@
+---
+id: attach
+title: Attach
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Attach
+<Description name="Attach" />
+<PropsTable name="Attach" />
+
+## Примеры
+
+### Подсказка к кнопке
+Вид `helperText` задается с помощью свойства `helperTextView`. Возможные значения свойства:
++ `"default"` – по умолчанию;
++ `"negative"` – ошибка.
+
+```tsx live
+import React from 'react';
+import { Attach } from '@salutejs/plasma-giga';
+
+export function App() {
+    return (
+        <div style={{ padding: "1rem" }}>
+            <Attach helperTextView="default" helperText="Подсказка" />
+            <Attach helperTextView="negative" helperText="Подсказка" />
+        </div>
+    );
+}
+```
+
+### Вид кнопки
+С помощью свойства `buttonType` можно менять вид кнопки: обычный или с иконкой.
+
+```tsx live
+import React from 'react';
+import { Attach } from '@salutejs/plasma-giga';
+
+export function App() {
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "50px"}}>
+            <Attach view="accent" buttonType={'button'} />
+            <Attach view="secondary" buttonType={'iconButton'} />
+        </div>
+    );
+}
+```
+
+### Расположение элементов
+C помощью свойства `flow` можно регулировать расположение элементов в зависимости от ширины контейнера.
+
+```tsx live
+import React from 'react';
+import { Attach } from '@salutejs/plasma-giga';
+
+export function App() {
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "50px"}}>
+            <Attach style={{ width: "400px" }} flow="auto" />
+            <Attach style={{ width: "400px" }} flow="horizontal" />
+            <Attach style={{ width: "400px" }} flow="vertical" />
+        </div>
+    );
+}
+```
+
+### Фильтр форматов файлов
+Свойство `acceptedFileFormats` устанавливает доступные форматы файлов.
+
+```tsx live
+import React from 'react';
+import { Attach } from '@salutejs/plasma-giga';
+
+export function App() {
+    return (
+        <div>
+            <Attach acceptedFileFormats={['.pdf', '.doc']} />
+        </div>
+    );
+}
+```
+
+### Пример использования в форме
+
+```tsx live
+import React, { useState } from 'react';
+import { Attach, Button } from '@salutejs/plasma-giga';
+
+function App() {
+    const ids = ['0', '1', '2'];
+    const [isLoading, setIsLoading] = useState(false);
+    const [attachedFiles, setAttachedFiles] = useState([]);
+
+    const handleAttachFile = (e) => {
+        setAttachedFiles((prevAttachedFiles) => [
+            ...prevAttachedFiles,
+            {
+                fileData: e.target.files[0],
+                id: e.target.id,
+            },
+        ]);
+    };
+
+    const handleAttachClear = (id) => {
+        setAttachedFiles(attachedFiles.filter((file) => file.id !== id));
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+
+        const formData = new FormData(e.target);
+        console.log('formData', Object.fromEntries(formData));
+
+        setTimeout(() => {
+            setAttachedFiles([]);
+            setIsLoading(false);
+        }, 2000);
+    };
+
+    return (
+        <>
+            <span>{isLoading ? 'Форма отправляется' : 'Прикрепленные файлы:'}</span>
+            {!isLoading && attachedFiles.length > 0 && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0px' }}>
+                    {attachedFiles.map((file) => (
+                        <span>{file.fileData.name}</span>
+                    ))}
+                </div>
+            )}
+
+            {!isLoading && (
+                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
+                    {ids.map((id) => (
+                        <Attach
+                            id={id}
+                            name={`attach${id}`}
+                            text={`Загрузить файл ${id}`}
+                            onChange={handleAttachFile}
+                            onClear={() => handleAttachClear(id)}
+                        />
+                    ))}
+
+                    <Button type="submit">Отправить</Button>
+                </form>
+            )}
+        </>
+    );
+}
+```