故事书：对象不是 Twig 组件上的函数

Posted 2023-02-19

【中文标题】故事书：对象不是 Twig 组件上的函数

【英文标题】：Storybook: Object is not a function on Twig Component

【发布时间】：2021-06-22 11:17:06

【问题描述】：

我正在尝试使用故事书将组件导入组件故事。

组件是用 twig 编写的。故事书模板使用 js。我正在调整组件以使用控件而不是故事书不再使用的旋钮。

我收到一个错误“对象不是函数” - 并没有太多帮助。有谁知道我做错了什么？我知道 Twig 渲染与其他组件一起正常工作。

我的故事

// Your Twig component
import  createInput  from '../components/input.twig';
import Faker from 'faker'

// Generate data with Faker
const fullName = Faker.name.findName()
const fullNameEg = Faker.name.findName()

export default 
  title: 'Elements/Input',
  argTypes: 
    label:  control: 'text' ,
    value:  control: 'text' ,
    placeholder:  control: 'text' ,
    error:  control: 'text' ,
    isDisabled:  control: 'boolean' ,
    isRequired:  control: 'boolean' ,
  ,
;

const Template = ( label, ...args ) => 
  // You can either use a function to create DOM elements or use a plain html string!
  // return `<div>$label</div>`;
  return createInput( label, ...args );
;

export const Filled = Template.bind();
Filled.args = 
    label: 'First name',
    value: fullName,
    error: '',
    placeholder: `Eg: $fullNameEg`,
    isDisabled: false,
    isRequired: false,
;

export const Empty = Template.bind();
Empty.args = 
    label: 'First name',
    value: '',
    error: '',
    placeholder: `Eg: $fullNameEg`,
    isDisabled: false,
    isRequired: false,
;

export const Disabled = Template.bind();
Disabled.args = 
    label: 'First name',
    value: fullName,
    error: '',
    placeholder: `Eg: $fullNameEg`,
    isDisabled: true,
    isRequired: false,
;

export const Required = Template.bind();
Required.args = 
    label: 'First name',
    value: fullName,
    error: '',
    placeholder: `Eg: $fullNameEg`,
    isDisabled: false,
    isRequired: true,
;

export const Error = Template.bind();
Error.args = 
    label: 'First name',
    value: fullName,
    error: 'Sorry, that’s a poor name. Try another.',
    placeholder: `Eg: $fullNameEg`,
    isDisabled: false,
    isRequired: false,
;

我的组件

#
Accessible input demo
Usage example:
% include "components/input" with 
    label: "Enter your greeting",
    value: "Hi there Crafter",
    error: "",
    isDisabled: false,
    isRequired: false,
    placeholder: "Eg: Go get crafty!",
 %
#

<div class="input  error ? 'input-has-error'  isDisabled|default ? ' input-is-disabled' ">
    <label for="input-field" class="input-label">
         label|default 
        % if isRequired|default %
            <span class="input-required">
                *</span>
        % endif %
    </label>
    <input id="input-field" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker" value=" value " type="text"  placeholder|default ? ' placeholder="' ~ placeholder ~ '"'   error|default|length > 0 ? ' aria-invalid="true"'   error|default ? ' aria-describedby="input-error-message"'   isDisabled|default ? ' disabled'   isRequired|default ? ' required' />
    % if error|default %
        <div id="input-error-message" class="input-error-message"> error </div>
    % endif %
</div>

我正在改编的原创故事

// Learn more about the knobs addon:
// https://github.com/storybooks/storybook/blob/master/addons/knobs/README.md
import  text, boolean, number  from '@storybook/addon-knobs'
// Faker creates random data for your components
// https://github.com/marak/Faker.js/#api-methods
import Faker from 'faker'

// Your Twig component
import component from '../components/input.twig'

const container = children => 
    // Font-size slider for component resizing
    // (Use ems in your component styles)
    const scale = number('scale', 1, 
        range: true,
        min: 1,
        max: 2.5,
        step: 0.25,
    )
    return `<div style="font-size:$scaleem">$children</div>`


// Generate data with Faker
// https://github.com/marak/Faker.js/#api-methods
const fullName = Faker.name.findName()
const fullNameEg = Faker.name.findName()

// Set the component name
export default  title: 'Input' 

export const filled = () =>
    container(
        component(
            label: text('label', 'Full name'),
            value: text('value', fullName),
            error: text('error', ''),
            isDisabled: boolean('isDisabled', false),
            isRequired: boolean('isRequired', false),
            placeholder: text('placeholder', `Eg: $fullNameEg`),
        )
    )

export const empty = () =>
    container(
        component(
            label: text('label', 'Full name'),
            value: text('value', ''),
            error: text('error', ''),
            isDisabled: boolean('isDisabled', false),
            isRequired: boolean('isRequired', false),
            placeholder: text('placeholder', `Eg: $fullNameEg`),
        )
    )

export const disabled = () =>
    container(
        component(
            label: text('label', 'Full name'),
            value: text('value', fullName),
            error: text('error', ''),
            isDisabled: boolean('isDisabled', true),
            isRequired: boolean('isRequired', false),
            placeholder: text('placeholder', `Eg: $fullNameEg`),
        )
    )

export const required = () =>
    container(
        component(
            label: text('label', 'Full name'),
            value: text('value', fullName),
            error: text('error', ''),
            isDisabled: boolean('isDisabled', false),
            isRequired: boolean('isRequired', true),
            placeholder: text('placeholder', `Eg: $fullNameEg`),
        )
    )

export const error = () =>
    container(
        component(
            label: text('label', 'Full name'),
            value: text('value', fullName),
            error: text('error', 'Sorry, that’s a poor name. Try another.'),
            isDisabled: boolean('isDisabled', false),
            isRequired: boolean('isRequired', false),
            placeholder: text('placeholder', `Eg: $fullNameEg`),
        )
    )

【参考方案1】：

尚不支持最新版本的sass-loader，因此您需要安装旧版本：

npm i -D sass-loader@10.1.1

See the craft-storybook-starter for a working example →