feat(app): many little improvements to demo

app/src/app.vue

@@ -6,29 +6,37 @@
                 <p>
                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, recusandae enim expedita iusto, esse voluptatum odio itaque delectus voluptatem dolorum dolores sint quam excepturi, consequatur aliquam nesciunt distinctio! Ullam, excepturi!
                 </p>
-                <div>{{ thing }}</div>
-                <input type="text" v-model="thing">
             </header>
-            <div layout="rows center-justify">
-                <div layout="row center-right">
-                    <div>Clock type:</div>
-                    <choice-group>
-                        <choice v-for="{ label, value } in state.clockTypes" :key="value" :id="value" :value="value" v-model="clockType">
-                            <span>{{ label }}</span>
-                        </choice>
-                    </choice-group>
+            <div class="app__options" layout="rows center-justify">
+                <choice-group>
+                    <choice v-for="{ label, value } in state.clockTypes" :key="value" :id="value" :value="value" v-model="clockType">
+                        <span>{{ label }}</span>
+                    </choice>
+                </choice-group>
+                <div>
+                    <button class="button" @click="undo">Undo</button>
+                    <button class="button" @click="redo">Redo</button>
                 </div>
             </div>
             <div class="clocks">
-                <div class="clock" v-for="{ time, timezone } in clocks" :key="timezone">
-                    <component  :is="clockComponent" :time="time"></component>
-                    <div class="clock__label">
-                        <div class="clock__timezone">{{ timezone }}</div>
-                        <div class="clock__date">{{ getClockDateLabel(time, timezone) }}</div>
+                <transition-group name="clocks">
+                    <div class="clock" v-for="{ time, timezone } in clocks" :key="timezone">
+                        <component :is="clockComponent" :time="time"></component>
+                        <div class="clock__label">
+                            <div class="clock__timezone">{{ timezone }}</div>
+                            <div class="clock__date">{{ getClockDateLabel(time, timezone) }}</div>
+                        </div>
+                        <button @click="removeClock(timezone)">Remove</button>
+                    </div>
+                </transition-group>
+                <div class="add-clock" layout="row center-center">
+                    <div>
+                        <div>Add a clock</div>
+                        <select v-model="addClockModel">
+                            <option value="">Select a timezone</option>
+                            <option v-for="timezone in timezones" :key="timezone" :value="timezone">{{ timezone }}</option>
+                        </select>
                     </div>
-                </div>
-                <div class="add-clock">
-                    Add Clock
                 </div>
             </div>
         </container>
@@ -44,8 +52,6 @@ import DigitalClock from './components/clock/digital-clock.vue';
 
 import {
     computed,
-    ref,
-    watchEffect,
 } from 'vue';
 
 import {
@@ -55,18 +61,27 @@ import {
 import {
     state,
     clocks,
-    setClockType
+    timezones,
+    setClockType,
+    addClock,
+    removeClock,
+    undo,
+    redo,
+    loadTimezones
 } from './stores/time';
 
-const thing = ref('');
-
-watchEffect(() => console.log(state.clockType));
+loadTimezones();
 
 const clockType = computed({
     get: () => state.clockType,
     set: type => setClockType(type)
 });
 
+const addClockModel = computed({
+    get: () => '',
+    set: value => value && addClock(value)
+});
+
 const clockComponent = computed(() => state.clockType === 'analogue'
     ? AnalogueClock
     : DigitalClock
@@ -85,6 +100,10 @@ function getClockDateLabel(time: Date, timezone: string) {
         padding: 2rem;
     }
 
+    .app__options {
+        margin: 2rem 0;
+    }
+
     .clocks {
         display: grid;
         gap: 2rem;
@@ -114,4 +133,20 @@ function getClockDateLabel(time: Date, timezone: string) {
         font-size: 0.875rem;
     }
 
+    .clocks-enter-from,
+    .clocks-leave-to {
+        opacity: 0;
+        transform: scale(0);
+    }
+
+    .clocks-enter-active,
+    .clocks-leave-active {
+        transition: opacity var(--animation__timing) var(--animation__easing),
+                    transform var(--animation__timing) var(--animation__easing);
+                }
+                
+    .clocks-move {
+        transition: transform var(--animation__timing) var(--animation__easing);
+    }
+
 </style>

app/src/components/clock/analogue-clock.vue

@@ -10,12 +10,16 @@
 </template>
 
 <script lang="ts" setup>
-import scale from '../../utilities/number/scale';
-
 import {
-    computed
+    computed,
 } from 'vue';
 
+import {
+    getHourRotation,
+    getMinuteRotation,
+    getSecondRotation
+} from '../../utilities/time/get-rotation';
+
 const props = defineProps({
 
     time: {
@@ -25,31 +29,23 @@ const props = defineProps({
 
 });
 
-const hourScale = scale([0, 12], [0, 360]);
-const minSecScale = scale([0, 60], [0, 360]);
-const relativeMinSecScale = scale([0, 60], [0, 1]);
-
 const handStyles = computed(() => {
     const hours = props.time.getHours() % 12;
     const minutes = props.time.getMinutes();
     const seconds = props.time.getSeconds();
 
     return {
         hour: {
-            transform: `translateX(var(--clock__hand-offset)) rotate(${hourScale(hours + relativeMinSecScale(minutes))}deg)`
+            transform: `translateX(var(--clock__hand-offset)) rotate(${getHourRotation(hours, minutes)}deg)`
         },
         minute: {
-            transform: `translateX(var(--clock__hand-offset)) rotate(${minSecScale(minutes + relativeMinSecScale(seconds))}deg)`
+            transform: `translateX(var(--clock__hand-offset)) rotate(${getMinuteRotation(minutes, seconds)}deg)`
         },
         second: {
-            transform: `translateX(var(--clock__hand-offset)) rotate(${minSecScale(seconds)}deg)`
+            transform: `translateX(var(--clock__hand-offset)) rotate(${getSecondRotation(seconds)}deg)`
         }
     };
 });
-
-function getMarkerStyle(index: number) {
-    return 
-}
 </script>
 
 <style lang="scss">

app/src/components/clock/digital-clock.vue

@@ -27,7 +27,7 @@ const props = defineProps({
 });
 
 const labels = computed(() => ({
-    time: format(props.time, 'H:mm', {
+    time: format(props.time, 'h:mm', {
         timeZone: props.timezone
     }),
     phase: format(props.time, 'a', {

app/src/components/core/choice.vue

@@ -52,8 +52,8 @@ const choiceClass = computed(() => ({
         font-weight: 600;
         border-radius: 0.5rem;
         cursor: pointer;
-        transition: color 250ms ease-out,
-                    background 250ms ease-out;
+        transition: color var(--animation__timing) var(--animation__easing),
+                    background var(--animation__timing) var(--animation__easing);
     }
 
     .choice--checked {

app/src/index.ts

@@ -1,5 +1,5 @@
 import 'flex-layout-attribute';
-import './styles/index.css';
+import './styles/index.scss';
 
 import App from './app.vue';
 
@@ -12,15 +12,11 @@ import {
 } from 'vue';
 
 function start() {
-    const plugins = [];
-
-    if (import.meta.env.DEV) {
-        plugins.push(devtoolsPlugin());
-    }
-
     return createApp(App)
         .use(Harlem, {
-            plugins,
+            plugins: [
+                devtoolsPlugin(),
+            ],
         })
         .mount('body');
 }

app/src/stores/time/getters.ts

@@ -6,8 +6,10 @@ import {
     utcToZonedTime,
 } from 'date-fns-tz';
 
-export const timezones = getter('timezones', ({ timezones }) => {
-    return timezones.flatMap(({ utc }) => utc);
+export const timezones = getter('timezones', ({ timezones, clocks }) => {
+    return timezones.flatMap(({ utc }) => utc)
+        .filter(timezone => !clocks.includes(timezone))
+        .sort((a, b) => a.localeCompare(b));
 });
 
 export const clocks = getter('clocks', ({ clocks, time }) => {

app/src/stores/time/mutations.ts

@@ -1,5 +1,4 @@
 import {
-    state as _state,
     mutation,
 } from './store';
 
@@ -8,7 +7,6 @@ import type {
 } from './types';
 
 export const updateTime = mutation('update-time', state => state.time = new Date());
-export const setClockType = mutation('set-clock-type', (state, type: ClockType) => {
-    state.clockType = type;
-    console.log(type, state.clockType, _state.clockType);
-});
+export const setClockType = mutation('set-clock-type', (state, type: ClockType) => state.clockType = type);
+export const addClock = mutation('add-clock', (state, timezone: string) => state.clocks.push(timezone));
+export const removeClock = mutation('remove-clock', (state, timezone: string) => state.clocks = state.clocks.filter(tz => tz !== timezone));

app/src/stores/time/state.ts

@@ -24,5 +24,6 @@ export default {
         'Asia/Tokyo',
         'Australia/Sydney',
         'Asia/Hong_Kong',
+        'Asia/Dubai',
     ],
 } as State;

app/src/stores/time/store.ts

@@ -7,7 +7,6 @@ import {
     createStore,
 } from '@harlem/core';
 
-
 export const {
     state,
     getter,
@@ -25,6 +24,14 @@ export const {
                     name: 'add-clock',
                     description: 'Add a clock',
                 },
+                {
+                    name: 'remove-clock',
+                    description: 'Remove a clock',
+                },
+                {
+                    name: 'set-clock-type',
+                    description: 'Set clock type',
+                },
             ],
         }),
     ],

app/src/styles/index.css → app/src/styles/index.scss

@@ -1,3 +1,8 @@
+:root {
+    --animation__timing: 250ms;
+    --animation__easing: cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
 html,
 body {
     width: 100%;
@@ -31,4 +36,21 @@ body {
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     -moz-osx-font-smoothing: grayscale;
+}
+
+.button {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    font: inherit;
+    font-weight: 600;
+    color: #FFF;
+    background-color: #76D1A7;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background var(--animation__timing) var(--animation__easing);
+
+    &:hover {
+        background-color: #66ab8b;
+    }
 }

app/src/utilities/time/get-rotation.ts

@@ -0,0 +1,17 @@
+import scale from '../number/scale';
+
+const hourScale = scale([0, 12], [0, 360]);
+const minSecScale = scale([0, 60], [0, 360]);
+const relativeMinSecScale = scale([0, 60], [0, 1]);
+
+export function getHourRotation(hours: number, minutes: number = 0) {
+    return hourScale(hours + relativeMinSecScale(minutes));
+}
+
+export function getMinuteRotation(minutes: number, seconds: number= 0) {
+    return minSecScale(minutes + relativeMinSecScale(seconds));
+}
+
+export function getSecondRotation(seconds: number) {
+    return minSecScale(seconds);
+}

app/vite.config.ts

@@ -19,6 +19,9 @@ export default defineConfig({
             esmExternals: true,
         },
     },
+    define: {
+        '__VUE_PROD_DEVTOOLS__': true,
+    },
     plugins: [
         vuePlugin(),
     ],