feat(esm,themes,fonts): include esm build and fonts in the package

includes ESM build and fonts in the package. Themes are now now moved from main bundle to
'react95/dist/themes'

BREAKING CHANGE: themes moved from the main bundle to 'react95/dist/themes'

Author: arturbien

.gitignore

@@ -8,7 +8,12 @@
 # testing
 /coverage
 
-# production
+# library build
+/cjs
+/esm
+/themes
+/images
+/fonts
 /dist
 
 # storybook

.storybook/config.js

@@ -1,8 +1,36 @@
 import { configure, addDecorator } from '@storybook/react';
 import { withThemesProvider } from 'storybook-addon-styled-component-theme';
-import themes from '../src/components/common/themes';
+import themes from '../src/common/themes';
 import GlobalStyle from './decorators/globalStyle';
 
+const {
+  original,
+  rainyDay,
+  vaporTeal,
+  theSixtiesUSA,
+  olive,
+  tokyoDark,
+  rose,
+  plum,
+  matrix,
+  travel,
+  ...otherThemes
+} = themes;
+
+const reorderedThemes = {
+  original,
+  rainyDay,
+  vaporTeal,
+  theSixtiesUSA,
+  olive,
+  tokyoDark,
+  rose,
+  plum,
+  matrix,
+  travel,
+  ...otherThemes
+};
+
 addDecorator(GlobalStyle);
-addDecorator(withThemesProvider(Object.values(themes)));
+addDecorator(withThemesProvider(Object.values(reorderedThemes)));
 configure(require.context('../src/', true, /\.stories\.js$/), module);

.storybook/decorators/globalStyle.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 
-import styleReset from '../../src/components/common/styleReset';
-import MSSansSerif from '../../src/components/assets/fonts/MS-Sans-Serif.woff2';
+import styleReset from '../../src/common/styleReset';
+import MSSansSerif from '../../src/assets/fonts/MS-Sans-Serif.woff2';
 
 const GlobalStyle = createGlobalStyle`
   ${styleReset}

.storybook/webpack.config.js

@@ -10,7 +10,7 @@ module.exports = ({ config }) => {
   config.resolve = Object.assign(config.resolve, {
     alias: {
       ...config.resolve.alias,
-      react95: path.resolve(__dirname, '../src/components/index')
+      react95: path.resolve(__dirname, '../src/index')
     }
   });
 

README.md

@@ -44,16 +44,28 @@ Apply style reset, wrap your app content with ThemeProvider with theme of your c
 ```jsx
 import React from 'react';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
-import { styleReset, themes, List, ListItem, Divider } from 'react95';
+
+import { styleReset, List, ListItem, Divider } from 'react95';
+// pick a theme of your choice
+import original from "react95/dist/themes/original";
+// original Windows95 font (optionally)
+import MSSansSerif from "react95/dist/fonts/MS-Sans-Serif.woff2";
 
 const GlobalStyles = createGlobalStyle`
+  @font-face {
+    font-family: 'MS-Sans-Serif';
+    src:  url('${MSSansSerif}') format('woff2');
+  }
+  body {
+    font-family: "MS-Sans-Serif";
+  }
   ${styleReset}
 `;
 
 const App = () => (
   <div>
     <GlobalStyles />
-    <ThemeProvider theme={themes.default}>
+    <ThemeProvider theme={original}>
       <List>
         <ListItem>🎤 Sing</ListItem>
         <ListItem>💃🏻 Dance</ListItem>

docs/usage.mdx

@@ -11,16 +11,28 @@ Apply style reset, wrap your app content with ThemeProvider with theme of your c
 ```jsx
 import React from 'react';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
-import { reset, themes, List, ListItem, Divider } from 'react95';
 
-const ResetStyles = createGlobalStyle`
-  ${reset}
+import { styleReset, List, ListItem, Divider } from 'react95';
+// pick a theme of your choice
+import original from "react95/dist/themes/original";
+// original Windows95 font (optionally)
+import MSSansSerif from "react95/dist/fonts/MS-Sans-Serif.woff2";
+
+const GlobalStyles = createGlobalStyle`
+  @font-face {
+    font-family: 'MS-Sans-Serif';
+    src:  url('${MSSansSerif}') format('woff2');
+  }
+  body {
+    font-family: "MS-Sans-Serif";
+  }
+  ${styleReset}
 `;
 
 const App = () => (
   <div>
-    <ResetStyles />
-    <ThemeProvider theme={themes.default}>
+    <GlobalStyles />
+    <ThemeProvider theme={original}>
       <List>
         <ListItem>🎤 Sing</ListItem>
         <ListItem>💃🏻 Dance</ListItem>