@cloud-ru/ft-gulp-icon-builder 1.0.1-preview-df9ff74.0

package/src/svg-svgr.ts

@@ -0,0 +1,38 @@
+import type { Template } from '@svgr/babel-plugin-transform-svg-component';
+import { transform } from '@svgr/core';
+
+import { getComponentName } from './utils';
+import { createPipeTransformer } from './utils/createPipeTransformer';
+
+export type GulpSvgrParams = {
+  template: Template;
+};
+
+export function gulpSvgr({ template }: GulpSvgrParams) {
+  return createPipeTransformer({
+    transformer: (file, _encoding, callback) => {
+      const content = file.contents.toString();
+
+      const componentName = getComponentName(file.basename);
+
+      const result = transform.sync(
+        content,
+        {
+          icon: true,
+          template,
+          typescript: true,
+          expandProps: 'end',
+          jsxRuntime: 'classic',
+          exportType: 'default',
+          plugins: ['@svgr/plugin-jsx'],
+        },
+        { componentName, caller: { name: 'gulp-svgr' }, filePath: file.path },
+      );
+
+      file.contents = Buffer.from(result);
+      file.extname = '.tsx';
+
+      callback(null, file);
+    },
+  });
+}

package/src/svg-uniq-validator.ts

@@ -0,0 +1,21 @@
+import { createPipeTransformer } from './utils/createPipeTransformer';
+
+export function gulpSvgUniqValidator() {
+  const storage = new Map();
+
+  return createPipeTransformer({
+    transformer: (file, _encoding, callback) => {
+      const content = file.contents.toString();
+      const alreadyHaveIcon = storage.get(content);
+      const iconPath = file.path;
+
+      if (alreadyHaveIcon) {
+        return callback(new Error(`There are duplicating icons:\n\t${alreadyHaveIcon} \n\t${iconPath}\n`));
+      }
+
+      storage.set(content, iconPath);
+
+      callback(null, file);
+    },
+  });
+}

package/src/utils/createPipeTransformer.ts

@@ -0,0 +1,36 @@
+import { Transform } from 'node:stream';
+import type File from 'vinyl';
+
+type TransformCallback = (err?: Error | null, data?: File) => void;
+
+type Transformer = (file: File.BufferFile, _encoding: BufferEncoding, callback: TransformCallback) => void;
+
+export type PipeTransformerParams = {
+  transformer: Transformer;
+  onEnd?: () => void;
+};
+
+export function createPipeTransformer({ transformer, onEnd }: PipeTransformerParams) {
+  const stream = new Transform({
+    objectMode: true,
+    async transform(file: File, _encoding: BufferEncoding, callback: TransformCallback) {
+      if (file.isNull()) {
+        return callback(null, file);
+      }
+
+      if (file.isStream()) {
+        return callback(new Error('Streaming not supported'));
+      }
+
+      if (file.isBuffer()) {
+        return transformer(file, _encoding, callback);
+      }
+
+      return callback(null, file);
+    },
+  });
+
+  if (onEnd) stream.on('end', onEnd);
+
+  return stream;
+}

package/src/utils/index-template.ts

@@ -0,0 +1,35 @@
+const ICON_PROPS = `
+export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+  size?: number;
+  style?: React.CSSProperties;
+}
+`;
+const REACT_IMPORT = "import { SVGProps, forwardRef, Ref } from 'react';";
+const DEFAULT_SIZE = 24;
+
+const getExportName = (fileName: string) => (fileName.endsWith('xs.tsx') ? 'XsSVG' : 'SSVG');
+
+const withoutExtension = (fileName: string) => fileName.split('.')[0];
+
+export const getComponent = (iconFiles: string[], componentName: string) => {
+  const iconImports = iconFiles
+    .map(file => `import { default as ${getExportName(file)} } from './${withoutExtension(file)}';`)
+    .join('\n');
+
+  const finalComponentName = `${componentName}SVG`;
+
+  return `
+  ${REACT_IMPORT}
+  ${iconImports}
+  
+  ${ICON_PROPS}
+  
+  const ${finalComponentName} = forwardRef(({ size = ${DEFAULT_SIZE}, ...props }: ISvgIconProps, ref: Ref<SVGSVGElement>) => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Number(size) >= 20 ? <SSVG ref={ref} size={size} {...props} /> : <XsSVG ref={ref} size={size} {...props} />;
+  });
+
+  export default ${finalComponentName};`;
+};

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export { getTemplate } from './svgr-template';
+export { getComponent } from './index-template';
+export * from './name';

package/src/utils/name.ts

@@ -0,0 +1,10 @@
+import camelcase from 'camelcase';
+import kebabCase from 'kebab-case';
+
+export function getTestId(componentName: string) {
+  return kebabCase(componentName.replace('Svg', ''), false);
+}
+
+export function getComponentName(fileName: string) {
+  return camelcase(fileName);
+}

package/src/utils/svgr-template.ts

@@ -0,0 +1,58 @@
+import type { Template } from '@svgr/babel-plugin-transform-svg-component';
+
+const size = 24;
+
+type getTemplateParams = {
+  idPrefix: string;
+  generateDataTestId: (fileName: string) => string;
+};
+
+export const getTemplate =
+  ({ idPrefix, generateDataTestId }: getTemplateParams): Template =>
+  ({ imports, interfaces, componentName, exports }, { tpl }) => {
+    const testId = generateDataTestId(componentName);
+    const componentProp = size ? `{ size = ${size}, ...props }: ISvgIconProps` : `{ size, ...props }: ISvgIconProps`;
+
+    return tpl`
+    // DO NOT EDIT IT MANUALLY
+    ${imports}
+    ${interfaces}
+
+    export interface ISvgIconProps extends SVGProps<SVGSVGElement> {
+      className?: string;
+      size?: number;
+      style?: React.CSSProperties;
+    }
+
+    const ${componentName} = React.forwardRef((${componentProp}, ref: React.Ref<SVGSVGElement>) => {
+      props.width = undefined;
+      props.height = undefined;
+
+      const testId = ${JSON.stringify(testId)};
+      const isCustomSize = typeof size === 'number';
+
+      if(isCustomSize) {
+        if(!props.style) props.style = {};
+        props.style.width = size+"px";
+        props.style.height = size+"px";
+      }
+
+      return (
+        <svg
+          ref={ref}
+          xmlns='http://www.w3.org/2000/svg'
+          width={24}
+          height={24}
+          fill='currentColor'
+          viewBox='0 0 24 24'
+          data-test-id={'icon-' + testId}
+          {...props}
+         >
+           <use href={'#' + ${JSON.stringify(idPrefix)} + '-' + testId} />
+        </svg>
+      );
+    });
+
+    ${exports}
+    `;
+  };