Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
brc-dd committed Feb 25, 2025
1 parent d23e5e4 commit f656629
Show file tree
Hide file tree
Showing 15 changed files with 230 additions and 214 deletions.
3 changes: 0 additions & 3 deletions docs/.vitepress/config/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,6 @@ export default defineConfig({

vite: {
...baseConfig,
define: {
__STORY_HOST__: JSON.stringify(getStoryHost())
},
plugins: [
...baseConfig.plugins!,
storyPlugin()
Expand Down
70 changes: 38 additions & 32 deletions docs/.vitepress/config/story.ts
Original file line number Diff line number Diff line change
@@ -1,39 +1,45 @@
import { type Plugin } from 'vite'
import { whyframe } from '@whyframe/core'
import { whyframeVue } from '@whyframe/vue'
import { type PluginOption } from 'vite'
import { type DefaultTheme } from 'vitepress'

export function storyPlugin(): Plugin {
export function storyPlugin(): PluginOption {
let themeConfig: DefaultTheme.Config

Check warning on line 7 in docs/.vitepress/config/story.ts

View workflow job for this annotation

GitHub Actions / test

'themeConfig' is defined but never used. Allowed unused vars must match /^_/u

return {
name: 'sefirot-story'
// configResolved(config) {
// themeConfig = (config as any).vitepress.userConfig.themeConfig
// if (Array.isArray(themeConfig.sidebar)) {
// themeConfig.sidebar.push({
// text: 'Storybook',
// items: [
// { text: 'Introduction', link: '/story/introduction' },
// { text: 'Components', link: '/story/components' },
// { text: 'Design Tokens', link: '/story/design-tokens' }
// ]
// })
// }
// },
// // hotUpdate() {
// // if (this.environment.name !== 'client') { return }
return [
{
name: 'sefirot-story'
// configResolved(config) {
// themeConfig = (config as any).vitepress.userConfig.themeConfig
// if (Array.isArray(themeConfig.sidebar)) {
// themeConfig.sidebar.push({
// text: 'Storybook',
// items: [
// { text: 'Introduction', link: '/stories/introduction' },
// { text: 'Components', link: '/stories/components' },
// { text: 'Design Tokens', link: '/stories/design-tokens' }
// ]
// })
// }
// },
// hotUpdate() {
// if (this.environment.name !== 'client') { return }

// // if (Array.isArray(themeConfig.sidebar)) {
// // themeConfig.sidebar.push({
// // text: 'Test HMR',
// // items: [
// // { text: 'Introduction', link: '/story/introduction' },
// // { text: 'Components', link: '/story/components' },
// // { text: 'Design Tokens', link: '/story/design-tokens' }
// // ]
// // })
// if (Array.isArray(themeConfig.sidebar)) {
// themeConfig.sidebar.push({
// text: 'Test HMR',
// items: [
// { text: 'Introduction', link: '/stories/introduction' },
// { text: 'Components', link: '/stories/components' },
// { text: 'Design Tokens', link: '/stories/design-tokens' }
// ]
// })

// // return [this.environment.moduleGraph.getModuleById('/@siteData')!]
// // }
// // }
}
// return [this.environment.moduleGraph.getModuleById('/@siteData')!]
// }
// }
},
whyframe({ defaultSrc: '/stories/_frame', components: [{ name: 'Story' }] }),
whyframeVue({ include: /\.(?:vue|md)$/ })
]
}
17 changes: 4 additions & 13 deletions docs/.vitepress/theme/components/Showcase.vue
Original file line number Diff line number Diff line change
@@ -1,27 +1,18 @@
<script setup lang="ts">
import SButton from 'sefirot/components/SButton.vue'
import { computed } from 'vue'
const props = defineProps<{
defineProps<{
path: string
story?: string
}>()
const computedPath = computed(() => {
return `@globalbrain/sefirot/lib${props.path}`
})
const computedStory = computed(() => {
return `https://${__STORY_HOST__}/story${props.story}`
})
</script>

<template>
<div class="Showcase">
<div class="header">
<p class="path">{{ computedPath }}</p>
<a v-if="story" class="button" :href="computedStory" target="_blank">
<SButton size="mini" mode="mute" label="View in Histoire" />
<p class="path">@globalbrain/sefirot/lib{{ path }}</p>
<a v-if="story" class="button" :href="`/stories/${story}`" target="_blank">
<SButton size="mini" mode="mute" label="View in Playground" tag="span" />
</a>
</div>

Expand Down
112 changes: 93 additions & 19 deletions docs/.vitepress/theme/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -57,33 +57,107 @@ textarea {
font-family: inherit;
}

.flex {
display: flex;
}
.leading-20 { line-height: 20px; }
.leading-24 { line-height: 24px; }

.flex-wrap {
flex-wrap: wrap;
}
.text-12 { font-size: 12px; }
.text-14 { font-size: 14px; }
.text-16 { font-size: 16px; }

.text-c-1 { color: var(--c-text-1); }
.text-c-2 { color: var(--c-text-2); }
.text-c-3 { color: var(--c-text-3); }

.text-c-info-1 { color: var(--c-text-info-1); }

.gap-8 { gap: 8px; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }

.bg-info { background-color: var(--c-bg-info-1); }

.rounded-6 { border-radius: 6px; }

.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }
.p-48 { padding: 48px; }
.p-256 { padding: 256px; }
.p-512 { padding: 512px; }

.pt-8 { padding-top: 8px; }
.pt-12 { padding-top: 12px; }
.pt-16 { padding-top: 16px; }
.pt-24 { padding-top: 24px; }
.pt-48 { padding-top: 48px; }
.pt-256 { padding-top: 256px; }
.pt-512 { padding-top: 512px; }

.pr-8 { padding-right: 8px; }
.pr-12 { padding-right: 12px; }
.pr-16 { padding-right: 16px; }
.pr-24 { padding-right: 24px; }
.pr-48 { padding-right: 48px; }
.pr-256 { padding-right: 256px; }
.pr-512 { padding-right: 512px; }

.pb-8 { padding-bottom: 8px; }
.pb-12 { padding-bottom: 12px; }
.pb-16 { padding-bottom: 16px; }
.pb-24 { padding-bottom: 24px; }
.pb-48 { padding-bottom: 48px; }
.pb-256 { padding-bottom: 256px; }
.pb-512 { padding-bottom: 512px; }

.pl-8 { padding-left: 8px; }
.pl-12 { padding-left: 12px; }
.pl-16 { padding-left: 16px; }
.pl-24 { padding-left: 24px; }
.pl-48 { padding-left: 48px; }
.pl-256 { padding-left: 256px; }
.pl-512 { padding-left: 512px; }

.px-8 { padding-right: 8px; padding-left: 8px; }
.px-12 { padding-right: 12px; padding-left: 12px; }
.px-16 { padding-right: 16px; padding-left: 16px; }
.px-24 { padding-right: 24px; padding-left: 24px; }
.px-48 { padding-right: 48px; padding-left: 48px; }
.px-256 { padding-right: 256px; padding-left: 256px; }
.px-512 { padding-right: 512px; padding-left: 512px; }

.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }
.py-48 { padding-top: 48px; padding-bottom: 48px; }
.py-256 { padding-top: 256px; padding-bottom: 256px; }
.py-512 { padding-top: 512px; padding-bottom: 512px; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.grid { display: grid; }

.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

.pl-24 { padding-left: 24px; }
.pr-16 { padding-right: 16px; }

.py-8 { padding-top: 8px; padding-bottom: 8px; }
.px-24 { padding-right: 24px; padding-left: 24px; }
.gap-y-8 { row-gap: 8px; }
.gap-y-12 { row-gap: 12px; }
.gap-y-16 { row-gap: 16px; }
.gap-y-24 { row-gap: 24px; }
.gap-y-32 { row-gap: 32px; }

.max-w-128 { max-width: 128px; }
.max-w-192 { max-width: 192px; }
.max-w-256 { max-width: 256px; }
.max-w-512 { max-width: 512px; }
.max-w-592 { max-width: 592px; }
.max-w-640 { max-width: 640px; }
.max-w-768 { max-width: 768px; }

.h-64 { height: 64px; }

.text-14 { font-size: 14px !important; }
.font-w-600 { font-weight: 600; }

.bg-info { background-color: var(--c-bg-info-1); }

.rounded-6 { border-radius: 6px; }
4 changes: 2 additions & 2 deletions docs/components/card.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import SControlText from 'sefirot/components/SControlText.vue'
<SCardBlock size="small" class="pl-24 pr-16">
<SControl>
<SControlLeft>
<SControlText class="font-w-600">
<SControlText class="font-600">
Header title
</SControlText>
</SControlLeft>
Expand Down Expand Up @@ -80,7 +80,7 @@ import SControlText from '@globalbrain/sefirot/lib/components/SControlText.vue'
<SCardBlock size="small" class="s-pl-24 s-pr-16">
<SControl>
<SControlLeft>
<SControlText class="s-font-w-600">
<SControlText class="s-font-600">
Header title
</SControlText>
</SControlLeft>
Expand Down
2 changes: 1 addition & 1 deletion docs/components/m.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# SM <Badge text="3.2.0" />

`<SM>`, where "M" stands for "Motion", allows element to animate when it enters or leaves the viewport. See in action on [Histoire](https://story.sefirot.globalbrains.com/story/stories-components-sm-01-playground-story-vue).
`<SM>`, where "M" stands for "Motion", allows element to animate when it enters or leaves the viewport. See in action on [playground](/stories/m-01-playground).

## Overview

Expand Down
2 changes: 1 addition & 1 deletion docs/components/w.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# SW <Badge text="3.3.0" />

`<SW>`, where "W" stands for "Word", is a simple helper component that marks separated words as a single word and prevent them from being word broken. See in action on [Histoire](https://story.sefirot.globalbrains.com/story/stories-components-sw-01-playground-story-vue).
`<SW>`, where "W" stands for "Word", is a simple helper component that marks separated words as a single word and prevent them from being word broken. See in action on [playground](/stories/w-01-playground).

## Overview

Expand Down
22 changes: 22 additions & 0 deletions docs/stories/_frame.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
layout: false
---

<div id="vp-app" ref="el"></div>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { createApp } from 'whyframe:app'
import styles from 'sefirot/styles/bootstrap.css?inline'

const el = ref<HTMLDivElement>()

onMounted(() => {
if (!el.value || !window.frameElement) return
createApp(el.value)
;(window.frameElement as HTMLIFrameElement).style.visibility = 'visible'
})
</script>

<style scoped>
</style>
2 changes: 1 addition & 1 deletion docs/stories/components/SW.01_Playground.story.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ const title = 'Components / SW / 01. Playground'

<template>
<Board :title="title">
<p class="max-w-512">Resize the window and try line breaking this text line. <SW><span class="text-c-info-1">This word</span></SW> should not be word borken and should be treated as a single word. For another example, <SW><span class="text-c-info-1">this word</span></SW> should also be broke together.</p>
<p class="max-w-512">Resize the window and try line breaking this text line. <SW><span class="text-c-info-1">This word</span></SW> should not be broken and should be treated as a single word. For another example, <SW><span class="text-c-info-1">this word</span></SW> should also be broke together.</p>
</Board>
</template>
5 changes: 1 addition & 4 deletions env.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,2 @@
/// <reference types="@histoire/plugin-vue/components.js" />
/// <reference types="@whyframe/core/global" />
/// <reference types="./client" />

declare const __STORY_HOST__: string
declare const __DOCS_HOST__: string
31 changes: 0 additions & 31 deletions histoire.config.ts

This file was deleted.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,8 @@
"@vuelidate/core": "^2.0.3",
"@vuelidate/validators": "^2.0.4",
"@vueuse/core": "^12.7.0",
"@whyframe/core": "^0.1.12",
"@whyframe/vue": "^0.1.7",
"body-scroll-lock": "4.0.0-beta.0",
"dayjs": "^1.11.13",
"eslint": "8.57.0",
Expand All @@ -107,6 +109,8 @@
"pinia": "^3.0.1",
"postcss": "^8.5.3",
"postcss-nested": "^7.0.2",
"prettier": "^3.5.2",
"prettier-plugin-vitepress": "^0.0.8",
"punycode": "^2.3.1",
"release-it": "^18.1.2",
"typescript": "~5.7.3",
Expand Down
Loading

0 comments on commit f656629

Please sign in to comment.