fix(docs): fix component styles table (#1543)

akveo · May 31, 2019 · ab166fd · ab166fd
1 parent 310127b
commit ab166fd
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/docs/app/@theme/services/styles.service.ts b/docs/app/@theme/services/styles.service.ts
@@ -16,7 +16,7 @@ export class NgdStylesService {
   }
 
   mapThemedValues(classStyles: any): any {
-    const defaultTheme = this.docs.themes[DEFAULT_THEME_NAME].data;
+    const defaultTheme = this.docs.completeThemes[DEFAULT_THEME_NAME].data;
 
     return classStyles.map(item => {
       return item.styles.map(prop => {

diff --git a/docs/app/blocks/components/styles-table-block/styles-table-block.component.ts b/docs/app/blocks/components/styles-table-block/styles-table-block.component.ts
@@ -22,7 +22,7 @@ import { NgdStylesService } from '../../../@theme/services';
       <tbody>
       <tr *ngFor="let item of style">
         <td>{{ item.name }}</td>
-        <td>{{ item.parent || 'unknown' }}</td>
+        <td>{{ item.parent || '' }}</td>
         <td ngdColorSwatch>{{ item.value || 'unknown' }}</td>
         <td>
           <p *ngIf="item.shortDescription" ngdDescription>{{ item.shortDescription}}</p>

diff --git a/docs/themes.scss b/docs/themes.scss
@@ -7,5 +7,6 @@ $nb-theme-export-mode: true;
 
 @import '../src/framework/theme/styles/theming';
 @import '../src/framework/theme/styles/themes';
+@import '../src/framework/theme/styles/themes/mapping';
 
-$v: export('output.json', $nb-themes-export, (prefix:'', suffix:''));
+$v: export('output.json', $nb-themes-export, $eva-mapping);
diff --git a/scripts/gulp/tasks/docs/export-themes.ts b/scripts/gulp/tasks/docs/export-themes.ts
@@ -76,9 +76,8 @@ const exporter = {
         result = exporter.getParent(prop, themeName, themeName, prop, result, THEMES);
       });
     });
-    const output = {};
-    output['themes'] = result;
-    return output;
+
+    return result;
   },
 
   getParent(prop, scopedThemeName, resultThemeName, resultProp, resultObj, THEMES) {
@@ -120,19 +119,35 @@ const exporter = {
 
 
   function(path) {
-    return function (file, value, options) {
-      const opt = _.defaults(exporter.get_value(options), { prefix: '', suffix: '', extend: false });
-      let output = exporter.get_value(value);
-      output = exporter.parseThemes(output);
+    return function (file, themes, mapping) {
+      const themesValue = exporter.get_value(themes);
+      const mappingValue = exporter.get_value(mapping);
+
+      const completeThemes = {};
+      Object.keys(themesValue).forEach((themeName) => {
+        const theme = themesValue[themeName];
+        completeThemes[themeName] = {
+          ...theme,
+          data: _.defaults(mappingValue, theme.data),
+        };
+      });
+
+
+      let output = {
+        themes: exporter.parseThemes(themesValue),
+        // TODO: we need to change internal function interface as it very hard to re-use them
+        completeThemes: exporter.parseThemes(completeThemes),
+      };
+
       output = _.defaults(JSON.parse(fs.readFileSync(path + '/' + file.getValue())), output);
-      fs.writeFileSync(path + '/' + file.getValue(), opt.prefix + JSON.stringify(output, null, '  ') + opt.suffix);
-      return value;
+      fs.writeFileSync(path + '/' + file.getValue(), JSON.stringify(output, null, '  '));
+      return themes;
     }
   },
 
   interface(name) {
     name = name || 'export';
-    return name + '($file, $value, $options:())';
+    return name + '($file, $themes, $mapping)';
   },
 };