构造器.io Quizzes UI 图书馆

一个 UI 库,提供 React 组件来管理获取和渲染逻辑 构造器.io 的Quizzes。 。 。 .

导言

构造器.io 的Quizzes 是互动体验 让每个客户的购物旅程个性化 这个UI库简化了集成过程,提供了处理Quizzes取取和渲染逻辑的React组件. 已有打字支持.

我们的故事书Docs 是探索此 UI 库的行为和可用配置选项的最佳场所.

安装

npm i @constructor-io/constructorio-ui-quizzes

使用量

使用反应组件

这个 CioQuiz 组件处理整个测试的状态管理、数据获取和渲染逻辑.

import CioQuiz from '@constructor-io/constructorio-ui-quizzes';

function YourComponent() {
  return (
    <div>
      <CioQuiz quizId='coffee-quiz' apiKey='key_n4SkMH5PFWLdStQZ' />
    </div>
  );
}

使用 Javascript 套装

这是一种框架不可知论方法,可用于任何JavaScript项目. 这个 CioQuiz 函数提供一个简单的接口,将整个 Quizzes UI 注入所提供的 selector。 。 。 . 何况 查询组件道具,此函数也接受 selector 财务报告和审定财务报表 includeCSS。 。 。 .

import CioQuiz from '@constructor-io/constructorio-ui-quizzes/constructorio-ui-quizzes-bundled';

CioQuiz({
  selector: '#quiz-container',
  quizId: 'coffee-quiz',
  apiKey: 'key_n4SkMH5PFWLdStQZ',
  includeCSS: true, // Include the default CSS styles. Defaults to true.
  resultCardOptions: {
    resultCardRegularPriceKey: 'price',
  },
  questionsPageOptions: {
    skipQuestionButtonText: 'Skip',
  },
  // ... additional arguments
});

自定义样式

库默认值

默认情况下, 从此库导入 React 组件不会将任何 cs 拖入您的项目 .

如果您想要使用此库中的一些启动样式, 请添加一个类似于下面的示例导入语句的导入语句 :

import '@constructor-io/constructorio-ui-quizzes/styles.css';

• 这些起动风格可以用作在上方再起的地基,或者只是作为您完全替换的参考.
• 要选择退出所有默认样式, 请不要导入 styles.css 样式表.
• 此库中的所有启动样式都在 .cio-quiz css选择器.
• 这些启动样式意在通过在您的 CCs 规则中分层来扩展
• 如果您导入启动样式, CioQuiz 组件将占用其母容器的全部宽度和高度

请注意启动时的样式使用 @ container 查询, 并允许根据测试的容器元素大小进行响应样式 。 由于这个功能得到了现代浏览器的支持,所以多填充没有被包含在这个库中. 然而,如果想要支持更老的浏览器,可以添加倒置样式或者使用一个 多边填充。 。 。 .

解决问题

已知问题

旧的 Javascript 环境

图书馆提供两种不同的建筑. 通用JS(cjs)和ECMAScript模块(mjs)

为ECMAScript模块(mjs)所建. Javascript 版本是 ESNext, 它可能不会被您的环境所支持 . 如果情况是这样,而你的环境正在使用像ES6(ES-2015)这样的更古老的Javascript版本,你可能会得到这个错误.

Module parse failed: Unexpected token (15:32) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

要解决这个问题,您可以导入支持ES6(ES-2015)语法的普通JS(cjs)构建:

import CioQuiz from '@constructor-io/constructorio-ui-quizzes/cjs'

ESLint 语录

ESLint有一个已知的问题,即它未能解决在互联网上暴露的路径 exports 国家防范机制一揽子措施声明。 如果您收到以下错误, 您可以使用 ESLint 安全禁用 // eslint-disable-line 为这条线.

Unable to resolve path to module '@constructor-io/constructorio-ui-quizzes/styles.css'

相关的未决问题:

问题1868

问题1810

地方发展

开发脚本

npm ci                  # install dependencies for local dev
npm run dev             # start a local dev server for Storybook
npm run lint            # run linter

出版新版本

调度 发布 gitHub 动作中的工作流程 。 您必须提供两个论据:

• 版本战略数字 : major, (中文(简体) ), minor,或 patch。 。 。 .
• 标题:发布的标题.

此工作流程将自动 :

1. 使用所提供的策略跳出库版 .
2. 创建新 git 标签 .
3. 创建新的 GitHub 发布 .
4. 编译图书馆.
5. 向国家预防机制公布新版本.
6. 向 GitHub Pages 部署故事手册文件.
7. 汇报《公约》 相关黑道。 。 。 .

iQQ注意:请不要手动增加软件包. json版本或创建新的git标签.

库版通过发行和git标签来跟踪. 我们故意把包裹。 。 0.0.0 避免将变化推向 main 树枝。 这避免了分支保护规则例外的必要性,从而解决了许多安全关切.

新故事书版本

调度 部署故事本 gitHub 动作中的工作流程 .

iQQQ 注:这在发布新版本时已经自动完成.

辅助文件

• 童话书7 导言
• 键入标记文件

沙盒环境中的解密测验

请从以下的代码沙盒中叉出, 用于实验在各种方法中集成的被测试 UI 库.

• 简单反应应用程序
• 普通HTML、CSS、JS