disco_app 0.15.2 → 0.18.1

data/lib/generators/disco_app/react/templates/app/webpack/javascripts/embedded/components/App.jsx

@@ -0,0 +1,77 @@
+import axios from 'axios';
+import * as PropTypes from 'prop-types';
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import HomePage from './HomePage';
+import withApi from './withApi';
+
+const HomePageWithApi = withApi(HomePage);
+
+class App extends React.Component {
+  static propTypes = {
+    api: PropTypes.func.isRequired,
+    parseApiResponse: PropTypes.func.isRequired
+  };
+
+  static childContextTypes = {
+    shop: PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+      shopifyDomain: PropTypes.string,
+      timeZone: PropTypes.string
+    }),
+    user: PropTypes.shape({
+      id: PropTypes.string,
+      email: PropTypes.string,
+      firstName: PropTypes.string,
+      initials: PropTypes.string,
+      lastName: PropTypes.string
+    })
+  };
+
+  state = {
+    shop: null,
+    user: null
+  };
+
+  getChildContext() {
+    return {
+      shop: this.state.shop,
+      user: this.state.user
+    };
+  }
+
+  componentWillMount() {
+    const { api, parseApiResponse } = this.props;
+
+    axios
+      .all([
+        api.get('/embedded/api/shop'),
+        api.get('/embedded/api/users/current')
+      ])
+      .then(
+        axios.spread(
+          async (shopResponse, usersResponse) => {
+            this.setState({
+              shop: await parseApiResponse(shopResponse),
+              user: await parseApiResponse(usersResponse)
+            });
+          }
+        )
+      );
+  }
+
+  render() {
+    const { user } = this.state;
+
+    if (!user) return <div />;
+
+    return (
+      <Switch>
+        <Route exact path="/" component={HomePageWithApi} />
+      </Switch>
+    );
+  }
+}
+
+export default App;

data/lib/generators/disco_app/react/templates/app/webpack/javascripts/embedded/components/HomePage.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { EmptyState, FooterHelp, Layout, Link } from '@shopify/polaris';
+import EmbeddedPage from './Shared/EmbeddedPage';
+
+const HomePage = props => (
+  <EmbeddedPage title="Welcome" {...props}>
+    <EmptyState
+      action={{
+        content: 'Polaris docs',
+        external: true,
+        url: 'https://polaris.shopify.com/'
+      }}
+      heading="Booyah!"
+      image="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg"
+    >
+      <p>Time to build a killer UI</p>
+    </EmptyState>
+    <Layout.Section>
+      <FooterHelp>
+        Learn more about{' '}
+        <Link url="https://www.discolabs.com/" external>
+          Disco
+        </Link>
+        &apos;s{' '}
+        <Link url="https://www.discolabs.com/" external>
+          [Disco app]
+        </Link>
+        .
+      </FooterHelp>
+    </Layout.Section>
+  </EmbeddedPage>
+);
+
+export default HomePage;

data/lib/generators/disco_app/react/templates/app/webpack/javascripts/embedded/components/Shared/EmbeddedPage.jsx

@@ -0,0 +1,70 @@
+import _ from 'lodash';
+import * as PropTypes from 'prop-types';
+import React from 'react';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { History } from '@shopify/app-bridge/actions';
+import { Page } from '@shopify/polaris';
+
+class EmbeddedPage extends React.Component {
+  static contextTypes = {
+    polaris: PropTypes.object
+  };
+
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    history: ReactRouterPropTypes.history.isRequired,
+    location: ReactRouterPropTypes.location.isRequired,
+    title: PropTypes.string.isRequired
+  };
+
+  componentDidMount() {
+    window.addEventListener('message', this.handleMessage);
+
+    this.pushHistory();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.location.pathname !== this.props.location.pathname) {
+      this.pushHistory();
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('message', this.handleMessage);
+  }
+
+  pushHistory = () => {
+    const history = History.create(this.context.polaris.appBridge);
+
+    history.dispatch(History.Action.PUSH, this.props.history.location.pathname);
+  };
+
+  handleMessage = e => {
+    if (e.isTrusted) {
+      if (_.isString(e.data)) {
+        const json = JSON.parse(e.data);
+
+        if (json.message === 'Shopify.API.setWindowLocation') {
+          const url = new URL(json.data);
+          this.props.history.push(url.pathname);
+        }
+      }
+    }
+  };
+
+  pushHistory = () => {
+    const history = History.create(this.context.polaris.appBridge);
+
+    history.dispatch(History.Action.PUSH, this.props.history.location.pathname);
+  };
+
+  render() {
+    return (
+      <Page title={this.props.title} {...this.props}>
+        {this.props.children}
+      </Page>
+    );
+  }
+}
+
+export default EmbeddedPage;

data/lib/generators/disco_app/react/templates/app/webpack/javascripts/embedded/components/Shared/ErrorBanner.jsx

@@ -0,0 +1,58 @@
+import * as PropTypes from 'prop-types';
+import React from 'react';
+import { Banner, TextStyle } from '@shopify/polaris';
+
+const ErrorBanner = ({ errors, prologue }) => {
+  const errorKeys = () => Object.keys(errors).sort();
+
+  const errorCount = () => errorKeys().length;
+
+  const errorMessage = () => {
+    let msg = '1 field needs changes';
+
+    if (errorCount() > 1) {
+      msg = `${errorCount()} fields need changes`;
+    }
+
+    return msg;
+  };
+
+  const separator = index => {
+    if (index === 0) return ' ';
+
+    if (index === errorCount() - 1) return ' and ';
+
+    return ', ';
+  };
+
+  if (errorCount() === 0) return null;
+
+  return (
+    <Banner status="critical">
+      <p>
+        {prologue},{errorMessage()}:
+        {errorKeys().map((key, index) => (
+          <span>
+            {separator(index)}
+            <TextStyle key="error-{index}" variation="strong">
+              {key}
+            </TextStyle>
+          </span>
+        ))}
+        .
+      </p>
+    </Banner>
+  );
+};
+
+ErrorBanner.defaultProps = {
+  errors: {},
+  prologue: 'To save this form'
+};
+
+ErrorBanner.propTypes = {
+  errors: PropTypes.shape({}),
+  prologue: PropTypes.string
+};
+
+export default ErrorBanner;

data/lib/generators/disco_app/react/templates/app/webpack/javascripts/embedded/components/Shared/PaginationWrapper.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Pagination } from '@shopify/polaris';
+
+const PaginationWrapper = props => (
+  <div className="Disco-PaginationWrapper">
+    <Pagination {...props} />
+  </div>
+);
+
+export default PaginationWrapper;

data/lib/generators/disco_app/react/templates/app/webpack/javascripts/embedded/components/Shared/ScrollToTop.jsx

@@ -0,0 +1,23 @@
+import * as PropTypes from 'prop-types';
+import React from 'react';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { withRouter } from 'react-router-dom';
+
+class ScrollToTop extends React.Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    location: ReactRouterPropTypes.location.isRequired
+  };
+
+  componentDidUpdate(prevProps) {
+    if (this.props.location !== prevProps.location) {
+      window.scrollTo(0, 0);
+    }
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export default withRouter(ScrollToTop);

data/lib/generators/disco_app/react/templates/app/webpack/javascripts/embedded/components/withApi.jsx

@@ -0,0 +1,125 @@
+import axios from 'axios';
+import { deserialise } from 'kitsu-core';
+import _ from 'lodash';
+import qs from 'qs';
+import React from 'react';
+
+function withApi(WrappedComponent) {
+  class WithApi extends React.Component {
+    constructor(props) {
+      super(props);
+
+      this.initApi();
+    }
+
+    getErrorsFor = (field, errors) => {
+      const fieldErrors = errors[field];
+
+      if (!fieldErrors) return '';
+
+      return fieldErrors.join(', ');
+    };
+
+    initApi = () => {
+      const csrfToken = document
+        .getElementsByName('csrf-token')[0]
+        .getAttribute('content');
+
+      this.api = axios.create({
+        headers: {
+          Accept: 'application/json',
+          'X-CSRF-Token': csrfToken,
+          'X-Key-Inflection': 'camel'
+        },
+        paramsSerializer: params => qs.stringify(params),
+        timeout: 5000
+      });
+    };
+
+    parseApiResponse = async (response, includeMeta) => {
+      const result = await deserialise(response.data);
+
+      return includeMeta ? result : result.data;
+    };
+
+    parseApiError = async errorResponse => {
+      const result = await deserialise(errorResponse.response.data);
+
+      const parsedErrors = {};
+
+      result.errors.forEach(error => {
+        if (
+          _.has(error, 'source.pointer') &&
+          error.source.pointer.startsWith('/data/attributes/')
+        ) {
+          const attr = _.last(error.source.pointer.split('/'));
+          const msg = error.detail;
+
+          if (_.has(parsedErrors, attr)) {
+            parsedErrors[attr].push(msg);
+          } else {
+            parsedErrors[attr] = [msg];
+          }
+        }
+      });
+
+      return parsedErrors;
+    };
+
+    resourceListParams = state => {
+      const defaultPageSize = 25;
+      const params = {};
+
+      if (!state) return params;
+
+      if (state.filters) {
+        params.filter = {};
+
+        state.filters.forEach(
+          filter => (params.filter[filter.key] = filter.value)
+        );
+      }
+
+      if (state.pageNumber) {
+        params.page = {
+          number: state.pageNumber,
+          size: state.pageSize || defaultPageSize
+        };
+      }
+
+      if (state.searchQuery) {
+        params.search = state.searchQuery;
+      }
+
+      if (state.sortBy) {
+        const match = /(.*)_((?:a|de)sc)/.exec(state.sortBy);
+
+        if (match) {
+          const field = match[1];
+          const descSignifier = match[2] === 'desc' ? '-' : '';
+
+          params.sort = `${descSignifier}${field}`;
+        }
+      }
+
+      return params;
+    };
+
+    render() {
+      return (
+        <WrappedComponent
+          api={this.api}
+          getErrorsFor={this.getErrorsFor}
+          parseApiError={this.parseApiError}
+          parseApiResponse={this.parseApiResponse}
+          resourceListParams={this.resourceListParams}
+          {...this.props}
+        />
+      );
+    }
+  }
+
+  return WithApi;
+}
+
+export default withApi;

data/lib/generators/disco_app/react/templates/app/webpack/javascripts/embedded/index.jsx

@@ -0,0 +1,39 @@
+import bugsnag from 'bugsnag-js';
+import createPlugin from 'bugsnag-react';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { AppProvider } from '@shopify/polaris';
+import App from './components/App';
+import ScrollToTop from './components/Shared/ScrollToTop';
+import withApi from './components/withApi';
+
+const app = document.getElementById('app');
+
+const bugsnagClient = bugsnag({
+  apiKey: app.dataset.bugsnagApiKey,
+  appVersion: app.dataset.version,
+  releaseStage: app.dataset.environment
+});
+
+const ErrorBoundary = bugsnagClient.use(createPlugin(React));
+
+const AppWithApi = withApi(App);
+
+ReactDOM.render(
+  <ErrorBoundary>
+    <Router>
+      <AppProvider
+        apiKey={app.dataset.apiKey}
+        debug={app.dataset.debug}
+        forceRedirect={app.dataset.forceRedirect}
+        shopOrigin={app.dataset.shopOrigin}
+      >
+        <ScrollToTop>
+          <AppWithApi bugsnagClient={bugsnagClient} />
+        </ScrollToTop>
+      </AppProvider>
+    </Router>
+  </ErrorBoundary>,
+  app
+);

data/lib/generators/disco_app/react/templates/app/webpack/javascripts/embedded/utils.js

@@ -0,0 +1,19 @@
+import { DateTime } from 'luxon';
+import numeral from 'numeral';
+
+export const numberToCurrency = amount => {
+  const format = '$0,0.00';
+  const floatAmount = parseFloat(amount);
+
+  if (floatAmount < 0) {
+    return `(${numeral(Math.abs(floatAmount)).format(format)})`;
+  }
+
+  return numeral(floatAmount).format(format);
+};
+
+export const formatTime = time => {
+  if (!time) return 'N/A';
+
+  return DateTime.fromISO(time).toLocaleString(DateTime.DATETIME_SHORT);
+};

data/lib/generators/disco_app/react/templates/app/webpack/packs/embedded.js

@@ -0,0 +1,2 @@
+import '../javascripts/embedded';
+import '../stylesheets/embedded.scss';

data/lib/generators/disco_app/react/templates/app/webpack/stylesheets/embedded/shared/banners.scss

@@ -0,0 +1,7 @@
+.Polaris-Page__Content > .Polaris-Banner--withinPage {
+  margin-bottom: 2rem;
+}
+
+.Polaris-DisplayText--sizeLarge + .Polaris-Banner--withinPage {
+  margin-top: 16px;
+}

data/lib/generators/disco_app/react/templates/app/webpack/stylesheets/embedded/shared/busy.scss

@@ -0,0 +1,3 @@
+.Disco-ResourceListWrapper.busy .Polaris-ResourceList__ResourceListWrapper {
+  opacity: 0.5;
+}

data/lib/generators/disco_app/react/templates/app/webpack/stylesheets/embedded/shared/index.scss

@@ -0,0 +1,3 @@
+@import 'banners';
+@import 'busy';
+@import 'pagination';

data/lib/generators/disco_app/react/templates/app/webpack/stylesheets/embedded/shared/pagination.scss

@@ -0,0 +1,5 @@
+.Disco-PaginationWrapper {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

data/lib/generators/disco_app/react/templates/app/webpack/stylesheets/embedded.scss

@@ -0,0 +1,2 @@
+@import '@shopify/polaris/styles.css';
+@import 'embedded/shared/index';

data/lib/generators/disco_app/react/templates/config/initializers/mime_types.rb

@@ -0,0 +1,13 @@
+API_JSON = 'application/vnd.api+json'.freeze
+
+Mime::Type.register(API_JSON, :jsonapi)
+
+parsers = ActionDispatch::Request.parameter_parsers.merge(
+  Mime[:jsonapi].symbol => ->(body) { JSON.parse(body) }
+)
+ActionDispatch::Request.parameter_parsers = parsers
+
+ActionController::Renderers.add :jsonapi do |obj, _options|
+  self.content_type ||= Mime[:jsonapi]
+  self.response_body = obj.to_json
+end

data/lib/generators/disco_app/react/templates/config/initializers/omniauth.rb

@@ -0,0 +1,27 @@
+module OmniAuth::Strategies
+  class ShopifyUser < Shopify
+
+    def name
+      :shopify_user
+    end
+
+  end
+end
+
+SETUP_PROC = lambda do |env|
+  env['omniauth.strategy'].options[:per_user_permissions] = true
+  params = Rack::Utils.parse_query(env['QUERY_STRING'])
+  env['omniauth.strategy'].options[:client_options][:site] = "https://#{params['shop']}"
+end
+
+Rails.application.config.middleware.use OmniAuth::Builder do
+  provider :shopify,
+           ShopifyApp.configuration.api_key,
+           ShopifyApp.configuration.secret,
+           scope: ShopifyApp.configuration.scope
+  provider :shopify_user,
+           ShopifyApp.configuration.api_key,
+           ShopifyApp.configuration.secret,
+           scope: ShopifyApp.configuration.scope,
+           setup: SETUP_PROC
+end

data/lib/generators/disco_app/react/templates/config/initializers/version.rb.tt

@@ -0,0 +1,7 @@
+module <%= Rails.application.class.parent_name %>
+  class Application
+
+    VERSION = File.read(Rails.root.join('VERSION')).chomp.freeze
+
+  end
+end

data/lib/generators/disco_app/react/templates/config/webpack/staging.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'staging'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

data/lib/generators/disco_app/react/templates/config/webpack/test.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+const environment = require('./environment');
+
+module.exports = environment.toWebpackConfig();

data/lib/generators/disco_app/react/templates/config/webpacker.yml

@@ -0,0 +1,96 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/webpack
+  source_entry_path: packs
+  public_root_path: public
+  public_output_path: packs
+  cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
+  webpack_compile_output: false
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+  # Extract and emit a css file
+  extract_css: true
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
+  extensions:
+    - .jsx
+    - .mjs
+    - .js
+    - .sass
+    - .scss
+    - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+  compile: true
+
+  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
+  check_yarn_integrity: true
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    public: localhost:3035
+    hmr: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    compress: true
+    disable_host_check: true
+    use_local_ip: false
+    quiet: false
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    watch_options:
+      ignored: '**/node_modules/**'
+
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Extract and emit a css file
+  extract_css: true
+
+  # Cache manifest.json for performance
+  cache_manifest: true

data/lib/generators/disco_app/react/templates/root/.eslintignore

@@ -0,0 +1,5 @@
+app/assets/javascripts/*
+config/webpack/*
+node_modules/*
+public/packs/*
+vendor/ruby/*