https://github.com/couriourc/monorepo-playground

https://github.com/couriourc/monorepo-playground

monorepo storybookify

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/couriourc/monorepo-playground
• Owner: couriourc
• Created: 2023-06-14T14:33:21.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-06-15T13:24:26.000Z (over 1 year ago)
• Last Synced: 2024-11-16T02:36:00.399Z (about 1 month ago)
• Topics: monorepo, storybookify
• Language: JavaScript
• Homepage: https://couriourc-monorepo.netlify.app
• Size: 239 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.mdx

Awesome Lists containing this project

README

        
import { Meta } from "@storybook/blocks";

import "uno.css";

{}

## 基本介绍

本项目是一次 `Monorepo` 结合 `storybook` 的项目管理方法

项目的目录结构为:

|-->.storybook 一些 storybook 的配置信息，用于建立基本的文档

|-->packages 一堆自己写的包

|-->一些其他的配置信息

## 例子

如本文，建立了一个 button 的组件库，隶属于 `@couriourc/packages`

```vue

import "@couriourc/button";

```

通过这样的方式来进行 `storybook` 的真实测试，进一步可以结合 hexo 的 meta 信息配置，和代码样例转换，实现 markdown to mdx 的转换

从而达到适配博客的写法，实现库介绍 blogify

```markdown

---

title: "项目介绍"

---

```

{
↓
}


```mdx

```

## 进一步

借助 `Monorepo` 的便利性,实现 Auto Imports 从而简化繁多的 import,配合 JSDoc StyleGuids 简化项目文档的复写,并自动生成可用的一套组件库.

若是能打通 Figma 也是一个不错的 Idea

## 用途

1. 一个简易的前端测试平台

   基于 Storybook 交互式效果拉满，利用 netlify 发布，分享成就两不误。

2. 项目沉淀（文档、kitify、规范化）

   在形成自己的组件库时，可以利用 Jsdoc 或 Tsdoc 等工具，生成对应的文档，并且能够实现交互式。

3. Monorepo

   一键发布 npm，成长，开发两不误。

## 目前正在做：

[1]. 优化 markdown 的写法，制定一套更加自然过渡的语法。

[2]. JSDoc(JS Vue Ts)转译自动生成 storybook 交互式的文档。

[3]. 优化 storybook 与仓库的强关联，做到弱关联。

[4]. 集成优化测试平台和 DevOps。

[5]. 一些额外的插件打通

[6]. auto web-types generator or attributes.json generator