Feat/sui svg

README.md

@@ -47,5 +47,6 @@ $ export PATH="$PATH:./node_modules/.bin"
 | [sui-studio-create](./packages/sui-studio-create) | CLI to create a new catalog of components |
 | [sui-studio-utils](./packages/sui-studio-utils) | A set of sui-studio usable tools. |
 | [sui-studio](./packages/sui-studio) | Develop, maintain and publish your SUI components catalog. |
+| [sui-svg](./packages/sui-svg) | Converts your SVG files into React Components |
 | [sui-test](./packages/sui-test) | Zero config testing tool. |
 | [sui-widget-embedder](./packages/sui-widget-embedder) | Widget development server and build for production |

packages/sui-bundler/README.md

@@ -223,6 +223,14 @@ It offers you a way to upload an external library to your project that you would
 
 It offers Hot Module Replacement out-of-the-box, you only have to follow [these instructions](https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr) for your project.
 
+## Ignoring pre enforced loaders
+
+Use in case of generated code, for example
+
+```sh
+> sui-bundler dev --no-pre-loader
+```
+
 ## Contributing
 
 Please refer to the [main repo contributing info](https://github.com/SUI-Components/sui/blob/master/CONTRIBUTING.md).

packages/sui-bundler/bin/sui-bundler-dev.js

@@ -20,6 +20,7 @@ const {
 const webpackConfig = require('../webpack.config.dev')
 const createDevServerConfig = require('../factories/createDevServerConfig')
 const createCompiler = require('../factories/createCompiler')
+const preloadRemover = require('../loaders/preLoadRemover')
 
 const linkLoaderConfigBuilder = require('../loaders/linkLoaderConfigBuilder')
 
@@ -39,12 +40,14 @@ if (!module.parent) {
       },
       []
     )
+    .option('--no-pre-loader', 'Does not execute any pre enforced loaded')
     .on('--help', () => {
       console.log('  Examples:')
       console.log('')
       console.log('    $ sui-bundler dev')
       console.log('    $ sui-bundler dev --context /my/app/folder')
       console.log('    $ sui-bundler dev --link-package /my/domain/folder')
+      console.log('    $ sui-bundler dev --no-pre-loader')
       console.log('')
     })
     .parse(process.argv)
@@ -75,7 +78,10 @@ const start = async ({
   const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
   const port = await choosePort(HOST, DEFAULT_PORT)
   const urls = prepareUrls(protocol, HOST, port)
-  const nextConfig = linkLoaderConfigBuilder({config, packagesToLink})
+  const nextConfig = linkLoaderConfigBuilder({
+    config: preloadRemover({config, preLoader: program.preLoader}),
+    packagesToLink
+  })
   const compiler = createCompiler(nextConfig, urls)
   const serverConfig = createDevServerConfig(nextConfig, urls.lanUrlForConfig)
   const devServer = new WebpackDevServer(compiler, serverConfig)

packages/sui-bundler/loaders/linkLoaderConfigBuilder.js

@@ -57,7 +57,7 @@ module.exports = ({config, packagesToLink}) => {
           test: /\.jsx?$/,
           // TODO: This is crappy, I need better options
           exclude: new RegExp(
-            `node_modules(?!${path.sep}@s-ui${path.sep}studio(${
+            `node_modules(?!${path.sep}@s-ui${path.sep}(svg|studio)(${
               path.sep
             }workbench)?${path.sep}src)`
           ),

packages/sui-bundler/loaders/preLoadRemover.js

@@ -0,0 +1,11 @@
+module.exports = function({config, preLoader}) {
+  return {
+    ...config,
+    module: {
+      ...config.module,
+      rules: config.module.rules.filter(
+        rule => preLoader || rule.enforce !== 'pre'
+      )
+    }
+  }
+}

packages/sui-bundler/webpack.config.dev.js

@@ -54,15 +54,15 @@ let webpackConfig = {
           }
         ],
         exclude: new RegExp(
-          `node_modules(?!${path.sep}@s-ui${path.sep}studio(${
+          `node_modules(?!${path.sep}@s-ui${path.sep}(svg|studio)(${
             path.sep
           }workbench)?${path.sep}src)`
         )
       },
       {
         test: /\.jsx?$/,
         exclude: new RegExp(
-          `node_modules(?!${path.sep}@s-ui${path.sep}studio(${
+          `node_modules(?!${path.sep}@s-ui${path.sep}(svg|studio)(${
             path.sep
           }workbench)?${path.sep}src)`
         ),

packages/sui-svg/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

packages/sui-svg/README.md

@@ -0,0 +1,39 @@
+# sui-svg
+
+> Converts your SVG files into React Components
+
+Features:
+
+- CLI for building the components
+- CLI for showing up a demo locally
+
+## Installation
+
+```sh
+$ npm i -SE @s-ui/svg
+```
+
+## Usage
+
+Add bundling scripts to your **package.json**
+
+```json
+{
+  "name": "my-awesome-package",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "sui-svg build",
+    "start": "npm run build && sui-svg demo"
+  }
+}
+```
+
+## Expected folder structure
+
+A `src` folder with all the `.svg` files to be converted inside
+
+## Output
+
+A `lib` folder with the generated components will be created/overridden
+
+**Advice:** no `index.js` will be generated inside the lib folder, each component should be imported independently for performance reasons

packages/sui-svg/bin/sui-svg-build.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+/* eslint no-console:0 */
+const Walker = require('walker')
+const svgr = require('@svgr/core').default
+const fs = require('fs')
+const program = require('commander')
+const {join} = require('path')
+const template = require('../templates/pure-component')
+const toCamelCase = require('@s-ui/js/lib/string').toCamelCase
+
+const BASE_DIR = process.cwd()
+const COMPONENT_EXTENSION = 'js'
+const ENCODING = 'utf-8'
+const LIB_FOLDER = join(BASE_DIR, '.', 'lib')
+const SVG_FOLDER = join(BASE_DIR, '.', 'src')
+
+program
+  .on('--help', () => {
+    console.log('  Description:')
+    console.log('')
+    console.log('    Builds React lib based on svg files')
+    console.log('')
+    console.log('    Setup your repo with a svg folder')
+    console.log('    Every svg file inside this folder will be converted into')
+    console.log('    a React component')
+    console.log('')
+  })
+  .parse(process.argv)
+
+const convertFileName = function(fileName) {
+  const camelFile = toCamelCase(fileName)
+  return `${camelFile[0].toUpperCase()}${camelFile.slice(1)}`
+}
+
+const getLibFile = function(file) {
+  const fileName = file.match('^.*/(.*).svg$')[1]
+  return `${LIB_FOLDER}/${convertFileName(fileName)}.${COMPONENT_EXTENSION}`
+}
+
+function directoryExists(path) {
+  try {
+    return fs.statSync(path).isDirectory()
+  } catch (error) {
+    return false
+  }
+}
+
+function ensureDirectoryExistence(dirname) {
+  if (directoryExists(dirname)) {
+    return true
+  }
+  fs.mkdirSync(dirname)
+}
+
+ensureDirectoryExistence(LIB_FOLDER)
+Walker(SVG_FOLDER).on('file', function(file) {
+  console.log(`Converting ${file}`)
+  fs.readFile(file, (err, data) => {
+    if (err) throw err
+    svgr(
+      data,
+      {
+        template,
+        expandProps: false
+      },
+      {componentName: 'SVGComponent'}
+    ).then(jsCode => {
+      fs.writeFile(getLibFile(file), jsCode, ENCODING, function(error) {
+        if (error) {
+          throw error
+        }
+      })
+    })
+  })
+})

packages/sui-svg/bin/sui-svg-demo.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+/* eslint no-console:0 */
+const program = require('commander')
+const path = require('path')
+const {getSpawnPromise} = require('@s-ui/helpers/cli')
+
+program
+  .on('--help', () => {
+    console.log('  Description:')
+    console.log('')
+    console.log('    Shows a demo of your SVG library')
+    console.log('')
+  })
+  .parse(process.argv)
+
+const devServerExec = require.resolve('@s-ui/bundler/bin/sui-bundler-dev')
+getSpawnPromise(
+  devServerExec,
+  ['-c', path.join(__dirname, '..', 'src'), '--no-pre-loader'],
+  {
+    shell: false,
+    env: process.env
+  }
+).then(process.exit, process.exit)

packages/sui-svg/bin/sui-svg.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+/* eslint no-console:0 */
+
+const program = require('commander')
+const pkg = require('../package.json')
+const version = pkg.version
+
+program.version(version, '    --version')
+
+program.command('build', 'Builds React components from svg files')
+program.command('demo', 'Loads a local static website')
+
+program.parse(process.argv)

packages/sui-svg/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@s-ui/svg",
+  "version": "1.0.0",
+  "description": "Converts svg files into React Components",
+  "main": "index.js",
+  "scripts": {
+    "test": "exit 0"
+  },
+  "bin": {
+    "sui-svg": "./bin/sui-svg.js"
+  },
+  "dependencies": {
+    "@s-ui/component-peer-dependencies": "latest",
+    "@compositor/kit": "1.0.47",
+    "@s-ui/bundler": "3",
+    "@s-ui/helpers": "1",
+    "@s-ui/js": "1",
+    "@svgr/core": "3.1.0",
+    "commander": "2.19.0",
+    "styled-components": "4.0.2",
+    "walker": "1.0.7"
+  },
+  "devDependencies": {
+    "@s-ui/lint": "2",
+    "validate-commit-msg": "2.14.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "eslintConfig": {
+    "extends": [
+      "./node_modules/@s-ui/lint/eslintrc.js"
+    ]
+  },
+  "sasslintConfig": "./node_modules/@s-ui/lint/sass-lint.yml"
+}

packages/sui-svg/src/app.js

@@ -0,0 +1,25 @@
+/* global __BASE_DIR__ */
+
+import React from 'react'
+import {render} from 'react-dom'
+import PropTypes from 'prop-types'
+import {Library, Example} from '@compositor/kit'
+
+const ctx = require.context(`${__BASE_DIR__}/lib`, true, /\.*\.js$/)
+const FnToReactComponent = ({component: Component}) => <Component />
+
+const App = () => (
+  <Library>
+    {ctx.keys().map((key, idx) => (
+      <Example name={key} key={idx}>
+        <FnToReactComponent component={ctx(key).default} />
+      </Example>
+    ))}
+  </Library>
+)
+
+render(<App />, document.getElementById('app'))
+
+FnToReactComponent.propTypes = {
+  component: PropTypes.func
+}

packages/sui-svg/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>SVG's</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+  <div id="app" />
+</body>
+</html>

packages/sui-svg/templates/pure-component.js

@@ -0,0 +1,33 @@
+const template = (code, config, state) => {
+  return `import React, {PureComponent} from 'react'
+import PropTypes from 'prop-types'
+
+export default class ${state.componentName} extends PureComponent {
+  state = {render: this.props.ssr}
+
+  componentDidMount() {
+    if (this.state.render === false) {
+      this.setState({render: true})
+    }
+  }
+
+  render() {
+    if (this.state.render === false) return null
+
+    return (
+      ${code}
+    )
+  }
+}
+
+${state.componentName}.propTypes = {
+  ssr: PropTypes.bool
+}
+
+${state.componentName}.defaultProps = {
+  ssr: false
+}
+`
+}
+
+module.exports = template