add pages

.github/workflows/push.yml

@@ -26,7 +26,7 @@ jobs:
         FIGMA_FILE_URL: ${{ secrets.FIGMA_FILE_URL }}
         FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
     - run: yarn generate
-    - run: yarn build
+    - run: yarn build:bundle
     - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
     - run: yarn publish
       env:

.gitignore

@@ -1,4 +1,7 @@
 node_modules
+
+.env
+
 dist
-build
+docs
 yarn-error.log

.npmignore

@@ -1,4 +1,6 @@
 bin
-src
+build
+docs
+public
 .babelrc
 yarn-error.log

bin/build.js

@@ -15,8 +15,8 @@ const rootDir = path.join(__dirname, '..')
 const srcDir = path.join(rootDir, 'src')
 const iconsDir = path.join(rootDir, 'src/icons')
 
-// generate index and d.ts file
-const generateIndex = () => {
+// generate icons.js and icons.d.ts file
+const generateIconsIndex = () => {
   if (!fs.existsSync(srcDir)) {
     fs.mkdirSync(srcDir)
     fs.mkdirSync(iconsDir)
@@ -35,17 +35,17 @@ const generateIndex = () => {
   type Icon = ComponentType<Props>;
   `;
 
-  fs.writeFileSync(path.join(rootDir, 'src', 'index.js'), '', 'utf-8');
+  fs.writeFileSync(path.join(rootDir, 'src', 'icons.js'), '', 'utf-8');
   fs.writeFileSync(
-    path.join(rootDir, 'src', 'index.d.ts'),
+    path.join(rootDir, 'src', 'icons.d.ts'),
     initialTypeDefinitions,
     'utf-8',
   );
 }
 
 // generate attributes code
 const attrsToString = (attrs, style) => {
-  console.log(style)
+  console.log('style: ', style)
   return Object.keys(attrs).map((key) => {
     // should distinguish fill or stroke
     if (key === 'width' || key === 'height' || key === style) {
@@ -86,31 +86,31 @@ const generateIconCode = async ({name}) => {
   return {ComponentName, name: names.name}
 }
 
-// append export code to index.js
-const appendToIndex = ({ComponentName, name}) => {
+// append export code to icons.js
+const appendToIconsIndex = ({ComponentName, name}) => {
   const exportString = `export { default as ${ComponentName} } from './icons/${name}';\r\n`;
   fs.appendFileSync(
-    path.join(rootDir, 'src', 'index.js'),
+    path.join(rootDir, 'src', 'icons.js'),
     exportString,
     'utf-8',
   );
 
   const exportTypeString = `export const ${ComponentName}: Icon;\n`;
   fs.appendFileSync(
-    path.join(rootDir, 'src', 'index.d.ts'),
+    path.join(rootDir, 'src', 'icons.d.ts'),
     exportTypeString,
     'utf-8',
   );
 }
 
-generateIndex()
+generateIconsIndex()
 
 Object
   .keys(icons)
   .map(key => icons[key])
   .forEach(({name}) => {
     generateIconCode({name})
       .then(({ComponentName, name}) => {
-        appendToIndex({ComponentName, name})
+        appendToIconsIndex({ComponentName, name})
       })
   })

bin/fetchSVG.js

@@ -0,0 +1,126 @@
+const got = require('got')
+const {ensureDir, writeFile} = require('fs-extra')
+const {join, resolve} = require('path')
+const Figma = require('figma-js')
+const PQueue = require('p-queue')
+require('dotenv').config()
+const {FIGMA_TOKEN, FIGMA_FILE_URL} = process.env
+
+const options = {
+  format: 'svg',
+  outputDir: './src/',
+  scale: '1'
+}
+
+for(const arg of process.argv.slice(2)) {
+  const [param, value] = arg.split('=')
+  if(options[param]) {
+    options[param] = value
+  }
+}
+
+if(!FIGMA_TOKEN) {
+  throw Error('Cannot find FIGMA_TOKEN in process!')
+}
+
+const client = Figma.Client({
+  personalAccessToken: FIGMA_TOKEN
+})
+
+// Fail if there's no figma file key
+let fileId = null
+if (!fileId) {
+  try {
+    fileId = FIGMA_FILE_URL.match(/file\/([a-z0-9]+)\//i)[1]
+  } catch (e) {
+    throw Error('Cannot find FIGMA_FILE_URL key in process!')
+  }
+}
+
+console.log(`Exporting ${FIGMA_FILE_URL} components`)
+client.file(fileId)
+
+  .then(({ data }) => {
+    console.log('Processing response')
+    const components = {}
+
+    function check(c) {
+      if (c.type === 'COMPONENT') {
+        const {name, id} = c
+        const {description = '', key} = data.components[c.id]
+        const {width, height} = c.absoluteBoundingBox
+
+        components[id] = {
+          name,
+          id,
+          key,
+          file: fileId,
+          description,
+          width,
+          height
+        }
+      } else if (c.children) {
+        // eslint-disable-next-line github/array-foreach
+        c.children.forEach(check)
+      }
+    }
+
+    data.document.children.forEach(check)
+    if (Object.values(components).length === 0) {
+      throw Error('No components found!')
+    }
+    console.log(`${Object.values(components).length} components found in the figma file`)
+    return components
+  })
+  .then(components => {
+    console.log('Getting export urls')
+    return client.fileImages(
+      fileId,
+      {
+        format: options.format,
+        ids: Object.keys(components),
+        scale: options.scale
+      }
+    ).then(({data}) => {
+      for(const id of Object.keys(data.images)) {
+        components[id].image = data.images[id]
+      }
+      return components
+    })
+  })
+  .then(components => {
+    return ensureDir(join(options.outputDir))
+      .then(() => writeFile(resolve(options.outputDir, 'data.json'), JSON.stringify(components), 'utf8'))
+      .then(() => components)
+  })
+  .then(components => {
+    const contentTypes = {
+      'svg': 'image/svg+xml',
+      'png': 'image/png',
+      'jpg': 'image/jpeg'
+    }
+    return queueTasks(Object.values(components).map(component => () => {
+      return got.get(component.image, {
+        headers: {
+          'Content-Type': contentTypes[options.format]
+        },
+        encoding: (options.format === 'svg' ? 'utf8' : null)
+      })
+      .then(response => {
+        return ensureDir(join(options.outputDir, options.format))
+          .then(() => writeFile(join(options.outputDir, options.format, `${component.name}.${options.format}`), response.body, (options.format === 'svg' ? 'utf8' : 'binary')))
+      })
+    }))
+  })
+  .catch(error => {
+    throw Error(`Error fetching components from Figma: ${error}`)
+  })
+
+function queueTasks(tasks, options) {
+  const queue = new PQueue(Object.assign({concurrency: 3}, options))
+  for (const task of tasks) {
+    queue.add(task)
+  }
+  queue.start()
+  return queue.onIdle()
+}

rollup.config.js → build/rollup.config.bundle.js

@@ -1,7 +1,7 @@
-import babel from 'rollup-plugin-babel';
+import babel from '@rollup/plugin-babel';
 
 export default {
-  input: 'src/index.js',
+  input: 'src/icons.js',
   output: {
     file: 'dist/index.js',
     format: 'cjs',

build/rollup.config.dev.js

@@ -0,0 +1,42 @@
+process.env.NODE_ENV = 'development';
+
+const path = require('path');
+const serve = require('rollup-plugin-serve');
+const configList = require('./rollup.config');
+
+const resolveFile = function(filePath) {
+  return path.join(__dirname, '..', filePath)
+}
+const PORT = 3000;
+
+const devSite = `http://127.0.0.1:${PORT}`;
+
+setTimeout(()=>{
+  console.log(`[dev]: ${devSite}`)
+}, 1000);
+
+configList.map((config, index) => {
+
+  config.watch = {
+    exclude: 'node_modules/**'
+  }
+
+  config.output.sourcemap = true;
+
+  if( index === 0 ) {
+    config.plugins = [
+      ...config.plugins,
+      ...[
+        serve({
+          port: PORT,
+          contentBase: [resolveFile('./docs')]
+        })
+      ]
+    ]
+  }
+
+  return config;
+})
+
+
+module.exports = configList;

build/rollup.config.js

@@ -0,0 +1,44 @@
+const path = require('path');
+const { babel } = require('@rollup/plugin-babel');
+const postcss = require('rollup-plugin-postcss')
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+const replace = require('@rollup/plugin-replace');
+const copy = require('rollup-plugin-copy')
+
+const resolveFile = function(filePath) {
+  return path.join(__dirname, '..', filePath)
+}
+
+const babelOptions = {
+  "presets": [
+    '@babel/preset-env',
+    '@babel/preset-react'
+  ]
+}
+
+module.exports = [
+  {
+    input: resolveFile('src/main.js'),
+    output: {
+      file: resolveFile('docs/index.js'),
+      format: 'umd',
+    },
+    plugins: [
+      copy({
+        targets: [
+          { src: resolveFile('public/**/*'), dest: resolveFile('docs') }
+        ]
+      }),
+      postcss(),
+      nodeResolve(),
+      commonjs({
+        exclude: 'src/**'
+      }),
+      babel(babelOptions),
+      replace({
+        'process.env.NODE_ENV': JSON.stringify( 'production' )
+      })
+    ],
+  },
+]

build/rollup.config.prod.js

@@ -0,0 +1,19 @@
+process.env.NODE_ENV = 'production';
+
+const { uglify } = require('rollup-plugin-uglify');
+const configList = require('./rollup.config');
+
+configList.map((config, index) => {
+
+  config.output.sourcemap = false;
+  config.plugins = [
+    ...config.plugins,
+    ...[
+      uglify()
+    ]
+  ]
+
+  return config;
+})
+
+module.exports = configList;