Merge pull request #77 from andrewcourtice/feat/history-extension

History extension

Author: andrewcourtice

.vercelignore

@@ -1 +0,0 @@
-yarn.lock

app/package.json

@@ -22,16 +22,16 @@
         "@harlem/extension-trace": "^3.0.0",
         "@harlem/extension-transaction": "^3.0.0",
         "date-fns": "^2.29.3",
-        "date-fns-tz": "^1.3.7",
+        "date-fns-tz": "^2.0.0",
         "flex-layout-attribute": "^1.0.3",
         "harlem": "^3.0.0",
-        "vue": "^3.2.45"
+        "vue": "^3.2.47"
     },
     "devDependencies": {
-        "@vitejs/plugin-vue": "^3.2.0",
-        "@vue/compiler-sfc": "^3.2.45",
-        "rollup-plugin-visualizer": "^5.8.3",
-        "sass": "^1.56.1",
-        "vite": "^3.2.5"
+        "@vitejs/plugin-vue": "^4.0.0",
+        "@vue/compiler-sfc": "^3.2.47",
+        "rollup-plugin-visualizer": "^5.9.0",
+        "sass": "^1.58.3",
+        "vite": "^4.1.4"
     }
 }

app/src/app.vue

@@ -15,17 +15,23 @@
                     <br>
                     If you have the Vue <strong>devtools</strong> installed, open them up and change the inspector to Harlem to see the store. The source code for this demo is available <a href="https://github.com/andrewcourtice/harlem/tree/main/app" target="_blank" rel="noopener noreferrer">here</a>.
                 </p>
-                <choice-group class="app__theme">
-                    <choice v-for="{ label, value } in state.themes"
-                        :key="value"
-                        v-model="theme"
-                        :id="value"
-                        :value="value">
-                        {{ label }}
-                    </choice>
-                </choice-group>
+                <div class="app__options" layout="rows center-justify gap-small">
+                    <choice-group self="sm-full">
+                        <choice v-for="{ label, value } in state.themes"
+                            :key="value"
+                            v-model="theme"
+                            :id="value"
+                            :value="value">
+                            {{ label }}
+                        </choice>
+                    </choice-group>
+                    <div layout="rows center-right gap-x-small" self="sm-full">
+                        <button class="button" self="sm-half" :disabled="!canUndo()" @click="undo()">Undo</button>
+                        <button class="button" self="sm-half" :disabled="!canRedo()" @click="redo()">Redo</button>
+                    </div>
+                </div>
             </header>
-            <div class="app__options" layout="rows center-justify">
+            <div class="app__actions" layout="rows center-justify gap-small">
                 <choice-group self="sm-full">
                     <choice v-for="{ label, value } in state.clockTypes"
                         :key="value"
@@ -81,11 +87,15 @@ import {
 } from 'date-fns-tz';
 
 import {
+    canRedo,
+    canUndo,
     clocks,
     computeState,
     loadTimezones,
+    redo,
     removeClock,
     state,
+    undo,
 } from './stores/app';
 
 loadTimezones();
@@ -95,7 +105,7 @@ watchEffect(() => document.body.setAttribute('theme', state.theme.toLowerCase())
 const addClockModal = ref();
 
 const theme = computeState(state => state.theme);
-const clockType = computeState(state => state.clockType);
+const clockType = computeState(state => state.clockType, 'change-clock-type');
 
 const clockComponent = computed(() => state.clockType === 'analogue'
     ? AnalogueClock
@@ -140,13 +150,12 @@ function openAddClockModal() {
         text-align: center;
     }
 
-    .app__theme {
+    .app__options {
         margin-top: 2rem;
     }
 
-    .app__options {
+    .app__actions {
         margin: 2rem 0;
-        gap: 1rem;
     }
 
     .app__clocks {

app/src/assets/styles/_layout.scss

@@ -1,3 +1,27 @@
 [self="size-auto"] {
     width: auto;
+}
+
+[layout~="gap-none"] {
+    gap: 0;
+}
+
+[layout~="gap-x-small"] {
+    gap: var(--spacing__x-small);
+}
+
+[layout~="gap-small"] {
+    gap: var(--spacing__small);
+}
+
+[layout~="gap-medium"] {
+    gap: var(--spacing__medium);
+}
+
+[layout~="gap-large"] {
+    gap: var(--spacing__large);
+}
+
+[layout] > [layout] {
+    width: auto;
 }

app/src/assets/styles/_variables.scss

@@ -32,6 +32,11 @@
     --colour__alert: #DC2626;
     --colour__alert--dark: #B91C1C;
 
+    --spacing__x-small: 0.5rem;
+    --spacing__small: 1rem;
+    --spacing__medium: 1.5rem;
+    --spacing__large: 2rem;
+
     --border__colour: #EDEDED;
 
     --animation__timing: 250ms;

app/src/components/modals/add-clock.vue

@@ -18,7 +18,7 @@
             </meta-text>
         </div>
         <template #footer="{ close }">
-            <div class="add-clock-modal__actions" layout="row center-right">
+            <div class="add-clock-modal__actions" layout="row center-right gap-small">
                 <button class="button" @click="close()">Cancel</button>
                 <button class="button button--primary" :disabled="!canComplete" @click="complete()">Add {{ model.selection.length }} Clocks</button>
             </div>
@@ -98,11 +98,4 @@ defineExpose({
         margin: 1rem 0;
     }
 
-    .add-clock-modal__actions {
-
-        & .button {
-            margin-left: 1rem;
-        }
-    }
-
 </style>

app/src/stores/app/index.ts

@@ -5,6 +5,10 @@ import {
 export {
     state,
     computeState,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
 } from './store';
 
 export * from './getters';

app/src/stores/app/store.ts

@@ -1,8 +1,10 @@
 import getState from './state';
 import composeExtension from '@harlem/extension-compose';
 import storageExtension from '@harlem/extension-storage';
+import historyExtension from '@harlem/extension-history';
 
 import {
+    ACTIONS,
     MUTATIONS,
     NAME,
 } from './constants';
@@ -18,9 +20,22 @@ export const {
     action,
     reset,
     computeState,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
 } = createStore(NAME, getState(), {
     extensions: [
         composeExtension(),
+        historyExtension({
+            mutations: {
+                include: '*',
+                exclude: [
+                    MUTATIONS.updateTime,
+                    ACTIONS.loadTimezones,
+                ],
+            },
+        }),
         storageExtension({
             exclude: [
                 MUTATIONS.updateTime,

core/package.json

@@ -49,6 +49,6 @@
         "vue": "^3.2.0"
     },
     "devDependencies": {
-        "vue": "^3.2.45"
+        "vue": "^3.2.47"
     }
 }

docs/package.json

@@ -13,9 +13,9 @@
     },
     "devDependencies": {
         "dotenv": "^16.0.3",
-        "vitepress": "^1.0.0-alpha.30"
+        "vitepress": "^1.0.0-alpha.47"
     },
     "dependencies": {
-        "@vueuse/core": "^9.6.0"
+        "@vueuse/core": "^9.13.0"
     }
 }