Updated icons integration

Added react-dom as peer dep
VKCOM · Jun 11, 2018 · be3b27b · be3b27b
1 parent 6447975
commit be3b27b
Show file tree

Hide file tree

Showing 13 changed files with 466 additions and 254 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,10 +31,7 @@
     "postcss-loader": "^2.1.5",
     "postcss-map": "^0.9.0",
     "pre-commit": "^1.2.2",
-    "prop-types": "^15.6.1",
-    "react": "^16.4.0",
     "react-docgen": "^2.20.0",
-    "react-dom": "^16.4.0",
     "react-frame-component": "^3.0.0",
     "react-styleguidist": "^7.0.17",
     "schema-utils": "^0.4.3",
@@ -46,12 +43,17 @@
     "webpack-cli": "^3.0.3",
     "webpack-merge": "^4.0.0",
     "webpack-stats-plugin": "^0.1.4",
-    "@vkontakte/icons": "^1.0.1"
+    "react-dom": "^16.4.0",
+    "react": "^16.4.0",
+    "prop-types": "^15.6.1"
   },
   "peerDependencies": {
+    "react-dom": "^16.4.0",
     "react": "^16.4.0",
-    "prop-types": "^15.6.1",
-    "@vkontakte/icons": "^1.0.1"
+    "prop-types": "^15.6.1"
+  },
+  "dependencies": {
+    "@vkontakte/icons": "^1.0.2"
   },
   "scripts": {
     "prepublishOnly": "npm run clear && npm run build",

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -5,7 +5,6 @@ import Tappable, { ACTIVE_EFFECT_DELAY } from '../Tappable/Tappable';
 import getClassName from '../../helpers/getClassName';
 import classnames from '../../lib/classnames';
 import {platform, IOS} from '../../lib/platform';
-import '@vkontakte/icons';
 import Icon16Done from '@vkontakte/icons/dist/16/done';
 
 const osname = platform();

diff --git a/src/components/ListItem/ListItem.js b/src/components/ListItem/ListItem.js
@@ -5,7 +5,6 @@ import classnames from '../../lib/classnames';
 import getClassName from '../../helpers/getClassName';
 import Tappable from '../Tappable/Tappable';
 import { platform, IOS, ANDROID } from '../../lib/platform';
-import '@vkontakte/icons';
 import Icon24Chevron from '@vkontakte/icons/dist/24/chevron';
 import Icon16Done from '@vkontakte/icons/dist/16/done';
 import Icon24Cancel from '@vkontakte/icons/dist/24/cancel';

diff --git a/src/components/SearchAndroid/SearchAndroid.js b/src/components/SearchAndroid/SearchAndroid.js
@@ -4,7 +4,6 @@ import getClassName from '../../helpers/getClassName';
 import classnames from '../../lib/classnames';
 import './SearchAndroid.css';
 import HeaderButton from '../HeaderButton/HeaderButton';
-import '@vkontakte/icons';
 import Icon24Back from '@vkontakte/icons/dist/24/back';
 import Icon24Cancel from '@vkontakte/icons/dist/24/cancel';
 

diff --git a/src/components/SearchIOS/SearchIOS.js b/src/components/SearchIOS/SearchIOS.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import getClassName from '../../helpers/getClassName';
 import classnames from '../../lib/classnames';
 import './SearchIOS.css';
-import '@vkontakte/icons';
 import Icon16Search from '@vkontakte/icons/dist/16/search';
 
 const baseClassName = getClassName('Search');

diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import getClassName from '../../helpers/getClassName';
 import classnames from '../../lib/classnames';
-import '@vkontakte/icons';
 import Icon24Dropdown from '@vkontakte/icons/dist/24/dropdown';
 import {platform, ANDROID} from '../../lib/platform';
 

diff --git a/src/components/Select/SelectMimicry.js b/src/components/Select/SelectMimicry.js
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import getClassName from '../../helpers/getClassName';
 import classnames from '../../lib/classnames';
-import '@vkontakte/icons';
 import Icon24Dropdown from '@vkontakte/icons/dist/24/dropdown';
 import {platform, ANDROID} from '../../lib/platform';
 

diff --git a/styleguide/Components/Preview.js b/styleguide/Components/Preview.js
@@ -9,7 +9,7 @@ const frameInitialContent = `
   <!DOCTYPE html>
   <html>
     <head>
-      <link href="./vkui.css" rel="stylesheet" id="styles"></link>
+      <link href="./main.css" rel="stylesheet" id="styles"></link>
       <style>
         .frame-content {
           margin: 0;

diff --git a/styleguide/config.js b/styleguide/config.js
@@ -4,7 +4,6 @@ const template = require('./index.html');
 
 module.exports = {
   title: 'VKUI styleguide',
-  assetsDir: path.join(__dirname, '../dist'),
   styleguideDir: path.join(__dirname, '../docs'),
   styleguideComponents: {
     PlaygroundRenderer: path.join(__dirname, './components/PlaygroundRenderer'),
@@ -89,13 +88,8 @@ module.exports = {
       }]
     }
   ],
-  context: {
-    PropTypes: 'prop-types',
-    ReactFrame: 'react-frame-component'
-  },
   require: [path.resolve(__dirname, './setup.js')],
   webpackConfig: Object.assign({}, webpackConfig, {
-    externals: {},
     resolve: {
       alias: {
         'rsg-components/Preview': path.join(__dirname, './Components/Preview')

diff --git a/styleguide/pages/migration.md b/styleguide/pages/migration.md
@@ -44,7 +44,7 @@
 ```jsx static
 <ScrollView header={{
   left: <HeaderButton>{osname === IOS ? 'Назад' : <Icon24Back />}</HeaderButton>
-  icon: osname === IOS && <HeaderButton><Icon28Chevron_back /></HeaderButton>
+  icon: osname === IOS && <HeaderButton><Icon28ChevronBack /></HeaderButton>
 }} />
 ```
 

diff --git a/styleguide/setup.js b/styleguide/setup.js
@@ -3,7 +3,6 @@ import { sizes as avatarSizes } from '../src/components/Avatar/Avatar';
 import { values as colors, titles as colorTitles, keys as colorKeys } from '../src/helpers/colors';
 import {platform, IOS, ANDROID} from '../src/lib/platform';
 import '../src/styles/common.css';
-import '@vkontakte/icons';
 import Icon24Cancel from '@vkontakte/icons/dist/24/cancel';
 import Icon16Add from '@vkontakte/icons/dist/16/add';
 import Icon24Camera from '@vkontakte/icons/dist/24/camera';

diff --git a/webpack.config.js b/webpack.config.js
@@ -73,7 +73,9 @@ const config = {
     'react': 'react',
     'prop-types': 'prop-types',
     'react-dom': 'react-dom',
-    '@vkontakte/icons': '@vkontakte/icons'
+    '@vkontakte/icons': '@vkontakte/icons',
+    'svg-baker-runtime/browser-symbol': 'svg-baker-runtime/browser-symbol',
+    'svg-sprite-loader/runtime/browser-sprite.build': 'svg-sprite-loader/runtime/browser-sprite.build'
   }
 };