README

适用于 Silverstripe 的无框架模式库生成器。

入门

安装模块

composer require flashbackzoo/silverstripe-pattern-library

假设您有一个如下的 Vue3 组件

themes/app/src/ExampleComponent.vue

<script>
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  props: {
    content: {
      type: String,
      required: true,
    },
  },
});
</script>

<template>
  <div>
    {{ content }}
  </div>
</template>

以及您的组件对应的 Silverstripe 模板，如下所示

themes/app/templates/Includes/ExampleComponent.ss

<div>
    <h1>$Title</h1>
    <example-component :content="$Content.XML" />
</div>

您可以添加一些配置，如下所示

app/_config/pattern-library.yml

---
Name: app-pattern-library
After:
  - '#flashbackzoo-pattern-library'
---
Flashbackzoo\SilverstripePatternLibrary\PatternLibrary:
  engine: Flashbackzoo\SilverstripePatternLibrary\Engine\StorybookV6
  adapter: Flashbackzoo\SilverstripePatternLibrary\Adapter\StorybookVue3
  static_dir: ./themes/app/dist
  output: ./stories
  patterns:
    - ./app/pattern-library/example-component.yml

app/pattern-library/example-component.yml

ExampleComponent:
  title: Components/ExampleComponent
  component:
    name: ExampleComponent
    element: example-component
    path: ../themes/app/src/ExampleComponent.vue
  template:
    name: Includes\ExampleComponent
    data:
      Title: Hello world!
      Content:
        XML: args.content
  args:
    content: >
      '<p>This is my component.</p>'

运行构建任务

/dev/tasks/Flashbackzoo-SilverstripePatternLibrary-GeneratePatternLibraryTask?flush=1

这将应在您的输出目录中生成一个故事，例如

stories/ExampleComponent.stories.js

import ExampleComponent from '../themes/app/src/ExampleComponent.vue';

export default {
  title: 'ExampleComponent',
  component: ExampleComponent,
};

const Template = (args) => ({
  components: {
    'example-component': ExampleComponent,
  },
  setup() {
    return { args };
  },
  template: `
    <div>
      <h1>Hello world!</h1>
      <example-component :content="args.content" />
    </div>
  `,
});

export const Primary = Template.bind({});
Primary.args = {
  content: '<p>This is my component.</p>',
};

并非所有组件都需要 JavaScript，例如页脚通常是简单的 Silverstripe 模板，没有任何复杂的交互。您也可以为“仅 Silverstripe”组件生成模式。

app/pattern-library/footer.yml

Footer:
  title: Components/Footer
  template:
    name: Includes\Footer
    data:
      Columns:
        - Menu:
            MenuTitle: Column 1
            MenuItems:
              - Title: Example link 1
                Link: '#'
              - Title: Example link 2
                Link: '#'
        - Menu:
            MenuTitle: Column 2
            MenuItems:
              - Title: Example link 3
                Link: '#'
              - Title: Example link 4
                Link: '#'

该模块支持在项目中混合使用自动生成和手动创建的故事。这意味着您可以逐步将现有的故事转换为生成的故事。如果需要，您仍然可以编写手动故事。