* Moves screen variables relating to Header to Header
* Adds a Header storybook entry
* Moves data-logo from Logo template to Header.mustache
* Updates UserLinks to use USER_LINK_PARTIALS
* Renames confusing SearchBox story names
* Updates package.json to use a static folder.
* Use mediawiki.org for sourcing mw-ui-button and mw-ui-icon styles
since deploys there come earlier
* Removes usages of ID selectors
Change-Id: I0e158fa7e62c56a50cfff497d75f0808effd1eed
* add stories for buttons and icons using wvui and mwui
* Update user link stories
* Add the vector-menu-dropdown-noicon class to more and
variants menu
* Fixes the language button story and simplifies its code.
* Updates Hooks::makeButtonIcon to Hooks::makeIcon which
reflects the method purpose more. It doesn't output button
classes.
Bug: T289514
Change-Id: Ifd750da0c0181ec56f39ff00d653e88bfc848038
Also change script name to 'minfiy-svg' to align with other npm 'svgo'
using products and to improve readability for non-native speakers.
Bug: T278656
Change-Id: Ib2a8a251a48ea99c8019d63b4f2586fea4079021
The following rules are failing and were disabled:
* compat/compat
Additional changes:
* eslint: Renamed `wikimedia/client` profile to `client-es5` (T277085).
Change-Id: I12c1a88cef8e2c95bed496628d2fe74d031f8278
This interferes with LibUp's ability to automatically downgrade newly
failing errors to warnings and is a deviation from the settings we
typically use.
Bug: T263922
Change-Id: Ia44038a1df1052f633ce18ac6f35253e870ab0c6
Creates a new skins.vector.search module that
replaces the searchSuggest module from MediaWiki core.
This module creates a new Vue app using the WVUI
search widget for the new search experience.
The legacy search input form is still retains on pageload,
and the new search kicks on search input focus.
In order to manage that transition, the legacy search
input is styled to resemble the new WVUI input, and the
new input is manually focused after the component mounts.
Vue is also added as a dev-dependency to help with
type-checking.
Other changes:
* the entry in skin.json is reordered alphabetically after
skins.vector.js
Bug: T264355
Change-Id: Ibb9561a77a14734297cb4d0ddcd415fc0750b45d
Additional changes:
* Removed globals `require`, `module`, included via `wikimedia/mediawiki` profile (T262222).
* Dropped the emtpy global definition in .eslintrc.json.
Change-Id: I18ea7925d42ae65c6afd49982186d9375ab9e6e3
Run dev-scripts/setup-storybook.sh using the `bash` executable,
not default shell.
('pre-commit' still doesn't work because of the funky env variable,
but I don't care)
Change-Id: Ibb0bfa0b6687248377ac72629c5642773d5d357f
Fixes the missing images in the Logo story.
The current method of downloading the images into
docs/ui/assets and treating them as static assets
(with the start-storybook -s option) could be problematic
if that directory is deleted or "cleaned" before the
storybook build.
Instead, the images are now downloaded into
./storybook/resolve-imports and imported explicitly in the
code in Logo.stories.data.js.
* ./storybook/resolve-less-imports renamed to resolve-imports
* .gitignore is updated to reflect that
* Webpack config is updated with the `resolve-imports` path
* static option (-s) is removed from npm start script
* Images are explicitly imported in Logo.stories.data.js
* Type definitions are added for .svg and .png files
Change-Id: I242d229242c86a5784d6d4611d0b9c7049712dac
Add a new NPM script, `pre-commit`, which _conditionally_ invokes
`npm test`. Previously, the pre-commit hook was configured by default to
invoke `npm test`. Now it is configured explicitly to invoke the new
`pre-commit` script.
The rationale for this change is that some folks may prefer workflows
that defer all validation until CI. Supporting these workflows is a
small change, most of it documentation.
This change isn't necessary for T257647 but supports and seems like an
overall improvement to the repo regardless of whether code is built or
not.
Bug: T257647
Change-Id: I19a78e0e677026cd6887245d96e63a414397a3db
The NPM `build` script was being used to call `test`. The confusion was
likely due `build` calling the TypeScript compiler which in this case
isn't building anything. It's only used for tests. Since a proper
`build` script will be added in T257647. Move the tests in `build` to
`test` and drop `build`.
Bug: T257647
Change-Id: I7f2c983915f6b1eaa0aa88eb8dd4b32d9c954b78
Adds a bundlesize test that measures the bytesize of
individual ResourceLoader modules.
This test depends on a running mediawiki instance as well as
the $MW_SERVER and $MW_SCRIPT_PATH environment variables.
ResourceLoader modules are fetched from a URL and piped
into a bundlesize command based on a custom configuration file.
The test can be run with `npm run test:size`.
Bug: T244276
Change-Id: I4f4534921ccbc6bd4f99229c8dd36b1279dde640
Storybook seems to be our primary stackless development workflow. Move
the `storybook` script to `start` to support the standard `npm start`
command expected in every NPM repo.
Debugging Storybook tooling is the rare case that informational messages
(perhaps even more verbose than default) are wanted. Feature development
is the common workflow that should be optimized for.
Storybook's design philosophy seems to favor incredibly verbose output
by default, both for the CLI and the [browser console]. This is at odds
with Unix's rule of silence, sometimes expressed as "silence is golden."
That is, only report warnings and errors unless told otherwise.
This patch reduces the verbosity of the Storybook [CLIs] as able and its
setup script:
- Only report warnings and errors while building.
- Suppress build informational output when launching.
- Only report curl errors, not progress.
[browser console]: https://github.com/storybookjs/storybook/issues/8461
[CLIs]: https://storybook.js.org/docs/configurations/cli-options/
Change-Id: Ie38ae14e304f7f88f445c0c0fb3f2fbba49d134a
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
Lift the mists of confusion by checking that all JavaScript types align.
No ignores! This is the JavaScript equivalent to Phan.
This patch adds the necessary infrastructure for verifying typing and
fixes the few flaws found.
Bug: T239262
Change-Id: I2557471421196ea46cd13dfb786a52968fbfcc97
package-lock.json regenerated using the following process to ensure a clean slate:
rm -r node_modules package-lock.json ; npm i
Bug: T247004
Change-Id: Ie7720509ef37b178538a54854c28153ed73e375e
Execute `npm test` prior to committing. This saves back-and-forth with
Jenkins. This is the same configuration used by Popups,
MobileFrontend, MinervaNeue, NearbyPages, ContentTranslation, and
others.
Change-Id: If61ab4f28b0ccd38492d11a4cd8a92a97b2eb582
- npm doc: unchanged, but no longer called by 'test'
* it is run on its own by 'mwext-node10-rundoc-docker' CI job.
* successful build of the documentation is necessary for JenkinsBot to accept the patch
- npm test: runs only 'lint' as of now, future possibility: qunit tests too
* run by CI job 'mwgate-node10-docker'
- npm build: runs 'test' and 'doc'
* NOT run by CI jobs
Bug: T247004
Change-Id: I3e6e1ebb220ceb1a1591cb7087bbd071b1bacf8f
additional changes:
* the jsdoc npm command is removed intentionally to
avoid polluting package.json with too many jobs.
Change-Id: Ie49de1c4b7a40a835ea1b3f8bcdbb779ba919860
Adds the following npm scripts:
- npm run lint
- npm run lint:js
- npm run lint:styles
- npm run lint:i18n
Bug: T242781
Change-Id: I0c2cfce73a02029b9d0c4d329309aff477cb02d4
This adds the wmf theme styles to our jsdoc as can be seen on
https://doc.wikimedia.org/Parsoid/master/.
There is a caveat with this though. jsdoc-wmf-theme adds warnings for
unlinked symbols (e.g. 'return {jQuery}') [1] which causes the jsdoc doc
generation to fail since it is set to fail on warnings (we have it
configured with `pedantic: true`).
If we add the jsdoc-wmf-theme, we will need to be stricter about our
symbol usage which could be a good thing or just be tedious and
annoying.
What do you think?
[1] https://github.com/cscott/jsdoc-wmf-theme/blob/master/publish.js#L29
Bug: T239258
Change-Id: Icade62a278d7e685cbda28a8ca26a1b703e64f19
* jsdoc.json was copied from Minerva. The markdown plugin from that
config was removed since there no usages of that in Vector.
* Added latest jsdoc dependency to package.json
* Copied 'jsdoc' task from Minerva into Vector. Revised storybook output
so that multiple docs (storybook + jsdoc) could be in /docs
* Made collapsibleTabs.js JSDoc compliant (This was really the only
thing using jsduck syntax)
* Modified Gruntfile stylelinter to ignore docs folder
Bug: T239258
Change-Id: Id07d591ffe7bf0ac021109051e89b91ffdcf4c78
- Update package.json with the new dependencies.
- A script storybook.sh pulls down CSS and LESS imports from external
dependencies. This copies the approach taken in Popups and MobileFrontend.
- Icons from external repos are maintained within the repo in SVG-only form.
Using load.php modules is also possible, but will pull down other unnecessary icons
and break if any of these modules are changed. Decided that we should manually maintain
these for the time being given there are only 3 icons.
- Several LESS files now import the variables file. I think it's useful for stories
to only import the CSS they use as this encourages us to modularise our CSS. Before these
imports were not necessary as they inherit imports from index.less. This will have no impact
on the bundle size as the LESS compiler silently discards duplicate imports
- stories/utils.js provides a useful placeholder function for generalising our hook entry
points.
Bug: T242674
Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
