This repository has been archived by the owner on Jan 17, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 123
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initial work toward new component bundle directories (#2859)
* Tweaks to support component directory bundles - Storybook now also finds stories in frontend/src/app/**/stories.js - `npm run test` now also finds tests in frontend/src/app/**/tests.js - New /static/app/app.js.css stylesheet built from Sass styles imported by components - Hacks to ignore .scss imports when using component modules outside Webpack for static page build & tests - Update flowconfig to ignore .scss imports - Small eslint upgrade so CLI matches gulp-eslint * Reorganize ExperimentRowCard component into bundle directory * Reorganize UpdateList component into bundle directory * Begin to extract IncompatibleAddons component from ExperimentPage container * Rename stories.jsx -> stories.js; See also: airbnb/javascript#985 (comment) * Quick & dirty revision to Storybook docs to incorporate new component bundle proposal Issue #2807
- Loading branch information
Showing
22 changed files
with
376 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| const path = require('path'); | ||
|
|
||
| // Export a function. Accept the base config as the only param. | ||
| module.exports = (storybookBaseConfig, configType) => { | ||
| // configType has a value of 'DEVELOPMENT' or 'PRODUCTION' | ||
| // You can change the configuration based on that. | ||
| // 'PRODUCTION' is used when building the static version of storybook. | ||
|
|
||
| // Make whatever fine-grained changes you need | ||
| storybookBaseConfig.module.rules.push({ | ||
| test: /\.s?css$/, | ||
| loaders: ["style-loader", "css-loader", "sass-loader"], | ||
| include: path.resolve(__dirname, '../') | ||
| }); | ||
|
|
||
| storybookBaseConfig.module.rules.push({ | ||
| test: /\.(png|jpg|gif|svg)$/, | ||
| loaders: ['url-loader'] | ||
| }); | ||
|
|
||
| // Return the altered config | ||
| return storybookBaseConfig; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| // @flow | ||
|
|
||
| import React from 'react'; | ||
| import { Localized } from 'fluent-react/compat'; | ||
| import LocalizedHtml from '../LocalizedHtml'; | ||
|
|
||
| import './index.scss'; | ||
|
|
||
| type IncompatibleAddonsProps = { | ||
| experiment: Object, | ||
| installedAddons: Array<string> | ||
| }; | ||
|
|
||
| export default class IncompatibleAddons extends React.Component { | ||
| props: IncompatibleAddonsProps | ||
|
|
||
| render() { | ||
| const { incompatible } = this.props.experiment; | ||
| const installed = this.getIncompatibleInstalled(incompatible); | ||
| if (installed.length === 0) return null; | ||
|
|
||
| const helpUrl = 'https://support.mozilla.org/kb/disable-or-remove-add-ons'; | ||
|
|
||
| return ( | ||
| <section className="incompatible-addons"> | ||
| <header> | ||
| <Localized id="incompatibleHeader"> | ||
| <h3> | ||
| This experiment may not be compatible with add-ons you have installed. | ||
| </h3> | ||
| </Localized> | ||
| <LocalizedHtml id="incompatibleSubheader"> | ||
| <p> | ||
| We recommend <a href={helpUrl}>disabling these add-ons</a> before activating this experiment: | ||
| </p> | ||
| </LocalizedHtml> | ||
| </header> | ||
| <main> | ||
| <ul> | ||
| {installed.map(guid => ( | ||
| <li key={guid}>{incompatible[guid]}</li> | ||
| ))} | ||
| </ul> | ||
| </main> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| getIncompatibleInstalled(incompatible: Object) { | ||
| if (!incompatible) { | ||
| return []; | ||
| } | ||
| const installed = this.props.installedAddons || []; | ||
| return Object.keys(incompatible).filter(guid => ( | ||
| installed.indexOf(guid) !== -1 | ||
| )); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // TODO: migrate <IncompatibleAddons> styles from frontend/src/styles/components/_Warning.scss | ||
|
|
Oops, something went wrong.