Atlas Copco VT 站点生成器

Atlas Copco VT 的独立站点生成器包。 这个软件包包含LSG组件集,故事本文档,以及主题的AEM-ready CSS/JS输出.

技术堆栈

• 反应 18 + 键 类型脚本
• 故事本 第7册 与 @storybook/nextjs
• 常设委员会 + 键 尾风 CSS + 键 邮政
• 下册.js 13 保存现有的故事本/运行时间基础

开始

# Install dependencies
npm install

# Run Storybook (default: http://localhost:6006)
npm run storybook

# Build static Storybook
npm run build-storybook

脚本

项目结构

.storybook/           # Storybook config, theme, preview
src/
  components/lsg/     # Shared base LSG React components, docs, and clientlib runtime
  themes/             # Theme component wrappers plus Theme 1 / 2 / 3 CSS and JS entry points
  stories/foundation/_components/  # Minimal Storybook layout helpers used by LSG docs
  utils/styles/       # Shared spacing/style primitives still used by LSG SCSS
public/               # Static assets

建筑层

1. 底层 : src/components/lsg/ 包含共享的结构组件和每个主题构建的共同SCSS.
2. 主题层: 下方每个文件夹 src/themes/ 曝光其自己的主题组件集,这些组件包接了基础组件,并可以在上方添加额外的特定主题的样式.
3. 品牌层: --lsg-* CSS自定义属性定义了颜色,字体,弧度和大小的品牌合同. 每个品牌/主题都为合同提供自己的价值.

主题如何运作

主题作为扩展模型来构建,而不是作为组件库的单独重写.

1. 基本构成部分

B. 共同执行 src/components/lsg/。 。 。 .

• 此层包含反应结构以及用于 LsgButton, (中文(简体) ), LsgHeader, (中文(简体) ), LsgFooter还有LSG的其余部分.
• 基础组件应当拥有共享的标记,可访问性,交互逻辑,以及稳定的AEM-facing类名.
• 基础SCSS应使用 --lsg-* 代号合同 而不是硬编码品牌风格.

这是每个主题之上的层.

2. 主题组成部分

每个主题都有自己的组成部分切入点 src/themes/<theme>/components.tsx。 。 。 .

• 主题组件是围绕基础组件的包裹.
• 包装的一代发生于 src/themes/createThemeComponents.tsx。 。 。 .
• 每个包装器会添加主题特定类, 如 lsg-themed-component--theme-1 因此一个主题可以以额外的外型来瞄准基础组件.

这意味着主题可以将共享的功能从基础组件中保留下来,同时仍然改变演示文稿或者添加有品牌的处理.

示例流量 :

1. Theme1LsgButton 使共享 LsgButton。 。 。 .
2. 包装纸加上 lsg-themed-component--theme-1 课.
3. src/themes/theme-1/components.scss 对共享应用额外的样式 .lsg-button 记在主题包里.

3. 品牌变量

品牌层为CSS可变合同.

• 诸如 --lsg-color-primary, (中文(简体) ), --lsg-font-family-primary,以及 --lsg-radius-rounded 定义品牌价值.
• 默认合同存在于 src/components/lsg/lsg-tokens.scss。 。 。 .
• 每个主题条目文件都超越了这些相同的变量 :root 块.

这保持了API的稳定. 组件总是读取相同的变量,而每个品牌为它们提供不同的值.

故事书主题行为

故事书运行时切换主题 .

• 工具栏配置在 .storybook/preview.tsx 结束 globalTypes.lsgTheme。 。 。 .
• 这个 LSG_THEMES 对象映射主题名称到一组 --lsg-* 数值.
• 这个 withLsgTheme 装饰器将所选主题变成 :root CSS 块并注入到预览文档中.
• 装饰器也设置 document.documentElement.dataset.lsgTheme = themeKey。 。 。 .

那个 data-lsg-theme 属性很重要,因为主题SCSS可以瞄准:

• 整个故事书画布 :root[data-lsg-theme="theme-x"]
• 特定主题的包装 .lsg-themed-component--theme-x

所以在故事书里你得到两个:

• 以品牌代号交换颜色、打字、间距和弧度
• 在共享组件上方分层设置主题特定组件

生产主题产出

每个主题都有自己的CSS和JS捆绑.

• src/themes/theme-1/theme.scss, (中文(简体) ), src/themes/theme-2/theme.scss,以及 src/themes/theme-3/theme.scss 导入共享的 LSG 样式及其自己的主题组件样式.
• 这些文件还覆盖了 :root 主题的契约.
• build:themes:css 每个主题发布一个 CSS 文件 .
• build:themes:js 每个主题发布一个JS文件,用于客户端lib运行时的行为.

这是AEM的传送模式:

1. 共同的组成部分结构来自基础执行.
2. 主题 CSS 添加组件级扩展.
3. 主题变量应用品牌颜色,字体,和大小.
4. 主题JS为这个主题的运行时间行为提供靴子.

何时使用每层

• 在修改应用于每个主题时使用基元层.
• 当一个主题需要在共享组件行为的上方有明显的视觉处理时,使用主题组件层.
• 当变化为颜色,打字相,大小等品牌价值或边框半径时使用符号层.

通常,将结构和行为放在基部组件中先行. 只有移动到 src/themes/ 当主题真正需要它自己的构件 在共享的核心之上.

添加新的主题组件

1. 添加或更新共享组件于 src/components/lsg/。 。 。 .
2. 保持基础SCSS驱动由 var(--lsg-*) 标志.
3. 添加主题特定样式 src/themes/<theme>/components.scss 如果主题需要的不仅仅是符号变化.
4. 导出主题包 src/themes/<theme>/components.tsx。 。 。 .
5. 如果需要在故事书中添加或更新主题值 .storybook/preview.tsx。 。 。 .

添加组件

1. 在下方添加一个组件 src/components/lsg/<Name>/ 并保持其风格平坦 .scss 因此,AEM-faceing班名保持稳定.
2. 添加 *.stories.tsx 或 MDX 文档与该组件并列 src/components/lsg/。 。 。 .
3. 如果一个主题比品牌变量更需要,请在 src/themes/<theme>/components.scss 并揭发一个包裹 src/themes/<theme>/components.tsx。 。 。 .
4. 使用根令牌合同从 src/components/lsg/lsg-tokens.scss 喜欢 var(--lsg-*) 值高于硬编码的主题颜色.

设计符号

• 核心颜色 : --lsg-color-primary, (中文(简体) ), --lsg-color-secondary, (中文(简体) ), --lsg-color-tertiary, (中文(简体) ), --lsg-color-light, (中文(简体) ), --lsg-color-dark, (中文(简体) ), --lsg-color-black, (中文(简体) ), --lsg-color-white
• 类型 : --lsg-font-family-primary, (中文(简体) ), --lsg-font-family-secondary附加时 --lsg-size-* 缩放符号
• 形状 : --lsg-radius-square, (中文(简体) ), --lsg-radius-rounded, (中文(简体) ), --lsg-radius-pill

特定主题的覆盖在 src/themes/,但是它们扩展了共享基元而不是替换根 --lsg-* 合同.