diff --git a/config/webpack.config.js b/config/webpack.config.js
index 3b9e661..45e05f9 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -404,7 +404,7 @@ module.exports = function (webpackEnv) {
},
],
],
-
+
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
@@ -449,7 +449,7 @@ module.exports = function (webpackEnv) {
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
-
+
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
diff --git a/src/components/App.jsx b/src/components/App.js
similarity index 100%
rename from src/components/App.jsx
rename to src/components/App.js
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
deleted file mode 100644
index 8eb4533..0000000
--- a/src/components/Card.jsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import copy from "../common/data/copy.json";
-import React from "react";
-
-import CardCustomField from "./presentational/Card/CustomField";
-import CardTime from "./presentational/Card/Time";
-import CardLocation from "./presentational/Card/Location";
-import CardCaret from "./presentational/Card/Caret";
-import CardSummary from "./presentational/Card/Summary";
-import CardSource from "./presentational/Card/Source";
-import { makeNiceDate } from "../common/utilities";
-
-class Card extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isOpen: false,
- };
- }
-
- toggle() {
- this.setState({
- isOpen: !this.state.isOpen,
- });
- }
-
- makeTimelabel(datetime) {
- return makeNiceDate(datetime);
- }
-
- handleCardSelect(e) {
- if (!e.target.className.includes("arrow-down")) {
- const selectedEventFormat =
- this.props.idx > 0 ? [this.props.event] : this.props.event;
- this.props.onSelect(selectedEventFormat, this.props.idx);
- }
- }
-
- renderSummary() {
- return (
-
- );
- }
-
- renderLocation() {
- return (
-
- );
- }
-
- renderSources() {
- if (this.props.sourceError) {
- return ERROR: something went wrong loading sources, TODO:
;
- }
-
- const sourceLang = copy[this.props.language].cardstack.sources;
- return (
-
-
{sourceLang}:
- {this.props.event.sources.map((source) => (
- this.props.onViewSource(source)}
- />
- ))}
-
- );
- }
-
- // NB: should be internaionalized.
- renderTime() {
- const timelabel = this.makeTimelabel(this.props.event.datetime);
-
- // let precision = this.props.event.time_display
- // if (precision === '_date_only') {
- // precision = ''
- // timelabel = timelabel.substring(0, 11)
- // } else if (precision === '_approximate_date_only') {
- // precision = ' (Approximate date)'
- // timelabel = timelabel.substring(0, 11)
- // } else if (precision === '_approximate_datetime') {
- // precision = ' (Approximate datetime)'
- // } else {
- // timelabel = timelabel.substring(0, 11)
- // }
-
- return (
-
- );
- }
-
- renderCustomFields() {
- return this.props.features.CUSTOM_EVENT_FIELDS.map((field) => {
- const value = this.props.event[field.key];
- return value ? (
-
- ) : null;
- });
- }
-
- renderMain() {
- return (
-
-
- {this.renderTime()}
- {this.renderLocation()}
-
- {this.renderSummary()}
- {this.renderCustomFields()}
-
{this.renderSources()}
;
- }
-
- renderCaret() {
- return this.props.features.USE_SOURCES ? (
- this.toggle()} isOpen={this.state.isOpen} />
- ) : null;
- }
-
- render() {
- const { isSelected, idx } = this.props;
- return (
- this.handleCardSelect(e)}
- >
- {this.renderMain()}
- {this.state.isOpen ? this.renderExtra() : null}
- {this.renderCaret()}
-
- );
- }
-}
-
-// The ref to each card will be used in CardStack for programmatic scrolling
-export default React.forwardRef((props, ref) => (
-
-));
diff --git a/src/components/Icon.jsx b/src/components/Icon.jsx
deleted file mode 100644
index 956eb78..0000000
--- a/src/components/Icon.jsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React from "react";
-
-const Icon = ({ iconType }) => {
- if (iconType === "personas") {
- return (
-
- );
- } else if (iconType === "tipos") {
- return (
-
- );
- } else if (iconType === "hardware") {
- return (
-
- );
- } else if (iconType === "escenas") {
- return (
-
- );
- } else if (iconType === "docs") {
- return (
-
- );
- } else if (iconType === "search") {
- return (
-
- );
- }
-};
-
-export default Icon;
diff --git a/src/components/InfoPopup.jsx b/src/components/InfoPopup.js
similarity index 88%
rename from src/components/InfoPopup.jsx
rename to src/components/InfoPopup.js
index 5c1d73f..8d32e0b 100644
--- a/src/components/InfoPopup.jsx
+++ b/src/components/InfoPopup.js
@@ -1,5 +1,5 @@
import React from "react";
-import Popup from "./presentational/Popup";
+import Popup from "./atoms/Popup";
import copy from "../common/data/copy.json";
const Infopopup = ({ isOpen, onClose, language, styles }) => (
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 9c37d0d..53ee5a9 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -5,24 +5,25 @@ import { connect } from "react-redux";
import * as actions from "../actions";
import * as selectors from "../selectors";
-import MediaOverlay from "./Overlay/Media";
-import LoadingOverlay from "./Overlay/Loading";
-import Map from "./Map.jsx";
-import Toolbar from "./Toolbar/Layout";
-import CardStack from "./CardStack.jsx";
-import NarrativeControls from "./presentational/Narrative/Controls.js";
-import InfoPopup from "./InfoPopup.jsx";
-import Popup from "./presentational/Popup";
-import Timeline from "./Timeline.jsx";
-import Notification from "./Notification.jsx";
-import StateOptions from "./StateOptions.jsx";
-import StaticPage from "./StaticPage";
+import Toolbar from "./Toolbar";
+import InfoPopup from "./InfoPopup";
+import Notification from "./Notification";
import TemplateCover from "./TemplateCover";
+import Popup from "./atoms/Popup";
+import StaticPage from "./atoms/StaticPage";
+import MediaOverlay from "./atoms/Media";
+import LoadingOverlay from "./atoms/Loading";
+
+import Timeline from "./time/Timeline";
+import Space from "./space/Space";
+import Search from "./controls/Search";
+import CardStack from "./controls/CardStack";
+import NarrativeControls from "./controls/NarrativeControls.js";
+
import colors from "../common/global";
import { binarySearch, insetSourceFrom } from "../common/utilities";
import { isMobileOnly } from "react-device-detect";
-import Search from "./Search.jsx";
class Dashboard extends React.Component {
constructor(props) {
@@ -329,7 +330,8 @@ class Dashboard extends React.Component {
onSelectNarrative: this.setNarrative,
}}
/>
-