feat: export svg only

package.json

@@ -25,11 +25,11 @@
     ]
   },
   "devDependencies": {
-    "@auto-it/conventional-commits": "10.37.1",
-    "@auto-it/npm": "10.37.1",
+    "@auto-it/conventional-commits": "11.1.1",
+    "@auto-it/npm": "11.1.1",
     "@commitlint/cli": "17.0.2",
     "@commitlint/config-conventional": "17.0.2",
-    "auto": "10.37.1",
+    "auto": "11.1.1",
     "husky": "8.0.1",
     "lerna": "5.0.0",
     "lint-staged": "10.5.4",

packages/icon-export-ui/src/app/components/utils.ts

@@ -3,7 +3,7 @@ import prettier from 'prettier/standalone';
 import type { Options } from 'prettier';
 
 import { FilesPayloadResponse, IconComponents, IconPayload } from '../../types';
-import { getIconAsset, getIconComponent, getIconSource, getIndexSource, getIconCategories } from '../../source';
+import { getIconCategories, getIconSvg } from '../../source';
 import { getFilesSource } from '../api/githubFilesFetcher';
 
 const prettierSetting: Options = {
@@ -22,90 +22,46 @@ const prettierSetting: Options = {
 
 export const prettify = (source: string) => prettier.format(source, prettierSetting);
 
+// Эскпортируем svg и информацию по категориям
 export const getFilesPath = (iconName?: string, iconSize?: number) => ({
-    iconSourceExport: 'packages/plasma-icons/src/scalable/index.ts',
     iconSourceComponent: 'packages/plasma-icons/src/scalable/Icon.tsx',
-    iconSourceImport16: 'packages/plasma-icons/src/scalable/Icon.assets.16/index.ts',
-    iconSourceImport24: 'packages/plasma-icons/src/scalable/Icon.assets.24/index.ts',
-    iconSourceImport36: 'packages/plasma-icons/src/scalable/Icon.assets.36/index.ts',
-    iconAsset: `packages/plasma-icons/src/scalable/Icon.assets.${iconSize}/${iconName}.tsx`,
-    iconComponent: `packages/plasma-icons/src/scalable/Icons/Icon${iconName}.tsx`,
+    iconSvgAsset: `packages/plasma-icons/src/scalable/Icon.svg.${iconSize}/${iconName}.svg`,
 });
 
 export const getFilesPayload = (iconsMetaData: IconPayload[], ...args: string[]): FilesPayloadResponse => {
-    let [iconSourceExport, iconSourceComponent, iconSourceImport16, iconSourceImport24, iconSourceImport36] = args;
+    let [iconSourceComponent] = args;
 
     const iconsComponents = iconsMetaData.map(({ size, name = 'IconName', category, svg }) => {
-        iconSourceExport = getIndexSource(iconSourceExport, name);
-
-        if (size === 16) {
-            iconSourceImport16 = getIconSource(iconSourceImport16, name);
-        }
-        if (size === 24) {
-            iconSourceImport24 = getIconSource(iconSourceImport24, name);
-        }
-        if (size === 36) {
-            iconSourceImport36 = getIconSource(iconSourceImport36, name);
-        }
-
-        iconSourceComponent = getIconCategories(iconSourceComponent, name, size, category);
+        iconSourceComponent = getIconCategories(iconSourceComponent, name, category);
 
         return {
             iconSize: size,
             iconName: name,
-            iconAsset: prettify(getIconAsset(svg, name)),
-            iconComponent: prettify(getIconComponent(name)),
+            iconSvgAsset: getIconSvg(svg),
         };
     });
 
     return {
         iconsComponents,
-        iconSourceExport,
         iconSourceComponent,
-        iconSourceImport16,
-        iconSourceImport24,
-        iconSourceImport36,
     };
 };
 
 export const getGitHubData = async (token?: string, owner = 'salute-developers', repo = 'plasma') =>
-    getFilesSource(
-        owner,
-        repo,
-        [
-            getFilesPath().iconSourceExport,
-            getFilesPath().iconSourceComponent,
-            getFilesPath().iconSourceImport16,
-            getFilesPath().iconSourceImport24,
-            getFilesPath().iconSourceImport36,
-        ],
-        token,
-    );
+    getFilesSource(owner, repo, [getFilesPath().iconSourceComponent], token);
 
 export const getFlatIconFiles = (iconsComponents: IconComponents[]) =>
-    iconsComponents.reduce((acc: Record<string, string>, { iconAsset, iconComponent, iconName, iconSize }) => {
-        acc[getFilesPath(iconName).iconComponent] = iconComponent;
-        acc[getFilesPath(iconName, iconSize).iconAsset] = iconAsset;
+    iconsComponents.reduce((acc: Record<string, string>, { iconSvgAsset, iconName, iconSize }) => {
+        acc[getFilesPath(iconName, iconSize).iconSvgAsset] = iconSvgAsset;
 
         return acc;
     }, {});
 
-export const getFilesTree = ({
-    iconSourceExport,
-    iconSourceComponent,
-    iconSourceImport16,
-    iconSourceImport24,
-    iconSourceImport36,
-    iconsComponents,
-}: FilesPayloadResponse) => {
+export const getFilesTree = ({ iconSourceComponent, iconsComponents }: FilesPayloadResponse) => {
     const iconFiles = getFlatIconFiles(iconsComponents);
 
     return {
-        [getFilesPath().iconSourceExport]: iconSourceExport,
         [getFilesPath().iconSourceComponent]: iconSourceComponent,
-        [getFilesPath().iconSourceImport16]: iconSourceImport16,
-        [getFilesPath().iconSourceImport24]: iconSourceImport24,
-        [getFilesPath().iconSourceImport36]: iconSourceImport36,
         ...iconFiles,
     };
 };

packages/icon-export-ui/src/app/hooks/useGithubAuth.ts

@@ -16,7 +16,7 @@ const FETCH_DELAY = 1_500;
  * onGetToken - метод для получения токена
  */
 export const useGithubAuth = () => {
-    const [token, setToken] = useState<string | undefined>();
+    const [token, setToken] = useState<string | undefined>(); // сюда можно вставить свой собтвенный токен
 
     const onSetToken = useCallback((value?: string) => setToken(value), []);
 

packages/icon-export-ui/src/app/hooks/useRunGithubPRProcess.ts

@@ -46,6 +46,7 @@ export const useRunGithubPRProcess = ({ owner, repo, branchName }: RunProcessGit
 
             const withMetaData = saveMetaData(octokit, owner, repo);
 
+            // закомментить 0, 6, 7 step для добавления в существующую ветку
             if (branchName !== 'master' && branchName !== 'dev') {
                 setStep(0);
                 await withMetaData(createBranch)(branchName);

packages/icon-export-ui/src/source/iconAsset.ts

@@ -1,26 +1,3 @@
-import { camelize, compose, removeLineBreak } from '../utils';
-
-const getSvgContent = (source: string) => (/<svg(.*?)>(.*?)<\/svg>/gm.exec(source) || [])[2];
-
-const getViewBox = (source: string) => (/viewBox="(.*?)"/gm.exec(source) || [])[1];
-
-const removeFillOpacity = (source: string) => source.replace(/fill-opacity="(.*?)"/gm, '');
-
-const setFillCurrentColor = (source: string) => source.replace(/fill="(.*?)"/gm, 'fill="currentColor"');
-
-const convertCSSProperty = (source: string) =>
-    source.replace(
-        /([a-zA-Z-]*):(.*)/g,
-        (...match) => `${camelize(match[1])}: ${Number.isNaN(Number(match[2])) ? `'${match[2]}'` : match[2]}`,
-    );
-
-const getCSSProperties = (source: string) => source.split(';').map(convertCSSProperty).join(',');
-
-const convertInlineStyleToObject = (source: string) =>
-    source.replace(/style="(.*?)"/gm, (_, group) => `style={{ ${getCSSProperties(group)} }}`);
-
-const camelizeAttributes = (source: string) => source.replace(/([\w-]+)=/g, camelize);
-
 /**
  * Здесь экспортируется svg иконки.
  */
@@ -31,30 +8,3 @@ export const getExportSvg = async (selection: SceneNode) => {
 
     return String.fromCharCode.apply(null, Array.from(svgSource));
 };
-
-/**
- * Функция генерации файла `/Icon.assets/<Name>.tsx`. Здесь экспортируется иконка из figma
- * и возвращается svg компонент иконки.
- */
-export default (source: string, iconName: string) => {
-    const viewBox = getViewBox(source);
-    const svgContent = compose(
-        removeLineBreak,
-        getSvgContent,
-        setFillCurrentColor,
-        removeFillOpacity,
-        convertInlineStyleToObject,
-        camelizeAttributes,
-    )(source);
-
-    return `import React from 'react';
-
-import { IconProps } from '../IconRoot';
-
-export const ${iconName}: React.FC<IconProps> = (props) => (
-    <svg width="100%" viewBox="${viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-        ${svgContent}
-    </svg>
-);
-`;
-};

packages/icon-export-ui/src/source/iconCategories.ts

@@ -1,6 +1,5 @@
 import { insertString, lowerFirstLetter } from '../utils';
 
-const EXPORT_ICON_SET_OBJECT_LINE = 'interface Props';
 const CATEGORIES_OBJECT_LINE = 'export const iconSectionsSet = {';
 
 const getStartIndex = (source: string, text: string) => source.search(text);
@@ -10,7 +9,7 @@ const getEndIndex = (source: string, index: number) => source.substring(index).s
 const getCategoryEndIndex = (source: string, index: number) => source.substring(index).search('    },');
 
 const addToIconCategory = (source: string, index: number, iconName: string) =>
-    insertString(source, index, `        ${lowerFirstLetter(iconName)}: ${iconName},\n`);
+    insertString(source, index, `        ${lowerFirstLetter(iconName)}: '${iconName}',\n`);
 
 const addToCategories = (source: string, start: number, iconName: string, category: string) => {
     let newSource = source;
@@ -35,20 +34,16 @@ const createIconCategories = (source: string, index: number) =>
 const createIconCategory = (source: string, index: number, category: string) =>
     insertString(source, index, `    ${category}: {\n    },\n`);
 
-const getIconImport = (iconName: string, size: number) =>
-    `import { ${iconName} } from './Icon.assets.${size}/${iconName}';\n`;
-
 /**
  * Функция модификации файла `/Icon.tsx`. Здесь вставляется сгенерированный импорт иконки,
  * и добавляется её компонент в список иконок по категориям
  */
-export default (source: string, iconName: string, size: number, category: string) => {
-    if (source.includes(`{ ${iconName} }`)) {
+export default (source: string, iconName: string, category: string) => {
+    if (source.includes(`'${iconName}'`)) {
         return source;
     }
 
-    const index = source.search(EXPORT_ICON_SET_OBJECT_LINE) - 1;
-    let newSource = insertString(source, index, getIconImport(iconName, size));
+    let newSource = source;
 
     let startIndexCategories = getStartIndex(newSource, CATEGORIES_OBJECT_LINE);
     if (startIndexCategories === -1) {

packages/icon-export-ui/src/source/iconSvg.ts

@@ -0,0 +1,7 @@
+/**
+ * Функция генерации файла `/Icon.svg.24/<Name>.svg`. Здесь экспортируется иконка из figma
+ * и возвращается svg компонент иконки.
+ */
+export default (source: string) => {
+    return `${source}`;
+};

packages/icon-export-ui/src/source/index.ts

@@ -1,5 +1,2 @@
-export { default as getIconSource } from './iconSource';
-export { default as getIndexSource } from './indexSource';
-export { default as getIconAsset } from './iconAsset';
-export { default as getIconComponent } from './iconComponent';
+export { default as getIconSvg } from './iconSvg';
 export { default as getIconCategories } from './iconCategories';

packages/icon-export-ui/src/types.ts

@@ -24,18 +24,13 @@ export interface TokenPayloadRequest {
 export type TokenPayloadResponse = TokenPayloadRequest;
 
 export interface IconComponents {
-    iconAsset: string;
-    iconComponent: string;
     iconName: string;
     iconSize: number;
+    iconSvgAsset: string;
 }
 
 export interface FilesPayloadResponse {
-    iconSourceExport: string;
     iconSourceComponent: string;
-    iconSourceImport16: string;
-    iconSourceImport24: string;
-    iconSourceImport36: string;
     iconsComponents: IconComponents[];
 }