Skip to content

Commit

Permalink
feat(store): add store getter functions
Browse files Browse the repository at this point in the history
  • Loading branch information
smithoo committed Dec 20, 2023
1 parent 7ecf056 commit 22905e4
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 64 deletions.
8 changes: 1 addition & 7 deletions packages/vlossom/src/composables/color-scheme-composable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@ import { computed } from 'vue';
import { store } from '@/store';

export function useColorScheme(component: VsComponent, colorScheme: Ref<ColorScheme | undefined>) {
const computedColorScheme = computed(
() =>
colorScheme.value ||
store.getStore().globalColorScheme[component] ||
store.getStore().globalColorScheme.default ||
'default',
);
const computedColorScheme = computed(() => colorScheme.value || store.getGlobalColorScheme(component) || 'default');

return {
computedColorScheme,
Expand Down
4 changes: 1 addition & 3 deletions packages/vlossom/src/composables/custom-style-composable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@ export function useCustomStyle<T extends { [key: string]: any }>(component: VsCo
}

if (typeof styleSet.value === 'string') {
const preDefinedStyleSet = store.getStore().styleSets[component]?.[styleSet.value];

return (preDefinedStyleSet ?? {}) as T;
return (store.getStyleSet(component, styleSet.value) || {}) as T;
}

return styleSet.value;
Expand Down
1 change: 0 additions & 1 deletion packages/vlossom/src/declaration/types.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Ref } from 'vue';
import type {
VsButtonStyleSet,
VsDividerStyleSet,
Expand Down
177 changes: 125 additions & 52 deletions packages/vlossom/src/store/__tests__/store.test.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { describe, it, expect } from 'vitest';
import { VsStore } from './../index';
import { VsComponent } from '@/declaration/types';

describe('vlossom store', () => {
it('store를 가져올 수 있다', () => {
Expand All @@ -16,67 +17,139 @@ describe('vlossom store', () => {
});
});

it('globalColorScheme을 설정할 수 있다', () => {
// given
const store = new VsStore();
describe('globalColorScheme', () => {
it('globalColorScheme을 설정할 수 있다', () => {
// given
const store = new VsStore();

// when
store.setGlobalColorScheme({ default: 'red' });
// when
store.setGlobalColorScheme({ default: 'red' });

// then
expect(store.getStore().globalColorScheme).toEqual({ default: 'red' });
});
// then
expect(store.getStore().globalColorScheme).toEqual({ default: 'red' });
});

it('styleSet을 등록할 수 있다', () => {
// given
const store = new VsStore();
const styleSet = {
VsButton: {
primary: {
color: 'red',
},
},
};
describe('getGlobalColorScheme', () => {
it('등록된 globalColorScheme을 가져올 수 있다', () => {
// given
const store = new VsStore();
store.setGlobalColorScheme({ [VsComponent.VsButton]: 'blue', default: 'red' });

// when
store.registerStyleSet(styleSet);
// when
const result = store.getGlobalColorScheme(VsComponent.VsButton);

// then
expect(store.getStore().styleSets).toEqual(styleSet);
// then
expect(result).toEqual('blue');
});

it('특정 컴포넌트의 globalColorScheme이 없다면 default globalColorScheme을 가져온다', () => {
// given
const store = new VsStore();
store.setGlobalColorScheme({ default: 'red' });

// when
const result = store.getGlobalColorScheme(VsComponent.VsButton);

// then
expect(result).toEqual('red');
});
});
});

it('styleSet을 등록할 수 있다 (기존에 등록된 styleSet이 있을 경우)', () => {
// given
const store = new VsStore();
const styleSet = {
VsButton: {
primary: {
color: 'red',
},
},
};
const styleSet2 = {
VsButton: {
secondary: {
color: 'blue',
},
},
};
describe('styleSets', () => {
describe('registerStyleSet', () => {
it('styleSet을 등록할 수 있다', () => {
// given
const store = new VsStore();
const styleSet = {
VsButton: {
primary: {
color: 'red',
},
},
};

// when
store.registerStyleSet(styleSet);
store.registerStyleSet(styleSet2);
// when
store.registerStyleSet(styleSet);

// then
expect(store.getStore().styleSets).toEqual({
VsButton: {
primary: {
color: 'red',
},
secondary: {
color: 'blue',
},
},
// then
expect(store.getStore().styleSets).toEqual(styleSet);
});

it('styleSet을 등록할 수 있다 (기존에 등록된 styleSet이 있을 경우)', () => {
// given
const store = new VsStore();
const styleSet = {
VsButton: {
primary: {
color: 'red',
},
},
};
const styleSet2 = {
VsButton: {
secondary: {
color: 'blue',
},
},
};

// when
store.registerStyleSet(styleSet);
store.registerStyleSet(styleSet2);

// then
expect(store.getStore().styleSets).toEqual({
VsButton: {
primary: {
color: 'red',
},
secondary: {
color: 'blue',
},
},
});
});
});

describe('getStyleSet', () => {
it('특정 컴포넌트의 StyleSet을 가져올 수 있다', () => {
// given
const store = new VsStore();
const styleSet = {
VsButton: {
primary: {
color: 'red',
},
},
};
store.registerStyleSet(styleSet);

// when
const result = store.getStyleSet(VsComponent.VsButton, 'primary');

// then
expect(result).toEqual({ color: 'red' });
});

it('StyleSet이 정의되어 있지 않다면 undefined를 반환한다', () => {
// given
const store = new VsStore();
const styleSet = {
VsButton: {
primary: {
color: 'red',
},
},
};
store.registerStyleSet(styleSet);

// when
const result = store.getStyleSet(VsComponent.VsButton, 'secondary');

// then
expect(result).toBeUndefined();
});
});
});
});
10 changes: 9 additions & 1 deletion packages/vlossom/src/store/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { GlobalColorScheme, StyleSet, VlossomStore } from '@/declaration/types';
import type { GlobalColorScheme, StyleSet, VlossomStore, VsComponent } from '@/declaration/types';
import { reactive } from 'vue';

export class VsStore {
Expand All @@ -15,6 +15,10 @@ export class VsStore {
this.store.globalColorScheme = colorScheme;
}

getGlobalColorScheme(component: VsComponent) {
return this.store.globalColorScheme[component] || this.store.globalColorScheme.default;
}

registerStyleSet(styleSet: StyleSet) {
Object.entries(styleSet).forEach(([key, value]) => {
const styleSets = this.store.styleSets[key as keyof StyleSet];
Expand All @@ -26,6 +30,10 @@ export class VsStore {
}
});
}

getStyleSet(component: VsComponent, styleSetName: string) {
return this.store.styleSets[component as keyof StyleSet]?.[styleSetName];
}
}

export const store = new VsStore();

0 comments on commit 22905e4

Please sign in to comment.