@lcap/builder/lib/overload/generate-theme.js

lcap builder utils

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateThemeFile = generateThemeFile;
const fs_extra_1 = __importDefault(require("fs-extra"));
const path_1 = __importDefault(require("path"));
function generateThemeVarsFile(context, themeFolder) {
    return __awaiter(this, void 0, void 0, function* () {
        if (!context.themeConfig || !context.themeConfig.variables || (context.themeConfig.variables.length === 0 && context.themeConfig.useGlobalTokens.length === 0)) {
            return;
        }
        const componentCodes = ['/**', ` * @component ${context.tagName}`];
        if (context.themeConfig.hidden) {
            componentCodes.push(' * @hidden');
        }
        if (context.themeConfig.useGlobalTokens && context.themeConfig.useGlobalTokens.length > 0) {
            componentCodes.push(` * @useGlobalTokens ${JSON.stringify(context.themeConfig.useGlobalTokens)}`);
        }
        componentCodes.push(' */');
        componentCodes.push(`${context.themeConfig.selector || ':root'} {`);
        const variableCodes = context.themeConfig.variables.map((cssVar) => {
            const codes = [
                '  /**',
            ];
            Object.keys(cssVar).forEach((key) => {
                const v = cssVar[key];
                if (!v || ['name', 'value'].indexOf(key) !== -1) {
                    return;
                }
                switch (typeof v) {
                    case 'string':
                    case 'number':
                        codes.push(`   * @${key} ${v}`);
                        break;
                    case 'boolean':
                        codes.push(`   * @${key}`);
                        break;
                    case 'object':
                        codes.push(`   * @${key} ${JSON.stringify(v)}`);
                        break;
                    default:
                        break;
                }
            });
            codes.push('   */');
            codes.push(`  ${cssVar.name}: ${cssVar.value};`);
            codes.push('');
            return codes.join('\n');
        });
        const endCode = '}';
        const code = [
            ...componentCodes,
            ...variableCodes,
            endCode,
            '',
        ].join('\n');
        fs_extra_1.default.writeFileSync(path_1.default.resolve(themeFolder, 'vars.css'), code, 'utf-8');
    });
}
const VUE_PREVIEW_CODE = (framework) => `<template>
  <demo-preview></demo-preview>
</template>
<script>
import createStoriesPreview from '@lcap/builder/input/${framework}/stories-preview';
import * as stories from '../stories/block.stories';

const DemoPreview = createStoriesPreview(stories);

export default {
  components: {
    DemoPreview,
  },
};

</script>
`;
const REACT_PREVIEW_CODE = `import createStoriesPreview from '@lcap/builder/input/react/stories-preview';
import * as stories from '../stories/block.stories';

export default createStoriesPreview(stories);
`;
function generateThemePreviewFile(context, themeFolder) {
    return __awaiter(this, void 0, void 0, function* () {
        if (context.framework.startsWith('vue')) {
            fs_extra_1.default.writeFileSync(path_1.default.resolve(themeFolder, 'index.vue'), VUE_PREVIEW_CODE(context.framework), 'utf-8');
            return;
        }
        fs_extra_1.default.writeFileSync(path_1.default.resolve(themeFolder, 'index.jsx'), REACT_PREVIEW_CODE, 'utf-8');
    });
}
const VUE_THEME_STORIES_CODE = `import ComponentPreivew from 'virtual:lcap-theme-component-previews.js';

export default {
  title: '主题配置预览',
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

export const Components = {
  name: '组件预览',
  render: (args, { argTypes }) => {
    return {
      props: Object.keys(argTypes),
      components: {
        ComponentPreivew,
      },
      template: '<ComponentPreivew v-bind="$props" />',
    };
  },
};
`;
const REACT_THEME_STORIES_CODE = `import ComponentPreivew from 'virtual:lcap-theme-component-previews.js';

export default {
  title: '主题配置预览',
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

export const Components = {
  name: '组件预览',
  render: ComponentPreivew,
};
`;
function generateThemeStories(context) {
    return __awaiter(this, void 0, void 0, function* () {
        const storiesPath = path_1.default.resolve(context.rootPath, './src/theme.stories.js');
        if (fs_extra_1.default.existsSync(storiesPath)) {
            return;
        }
        const code = context.framework === 'react' ? REACT_THEME_STORIES_CODE : VUE_THEME_STORIES_CODE;
        fs_extra_1.default.writeFileSync(storiesPath, code, 'utf-8');
    });
}
function generateThemeFile(context) {
    return __awaiter(this, void 0, void 0, function* () {
        const themeFolder = path_1.default.resolve(context.componentFolderPath, 'theme');
        if (!fs_extra_1.default.existsSync(themeFolder)) {
            fs_extra_1.default.mkdirSync(themeFolder, { recursive: true });
        }
        yield generateThemeVarsFile(context, themeFolder);
        if (fs_extra_1.default.existsSync(path_1.default.resolve(themeFolder, 'vars.css'))) {
            yield generateThemePreviewFile(context, themeFolder);
            yield generateThemeStories(context);
        }
    });
}