Skip to content

Commit

Permalink
feat(mapping): create mapping schema
Browse files Browse the repository at this point in the history
  • Loading branch information
artyorsh authored Mar 18, 2019
1 parent 8c95793 commit c28f70e
Show file tree
Hide file tree
Showing 11 changed files with 8,102 additions and 10,602 deletions.
15,217 changes: 6,180 additions & 9,037 deletions packages/mapping-kitten/eva/index.ts

Large diffs are not rendered by default.

3,082 changes: 1,582 additions & 1,500 deletions packages/mapping/eva/mapping.json

Large diffs are not rendered by default.

264 changes: 264 additions & 0 deletions packages/mapping/eva/schema.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,264 @@
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$ref": "#/definitions/root",
"title": "Eva Design System Configuration",
"definitions": {
"root": {
"type": "object",
"required": [
"version",
"theme"
],
"properties": {
"$schema": {
"type": "string"
},
"version": {
"$ref": "#/definitions/version"
},
"theme": {
"$ref": "#/definitions/theme"
}
},
"additionalProperties": {
"$ref": "#/definitions/control"
}
},
"version": {
"type": "number"
},
"theme": {
"propertyNames": {
"pattern": "[A-Z][a-zA-Z]*"
},
"additionalProperties": {
"$ref": "#/definitions/control"
}
},
"control": {
"description": "UI Component",
"type": "object",
"required": [
"meta",
"appearances"
],
"properties": {
"meta": {
"type": "object",
"required": [
"scope",
"parameters",
"appearances",
"variantGroups",
"states"
],
"properties": {
"scope": {
"$ref": "#/definitions/scope"
},
"parameters": {
"type": "object",
"propertyNames": {
"pattern": "^[a-z][a-zA-Z]*"
},
"additionalProperties": {
"$ref": "#/definitions/parameterMeta"
}
},
"appearances": {
"type": "object",
"propertyNames": {
"pattern": "^[a-z][a-zA-Z]*"
},
"additionalProperties": {
"$ref": "#/definitions/appearanceMeta"
}
},
"variantGroups": {
"type": "object",
"propertyNames": {
"pattern": "^[a-z][a-zA-Z]*"
},
"additionalProperties": {
"type": "object",
"propertyNames": {
"pattern": "^[a-z][a-zA-Z0-9]*"
},
"minProperties": 1,
"additionalProperties": {
"$ref": "#/definitions/variantMeta"
}
}
},
"states": {
"type": "object",
"propertyNames": {
"pattern": "^[a-z][.a-z]*"
},
"additionalProperties": {
"$ref": "#/definitions/stateMeta"
}
}
},
"additionalProperties": false
},
"appearances": {
"type": "object",
"propertyNames": {
"pattern": "^[a-z][a-zA-Z]*"
},
"minProperties": 1,
"additionalProperties": {
"$ref": "#/definitions/appearance"
}
}
},
"additionalProperties": false
},
"appearanceMeta": {
"required": [
"default"
],
"type": "object",
"properties": {
"default": {
"type": "boolean"
}
},
"additionalProperties": false
},
"variantMeta": {
"type": "object",
"required": [
"default"
],
"properties": {
"default": {
"type": "boolean"
}
},
"additionalProperties": false
},
"stateMeta": {
"type": "object",
"required": [
"default",
"priority",
"scope"
],
"properties": {
"default": {
"type": "boolean"
},
"priority": {
"type": "number",
"minimum": 0
},
"scope": {
"$ref": "#/definitions/scope"
}
}
},
"parameterMeta": {
"type": "object",
"required": [
"type"
],
"properties": {
"type": {
"type": "string",
"enum": [
"number",
"string"
]
}
},
"additionalProperties": false
},
"scope": {
"description": "Platform where control is used. Also can be applied to particular state of control",
"type": "string",
"enum": [
"all",
"mobile",
"web"
]
},
"appearance": {
"description": "Set of mappings that define at the high level view of related control: it's size, shape and main colors",
"type": "object",
"required": [
"mapping"
],
"properties": {
"mapping": {
"$ref": "#/definitions/mapping"
},
"variantGroups": {
"type": "object",
"propertyNames": {
"pattern": "^[a-z][a-zA-Z]*"
},
"additionalProperties": {
"$ref": "#/definitions/variant"
}
}
},
"additionalProperties": false
},
"variant": {
"description": "Set of mapping that define control's appearance",
"type": "object",
"propertyNames": {
"pattern": "^[a-z][a-zA-Z0-9]*"
},
"additionalProperties": {
"$ref": "#/definitions/mapping"
}
},
"mapping": {
"description": "Set of parameters that define control's appearance",
"type": "object",
"propertyNames": {
"pattern": "^[a-z][a-zA-Z]*"
},
"patternProperties": {
"[Ww]idth": {
"type": "number"
},
"[Hh]eight": {
"type": "number"
},
"[Cc]olor": {
"type": "string"
}
},
"properties": {
"state": {
"$ref": "#/definitions/mapping",
"propertyNames": {
"pattern": "^[a-z][.a-z]*"
},
"minProperties": 1
}
},
"additionalProperties": {
"$ref": "#/definitions/parameter"
}
},
"parameter": {
"description": "Defines how the element or a component of the system will look like",
"anyOf": [
{
"type": [
"number",
"string"
]
},
{
"$ref": "#/definitions/mapping"
}
]
}
}
}
12 changes: 8 additions & 4 deletions packages/processor/kitten/scripts/generate.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import * as fs from 'fs';
import path from 'path';
import { ThemeStyleType } from '@eva/types';
import {
ThemeMappingType,
ThemeStyleType,
} from '@eva/types';
import {
MappingProcessor,
MetaProcessor,
Expand Down Expand Up @@ -28,17 +31,18 @@ function generatePackage(name: string) {
const generatedDir: string = path.resolve(rootDir, 'mapping-kitten', name);

const { default: mapping } = require(srcDir);
const themeMapping: ThemeMappingType = mapping.theme;

const meta: MappingMetaType[] = mappingProcessor.process(mapping);
const meta: MappingMetaType[] = mappingProcessor.process(themeMapping);
const style: ThemeStyleType = metaProcessor.process({
mapping: mapping,
mapping: themeMapping,
meta: meta,
});

const indexOutput: string = [
`import { ThemeMappingType, ThemeStyleType } from '@eva/types';`,
`export const style: ThemeStyleType = ${json(style)};`,
`export const mapping: ThemeMappingType = ${json(mapping)};`,
`export const mapping: ThemeMappingType = ${json(themeMapping)};`,
].join('\n\n');

const packageOutput: string = json({
Expand Down
24 changes: 13 additions & 11 deletions packages/processor/kitten/src/processor/mapping/mappingProcessor.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
ThemeMappingType,
ComponentMappingType,
ControlMappingType,
} from '@eva/types';
import { Processor } from '../processor';
import {
Expand All @@ -12,13 +12,13 @@ import {
export interface MappingMetaType {
name: string;
appearance: string;
states: string[];
variants: string[];
states: string[];
}

export class MappingProcessor implements Processor<ThemeMappingType, MappingMetaType[]> {

process(params: ThemeMappingType): MappingMetaType[] {
public process(params: ThemeMappingType): MappingMetaType[] {
return Object.keys(params).reduce((acc: MappingMetaType[], component: string) => {
return [
...acc,
Expand All @@ -28,14 +28,16 @@ export class MappingProcessor implements Processor<ThemeMappingType, MappingMeta
}

private getComponentMappingMeta(mapping: ThemeMappingType, component: string): MappingMetaType[] {
const componentMapping: ComponentMappingType = mapping[component];

return Object.keys(componentMapping.appearance).map((appearance: string): MappingMetaType => ({
name: component,
appearance: appearance,
variants: this.getComponentVariants(mapping, component),
states: this.getComponentStates(mapping, component),
}));
const componentMapping: ControlMappingType = mapping[component];

return Object.keys(componentMapping.appearances).map((appearance: string): MappingMetaType => {
return {
name: component,
appearance: appearance,
variants: this.getComponentVariants(mapping, component),
states: this.getComponentStates(mapping, component),
};
});
}

private getComponentVariants(mapping: ThemeMappingType, component: string): string[] {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {
ComponentMappingType,
ControlMappingType,
ThemeMappingType,
ThemeStyleType,
} from '@eva/types';
Expand Down Expand Up @@ -61,14 +61,14 @@ describe('@processor: e2e', () => {

function calculateThemeStyleCount(themeMapping: ThemeMappingType): number {
return Object.keys(themeMapping).reduce((acc: number, component: string) => {
const componentMapping: ComponentMappingType = themeMapping[component];
const componentMapping: ControlMappingType = themeMapping[component];
const componentStyleCount: number = calculateComponentStyleCount(componentMapping);

return acc + componentStyleCount;
}, 0);
}

function calculateComponentStyleCount(component: ComponentMappingType): number {
function calculateComponentStyleCount(component: ControlMappingType): number {
const { appearances, variants, states } = createComponentTestMeta(component);

const stateCombinations: number = Math.pow(2, states.length) - 1;
Expand All @@ -91,12 +91,12 @@ function calculateComponentStyleCount(component: ComponentMappingType): number {
return appearances.length * (accVariants + stateVariants + stateCombinations + 1);
}

function createComponentTestMeta(component: ComponentMappingType): any {
const { appearances, variants, states } = component.meta;
function createComponentTestMeta(component: ControlMappingType): any {
const { appearances, variantGroups, states } = component.meta;

return {
appearances: Object.keys(appearances),
variants: Object.keys(variants).map(group => Object.keys(variants[group])),
variants: Object.keys(variantGroups).map(group => Object.keys(variantGroups[group])),
states: Object.keys(states),
};
}
Loading

0 comments on commit c28f70e

Please sign in to comment.