Fix/file loading (#3019)

* fix(docs): file being minified on build

* feat(docs): added css variables table

* chore(docs): remove old css variables file

* fix(docs): css variables table design

* chore: remove extra headings

* fix(inner-loading): css variables names

* fix(docs): ignore css variables with incorrect name

* fix: refactor toast docs page

* fix(docs): throw correct error if file not found

packages/docs/modules/page-config/blocks/api/index.ts

@@ -3,11 +3,17 @@ import { definePageConfigBlock } from '../../types'
 import Component from './index.vue'
 import { type ManualApiOptions } from './types';
 
-const setup = (componentName: string, component: DefineComponent, manual?: ManualApiOptions) => {
+const setup = (
+  componentName: string, 
+  component: DefineComponent,
+  cssVariables: string,
+  manual?: ManualApiOptions
+) => {
   return {
     type: 'api' as const,
     componentName,
     component,
+    cssVariables,
     manual,
   }
 }

packages/docs/modules/page-config/blocks/api/index.vue

@@ -4,17 +4,24 @@ import { parseComponent } from './component-parser'
 import merge from 'lodash/merge'
 import camelCase from 'lodash/camelCase'
 import ApiTable from './components/api-table.vue';
-import { ManualApiOptions } from './types';
+import { CssVariables, ManualApiOptions } from './types';
 
 const props = defineProps({
   componentName: {
     type: String,
+    required: true,
   },
   component: {
-    type: Object as PropType<DefineComponent>
+    type: Object as PropType<DefineComponent>,
+    required: true,
   },
   manual: {
-    type: Object as PropType<ManualApiOptions>
+    type: Object as PropType<ManualApiOptions>,
+    default: () => {},
+  },
+  cssVariables: {
+    type: Array as PropType<CssVariables>,
+    required: true,
   }
 })
 
@@ -75,23 +82,28 @@ const eventsOptions = Object
   .entries(withManual.events || {})
   .filter(([key, prop]) => !prop.hidden)
   .map(([key, prop]) => ({
-    name: { name: key, ...prop },
+    name: key,
     description: t(getTranslation('events', key)),
   }))
 
 const slotsOptions = Object
   .entries(withManual.slots || {})
   .map(([key, prop]) => ({
-    name: { name: key, ...prop },
+    name: key,
     description: t(getTranslation('slots', key)),
   }))
 
 const methodsOptions = Object
   .entries(withManual.methods || {})
   .map(([key, prop]) => ({
-    name: { name: key, ...prop },
+    name: key,
     description: t(getTranslation('methods', key)),
   }))
+
+const cssVariablesOptions = props.cssVariables.map(([name, value, comment]) => ({
+  name, value, /* comment */ // TODO: Enable comment when everywhere is used correct comments
+  // TODO: Or add tanslations after i18n splitted
+}))
 </script>
 
 <template>
@@ -118,49 +130,33 @@ const methodsOptions = Object
       title="Events"
       :columns="['Name', 'Description']"
       :data="eventsOptions"
-    >
-      <template #name="{ data }">
-        <strong>{{ data.name }}</strong>
-        <va-badge
-          v-if="data.required"
-          class="ml-2"
-          text="required"
-          color="primary"
-        />
-      </template>
-    </ApiTable>
+    />
 
     <ApiTable
       v-if="slotsOptions.length > 0"
       title="Slots"
       :columns="['Name', 'Description']"
       :data="slotsOptions"
-    >
-      <template #name="{ data }">
-        <strong>{{ data.name }}</strong>
-        <va-badge
-          v-if="data.required"
-          class="ml-2"
-          text="required"
-          color="primary"
-        />
-      </template>
-    </ApiTable>
+    />
 
     <ApiTable
       v-if="methodsOptions.length > 0"
       title="Methods"
       :columns="['Name', 'Description']"
       :data="methodsOptions"
+    />
+
+    <ApiTable
+      v-if="cssVariablesOptions.length > 0"
+      title="CSS variables"
+      :columns="['Name', 'Default Value']"
+      :data="cssVariablesOptions"
     >
       <template #name="{ data }">
-        <strong>{{ data.name }}</strong>
-        <va-badge
-          v-if="data.required"
-          class="ml-2"
-          text="required"
-          color="primary"
-        />
+        <strong class="va-text-code">{{ data }}</strong>
+      </template>
+      <template #value="{ data }">
+        <span class="va-text-code va-text-secondary">{{ data }}</span>
       </template>
     </ApiTable>
   </va-content>

packages/docs/modules/page-config/blocks/api/transform.ts

@@ -1,4 +1,33 @@
+import kebabCase from 'lodash/kebabCase';
+import { readFile } from 'fs/promises';
 import { defineBlockTransform } from "../../compiler/define-block-transform";
+import { CssVariables } from "./types";
+
+const parseCssComment = (line: string) => 
+  (line.match(/\/\/(.*)|\/\*(.*)\*\//) || []).slice(1).filter((s) => Boolean(s)).join('').trim()
+const parseCssVariables = (css: string | undefined): CssVariables => {
+  if (!css) { return [] }
+
+  const lines = css.split('\n')
+  const variables: CssVariables = []
+
+  lines.forEach((line, index, lines) => {
+    const variable = (line.match(/(--va-.*)?:(.*)?;/) || []).slice(1)
+
+    if (variable.length) {
+      const comment = parseCssComment(lines[index - 1] || '')
+      if (!variable[0] || !variable[1]) { return }
+      variables.push([variable[0], variable[1], comment])
+    }
+  })
+
+  return variables
+}
+
+const readCssVariables = async (path: string | undefined) => {
+  if (!path) { return '' }
+  return (await readFile(path, 'utf-8')).toString()
+}
 
 export default defineBlockTransform(async function (block) {
   if (block.type !== 'api') { return }
@@ -7,5 +36,9 @@ export default defineBlockTransform(async function (block) {
   const importPath = (await this.importer.resolveAbsolutePath('vuestic-ui'))!
   const importComponent = this.importer.importNamed(importName, importPath)
 
-  return block.replaceArgCode(0, `'${importName}', ${importComponent}`)
+  const cssVariablesPath = await this.importer.resolveAbsolutePath(`vuestic-ui/src/components/${kebabCase(importName)}/_variables.scss`)
+  const cssVariablesFile = await readCssVariables(cssVariablesPath)
+  const cssVariables = JSON.stringify(parseCssVariables(cssVariablesFile))
+
+  return block.replaceArgCode(0, `'${importName}', ${importComponent}, ${cssVariables}`)
 })

packages/docs/modules/page-config/blocks/api/types.ts

@@ -49,3 +49,6 @@ export type ManualApiOptions = {
   events?: Record<string, ManualEventApiOptions>;
   slots?: Record<string, ManualSlotApiOptions>;
 }
+
+/** Name, Value, Comment */
+export type CssVariables = [string, string, string | undefined][]

packages/docs/modules/page-config/blocks/file/transform.ts

@@ -1,13 +1,20 @@
 import { defineBlockTransform } from "../../compiler/define-block-transform";
 import { extname } from 'path'
+import { readFile } from 'fs/promises'
 
 export default defineBlockTransform(async function (block) {
   if (block.type !== 'file') { return }
 
   const importName = block.args[0].slice(1, -1)
-  const importPath = (await this.importer.resolveAbsolutePath(`${importName}`))!
-  const importComponent = this.importer.importDefault('file', `${importPath}?raw`)
+  const importPath = (await this.importer.resolveAbsolutePath(`${importName}`))
+
+  if (!importPath) {
+    throw new Error(`Cannot find file ${importName}`)
+  }
+
+  const content = (await readFile(importPath, 'utf-8')).toString()
+  const contentEscaped = JSON.stringify(content)
   const importExt = block.args[1] || `'${extname(importPath).slice(1)}'`
 
-  return block.replaceArgCode(0, `${importComponent}, ${importExt}`)
+  return block.replaceArgCode(0, `${contentEscaped}, ${importExt}`)
 })

packages/docs/page-config/ui-elements/affix/index.ts

@@ -12,8 +12,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaAffix", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-affix/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/alert/index.ts

@@ -26,8 +26,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaAlert", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-alert/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/app-bar/index.ts

@@ -13,8 +13,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaAppBar", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-app-bar/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/aspect-ratio/index.ts

@@ -14,7 +14,5 @@ export default definePageConfig({
     block.subtitle("all.api"),
     block.api("VaAspectRatio", apiOptions),
 
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-aspect-ratio/_variables.scss")
-  ]
+      ]
 });

packages/docs/page-config/ui-elements/avatar/index.ts

@@ -31,8 +31,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaAvatar", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-avatar/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/backtop/index.ts

@@ -10,8 +10,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaBacktop", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-backtop/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/badge/index.ts

@@ -26,8 +26,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaBadge", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-badge/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/breadcrumbs/index.ts

@@ -21,9 +21,6 @@ export default definePageConfig({
     block.paragraph("breadcrumbs.api.item.text"),
     block.api("VaBreadcrumbsItem", vaBreadcrumbsItemApiOptions),
 
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-breadcrumbs/_variables.scss"),
-
     block.subtitle("all.faq"),
     block.headline("breadcrumbs.faq.questions[0].question"),
     block.paragraph("breadcrumbs.faq.questions[0].answer"),

packages/docs/page-config/ui-elements/button-dropdown/index.ts

@@ -19,8 +19,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaButtonDropdown", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-button-dropdown/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/button-group/index.ts

@@ -16,8 +16,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaButtonGroup", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-button-group/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/button/index.ts

@@ -24,8 +24,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaButton", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-button/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/card/index.ts

@@ -26,9 +26,6 @@ export default definePageConfig({
     block.subtitle("all.api"),
     block.api("VaCard", apiOptions),
 
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-card/_variables.scss"),
-
     block.subtitle("all.faq"),
     block.headline("card.faq.questions[0].question"),
     block.paragraph("card.faq.questions[0].answer"),

packages/docs/page-config/ui-elements/carousel/index.ts

@@ -30,8 +30,5 @@ export default definePageConfig({
     block.example("Swipe"),
 
     block.api("VaCarousel", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-carousel/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/checkbox/index.ts

@@ -16,8 +16,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaCheckbox", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-checkbox/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/chip/index.ts

@@ -22,8 +22,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaChip", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-chip/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/collapse/index.ts

@@ -20,8 +20,5 @@ export default definePageConfig({
     block.example("Flat"),
 
     block.api("VaCollapse", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-collapse/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/counter/index.ts

@@ -1,6 +1,3 @@
-import { ApiDocsBlock } from "../../../types/configTypes";
-import { PageGenerationHelper } from "../../../helpers/DocsHelper";
-
 import apiOptions from "./api-options";
 
 export default definePageConfig({
@@ -22,8 +19,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaCounter", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-counter/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/data-table/index.ts

@@ -54,8 +54,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaDataTable", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-data-table/_variables.scss"),
   ],
 });

packages/docs/page-config/ui-elements/date-picker/index.ts

@@ -36,8 +36,5 @@ export default definePageConfig({
 
     block.subtitle("all.api"),
     block.api("VaDatePicker", apiOptions),
-
-    block.subtitle("all.cssVariables"),
-    block.file("vuestic-ui/src/components/va-date-picker/_variables.scss"),
   ],
 });