From 919cc17ae42727ff555cd307f001d12b0c62e96d Mon Sep 17 00:00:00 2001 From: Marc Cataford Date: Sun, 8 Mar 2020 14:21:10 -0400 Subject: [PATCH] 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 --- .../1.GettingStarted/GettingStarted.stories.js | 2 +- .storybook/stories/2.Props/Props.stories.js | 2 +- .../stories/3.Playground/Playground.stories.js | 2 +- .../stories/5.CustomStyle/CustomStyle.stories.js | 2 +- .storybook/stories/6.GeoIP/GeoIP.stories.js | 2 +- README.md | 12 ++---------- package.json | 7 +++++-- src/{images => }/flags.png | Bin src/{images => }/flags@2x.png | Bin src/{styles => }/intlTelInput.scss | 4 ++-- src/{styles => }/sprite.scss | 0 11 files changed, 14 insertions(+), 19 deletions(-) rename src/{images => }/flags.png (100%) rename src/{images => }/flags@2x.png (100%) rename src/{styles => }/intlTelInput.scss (98%) rename src/{styles => }/sprite.scss (100%) diff --git a/.storybook/stories/1.GettingStarted/GettingStarted.stories.js b/.storybook/stories/1.GettingStarted/GettingStarted.stories.js index 423e12378..8ac45db27 100644 --- a/.storybook/stories/1.GettingStarted/GettingStarted.stories.js +++ b/.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 } }) diff --git a/.storybook/stories/2.Props/Props.stories.js b/.storybook/stories/2.Props/Props.stories.js index 3d4529aaa..1d7c245b0 100644 --- a/.storybook/stories/2.Props/Props.stories.js +++ b/.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 })(() => )); diff --git a/.storybook/stories/3.Playground/Playground.stories.js b/.storybook/stories/3.Playground/Playground.stories.js index ac557cd92..89c6278ec 100644 --- a/.storybook/stories/3.Playground/Playground.stories.js +++ b/.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) diff --git a/.storybook/stories/5.CustomStyle/CustomStyle.stories.js b/.storybook/stories/5.CustomStyle/CustomStyle.stories.js index 21cab91dc..f93e9cd72 100644 --- a/.storybook/stories/5.CustomStyle/CustomStyle.stories.js +++ b/.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 })(() => diff --git a/.storybook/stories/6.GeoIP/GeoIP.stories.js b/.storybook/stories/6.GeoIP/GeoIP.stories.js index 9594dc4b3..f6d7c3e19 100644 --- a/.storybook/stories/6.GeoIP/GeoIP.stories.js +++ b/.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) diff --git a/README.md b/README.md index 03c2fa1b5..f24021f1f 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index fbbaf7617..5a9681f1e 100644 --- a/package.json +++ b/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", diff --git a/src/images/flags.png b/src/flags.png similarity index 100% rename from src/images/flags.png rename to src/flags.png diff --git a/src/images/flags@2x.png b/src/flags@2x.png similarity index 100% rename from src/images/flags@2x.png rename to src/flags@2x.png diff --git a/src/styles/intlTelInput.scss b/src/intlTelInput.scss similarity index 98% rename from src/styles/intlTelInput.scss rename to src/intlTelInput.scss index 232085b4c..2e043e19e 100644 --- a/src/styles/intlTelInput.scss +++ b/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; diff --git a/src/styles/sprite.scss b/src/sprite.scss similarity index 100% rename from src/styles/sprite.scss rename to src/sprite.scss