From 0d782faa3fb11c6e4f9955108852d366b5d37dce Mon Sep 17 00:00:00 2001 From: Jared Lunde Date: Sun, 26 Jul 2020 21:10:33 -0600 Subject: [PATCH] refactor: rename "variables" to "tokens" Update the API to match @dash-ui/styles@>=0.8.0 BREAKING CHANGE: Drops support for @dash-ui/styles@<0.8.0 --- README.md | 4 ++-- package.json | 4 ++-- src/index.test.ts | 12 ++++++------ src/index.ts | 44 ++++++++++++++++++++++---------------------- yarn.lock | 8 ++++---- 5 files changed, 36 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 8ebaa81..6a6dbc9 100755 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ A library for creating CSS transitions with [**dash-ui**](https://github.com/das import {styles} from '@dash-ui/styles' import transition from '@dash-ui/transition' -styles.insertVariables({ +styles.insertTokens({ transition: { duration: { slow: '1s', @@ -54,7 +54,7 @@ const fade = transition(styles, { default: { duration: 100, }, - // Use a callback to access variables + // Use a callback to access tokens in: ({transition}) => ({ opacity: 1, duration: transition.duration.slow, diff --git a/package.json b/package.json index 8f32309..65c93a3 100755 --- a/package.json +++ b/package.json @@ -117,7 +117,7 @@ "@commitlint/cli": "^9.0.1", "@commitlint/config-conventional": "^9.0.1", "@dash-ui/jest": "^2.0.0", - "@dash-ui/styles": "^0.7.0", + "@dash-ui/styles": "^0.8.0", "@types/jest": "latest", "babel-jest": "latest", "cz-conventional-changelog": "^3.2.0", @@ -133,6 +133,6 @@ }, "dependencies": {}, "peerDependencies": { - "@dash-ui/styles": ">=0.6.2" + "@dash-ui/styles": ">=0.8.0" } } diff --git a/src/index.test.ts b/src/index.test.ts index de3ee23..7834dd1 100755 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -261,14 +261,14 @@ describe('transition()', () => { }) it('should create default phase with a function', () => { - type Variables = { + type Tokens = { duration: { slow: 1000 } } - const myStyles = createStyles() - myStyles.insertVariables({ + const myStyles = createStyles() + myStyles.insertTokens({ duration: { slow: 1000, }, @@ -289,14 +289,14 @@ describe('transition()', () => { }) it('should create phase with a function', () => { - type Variables = { + type Tokens = { duration: { slow: 1000 } } - const myStyles = createStyles() - myStyles.insertVariables({ + const myStyles = createStyles() + myStyles.insertTokens({ duration: { slow: 1000, }, diff --git a/src/index.ts b/src/index.ts index 5a104cc..04b8ef0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,14 +1,14 @@ /* eslint-disable prefer-const */ -import type {Styles, StyleObject, DashVariables} from '@dash-ui/styles' +import type {Styles, StyleObject, DashTokens} from '@dash-ui/styles' const transition = < TransitionNames extends string, - Variables extends DashVariables = DashVariables + Tokens extends DashTokens = DashTokens >( - styles: Styles, - transitions: TransitionMap -): Transitioner => { - const transitioner: Transitioner = (...args) => + styles: Styles, + transitions: TransitionMap +): Transitioner => { + const transitioner: Transitioner = (...args) => styles.one(createTransitionsFromArgs(styles, transitions, args))() transitioner.css = (...names) => @@ -24,10 +24,10 @@ const transition = < const createTransitions = < TransitionNames extends string, - Variables extends DashVariables = DashVariables + Tokens extends DashTokens = DashTokens >( - styles: Styles, - transitionMap: TransitionMap, + styles: Styles, + transitionMap: TransitionMap, styleName?: string | TransitionObject ): StyleObject => { const styleMap: StyleObject = {} @@ -40,7 +40,7 @@ const createTransitions = < if (transitionMap.default !== void 0) { transitions.push('default') let defs = transitionMap.default - if (typeof defs === 'function') defs = defs(styles.variables) + if (typeof defs === 'function') defs = defs(styles.tokens) duration = unit(defs.duration, 'ms') delay = unit(defs.delay, 'ms') timing = defs.timing @@ -61,7 +61,7 @@ const createTransitions = < for (let i = 0; i < transitions.length; i++) { const name = transitions[i] as TransitionNames let phase = transitionMap[name] - if (typeof phase === 'function') phase = phase(styles.variables) + if (typeof phase === 'function') phase = phase(styles.tokens) let { duration: phaseDuration, @@ -160,10 +160,10 @@ const createTransitions = < const createTransitionsFromArgs = < TransitionNames extends string, - Variables extends DashVariables = DashVariables + Tokens extends DashTokens = DashTokens >( - styles: Styles, - transitionMap: TransitionMap, + styles: Styles, + transitionMap: TransitionMap, args: (string | TransitionObject)[] ): StyleObject => { if (args.length > 1) { @@ -175,13 +175,13 @@ const createTransitionsFromArgs = < else if (typeof arg === 'object') Object.assign(argMap, arg) } - return createTransitions( + return createTransitions( styles, transitionMap, argMap ) } else { - return createTransitions( + return createTransitions( styles, transitionMap, args[0] @@ -225,7 +225,7 @@ export default transition export interface Transitioner< TransitionNames extends string, - Variables extends DashVariables = DashVariables + Tokens extends DashTokens = DashTokens > { (...args: (TransitionNames | TransitionObject)[]): string css: ( @@ -234,7 +234,7 @@ export interface Transitioner< style: ( ...names: (TransitionNames | TransitionObject)[] ) => StyleObject - transitions: TransitionMap + transitions: TransitionMap } export interface TransitionPhase { @@ -247,14 +247,14 @@ export interface TransitionPhase { export type TransitionMap< TransitionNames extends string, - Variables extends DashVariables = DashVariables + Tokens extends DashTokens = DashTokens > = { - [Name in TransitionNames | 'default']?: TransitionValue + [Name in TransitionNames | 'default']?: TransitionValue } -export type TransitionValue = +export type TransitionValue = | TransitionPhase - | ((variables: Variables) => TransitionPhase) + | ((tokens: Tokens) => TransitionPhase) type TransitionObject = { [Name in TransitionNames]?: boolean | null | undefined | string | number diff --git a/yarn.lock b/yarn.lock index eb145c4..35bcda6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1164,10 +1164,10 @@ chalk "^4.0.0" css "^2.2.4" -"@dash-ui/styles@^0.7.0": - version "0.7.0" - resolved "https://registry.yarnpkg.com/@dash-ui/styles/-/styles-0.7.0.tgz#a1801c4639e205fb83e95dfed9ba0e2dcba29b62" - integrity sha512-M8ZA4xiack4p+2n18W+xP+LNXVOvhv/5MOhte3pYkTvzuPlmiLm6RDUkkSUEfJ+FdPfJbOqDriHhOwpBqU9FQg== +"@dash-ui/styles@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@dash-ui/styles/-/styles-0.8.0.tgz#86a2a0bb9e843d09c4ca3bd0594469de297c4cf1" + integrity sha512-0q9JMJ87mzttEzpTVBBWyxIPg3lTKs/xFcRbB3pRsdyaKF+qUlIyRrr9cnwD8yVap7i7vR46S2ZL9eN8zeo/7w== dependencies: "@dash-ui/stylis" "^1.0.5" "@dash-ui/unitless" "^2.0.0"