Fixing style exports (#328)

* chore: flatting directory structure

* fix: remove dependency on node-sass

* chore: update storybook imports

* docs: reset version, set contrib

* docs: minor updates

.storybook/stories/1.GettingStarted/GettingStarted.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import IntlTelInput from '../../../src/components/IntlTelInput';
-import '../../../src/styles/intlTelInput.scss'
+import '../../../src/intlTelInput.scss'
 
 storiesOf('Documentation', module)
   .addParameters({ options: { showAddonPanel: false } })

.storybook/stories/2.Props/Props.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 
 import IntlTelInput from '../../../src/components/IntlTelInput';
-import '../../../src/styles/intlTelInput.scss'
+import '../../../src/intlTelInput.scss'
 storiesOf('Documentation', module)
   .addParameters({ options: { showAddonPanel: false } })
   .add('Props', withInfo({ inline: true, source: false })(() => <IntlTelInput />));

.storybook/stories/3.Playground/Playground.stories.js

@@ -5,7 +5,7 @@ import { withInfo } from '@storybook/addon-info';
 import { withKnobs, text, boolean, array } from '@storybook/addon-knobs/react';
 
 import IntlTelInput from '../../../src/components/IntlTelInput';
-import '../../../src/styles/intlTelInput.scss'
+import '../../../src/intlTelInput.scss'
 const { defaultProps } = IntlTelInput;
 
 storiesOf('Documentation', module)

.storybook/stories/5.CustomStyle/CustomStyle.stories.js

@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
 import { withKnobs, object } from '@storybook/addon-knobs/react';
 
 import IntlTelInput from '../../../src/components/IntlTelInput';
-import '../../../src/styles/intlTelInput.scss'
+import '../../../src/intlTelInput.scss'
 storiesOf('Usage', module)
   .addDecorator(withKnobs)
   .add('Custom Style', withInfo({ inline: true, source: false, propTables: null })(() =>

.storybook/stories/6.GeoIP/GeoIP.stories.js

@@ -4,7 +4,7 @@ import { withInfo } from '@storybook/addon-info';
 import { action } from '@storybook/addon-actions';
 
 import IntlTelInput from '../../../src/components/IntlTelInput';
-import '../../../src/styles/intlTelInput.scss'
+import '../../../src/intlTelInput.scss'
 import { lookup } from '../../helpers/helpers';
 
 storiesOf('Usage', module)

README.md

@@ -38,8 +38,6 @@ Then open [`localhost:3000`](http://localhost:3000) in a browser.
 
 The easiest way to use react-intl-tel-input is to install it from NPM and include it in your own React build process (using [Webpack](http://webpack.github.io/), etc).
 
-You can also use the standalone build by including `dist/main.js` in your page. If you use this, make sure you have already included React, and that it is available as a global variable.
-
 ```bash
 yarn add react-intl-tel-input
 ```
@@ -64,15 +62,9 @@ Please see the [Demo Page](https://patw0929.github.io/react-intl-tel-input/)
 
 ## Development (`src` and the build process)
 
-**NOTE:** The source code for the component is in `src`. A UMD bundle is also built to `dist`, which can be included without the need for any build system.
-
-To build, watch and serve the examples (which will also watch the component source), run `npm start`.
-
-If you want to build the bundle file to the `dist/` folder, please run:
+To build, watch and serve the examples (which will also watch the component source), run `yarn start`.
 
-```bash
-yarn run build
-```
+You can prepare a distribution build using `yarn run build`.
 
 ## Contributing
 

package.json

@@ -1,8 +1,11 @@
 {
   "name": "react-intl-tel-input",
-  "version": "7.1.0",
+  "version": "0.0.0",
   "description": "Telephone input component. Rewrite intl-tel-input in React.js.",
   "author": "patw",
+  "contributors": [
+    { "name": "Marc Cataford", "email": "mcat@riseup.net", "url": "https://mcataford.github.io" }
+  ],
   "keywords": [
     "react",
     "react-component",
@@ -107,7 +110,7 @@
   },
   "scripts": {
     "prebuild": "yarn run clean",
-    "build": "BABEL_ENV=production babel src -d dist && cp -r ./src/images ./dist && cp -r ./src/styles ./dist",
+    "build": "BABEL_ENV=production babel src -d dist && cp -r ./src/*.png ./dist && node-sass ./src/intlTelInput.scss ./dist/main.css",
     "clean": "rimraf dist",
     "start": "start-storybook -p 4000 -c .storybook",
     "deploy": "storybook-to-ghpages --ci",

src/styles/intlTelInput.scss → src/intlTelInput.scss

@@ -276,8 +276,8 @@ $mobilePopupMargin: 30px;
 
 @import "sprite";
 
-$intl-tel-input-sprite-path: "../images/flags.png" !default;
-$intl-tel-input-sprite-2x-path: "../images/flags@2x.png" !default;
+$intl-tel-input-sprite-path: "./flags.png" !default;
+$intl-tel-input-sprite-2x-path: "./flags@2x.png" !default;
 
 .iti-flag {
   width: $flagWidth;