From 17c742e2a55e6aeff60d0e1494798fcba0f37dcc Mon Sep 17 00:00:00 2001 From: Andrew Courtice Date: Thu, 5 Aug 2021 23:02:44 +1000 Subject: [PATCH] feat(app): started updating the demo app --- app/package.json | 7 +- app/src/app.vue | 32 +- app/src/assets/data/timezones.json | 1411 +++++++++++++++++ app/src/assets/images/clock.svg | 1 + app/src/components/clock.vue | 112 ++ .../components/user/user-details-input.vue | 70 - .../components/user/user-details-output.vue | 40 - app/src/index.ts | 14 +- app/src/stores/time/index.ts | 80 + app/src/stores/user/getters.ts | 13 - app/src/stores/user/index.ts | 7 - app/src/stores/user/mutations.ts | 15 - app/src/stores/user/state.ts | 13 - app/src/stores/user/store.ts | 24 - app/src/stores/user/types.ts | 11 - app/src/utilities/clamp.ts | 3 + app/src/utilities/scale.ts | 24 + app/tsconfig.json | 1 + yarn.lock | 10 + 19 files changed, 1675 insertions(+), 213 deletions(-) create mode 100644 app/src/assets/data/timezones.json create mode 100644 app/src/assets/images/clock.svg create mode 100644 app/src/components/clock.vue delete mode 100644 app/src/components/user/user-details-input.vue delete mode 100644 app/src/components/user/user-details-output.vue create mode 100644 app/src/stores/time/index.ts delete mode 100644 app/src/stores/user/getters.ts delete mode 100644 app/src/stores/user/index.ts delete mode 100644 app/src/stores/user/mutations.ts delete mode 100644 app/src/stores/user/state.ts delete mode 100644 app/src/stores/user/store.ts delete mode 100644 app/src/stores/user/types.ts create mode 100644 app/src/utilities/clamp.ts create mode 100644 app/src/utilities/scale.ts diff --git a/app/package.json b/app/package.json index abcefd6b..9abf30f4 100644 --- a/app/package.json +++ b/app/package.json @@ -15,6 +15,7 @@ "dependencies": { "@harlem/core": "^1.3.2", "@harlem/extension-action": "^1.3.2", + "@harlem/extension-history": "^1.3.2", "@harlem/extension-lazy": "^1.3.2", "@harlem/extension-reset": "^1.3.2", "@harlem/extension-snapshot": "^1.3.2", @@ -22,12 +23,14 @@ "@harlem/extension-trace": "^1.3.2", "@harlem/extension-transaction": "^1.3.2", "@harlem/plugin-devtools": "^1.3.2", + "date-fns": "^2.23.0", + "date-fns-tz": "^1.1.6", "flex-layout-attribute": "^1.0.3", - "vue": "^3.1.5" + "vue": "^3.2.0-beta.7" }, "devDependencies": { "@vitejs/plugin-vue": "^1.3.0", - "@vue/compiler-sfc": "^3.1.5", + "@vue/compiler-sfc": "^3.2.0-beta.7", "vite": "^2.4.4" } } diff --git a/app/src/app.vue b/app/src/app.vue index 438bcf0b..388e51dc 100644 --- a/app/src/app.vue +++ b/app/src/app.vue @@ -2,28 +2,36 @@

Harlem Demo App

- - + +
+ +
+
Loading...
+
+ +
- \ No newline at end of file diff --git a/app/src/components/user/user-details-input.vue b/app/src/components/user/user-details-input.vue deleted file mode 100644 index f8ca51e7..00000000 --- a/app/src/components/user/user-details-input.vue +++ /dev/null @@ -1,70 +0,0 @@ - - - \ No newline at end of file diff --git a/app/src/components/user/user-details-output.vue b/app/src/components/user/user-details-output.vue deleted file mode 100644 index 6981558c..00000000 --- a/app/src/components/user/user-details-output.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - \ No newline at end of file diff --git a/app/src/index.ts b/app/src/index.ts index 64ab2adc..363e48f9 100644 --- a/app/src/index.ts +++ b/app/src/index.ts @@ -5,20 +5,22 @@ import App from './app.vue'; import Harlem from '@harlem/core'; -import createDevtoolsPlugin from '@harlem/plugin-devtools'; -import createResetPlugin from '@harlem/plugin-reset'; +import devtoolsPlugin from '@harlem/plugin-devtools'; import { createApp, } from 'vue'; function start() { + const plugins = []; + + if (import.meta.env.DEV) { + plugins.push(devtoolsPlugin()); + } + return createApp(App) .use(Harlem, { - plugins: [ - createDevtoolsPlugin(), - createResetPlugin(), - ], + plugins, }) .mount('#app'); } diff --git a/app/src/stores/time/index.ts b/app/src/stores/time/index.ts new file mode 100644 index 00000000..e06dd9d3 --- /dev/null +++ b/app/src/stores/time/index.ts @@ -0,0 +1,80 @@ +import actionExtension from '@harlem/extension-action'; +import historyExtension from '@harlem/extension-history'; + +import { + createStore, +} from '@harlem/core'; + +import { + utcToZonedTime, +} from 'date-fns-tz'; + +export interface Timezone { + value: string; + abbr: string; + offset: number; + isdst: boolean; + text: string; + utc: string[]; +} + +export interface State { + time: Date; + timezones: Timezone[]; + clocks: string[]; +} + +const STATE = { + time: new Date(), + timezones: [], + clocks: [ + 'Australia/Brisbane', + 'America/New_York', + 'Europe/Paris', + ], +} as State; + +export const { + state, + getter, + mutation, + action, + undo, + redo, + isActionRunning +} = createStore('time', STATE, { + extensions: [ + actionExtension(), + historyExtension({ + mutations: [ + { + name: 'add-clock', + description: 'Add a clock', + }, + ], + }), + ], +}); + +export const timezoneOptions = getter('timezone-options', ({ timezones }) => { + return timezones.flatMap(({ utc }) => utc); +}); + +export const clocks = getter('clocks', ({ clocks, time }) => { + return clocks.map(timezone => ({ + timezone, + time: utcToZonedTime(time, timezone), + })); +}); + +export const updateTime = mutation('update-time', state => state.time = new Date()); + +export const loadTimezones = action('load-timezones', async (_, mutate) => { + const { + default: timezones, + } = await import('../../assets/data/timezones.json'); + + mutate(state => state.timezones = timezones); +}); + +setInterval(() => updateTime(), 1000); \ No newline at end of file diff --git a/app/src/stores/user/getters.ts b/app/src/stores/user/getters.ts deleted file mode 100644 index f28425e7..00000000 --- a/app/src/stores/user/getters.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { - getter, -} from './store'; - -export const fullName = getter('fullname', ({ details }) => `${details.firstName} ${details.lastName}`); - -export const age = getter('age', ({ details }) => { - const dob = details.dateOfBirth || new Date(); - const currentYear = (new Date()).getFullYear(); - const birthYear = dob.getFullYear(); - - return currentYear - birthYear; -}); \ No newline at end of file diff --git a/app/src/stores/user/index.ts b/app/src/stores/user/index.ts deleted file mode 100644 index 13363fd4..00000000 --- a/app/src/stores/user/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export * from './getters'; -export * from './mutations'; - -export { - state, - reset, -} from './store'; \ No newline at end of file diff --git a/app/src/stores/user/mutations.ts b/app/src/stores/user/mutations.ts deleted file mode 100644 index 5d5596de..00000000 --- a/app/src/stores/user/mutations.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { - mutation, -} from './store'; - -import type { - UserDetails, -} from './types'; - -export const setUserId = mutation('set-user-id', (state, id: number) => { - state.id = id; -}); - -export const setUserDetails = mutation('set-user-details', (state, details: Partial) => { - Object.assign(state.details, details); -}); \ No newline at end of file diff --git a/app/src/stores/user/state.ts b/app/src/stores/user/state.ts deleted file mode 100644 index f6d58ea7..00000000 --- a/app/src/stores/user/state.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { - State, -} from './types'; - -export default { - id: 0, - details: { - firstName: '', - lastName: '', - email: null, - dateOfBirth: null, - }, -} as State; \ No newline at end of file diff --git a/app/src/stores/user/store.ts b/app/src/stores/user/store.ts deleted file mode 100644 index 20609800..00000000 --- a/app/src/stores/user/store.ts +++ /dev/null @@ -1,24 +0,0 @@ -import STATE from './state'; - -import { - createStore, -} from '@harlem/core'; - -import { - reset as _reset, -} from '@harlem/plugin-reset'; - -import type { - State, -} from './types'; - -const NAME = 'user'; - -export const { - state, - getter, - mutation, - on, -} = createStore(NAME, STATE); - -export const reset = () => _reset(NAME); \ No newline at end of file diff --git a/app/src/stores/user/types.ts b/app/src/stores/user/types.ts deleted file mode 100644 index 98e064d6..00000000 --- a/app/src/stores/user/types.ts +++ /dev/null @@ -1,11 +0,0 @@ -export interface UserDetails { - firstName: string; - lastName: string; - email: string | null; - dateOfBirth: Date | null; -} - -export interface State { - id: number; - details: UserDetails; -} \ No newline at end of file diff --git a/app/src/utilities/clamp.ts b/app/src/utilities/clamp.ts new file mode 100644 index 00000000..b24e1f90 --- /dev/null +++ b/app/src/utilities/clamp.ts @@ -0,0 +1,3 @@ +export default function clamp(value: number, min: number, max: number): number { + return Math.max(min, Math.min(max, value)); +} \ No newline at end of file diff --git a/app/src/utilities/scale.ts b/app/src/utilities/scale.ts new file mode 100644 index 00000000..9161eb63 --- /dev/null +++ b/app/src/utilities/scale.ts @@ -0,0 +1,24 @@ +import clamp from './clamp'; + +export default function scale( + domain: [min: number, max: number], + range: [min: number, max: number] +) { + const [ + domainMin, + domainMax, + ] = domain; + + const [ + rangeMin, + rangeMax, + ] = range; + + const domainLength = domainMax - domainMin; + const rangeLength = rangeMax - rangeMin; + + return (value: number, clampValue?: boolean) => { + const output = (value - domainMin) * rangeLength / domainLength + rangeMin; + return clampValue ? clamp(output, rangeMin, rangeMax) : output; + }; +} \ No newline at end of file diff --git a/app/tsconfig.json b/app/tsconfig.json index 9742e431..98c65d6a 100644 --- a/app/tsconfig.json +++ b/app/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "../tsconfig.json", "compilerOptions": { + "resolveJsonModule": true, "types": [ "vite/client" ] diff --git a/yarn.lock b/yarn.lock index e9588d47..1993c9af 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3795,6 +3795,16 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" +date-fns-tz@^1.1.6: + version "1.1.6" + resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.1.6.tgz#93cbf354e2aeb2cd312ffa32e462c1943cf20a8e" + integrity sha512-nyy+URfFI3KUY7udEJozcoftju+KduaqkVfwyTIE0traBiVye09QnyWKLZK7drRr5h9B7sPJITmQnS3U6YOdQg== + +date-fns@^2.23.0: + version "2.23.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9" + integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA== + dateformat@^3.0.0: version "3.0.3" resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"