流星组件库

meteor组件库是由Shopware开发的一个Vue组件库。它是基于 流星设计系统.

• 完美适用于Shopware应用程序
• 匹配Shopware管理的外观和感觉
• 小捆大小与摇树
• 通过Storybook测试和预览， 记录 在meteor.shopware.com上

要求

你需要工作 v3应用程序 与 i18n插件 翻译。主要的翻译（英语和德语）被捆绑在组件中。对于其他语言，您需要为正确的路径添加代码片段。

安装

将这些包添加到您的项目中：

npm i @shopware-ag/meteor-component-library vue-i18n

导入 style.css 一般的造型和 font.css 在应用程序的根文件或根样式文件中查找Inter字体。

import "@shopware-ag/meteor-component-library/styles.css";
import "@shopware-ag/meteor-component-library/font.css";

现在，为Vue配置i18n插件。

const i18n = createI18n({
  legacy: false,
});

app.use(i18n);

每个组件都独立工作，可以像这样直接从根目录导入：

<script>
  import { MtButton } from "@shopware-ag/meteor-component-library";

  export default {
    components: {
      "mt-button": MtButton,
    },
  };
</script>

开发

如果您想贡献这个组件库，这些指南非常有用。

项目设置

pnpm install

编译和热加载用于开发

pnpm run storybook

要同时运行Storybook和文档站点，请使用 pnpm dev 而是从存储库根目录。看到 贡献指南 获取详细信息。

编译和最小化产品

pnpm run build:storybook

运行您的交互测试（需要运行Storybook实例）

pnpm run test:storybook

检查和修复文件

pnpm run lint:all

构建绑定的组件库

pnpm run build

编写交互测试

所有的交互测试都是用 component-name.interactive.stories.js 文件。标题需要加前缀 Interaction Tests/． 这些交互测试隐藏在最终构建中，但在Storybook开发观察器中是可见的。

例子:

import meta from "./mt-button.stories";

export default {
  ...meta,
  title: "Interaction Tests/base/mt-button",
  component: MtButton,
};

编写视觉测试

视觉测试需要从故事开始 VisualTest.

例子:

export const VisualTestPrimaryVariant = {
  name: "Render the primary variant",
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    // your interaction test ...
  },
};

屏幕截图将在播放功能结束时生成。如果没有定义Play函数，那么它将立即被创建。

为了减少片状，所有动画都自动从剧作家禁用。