Merge pull request #8 from deriv-com/michio/add-illustration-icons

.env.example

@@ -1,2 +1 @@
-FIGMA_TOKEN=your_figma_access_token
-FILD_ID=figma_icons_file_id
+FIGMA_TOKEN=your_figma_access_token

package.json

@@ -56,7 +56,8 @@
     "clean": "rimraf stories src/es6 src/react src/index.ts svg storybook-static sprite",
     "export:icons": "ts-node ./node_modules/@figma-export/cli/bin/run use-config ./scripts/figma.config.ts",
     "export:logos": "ts-node ./node_modules/@figma-export/cli/bin/run use-config ./scripts/logo.figma.config.ts",
-    "export:figma": "npm-run-all export:icons export:logos",
+    "export:illustrations": "ts-node ./node_modules/@figma-export/cli/bin/run use-config ./scripts/illustrations.figma.config.ts",
+    "export:figma": "npm-run-all export:icons export:logos export:illustrations",
     "rexport": "npm-run-all clean export:figma format",
     "export:barrels": "barrelsby -c barrelsby.config.json",
     "export": "npm-run-all clean export:figma export:barrels format",

scripts/illustrations.figma.config.ts

@@ -0,0 +1,31 @@
+import outPutSvgrComponent from '@figma-export/output-components-as-svgr';
+import outPutSvg from '@figma-export/output-components-as-svg';
+import { ComponentOutputter, FigmaExportRC } from '@figma-export/types';
+import dotenv from 'dotenv';
+import outPutStories from './outputters/stories';
+import { SvgOutPutConfig } from './svg-configs';
+import { IllustrationSvgReactOutPutConfig } from './svgr-configs/illustrations';
+import { IllustrationStoriesOptions } from './stories-configs/illustrations';
+
+dotenv.config();
+
+const fileId: string = 'Ue059kUMFtzTSIgpHqLL9H';
+
+const outputters: ComponentOutputter[] = [
+  outPutSvg(SvgOutPutConfig),
+  outPutSvgrComponent(IllustrationSvgReactOutPutConfig),
+  outPutStories(IllustrationStoriesOptions),
+];
+
+(module.exports as FigmaExportRC) = {
+  commands: [
+    [
+      'components',
+      {
+        fileId,
+        onlyFromPages: ['illustration'],
+        outputters,
+      },
+    ],
+  ],
+};

scripts/stories-configs/illustrations.ts

@@ -0,0 +1,13 @@
+import { OutPutStoriesOptions } from '../outputters/stories';
+import { getIllustrationComponentName } from '../svgr-configs/illustrations';
+import { generateLogoStorybook } from '../templates/logo-story.template';
+import { getDirName } from '../utils/figma.utils';
+
+export const IllustrationStoriesOptions: OutPutStoriesOptions = {
+  getDirName,
+  getComponentName: getIllustrationComponentName,
+  getCategoryName: ({ pageName }) => {
+    return 'Illustrations';
+  },
+  getStorybookGenerator: generateLogoStorybook,
+};

scripts/svgr-configs/illustrations.ts

@@ -0,0 +1,92 @@
+import { ComponentOutputterParamOption } from '@figma-export/types';
+import { Config } from '@svgr/core';
+import { SVGR_COMPONENT_OUT_PUT_PATH } from '../utils/figma.constants';
+import {
+  getDirName,
+  getExportTemplate,
+  getFileDescriptor,
+  isMd,
+  makeVariableName,
+} from '../utils/figma.utils';
+import * as FigmaExport from '@figma-export/types';
+import { pascalCase } from '@figma-export/utils';
+import { Config as OptimizeOptions } from 'svgo';
+
+interface Options {
+  output: string;
+  getDirname?: (options: ComponentOutputterParamOption) => string;
+  getComponentName?: (options: ComponentOutputterParamOption) => string;
+  getComponentFilename?: (options: ComponentOutputterParamOption) => string;
+  getFileExtension?: (options: ComponentOutputterParamOption) => string;
+  getExportTemplate?: (options: ComponentOutputterParamOption) => string;
+  /**
+   * SVGR ships with a handful of customizable options, usable in both the CLI and API.
+   * https://react-svgr.com/docs/options/
+   */
+  getSvgrConfig?: (options: ComponentOutputterParamOption) => Config;
+}
+
+function getVarNameByFileDC(fileDescriptor: ReturnType<typeof getFileDescriptor>) {
+  const names: Array<string | undefined> = [];
+  const fileDescriptorKeys = Object.keys(fileDescriptor) as Array<keyof typeof fileDescriptor>;
+  fileDescriptorKeys.forEach((key) => {
+    if (fileDescriptor[key] !== undefined && !isMd(fileDescriptor[key]) && key !== 'category') {
+      names.push(fileDescriptor[key]);
+    }
+  });
+
+  const joinedNames = names.join('_');
+  const variableName = makeVariableName(joinedNames);
+  return variableName;
+}
+
+export const getIllustrationComponentName = (
+  options: FigmaExport.ComponentOutputterParamOption,
+) => {
+  const fileDescriptor = getFileDescriptor(options);
+  const variableName = getVarNameByFileDC(fileDescriptor);
+  return `${pascalCase(variableName)}Icon`;
+};
+
+export const IllustrationSvgReactOutPutConfig: Options = {
+  output: SVGR_COMPONENT_OUT_PUT_PATH,
+  getDirname: getDirName,
+  getFileExtension: () => {
+    return '.tsx';
+  },
+  getComponentName: getIllustrationComponentName,
+  getComponentFilename: getIllustrationComponentName,
+  getExportTemplate: (options) => {
+    const reactComponentName = getIllustrationComponentName(options);
+    const reactComponentFilename = getIllustrationComponentName(options);
+    return getExportTemplate({ reactComponentFilename, reactComponentName });
+  },
+  getSvgrConfig: () => {
+    const svgoConfig: OptimizeOptions = {
+      plugins: [
+        {
+          name: 'preset-default',
+          params: {
+            overrides: {
+              removeViewBox: false,
+            },
+          },
+        },
+        'removeComments',
+        'removeUselessStrokeAndFill',
+      ],
+    };
+    return {
+      ref: true,
+      svgProps: {
+        role: 'img',
+      },
+      typescript: true,
+      svgo: true,
+      icon: true,
+      plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
+      svgoConfig,
+      dimensions: false,
+    };
+  },
+};

src/index.ts

@@ -4,6 +4,7 @@
 
 export * from './react/Currencies/index';
 export * from './react/Flags/index';
+export * from './react/Illustration/index';
 export * from './react/Illustrative/index';
 export * from './react/LabelPaired/index';
 export * from './react/Logo/index';