wip

globalbrain · Feb 27, 2025 · 9be10a3 · 9be10a3
1 parent 1d2ac1c
commit 9be10a3
Show file tree

Hide file tree

Showing 35 changed files with 42 additions and 46 deletions.
diff --git a/docs/.vitepress/config/index.ts b/docs/.vitepress/config/index.ts
@@ -2,13 +2,6 @@ import { type DefaultTheme, defineConfig } from 'vitepress'
 import { baseConfig } from '../../../config/vite'
 import { storyPlugin } from './story'
 
-function getStoryHost(): string {
-  if (process.env.CONTEXT !== 'production' && process.env.DEPLOY_PRIME_URL) {
-    return new URL(process.env.DEPLOY_PRIME_URL).host.replace('-docs', '-story')
-  }
-  return 'story.sefirot.globalbrains.com'
-}
-
 export default defineConfig({
   lang: 'en-US',
   title: 'Sefirot',
@@ -19,10 +12,12 @@ export default defineConfig({
 
   vite: {
     ...baseConfig,
-    plugins: [
-      ...baseConfig.plugins!,
-      storyPlugin()
-    ]
+    plugins: [...(baseConfig.plugins || []), storyPlugin()],
+    optimizeDeps: {
+      entries: ['../lib/**/*'],
+      include: ['lodash-es', 'markdown-it > argparse', 'markdown-it > entities'],
+      exclude: ['markdown-it']
+    }
   },
 
   themeConfig: {
@@ -31,7 +26,7 @@ export default defineConfig({
     },
 
     nav: [
-      { text: 'Playground', link: `https://${getStoryHost()}` }
+      { text: 'Playground', link: '/stories/action-list-01-playground' }
     ],
 
     outline: [2, 3],

diff --git a/docs/.vitepress/theme/components/Board.vue b/docs/.vitepress/theme/components/Board.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import SButton from 'sefirot/components/SButton.vue'
+import 'sefirot/styles/bootstrap.css'
 
 defineProps<{
   title: string
@@ -8,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="Board">
+  <div class="Board vp-raw">
     <div class="b-root">
       <div class="b-menu">
         <div class="b-title">{{ title }}</div>

diff --git a/docs/.vitepress/theme/components/Showcase.vue b/docs/.vitepress/theme/components/Showcase.vue
@@ -11,7 +11,7 @@ defineProps<{
   <div class="Showcase">
     <div class="header">
       <p class="path">@globalbrain/sefirot/lib{{ path }}</p>
-      <a v-if="story" class="button" :href="`/stories/${story}`" target="_blank">
+      <a v-if="story" class="button" :href="`/stories/${story}`">
         <SButton size="mini" mode="mute" label="View in Playground" tag="span" />
       </a>
     </div>

diff --git a/docs/components/action-list.md b/docs/components/action-list.md
@@ -17,7 +17,7 @@ const list: ActionList = [
 
 <Showcase
   path="/components/SActionList.vue"
-  story="/stories-components-sactionlist-01-playground-story-vue"
+  story="action-list-01-playground"
 >
   <SActionList :list="list" />
 </Showcase>

diff --git a/docs/components/alert.md b/docs/components/alert.md
@@ -8,7 +8,7 @@ import SAlert from 'sefirot/components/SAlert.vue'
 
 <Showcase
   path="/components/SAlert.vue"
-  story="/stories-components-salert-01-playground-story-vue"
+  story="alert-01-playground"
 >
   <SAlert mode="info">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href="#">dolore magna</a> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

diff --git a/docs/components/avatar-stack.md b/docs/components/avatar-stack.md
@@ -15,7 +15,7 @@ The `SAvatarStack` component is used to display a stack of avatars. It is useful
 
 <Showcase
   path="/components/SAvatarStack.vue"
-  story="/stories-components-savatarstack-01-playground-story-vue"
+  story="avatar-stack-01-playground"
 >
   <div class="flex flex-wrap gap-16">
     <SAvatarStack :avatars="avatars" />

diff --git a/docs/components/avatar.md b/docs/components/avatar.md
@@ -8,7 +8,7 @@ import SAvatar from 'sefirot/components/SAvatar.vue'
 
 <Showcase
   path="/components/SAvatar.vue"
-  story="/stories-components-savatar-01-playground-story-vue"
+  story="avatar-01-playground"
 >
   <div class="flex flex-wrap gap-16">
     <SAvatar avatar="https://github.com/kiaking.png" />

diff --git a/docs/components/button-group.md b/docs/components/button-group.md
@@ -9,7 +9,7 @@ import SButtonGroup from 'sefirot/components/SButtonGroup.vue'
 
 <Showcase
   path="/components/SButtonGroup.vue"
-  story="/stories-components-sbuttongroup-01-playground-story-vue"
+  story="button-group-01-playground"
 >
   <SButtonGroup>
     <SButton mode="mute" label="Left" />

diff --git a/docs/components/button.md b/docs/components/button.md
@@ -10,7 +10,7 @@ const modes = ['default', 'neutral', 'info', 'success', 'warning', 'danger'] as
 
 <Showcase
   path="/components/SButton.vue"
-  story="/stories-components-sbutton-01-playground-story-vue"
+  story="button-01-playground"
 >
   <div class="flex flex-wrap gap-12">
     <SButton v-for="m in modes" :key="m" :mode="m" label="Button" />

diff --git a/docs/components/card.md b/docs/components/card.md
@@ -20,7 +20,7 @@ import SControlText from 'sefirot/components/SControlText.vue'
 
 <Showcase
   path="/components/SCard.vue"
-  story="/stories-components-scard-01-playground-story-vue"
+  story="card-01-playground"
 >
   <div class="flex flex-wrap gap-12">
     <SCard>

diff --git a/docs/components/content.md b/docs/components/content.md
@@ -8,7 +8,7 @@ import SContent from 'sefirot/components/SContent.vue'
 
 <Showcase
   path="/components/SContent.vue"
-  story="/stories-components-scontent-01-playground-story-vue"
+  story="content-01-playground"
 >
   <SContent>
     <h2>Title of the section</h2>

diff --git a/docs/components/desc.md b/docs/components/desc.md
@@ -14,7 +14,7 @@ import SDescText from 'sefirot/components/SDescText.vue'
 
 <Showcase
   path="/components/SDesc.vue"
-  story="/stories-components-sdesc-01-playground-story-vue"
+  story="desc-01-playground"
 >
   <div>
     <SDesc cols="2" gap="24">

diff --git a/docs/components/divider.md b/docs/components/divider.md
@@ -8,7 +8,7 @@ import SDivider from 'sefirot/components/SDivider.vue'
 
 <Showcase
   path="/components/SDivider.vue"
-  story="/stories-components-sdivider-01-playground-story-vue"
+  story="divider-01-playground"
 >
   <SDivider />
 </Showcase>

diff --git a/docs/components/grid.md b/docs/components/grid.md
@@ -9,7 +9,7 @@ import SGridItem from 'sefirot/components/SGridItem.vue'
 
 <Showcase
   path="/components/SGrid.vue"
-  story="/stories-components-sgrid-01-playground-story-vue"
+  story="grid-01-playground"
 >
   <SGrid cols="4" gap="24">
     <SGridItem>

diff --git a/docs/components/head.md b/docs/components/head.md
@@ -10,7 +10,7 @@ import SHeadTitle from 'sefirot/components/SHeadTitle.vue'
 
 <Showcase
   path="/components/SHead.vue"
-  story="/stories-components-shead-01-playground-story-vue"
+  story="head-01-playground"
 >
   <SHead>
     <SHeadTitle>The head title</SHeadTitle>

diff --git a/docs/components/indicator.md b/docs/components/indicator.md
@@ -10,7 +10,7 @@ const states = ['pending', 'ready', 'queued', 'running', 'completed', 'failed']
 
 <Showcase
   path="/components/SIndicator.vue"
-  story="/stories-components-sindicator-01-playground-story-vue"
+  story="indicator-01-playground"
 >
   <div class="flex flex-wrap gap-16">
     <SIndicator v-for="s in states" :key="s" size="mini" :state="s" />

diff --git a/docs/components/input-addon.md b/docs/components/input-addon.md
@@ -12,7 +12,7 @@ const input = ref<string | null>(null)
 
 <Showcase
   path="/components/SInputText.vue"
-  story="/stories-components-sinputtext-02-addons-story-vue"
+  story="input-text-02-addons"
 >
   <SInputText placeholder="johndoe" v-model="input">
     <template #addon-before>

diff --git a/docs/components/input-checkbox.md b/docs/components/input-checkbox.md
@@ -11,7 +11,7 @@ const input = ref(false)
 
 <Showcase
   path="/components/SInputCheckbox.vue"
-  story="/stories-components-sinputcheckbox-01-playground-story-vue"
+  story="input-checkbox-01-playground"
 >
   <SInputCheckbox text="Item 001" v-model="input" />
 </Showcase>

diff --git a/docs/components/input-checkboxes.md b/docs/components/input-checkboxes.md
@@ -17,7 +17,7 @@ const options = [
 
 <Showcase
   path="/components/SInputCheckboxes.vue"
-  story="/stories-components-sinputcheckboxes-01-playground-story-vue"
+  story="input-checkboxes-01-playground"
 >
   <SInputCheckboxes :options="options" v-model="input" />
 </Showcase>

diff --git a/docs/components/input-file-upload.md b/docs/components/input-file-upload.md
@@ -11,7 +11,7 @@ const input = ref([])
 
 <Showcase
   path="/components/SInputFileUpload.vue"
-  story="/stories-components-sinputfileupload-01-playground-story-vue"
+  story="input-file-upload-01-playground"
 >
   <SInputFileUpload v-model="input" />
 </Showcase>

diff --git a/docs/components/input-file.md b/docs/components/input-file.md
@@ -11,7 +11,7 @@ const input = ref(null)
 
 <Showcase
   path="/components/SInputFile.vue"
-  story="/stories-components-sinputfile-01-playground-story-vue"
+  story="input-file-01-playground"
 >
   <SInputFile placeholder="No file choosen" v-model="input" />
 </Showcase>

diff --git a/docs/components/input-hms.md b/docs/components/input-hms.md
@@ -15,7 +15,7 @@ const input = ref({
 
 <Showcase
   path="/components/SSInputHMS.vue"
-  story="/stories-components-sinputhms-01-playground-story-vue"
+  story="input-hms-01-playground"
 >
   <SInputHMS v-model="input" />
 </Showcase>

diff --git a/docs/components/input-image.md b/docs/components/input-image.md
@@ -11,7 +11,7 @@ const input = shallowRef(null)
 
 <Showcase
   path="/components/SInputImage.vue"
-  story="/stories-components-sinputimage-01-playground-story-vue"
+  story="input-image-01-playground"
 >
   <SInputImage help="JPG or PNG. 500KB max." v-model="input" />
 </Showcase>

diff --git a/docs/components/input-number.md b/docs/components/input-number.md
@@ -11,7 +11,7 @@ const input = ref<number | null>(null)
 
 <Showcase
   path="/components/SInputNumber.vue"
-  story="/stories-components-sinputnumber-01-playground-story-vue"
+  story="input-number-01-playground"
 >
   <SInputNumber placeholder="123,456,789" v-model="input" />
 </Showcase>

diff --git a/docs/components/input-radios.md b/docs/components/input-radios.md
@@ -17,7 +17,7 @@ const options = [
 
 <Showcase
   path="/components/SInputRadios.vue"
-  story="/stories-components-sinputradios-01-playground-story-vue"
+  story="input-radios-01-playground"
 >
   <SInputRadios :options="options" v-model="input" />
 </Showcase>

diff --git a/docs/components/input-segments.md b/docs/components/input-segments.md
@@ -18,7 +18,7 @@ const value = ref('table')
 
 <Showcase
   path="/components/SInputSegments.vue"
-  story="/stories-components-sinputsegments-01-playground-story-vue"
+  story="input-segments-01-playground"
 >
   <SInputSegments :options="options" v-model="value" />
 </Showcase>

diff --git a/docs/components/input-select.md b/docs/components/input-select.md
@@ -17,7 +17,7 @@ const options = [
 
 <Showcase
   path="/components/SSInputSelect.vue"
-  story="/stories-components-sinputselect-01-playground-story-vue"
+  story="input-select-01-playground"
 >
   <SInputSelect :options="options" nullable v-model="input" />
 </Showcase>

diff --git a/docs/components/input-switch.md b/docs/components/input-switch.md
@@ -11,7 +11,7 @@ const input = ref(false)
 
 <Showcase
   path="/components/SInputSwitch.vue"
-  story="/stories-components-sinputselect-01-playground-story-vue"
+  story="input-select-01-playground"
 >
   <SInputSwitch v-model="input" />
 </Showcase>

diff --git a/docs/components/input-textarea.md b/docs/components/input-textarea.md
@@ -11,7 +11,7 @@ const input = ref<string | null>(null)
 
 <Showcase
   path="/components/SInputTextarea.vue"
-  story="/stories-components-sinputtextarea-01-playground-story-vue"
+  story="input-textarea-01-playground"
 >
   <SInputTextarea placeholder="Placeholder text" v-model="input" />
 </Showcase>

diff --git a/docs/components/input-ymd.md b/docs/components/input-ymd.md
@@ -15,7 +15,7 @@ const input = ref({
 
 <Showcase
   path="/components/SInputYMD.vue"
-  story="/stories-components-sinputymd-01-playground-story-vue"
+  story="input-ymd-01-playground"
 >
   <SInputYMD v-model="input" />
 </Showcase>

diff --git a/docs/components/pill.md b/docs/components/pill.md
@@ -10,7 +10,7 @@ const modes = ['default', 'mute', 'neutral', 'info', 'success', 'warning', 'dang
 
 <Showcase
   path="/components/SPill.vue"
-  story="/stories-components-spill-01-playground-story-vue"
+  story="pill-01-playground"
 >
   <div class="flex flex-wrap gap-12">
     <SPill v-for="m in modes" :key="m" :mode="m" label="Pill" />

diff --git a/docs/components/state.md b/docs/components/state.md
@@ -10,7 +10,7 @@ const modes = ['default', 'neutral', 'info', 'success', 'warning', 'danger'] as
 
 <Showcase
   path="/components/SState.vue"
-  story="/stories-components-sstate-01-playground-story-vue"
+  story="state-01-playground"
 >
   <div class="flex flex-wrap gap-12">
     <SState v-for="m in modes" :key="m" :mode="m" label="State" />

diff --git a/docs/components/table.md b/docs/components/table.md
@@ -51,7 +51,7 @@ const options = useTable({
 
 <Showcase
   path="/components/STable.vue"
-  story="/stories-components-stable-01-playground-story-vue"
+  story="table-01-playground"
 >
   <ClientOnly>
     <STable class="table" :options="options" />

diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
@@ -8,7 +8,7 @@ import STooltip from 'sefirot/components/STooltip.vue'
 
 <Showcase
   path="/components/STooltip.vue"
-  story="/stories-components-stooltip-01-playground-story-vue"
+  story="tooltip-01-playground"
 >
   <STooltip text="This is a tooltip message.">
     Hover this text.

diff --git a/postcss.config.js b/postcss.config.js
@@ -4,6 +4,6 @@ import { postcssIsolateStyles } from 'vitepress'
 export default {
   plugins: [
     postcssNested(),
-    postcssIsolateStyles({ includeFiles: [/vp-doc\.css/] })
+    postcssIsolateStyles({ includeFiles: [/(?:base|vp-doc)\.css/] })
   ]
 }