Commit Graph

57 Commits

Author SHA1 Message Date
Christopher Joe
eac587c519 update shrinkwrap lock file 2017-02-22 16:46:20 +13:00
Christopher Joe
2513a0f4c3 API Added drag and drop libraries
API Added a badge component
2017-02-22 16:46:20 +13:00
Ingo Schommer
c2bc0df92a Fail buids on linting errors
Silently failing only the first command with error code 0 through a single ampersand
is hardly intuitive. Our general line is that either you have linting and
enforce it (via build failures), or you might as well not bother since
it'll deteriorate quickly.
2017-01-09 23:46:28 +13:00
Paul Clarke
178bd480eb API Changes required for asset search behaviour 2017-01-09 14:55:20 +13:00
Ingo Schommer
603b64c871 GraphQL 2016-12-20 17:20:06 +13:00
Christopher Joe
875811fdfd API Create loading state for schema
API Create stateOverride state for schema
Enhancement Moved crumbs property to rely on redux state
Enhancement Updated file app icon names
API Added InsertMediaModal functionality to HtmlEditorField
API Removed dependency on schema ID that is returned from server
API Added afterMessages property for FormBuilder to display content after the alert message
2016-11-22 16:58:00 +13:00
Christopher Joe
8a7ea044ac Added validator class to decouple validation library from FormBuilder
Added required rule priority logic and fix styling of error messages
2016-11-03 10:39:53 +13:00
Damian Mooyman
67f00302f9 Add logic to React FormBuilder to utilise validation schema generated 2016-11-03 10:24:36 +13:00
Sam Minnee
213cf8841b NEW: Test webpack build as part of NPM test run.
FIX: Ensure that “npm run build” failures report an error code.
2016-11-01 16:35:40 +13:00
Ingo Schommer
5b31a40593 Use redux-form instead of custom actions/reducers (fixes #5524)
- Removed custom form reducers in favour of redux-form (updateField(), addForm(), etc)
- Storing 'state' in schema reducer to avoid a separate forms reducer tree (no longer needed for other use cases). This means 'state' is only the "initial state", any form edits will be handled by redux-form internally in the 'reduxForm' reducer namespace
- Removed componentWillUnmount() from <Form> since there's no more reducer state to clean up (removed formReducer.js), and redux-form handles that internally
- Removed isFetching state from <FormBuilder> since there's now a props.submitting coming from redux-form
- Improved passing of "clicked button" (submittingAction), using component state rather than reducer and passing it into action handlers (no need for components to inspect it any other way)
- Hacky duplication of this.submittingAction and this.state.submittingAction to avoid re-render of <FormBuilder> *during* a submission (see https://github.com/erikras/redux-form/issues/1944)
- Inlined handleSubmit() XHR (rather than using a redux action). There's other ways for form consumers to listen to form evens (e.g. onSubmitSuccess passed through <FormBuilder> into reduxForm()).
- Adapting checkbox/radio fields to redux-forms
  Need to send onChange event with values rather than the original event,
  see http://redux-form.com/6.1.1/docs/api/Field.md/#-input-onchange-eventorvalue-function-
- Using reduxForm() within render() causes DOM to get thrown away,
  and has weird side effects like https://github.com/erikras/redux-form/issues/1944.
  See https://github.com/erikras/redux-form/issues/603#issuecomment-176397728
- Refactored <FormBuilderLoader> as a separate container component which connects to redux and redux-form. This keeps the <FormBuilder> component dependency free and easy to test. It'll also be an advantage if we switch to a GraphQL backed component, in which case the async loading routines will look very different from the current <FormBuilderLoader> implementation
- Refactoring out the redux-form dependency from FormBuilder to make it more testable (through baseFormComponent and baseFieldComponent)
- Passing through 'form' to allow custom identifiers (which is important because currently the schema "id" contains the record identifier, making the form identifier non-deterministic - which means you can't use it with the redux-form selector API)
2016-10-20 21:49:06 +13:00
Damian Mooyman
4bbfb7e4f2 Merge pull request #6152 from open-sausages/pulls/4.0/webpack-dev-optimize
Added development watch command to package.json
2016-10-13 17:50:53 +13:00
Christopher Joe
30d161625f Fix unmock qs module, Backend-test refactored to not time out on error 2016-10-05 10:25:22 +13:00
Christopher Joe
2f4867fef8 API added watch command to package.json 2016-09-30 13:19:40 +13:00
Sam Minnee
c2ebff5c19 NEW: Use sass-lint over scss-lint
SCSS linting now uses the node-based sass-lint tool, since we’re
shifting away from CodeClimate.

This has the benefit of not requiring a ruby gem on dev tools -
everything is provided as npm dev dependencies.

This was also necessary to run the linting inside travis.
2016-09-18 14:50:27 +12:00
Sam Minnee
f700d86557 NEW: Run JS/CSS linting in Travis.
The ‘npm run lint’ command will be used to run listing on Travis, which
can also be used on local dev environments. These can also be used with
editor plugins to highlight errors immediately.

The intention is that this can be used in place of codeclimate. The
benefits are that we use a single toolchain in both CI and local dev,
which is not entirely the case at the moment.

Note the sass-lint is provided by “sudo gem install scss_lint”. It’s
possible that we can move to a node-based sass-lint; I can’t recall
what the motivation for using the scss_lint gem was - I think it was
mainly that we had the AirBNB styleguide already implemented as a linter
config.
2016-09-18 14:49:08 +12:00
Ingo Schommer
686c167793 Removed TinyMCE NPM dep
We don't have an easy way to copy over those files automatically into the thirdparty/ dir,
where they are accessible on the webroot (not the case in node_modules).

To avoid confusion, we don't duplicate into node_modules for now.
See https://github.com/silverstripe/silverstripe-framework/pull/5918#issuecomment-244910280
2016-09-16 13:46:10 +12:00
Ingo Schommer
8eac22c628 Separate CSS bundling in Webpack
Multiple entry points can't result in a single bundle.css with a fixed filename, see
https://github.com/webpack/extract-text-webpack-plugin/issues/179

Until that's resolved, it's easier to keep the 'css' task separate in Webpack,
and have a single entry point for all CSS (bundle.scss).

Also partially reverting "Moved frontend assets into admin/ "module"",
which moved too many files: debug.css and install.css need to remain
as framework (not admin) deps. Split out into a separate `framework-css` Webpack
task in preparation for splitting off the module.
2016-09-16 13:46:09 +12:00
Ingo Schommer
9cb9a05ec0 API Removed duplicated thirdparty deps
These were originally copied from node_modules via an "npm run thirdparty" task,
in order to have them loadable with oldschool <script> tags.
Since webpack supports CommonJS-style loading, that's no longer required,
we can simply inline those scripts into the bundle.

We need to use imports-loader though, in order to ensure
that "define" is not available in some module scopes,
which triggers AMD behavior that's not compatible with Webpack's loaders.
See http://webpack.github.io/docs/shimming-modules.html

I've had to pin to the exact versions used in the 3.x CMS,
since jquery-upload has introduced an AMD wrapper sometime
between 6.0 and 6.9 (the latest version NPM automatically pulls in).
This AMD wrapper confuses Webpack, since it's trying to resolve the
dependencies contained in it. We could create shims for those instead,
but the easiest way was to simply revert to the versions already used
before the Webpack migration (since the newer versions in node_modules
were never actually copied into thirdparty, they weren't used before).
2016-09-15 22:19:12 +12:00
Ingo Schommer
08adac8770 Updated npm-shrinkwrap in order to build lock file
Throw "extraneous modules" errors on npm-shrinkwrap@5.x,
even after `rm -rf node_modules; npm install`
2016-09-15 22:19:09 +12:00
Sam Minnee
1b527fca3f FIX Webpack handles images & fonts.
Responsibility for finding and referencing images and fonts is now
given to webpack. All the url references are now relative to the
component scss file, and point to font & images files in src/, rather
than assuming someone else will place them in dist.

This makes the source more modular, and makes it easier to, for
example, inline images are data URIs, or create a new build script that
builds several modules for a project in a single pass.

Workaround for bad font path in bundle.css:
ExtactTextPlugin didn’t work as well with a subfolder reference in the
filename. This is just a short-term fix and could probably be improved
to put bundle.css back in the styles subfolder.

Webpack handles images & fonts:
Responsibility for finding and referencing images and fonts is now
given to webpack. All the url references are now relative to the
component scss file, and point to font & images files in src/, rather
than assuming someone else will place them in dist.

This makes the source more modular, and makes it easier to, for
example, inline images are data URIs, or create a new build script that
builds several modules for a project in a single pass.

Clarify docs on spriting and webfonts:
We've decided to remove sprity since it comes with hundreds of dependencies,
and needs compilation within the "npm install" - dragging out the already overweight
install process, and making the resulting node_modules/ folder less portable between systems.
2016-09-15 22:19:09 +12:00
Sam Minnee
a6049ec383 FIX: Use chosen from npm package.
Downloading the package from github makes npm install a lot slower and
complicates the webpack build.
2016-09-15 22:19:09 +12:00
Sam Minnee
2e577ddb1d API Use Webpack
The bundle is generated by running “webpack” directly - gulp is no
longer needed as an intermediary. The resulting config is a lot shorter,
although more configuration is pushed into lib.js.

Modules are shared between javascript files as global variables.
Although this global state pollution is a bit messy, I don’t think it’s
practically any worse than the previous state, and it highlights the
heavy coupling between the different packages we have in place.
Reducing the width of the coupling between the core javascript and
add-on modules would probably be a better way of dealing with this than
replacing global variables with some other kind of global state.

The web pack execution seems roughly twice as fast - if I clear out my
framework/client/dist/js folder, it takes 13.3s to rebuild. However,
it’s not rebuilding other files inside dist, only the bundle files.

CSS files are now included from javascript and incorporated into
bundle.css by the webpack. Although the style-loader is helpful in some
dev workflows (it allows live reload), it introduces a flash of
unstyled content which makes it inappropriate for production.

Instead ExtractTextPlugin is used to write all the aggregated CSS
into a single bundle.css file. A style-loader-based configuration could
be introduced for dev environments, if we make use of the webpack live
reloader in the future.

Note that the following features have been removed as they don't appear to be
necessary when using Webpack:
 - UMD module generation
 - thirdparty dist file copying

LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late,
which leads e.g. to buttons being initialised without this added behaviour.
2016-09-15 22:19:05 +12:00
Ingo Schommer
65718770d6 Update to React v15.0 2016-09-06 21:39:20 +12:00
Ingo Schommer
0cc91d3b38 Use react-bootstrap-ss fork
The react-bootstrap project won't update their codebase for TWBS4 compat
until they're out of alpha (https://github.com/react-bootstrap/react-bootstrap/issues/1187).
So we have to work in a fork for the meantime.
2016-09-06 21:36:58 +12:00
Damian Mooyman
5cb4ab4a82 API Add PopoverField for extra-actions popup in react 2016-07-15 15:46:11 +12:00
Damian Mooyman
6e68f38efb API Update react sections to use react-router instead of page.js (#5796)
Fixes #5711
2016-07-14 17:51:01 +12:00
David Craig
83308689d5 API Initialise React controllers via routes (#5436) 2016-06-16 15:04:14 +12:00
Damian Mooyman
dbd17bd49a API Remove routing from silverstripe-component
BUG Fix page routing in subdirectory
BUG Fix top level admin sections not causing ajax load
2016-04-21 08:43:03 +12:00
Ingo Schommer
19de22f427 API Moved frontend assets into admin/client/
admin/javascript => admin/client
admin/javascript/src => admin/client/src/legacy (mostly)
admin/scss/_variables.scss => admin/client/styles/_variables.scss
admin/scss => admin/client/styles/legacy/
admin/css/editor.css => admin/client/dist/css/editor.css
admin/css/screen.css => admin/client/dist/css/bundle.css
admin/images => admin/client/dist/images
admin/images/sprites/src => admin/client/src/sprites
admin/images/sprites/dist => admin/client/dist/sprites
admin/font => admin/client/dist/font
2016-04-20 21:13:10 +12:00
Ingo Schommer
572d8427e0 Implement defaultData on silverstripe-backend 2016-04-18 13:59:18 +12:00
Damian Mooyman
5f2edb4e91 Fix ESLint issues, shrinkwrap, and missing image 2016-04-14 11:20:22 +12:00
Hamish Friedlander
31247a67bd API Replace baked-in and modified Chosen 0.9.8 with npm'ed in Chosen 1.5.1 2016-04-14 10:45:39 +12:00
Ingo Schommer
d7eed8fe8d Fix gulpfile.js ESLint syntax 2016-04-12 22:04:37 +12:00
Sam Minnee
b088efc6f9 MINOR: Test for backend.createEndpointFetcher() 2016-04-12 12:15:37 +12:00
Sam Minnee
21a1065329 NEW: Add createEndpointFetcher to backend
SilverStripeBackend now has a createEndpointFetcher method, described
in its docblock in more detail.

It’s based the asset-admin code for apiCallerFromEndpoint(). It’s
refactored and generalised into framework in order to provide a
general-purpose API for tying Javascript components to backend APIs.

@todo: tests
2016-04-11 21:43:21 +12:00
Ingo Schommer
3e575681ae Updated build artifacts 2016-04-07 23:50:12 +12:00
Ingo Schommer
0fadd7a15a Fix IE compat through babelify
Requires a polyfill for Object.assign
2016-04-06 10:57:57 +12:00
Ingo Schommer
34d40bed5f Add ESLint support
See https://github.com/silverstripe/silverstripe-framework/pull/5108
2016-04-06 10:43:33 +12:00
Ingo Schommer
ca25c78dda Updated babel dependency 2016-04-06 08:49:47 +12:00
Ingo Schommer
830523541a Updated react dependency 2016-04-06 08:49:47 +12:00
Ingo Schommer
2a5c92e491 Generic state management for React GridField
Renaming state operations from 'campaign' to 'record'.
Implemented API endpoint retrieval of GridField data.

Added more mock data into CampaignAdmin (rather than hardcoding in client),
to be replaced by CampaignAdmin API endpoint querying the real datamodel.

Using more native isomorphic-fetch instead of jQuery.ajax
to minimise dependencies and get into a more forward-thinking API.

Also catching errors in ReactJS API backend:
Emulate jQuery.ajax() behaviour. Might change at a later point
if we have a general purpose backend with a promise-based catch()
implementation.
2016-04-06 08:41:07 +12:00
Ingo Schommer
47dd7b48af Relative ES6 module paths
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416
https://github.com/substack/node-browserify/issues/767
http://stackoverflow.com/questions/28078780/relative-paths-in-package-json
https://github.com/npm/npm/issues/1558
http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416
https://github.com/vigetlabs/gulp-starter/issues/17#issuecomment-44292681
2016-04-06 08:36:38 +12:00
David Craig
ef97e0b52f Consolidated bundles, sourcemaps and watching
We don't want a bundle for each section, unnecessary network overhead
and too much boilerplate in defining build tooling.
2016-04-06 08:36:34 +12:00
Paul Clarke
0ca090a391 Add generic React components
Includes moving some components from AssetAdmin
2016-04-06 08:35:50 +12:00
David Craig
d0ffa7771c Client config 2016-04-05 22:43:29 +12:00
scott1702
2abe24f818 GridField and header styles 2016-04-05 22:42:15 +12:00
David Craig
f8c17bed3b CampaignAdmin and GridField React sections
Also removes watchify because it wasn't working.
Add SilverStripeBackend class used to fetch data from endpoints for the front-end
2016-04-05 22:42:13 +12:00
Ben Manu
5c7a6166b6 Moving thirdparty module to npm dependency - json-js. 2016-04-01 15:43:09 +13:00
David Craig
aa1aebd007 Implement client-side routing with Page.js
- Removes thirdparty dependency History.js
- Adds thirdparty dependency Page.js to manage client-side routing
- Adds a wrapper around Page.js for SilverStripe specific behaviour
- Increased minimum browser requirement to IE10. Native HTML History API routing requires IE10 or newer (necessitated by removal of History.js)
- PJAX pannel loading via now uses promises rather than callbacks
- Adds getClientConfig method to LeftAndMain which can be used to pass config from to the front-end client
2016-04-01 13:45:14 +13:00
Daniel Hensby
ed267d03bd Updating required node version 2016-03-16 21:54:07 +00:00