[DOP-21929] add file format settings (#68)

* [DOP-21929] add file format settings

* [DOP-21929] add comments about useWatch

---------

Co-authored-by: Zabilsya <[email protected]>

Author: Zabilsya

src/entities/file/@x/transfer.ts

@@ -0,0 +1,3 @@
+/** Cross-import entities using public API in FSD https://feature-sliced.design/ru/docs/reference/public-api#public-api-for-cross-imports */
+export type { FileFormat, Json } from '../types';
+export { FileFormatParams } from '../ui';

src/entities/file/index.ts

@@ -0,0 +1 @@
+export * from './types';

src/entities/file/types.ts

@@ -0,0 +1,73 @@
+export enum FileCompression {
+  NONE = 'none',
+  BZIP2 = 'bzip2',
+  GZIP = 'gzip',
+  LZ4 = 'lz4',
+  SNAPPY = 'snappy',
+  ZLIB = 'zlib',
+  DEFLATE = 'deflate',
+}
+
+export enum FileFormatType {
+  CSV = 'csv',
+  EXCEL = 'excel',
+  JSON = 'json',
+  JSON_LINE = 'jsonline',
+  ORC = 'orc',
+  PARQUET = 'parquet',
+  XML = 'xml',
+}
+
+export type FileFormat = Csv | Json | JsonLine | Excel | Orc | Parquet | Xml;
+
+export interface Csv {
+  type: FileFormatType.CSV;
+  delimiter: string;
+  encoding: string;
+  quote: string;
+  escape: string;
+  include_header: boolean;
+  line_sep: string;
+  compression: Exclude<FileCompression, FileCompression.ZLIB> | 'none';
+}
+
+export interface Json {
+  type: FileFormatType.JSON;
+  encoding: string;
+  line_sep: string;
+  compression: Exclude<FileCompression, FileCompression.ZLIB> | 'none';
+}
+
+export interface JsonLine {
+  type: FileFormatType.JSON_LINE;
+  encoding: string;
+  line_sep: string;
+  compression: Exclude<FileCompression, FileCompression.ZLIB> | 'none';
+}
+
+export interface Excel {
+  type: FileFormatType.EXCEL;
+  include_header: boolean;
+  start_cell: string | null;
+}
+
+export interface Orc {
+  type: FileFormatType.ORC;
+  compression:
+    | Exclude<FileCompression, FileCompression.BZIP2 | FileCompression.GZIP | FileCompression.DEFLATE>
+    | 'none';
+}
+
+export interface Parquet {
+  type: FileFormatType.PARQUET;
+  compression:
+    | Exclude<FileCompression, FileCompression.BZIP2 | FileCompression.ZLIB | FileCompression.DEFLATE>
+    | 'none';
+}
+
+export interface Xml {
+  type: FileFormatType.XML;
+  root_tag: string;
+  row_tag: string;
+  compression: Exclude<FileCompression, FileCompression.ZLIB | FileCompression.DEFLATE> | 'none';
+}

src/entities/file/ui/FileFormatParams/components/FileCompression/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Form, Switch } from 'antd';
+import { Select } from '@shared/ui';
+import { Typography } from 'antd';
+import clsx from 'clsx';
+
+import { FileCompressionProps } from './types';
+import classes from './styles.module.less';
+
+const { Text } = Typography;
+
+export const FileCompression = <T,>({ name, options }: FileCompressionProps<T>) => {
+  const fieldName = [...name, 'compression'];
+
+  /* useWatch takes a value from Form.Item, but useFormInstance takes one from general form state
+   * useWatch returns undefined when Form.Item has not rendered yet
+   * https://github.com/ant-design/ant-design/issues/49010
+   */
+  Form.useWatch(fieldName);
+  const formInstance = Form.useFormInstance();
+
+  const toggleCompression = (value: boolean) => {
+    if (value) {
+      formInstance.setFieldValue(fieldName, undefined);
+    } else {
+      formInstance.setFieldValue(fieldName, 'none');
+    }
+  };
+
+  const switchChecked = formInstance.getFieldValue(fieldName) !== 'none';
+
+  const selectClassNames = clsx({
+    nodrag: true,
+    [classes.hidden]: !switchChecked,
+  });
+
+  return (
+    <div className={classes.wrapper}>
+      <div className={classes.switch}>
+        <Text className={classes.label}>Compression</Text>
+        <Switch className="nodrag" checked={switchChecked} onChange={toggleCompression} />
+      </div>
+      <Form.Item className={classes.formItem} name={fieldName}>
+        <Select
+          className={selectClassNames}
+          size="large"
+          options={options}
+          placeholder="Select compression"
+          showSearch
+        />
+      </Form.Item>
+    </div>
+  );
+};

src/entities/file/ui/FileFormatParams/components/FileCompression/styles.module.less

@@ -0,0 +1,26 @@
+.formItem {
+  :global(.ant-form-item-control-input) {
+    min-height: auto;
+  }
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+
+  .switch {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+
+    .label {
+      font-size: 15px;
+      line-height: 1.5715;
+      padding-bottom: 2px;
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+}

src/entities/file/ui/FileFormatParams/components/FileCompression/types.ts

@@ -0,0 +1,7 @@
+import { OptionItem } from '@shared/ui';
+
+import { FileFormatFieldName } from '../types';
+
+export interface FileCompressionProps<T> extends FileFormatFieldName {
+  options: OptionItem<T>[];
+}

src/entities/file/ui/FileFormatParams/components/FileFormatCsv/constants.ts

@@ -0,0 +1,15 @@
+import { prepareOptionsForSelect } from '@shared/ui';
+
+import { Csv, FileCompression } from '../../../../types';
+
+export const CSV_COMPRESSION_SELECT_OPTIONS = prepareOptionsForSelect<Csv['compression']>({
+  data: [
+    FileCompression.BZIP2,
+    FileCompression.DEFLATE,
+    FileCompression.GZIP,
+    FileCompression.LZ4,
+    FileCompression.SNAPPY,
+  ],
+  renderLabel: (data) => data,
+  renderValue: (data) => data,
+});

src/entities/file/ui/FileFormatParams/components/FileFormatCsv/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Form, Input, Radio } from 'antd';
+
+import { FileCompression } from '../FileCompression';
+
+import { CSV_COMPRESSION_SELECT_OPTIONS } from './constants';
+import { FileFormatCsvProps } from './types';
+
+export const FileFormatCsv = ({ name }: FileFormatCsvProps) => {
+  return (
+    <>
+      <Form.Item label="Delimiter" name={[...name, 'delimiter']}>
+        <Input className="nodrag" size="large" />
+      </Form.Item>
+      <Form.Item label="Encoding" name={[...name, 'encoding']}>
+        <Input className="nodrag" size="large" />
+      </Form.Item>
+      <Form.Item label="Quote" name={[...name, 'quote']}>
+        <Input className="nodrag" size="large" />
+      </Form.Item>
+      <Form.Item label="Escape" name={[...name, 'escape']}>
+        <Input className="nodrag" size="large" />
+      </Form.Item>
+      <Form.Item label="Include header" name={[...name, 'include_header']}>
+        <Radio.Group>
+          <Radio value={true}>Yes</Radio>
+          <Radio value={false}>No</Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="Line separator" name={[...name, 'line_sep']}>
+        <Input className="nodrag" size="large" />
+      </Form.Item>
+      <FileCompression name={name} options={CSV_COMPRESSION_SELECT_OPTIONS} />
+    </>
+  );
+};

src/entities/file/ui/FileFormatParams/components/FileFormatCsv/types.ts

@@ -0,0 +1,3 @@
+import { FileFormatFieldName } from '../types';
+
+export interface FileFormatCsvProps extends FileFormatFieldName {}

src/entities/file/ui/FileFormatParams/components/FileFormatExcel/index.tsx

@@ -0,0 +1,20 @@
+import { Form, Input, Radio } from 'antd';
+import React from 'react';
+
+import { FileFormatExcelProps } from './types';
+
+export const FileFormatExcel = ({ name }: FileFormatExcelProps) => {
+  return (
+    <>
+      <Form.Item label="Include header" name={[...name, 'include_header']}>
+        <Radio.Group>
+          <Radio value={true}>Yes</Radio>
+          <Radio value={false}>No</Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="Start cell" name={[...name, 'start_cell']}>
+        <Input className="nodrag" size="large" />
+      </Form.Item>
+    </>
+  );
+};