Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 514cc0f

Browse files
codebender828codebender828
committed
chore: use color mode
1 parent a7b4d03 commit 514cc0f

25 files changed

+1214
-130
lines changed

‎.storybook/config.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { configure, addDecorator, addParameters } from '@storybook/vue';
22
import Vue from 'vue'
33
import VueLive from 'vue-live'
44
import Lorem from 'vue-lorem-ipsum'
5-
import Chakra from '../packages/chakra-ui-core/src'
5+
import Chakra, { mode } from '../packages/chakra-ui-core/src'
66
import Canvas from './components/Canvas.vue'
77
import storyBookTheme from './theme'
88

@@ -29,16 +29,15 @@ import {
2929
feSend,
3030
feServer
3131
} from 'feather-icons-paths'
32-
import { mode } from '../packages/chakra-ui-core/src/utils/color-mode-observer';
3332

3433
Vue.use(Chakra, {
3534
extendTheme: {
36-
baseStyle: {
37-
CButton: ({ colorMode, theme }) => ({
38-
bg: mode('tomato', 'hotpink'),
39-
borderRadius: "lg",
40-
shadow: 'xl'
41-
})
35+
baseStyles: {
36+
// CButton: ({ colorMode, theme }) => ({
37+
// bg: mode('tomato', 'hotpink'),
38+
// borderRadius: "lg",
39+
// shadow: 'xl'
40+
// })
4241
}
4342
},
4443
icons: {

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,10 @@
107107
"@babel/cli": "^7.8.4",
108108
"@babel/core": "^7.9.0",
109109
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
110+
"@babel/plugin-proposal-optional-chaining": "^7.14.5",
110111
"@babel/plugin-transform-modules-commonjs": "^7.7.4",
111112
"@babel/plugin-transform-parameters": "^7.7.4",
112-
"@babel/preset-env": "^7.9.5",
113+
"@babel/preset-env": "^7.15.0",
113114
"@babel/runtime-corejs2": "^7.8.7",
114115
"@changesets/changelog-github": "^0.2.7",
115116
"@changesets/cli": "^2.7.1",
@@ -159,7 +160,6 @@
159160
"eslint-plugin-prettier": "^3.1.2",
160161
"eslint-plugin-testing-library": "^3.3.1",
161162
"jest": "^25.1.0",
162-
"node-sass": "4.13",
163163
"prettier": "^1.19.1",
164164
"rimraf": "^3.0.2",
165165
"rollup": "^1.31.1",

‎packages/chakra-ui-core/src/CColorModeProvider/CColorModeProvider.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
* @see Source https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CColorModePovider/CColorModePovider.js
1717
*/
1818

19-
import { colorModeObserver } from '../utils/color-mode-observer'
19+
import { colorModeObserverEventBus } from '../utils/color-mode-observer'
2020

2121
/**
2222
* CColorModeProvider component
@@ -51,16 +51,16 @@ const CColorModeProvider = {
5151
}
5252
}
5353
},
54-
watch: {
55-
_colorMode: {
56-
immediate: true,
57-
handler (newVal) {
58-
colorModeObserver.colorMode = newVal
59-
}
60-
}
54+
created () {
55+
colorModeObserverEventBus.$emit('change:colorMode', this._colorMode)
56+
this.$watch(() => this._colorMode, (newColorMode) => {
57+
colorModeObserverEventBus.$emit('change:colorMode', newColorMode)
58+
})
59+
colorModeObserverEventBus.$on('command:toggleColorMode', this.toggleColorMode)
6160
},
6261
methods: {
6362
toggleColorMode () {
63+
/** Toggles colorMode */
6464
this._colorMode = this._colorMode === 'light' ? 'dark' : 'light'
6565
}
6666
},

‎packages/chakra-ui-core/src/CToast/CToast.d.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ interface ChakraToastOptions {
99
isClosable?: boolean
1010
}
1111

12-
function useToast(): (options: ChakraToastOptions) => void
12+
export type ToastFactory = (options: ChakraToastOptions) => void
13+
14+
export function useToast(): ToastFactory
1315

1416
export default useToast

‎packages/chakra-ui-core/src/Chakra/index.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,17 @@ import { parsePackIcons } from '../utils/icons'
77
import internalIcons from '../lib/internal-icons'
88
import { createClientDirective } from '../directives'
99
import useToast from '../CToast'
10+
import { colorModeObserver, mode } from '../utils'
1011

1112
/**
1213
* Chakra-ui Component library plugin
13-
* @type {import("../../types").default}
14+
* @type {import("../../types").ChakraPlugin}
1415
*/
1516
const Chakra = {
1617
/**
1718
*
1819
* @param {Vue} Vue
19-
* @param {Options} options
20+
* @param {import("../../types").Options} options
2021
*/
2122
install (Vue, options = {}) {
2223
let packIcons = {}
@@ -48,7 +49,23 @@ const Chakra = {
4849

4950
/** Install dependent plugins */
5051
Vue.use(VScrollLock)
52+
53+
Vue.mixin({
54+
computed: {
55+
chakraColorMode () {
56+
return colorModeObserver.colorMode
57+
},
58+
chakraTheme () {
59+
return colorModeObserver.theme
60+
},
61+
chakraToggleColorMode () {
62+
return colorModeObserver.toggleColorMode
63+
},
64+
$mode: vm => (lightValue, darkValue) => mode(lightValue, darkValue, colorModeObserver)
65+
}
66+
})
5167
}
5268
}
5369

5470
export default Chakra
71+
export { mode } from '../utils/color-mode-observer'

‎packages/chakra-ui-core/src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ export { default as defaultTheme } from '@chakra-ui/theme-vue'
124124

125125
// Internal icons
126126
export { parsePackIcons } from './utils/icons'
127+
export { mode, defineColorModeObserver } from './utils/color-mode-observer'
127128
export { default as internalIcons } from './lib/internal-icons'
128129

129130
// Directives

‎packages/chakra-ui-core/src/utils/__snapshots__/color-mode-observer.test.js.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`colorModeObserver \`colorModeObserver\` should provide and observe values 1`] = `
44
Object {
5-
"baseStyle": Object {
5+
"baseStyles": Object {
66
"CButton": Object {
77
"bg": "success",
88
"borderRadius": "200px",

‎packages/chakra-ui-core/src/utils/__snapshots__/component.test.js.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function 1`] = `
3+
exports[`createStyledAttrsMixin baseStyles should accept baseStyles as a function 1`] = `
44
<DocumentFragment>
55
.emotion-0 {
66
background: var(--colors-blue-200);
@@ -17,7 +17,7 @@ exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function
1717
</DocumentFragment>
1818
`;
1919

20-
exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function 2`] = `
20+
exports[`createStyledAttrsMixin baseStyles should accept baseStyles as a function 2`] = `
2121
<DocumentFragment>
2222
.emotion-0 {
2323
background: var(--colors-vue-200);
@@ -34,7 +34,7 @@ exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function
3434
</DocumentFragment>
3535
`;
3636

37-
exports[`createStyledAttrsMixin baseStyle should be overiden by props 1`] = `
37+
exports[`createStyledAttrsMixin baseStyles should be overiden by props 1`] = `
3838
<DocumentFragment>
3939
.emotion-0 {
4040
background: var(--colors-blue-200);
@@ -50,7 +50,7 @@ exports[`createStyledAttrsMixin baseStyle should be overiden by props 1`] = `
5050
</DocumentFragment>
5151
`;
5252

53-
exports[`createStyledAttrsMixin baseStyle should use theme.baseStyle if given 1`] = `
53+
exports[`createStyledAttrsMixin baseStyles should use theme.baseStyles if given 1`] = `
5454
<DocumentFragment>
5555
.emotion-0 {
5656
background: var(--colors-red-400);

‎packages/chakra-ui-core/src/utils/color-mode-observer.js

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import Vue from 'vue'
22

3-
export const defineColorModeObserver = ({ colorMode, theme, icons } = {}) => Vue.observable({
3+
export const defineColorModeObserver = ({ colorMode, theme, icons, toggleColorMode } = {}) => Vue.observable({
44
colorMode,
55
theme,
6-
icons
6+
icons,
7+
toggleColorMode
78
})
89

910
/**
1011
* This observed store object observed the colorMode and stores it in an
1112
* observed object that other components can consume.
1213
*/
13-
export const colorModeObserver = defineColorModeObserver()
14+
export const colorModeObserver = defineColorModeObserver({
15+
toggleColorMode: emitToggleColorMode
16+
})
1417

1518
/**
1619
* Utility function that returns a value based on the colorMode
@@ -23,3 +26,18 @@ export const mode = (lightValue, darkValue, observer) => {
2326
const { colorMode } = observer || colorModeObserver
2427
return colorMode === 'dark' ? darkValue : lightValue
2528
}
29+
30+
const changeColorModeListeners = []
31+
32+
export const colorModeObserverEventBus = new Vue()
33+
34+
colorModeObserverEventBus.$on('change:colorMode', (newVal) => {
35+
colorModeObserver.colorMode = newVal
36+
changeColorModeListeners.forEach(handler => handler(newVal))
37+
})
38+
39+
export function emitToggleColorMode () {
40+
colorModeObserverEventBus.$emit('command:toggleColorMode')
41+
}
42+
43+
export const onUpdateColorMode = fn => changeColorModeListeners.push(fn)

‎packages/chakra-ui-core/src/utils/color-mode-observer.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('colorModeObserver', () => {
1212
outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
1313
inner: 'inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)'
1414
},
15-
baseStyle: {
15+
baseStyles: {
1616
CButton: {
1717
bg: 'success',
1818
borderRadius: '200px',

‎packages/chakra-ui-core/src/utils/component.test.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ describe('createStyledAttrsMixin', () => {
1919
}
2020
}
2121

22-
describe('baseStyle', () => {
22+
describe('baseStyles', () => {
2323
const renderFakeComponent = ({ theme, colorMode, ...props }) => {
2424
const inlineAttrs = (props && props.inlineAttrs) || ''
2525
return render({
@@ -35,11 +35,11 @@ describe('createStyledAttrsMixin', () => {
3535
})
3636
}
3737

38-
it('should use theme.baseStyle if given', () => {
38+
it('should use theme.baseStyles if given', () => {
3939
const { asFragment } = renderFakeComponent({
4040
theme: {
4141
...defaultTheme,
42-
baseStyle: {
42+
baseStyles: {
4343
FakeComponent: {
4444
bg: 'red.400',
4545
color: 'gray.200'
@@ -55,7 +55,7 @@ describe('createStyledAttrsMixin', () => {
5555
inlineAttrs: 'bg="blue.200"',
5656
theme: {
5757
...defaultTheme,
58-
baseStyle: {
58+
baseStyles: {
5959
FakeComponent: {
6060
bg: 'red.400',
6161
color: 'gray.200'
@@ -66,10 +66,10 @@ describe('createStyledAttrsMixin', () => {
6666
expect(asFragment()).toMatchSnapshot()
6767
})
6868

69-
it('should accept baseStyle as a function', () => {
69+
it('should accept baseStyles as a function', () => {
7070
const theme = {
7171
...defaultTheme,
72-
baseStyle: {
72+
baseStyles: {
7373
FakeComponent: ({ colorMode, theme }) => ({
7474
bg: colorMode === 'light' ? 'red.400' : 'red.200',
7575
color: colorMode === 'light' ? 'black' : 'white',

‎packages/chakra-ui-core/src/utils/components.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export const createStyledAttrsMixin = name => ({
6969
}
7070
},
7171
baseStyle () {
72-
const componentBaseStyleObjectOrFunction = __get(this.theme, `baseStyle.${name}`)
72+
const componentBaseStyleObjectOrFunction = __get(this.theme, `baseStyles.${name}`)
7373
return componentBaseStyleObjectOrFunction ? (
7474
runIfFn(componentBaseStyleObjectOrFunction, {
7575
theme: this.theme,

‎packages/chakra-ui-core/src/utils/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@ export * from './generators'
1111
export * from './validators'
1212
export * from './functions'
1313
export * from './components'
14+
export * from './color-mode-observer'
1415
export * from './styled-system'

‎packages/chakra-ui-core/src/utils/styled-system.test.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { __get } from './styled-system'
33
describe('__get', () => {
44
it('should return correct value for given path', () => {
55
const theme = {
6-
baseStyle: {
6+
baseStyles: {
77
Button: {
88
bg: 'red.400',
99
color: 'black'
@@ -19,22 +19,22 @@ describe('__get', () => {
1919
expect(__get(theme, 1)).toBeUndefined()
2020
expect(__get(theme, 'someRandomKey')).toBeUndefined()
2121
expect(__get(theme, 'colors.red.500')).toBeUndefined()
22-
expect(__get(theme, 'baseStyle.Button.bg._focus')).toBeUndefined()
22+
expect(__get(theme, 'baseStyles.Button.bg._focus')).toBeUndefined()
2323

24-
expect(__get(theme, 'baseStyle.Button')).toMatchSnapshot()
25-
expect(__get(theme, 'baseStyle.Button.bg')).toMatchSnapshot()
26-
expect(__get(theme, 'baseStyle.Button.color')).toMatchSnapshot()
24+
expect(__get(theme, 'baseStyles.Button')).toMatchSnapshot()
25+
expect(__get(theme, 'baseStyles.Button.bg')).toMatchSnapshot()
26+
expect(__get(theme, 'baseStyles.Button.color')).toMatchSnapshot()
2727
expect(__get(theme, 'colors.red.400')).toMatchSnapshot()
2828

29-
expect(__get(theme.baseStyle, 'Button')).toMatchSnapshot()
30-
expect(__get(theme.baseStyle, 'Button.bg')).toMatchSnapshot()
31-
expect(__get(theme.baseStyle, 'Button.color')).toMatchSnapshot()
29+
expect(__get(theme.baseStyles, 'Button')).toMatchSnapshot()
30+
expect(__get(theme.baseStyles, 'Button.bg')).toMatchSnapshot()
31+
expect(__get(theme.baseStyles, 'Button.color')).toMatchSnapshot()
3232
expect(__get(theme.colors, 'red.400')).toMatchSnapshot()
3333
})
3434

3535
it('should return provide default value if specified', () => {
3636
const theme = {
37-
baseStyle: {
37+
baseStyles: {
3838
Button: {
3939
bg: 'red.400',
4040
color: 'black'
@@ -50,6 +50,6 @@ describe('__get', () => {
5050
expect(__get(theme, 1, 'default')).toEqual('default')
5151
expect(__get(theme, 'someRandomKey', 'default')).toEqual('default')
5252
expect(__get(theme, 'colors.red.500', 'default')).toEqual('default')
53-
expect(__get(theme, 'baseStyle.Button.bg._focus', 'default')).toEqual('default')
53+
expect(__get(theme, 'baseStyles.Button.bg._focus', 'default')).toEqual('default')
5454
})
5555
})

‎packages/chakra-ui-core/types/chakra.d.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,11 @@ export type Icon = {
99
}
1010

1111
export type Options = {
12-
theme: Theme
1312
extendTheme: Theme
1413
icons: {
15-
extend: { [name: string]: Icon }
16-
iconPack: string
17-
iconSet: IconPack
14+
extend: { [name: string]: Icon }
15+
iconPack: string
16+
iconSet: IconPack
1817
}
1918
}
2019

‎packages/chakra-ui-core/types/index.d.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
import Chakra, { Icon } from "./chakra"
22
import { Theme } from "../../chakra-ui-theme/types"
33
import useToast from "../src/CToast"
4+
import { ToastFactory } from '../src/CToast/CToast'
45

56
declare module 'vue/types/vue' {
6-
interface Vue {
7-
$toast: ReturnType<typeof useToast>
7+
export interface Vue {
8+
$toast: ToastFactory
89
$chakra: {
910
theme: Theme
1011
icons: { [name: string]: Icon }
1112
}
13+
chakraColorMode: string
14+
chakraToggleColorMode: string
1215
}
1316
}
1417

18+
export const useToast: typeof useToast
19+
export const defaultTheme: Theme
1520
export * from './component'
21+
export { ChakraPlugin, Options } from './chakra'
1622
export default Chakra

0 commit comments

Comments
 (0)