@ohos-ports/histoire-app 1.0.0-beta.0

package/tailwind.config.cjs

@@ -0,0 +1,137 @@
+const path = require('pathe')
+const defaultColors = require('tailwindcss/colors')
+const inheritedConfig = require('../../tailwind.config.cjs')
+
+// Colors
+
+function withOpacityValue(variable) {
+  return ({ opacityValue }) => {
+    if (opacityValue === undefined) {
+      return `rgb(var(${variable}))`
+    }
+    return `rgb(var(${variable}) / ${opacityValue})`
+  }
+}
+
+const colorKeys = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+const grayKeys = [...colorKeys, 750, 850, 950]
+const themedColors = ['primary', 'gray'].reduce((acc, color) => {
+  const keys = (color === 'gray' ? grayKeys : colorKeys)
+  for (const key of keys) {
+    acc[`${color}-${key}`] = withOpacityValue(`--_histoire-color-${color}-${key}`)
+  }
+  return acc
+}, {})
+
+const excludedDefaultColors = [
+  // Grays
+  'slate',
+  'gray',
+  'zinc',
+  'neutral',
+  'stone',
+  // Deprecated colors
+  'lightBlue',
+  'warmGray',
+  'trueGray',
+  'coolGray',
+  'blueGray',
+]
+
+const includedDefaultColors = {}
+for (const key in defaultColors) {
+  if (!excludedDefaultColors.includes(key)) {
+    includedDefaultColors[key] = defaultColors[key]
+  }
+}
+
+const colors = {
+  ...includedDefaultColors,
+  white: '#fff',
+  black: '#000',
+  transparent: 'transparent',
+  ...themedColors,
+}
+
+module.exports = {
+  ...inheritedConfig,
+  prefix: 'htw-',
+  content: [
+    path.resolve(__dirname, './src/**/*.{vue,js,ts,jsx,tsx,md}'),
+    // Include controls CSS directly
+    path.resolve(__dirname, '../histoire-controls/src/**/*.{vue,js,ts,jsx,tsx,md}'),
+  ],
+  corePlugins: {
+    preflight: false,
+  },
+}
+
+delete module.exports.theme.extend.colors.primary
+delete module.exports.theme.extend.colors.gray
+module.exports.theme.colors = colors
+
+module.exports.plugins.push(require('@tailwindcss/typography'))
+// prose-a:htw-text-primary-500 prose-headings:htw-mb-2 prose-headings:htw-mt-4 first:prose-headings:htw-mt-0 prose-blockquote:htw-ml-0
+module.exports.theme.extend.typography = theme => ({
+  DEFAULT: {
+    css: {
+      'a': {
+        'color': theme('colors.primary-500'),
+        'textDecoration': 'none',
+
+        '&:hover': {
+          textDecoration: 'underline',
+        },
+      },
+
+      'h1, h2, h3, h4, th': {
+        'marginBottom': '0.75rem',
+
+        '&:not(:first-child)': {
+          marginTop: '1.25rem',
+        },
+      },
+
+      '--tw-prose-invert-quote-borders': theme('colors.gray-800'),
+      '--tw-prose-invert-hr': theme('colors.gray-800'),
+
+      'blockquote': {
+        'marginLeft': 0,
+        'marginRight': 0,
+        'backgroundColor': theme('colors.gray-100'),
+        'padding': '.25rem .375rem',
+
+        '& p:first-child': {
+          marginTop: 0,
+        },
+
+        '& p:last-child': {
+          marginBottom: 0,
+        },
+
+        '.dark &': {
+          backgroundColor: theme('colors.gray-750'),
+        },
+      },
+
+      '--tw-prose-invert-bullets': theme('colors.gray-500'),
+
+      'li': {
+        marginTop: '0.1rem',
+        marginBottom: '0.1rem',
+      },
+
+      'code': {
+        'backgroundColor': theme('colors.gray-500 / 20%'),
+        'fontWeight': 'normal',
+        'padding': '0.05rem 0.5rem',
+        'borderRadius': '0.25rem',
+        'fontSize': '0.8rem',
+
+        '&::before, &::after': {
+          display: 'none',
+        },
+      },
+    },
+  },
+})

package/tsconfig.json

@@ -0,0 +1,53 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    // Volar
+    "jsx": "preserve",
+    "lib": [
+      "ESNext",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "baseUrl": ".",
+    "rootDir": "src",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    // Alias
+    "paths": {
+      "floating-vue": ["node_modules/@histoire/vendors/floating-vue"],
+      "@iconify/vue": ["node_modules/@histoire/vendors/iconify"],
+      "pinia": ["node_modules/@histoire/vendors/pinia"],
+      "scroll-into-view-if-needed": ["node_modules/@histoire/vendors/scroll"],
+      "vue-router": ["node_modules/@histoire/vendors/vue-router"],
+      "@vueuse/core": ["node_modules/@histoire/vendors/vue-use"],
+      "vue": ["node_modules/@histoire/vendors/vue"]
+    },
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ],
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "alwaysStrict": true,
+    // Strict
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    "declaration": false,
+    "outDir": "dist",
+    "removeComments": false,
+    "sourceMap": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "preserveWatchOutput": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "generated/**/*",
+    "dist/**/*",
+    "src/**/*.spec.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,88 @@
+import vue from '@vitejs/plugin-vue'
+import fs from 'fs-extra'
+import { globbySync } from 'globby'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    {
+      name: 'histoire:preserve:import.meta',
+      enforce: 'pre',
+      transform(code) {
+        if (code.includes('import.meta')) {
+          return {
+            code: code.replace(/import\.meta/g, 'import__meta'),
+          }
+        }
+      },
+      closeBundle() {
+        try {
+          const files = globbySync('./dist/bundled/**/*.js')
+          for (const file of files) {
+            const content = fs.readFileSync(file, 'utf-8')
+            if (content.includes('import__meta')) {
+              fs.writeFileSync(file, content.replace(/import__meta/g, 'import.meta'), 'utf-8')
+            }
+          }
+        }
+        catch (e) {
+          console.error(e)
+        }
+      },
+    },
+  ],
+
+  resolve: {
+    alias: {
+      'floating-vue': '@histoire/vendors/floating-vue',
+      '@iconify/vue': '@histoire/vendors/iconify',
+      'pinia': '@histoire/vendors/pinia',
+      'scroll-into-view-if-needed': '@histoire/vendors/scroll',
+      'vue-router': '@histoire/vendors/vue-router',
+      '@vueuse/core': '@histoire/vendors/vue-use',
+      'vue': '@histoire/vendors/vue',
+    },
+  },
+
+  build: {
+    emptyOutDir: false,
+    outDir: 'dist/bundled',
+    lib: {
+      entry: '',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: [
+        /\$histoire/,
+        /@histoire/,
+        // eslint-disable-next-line ts/no-require-imports
+        ...Object.keys(require('./package.json').dependencies),
+      ],
+
+      input: [
+        'src/app/api.ts',
+        'src/app/index.ts',
+        'src/app/sandbox.ts',
+      ],
+
+      output: {
+        // manualChunks (id) {
+        //   if (id.includes('node_modules')) {
+        //     return 'vendor'
+        //   }
+        // },
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].js',
+        assetFileNames: '[name][extname]',
+        // hoistTransitiveImports: false,
+        preserveModules: true,
+        preserveModulesRoot: 'src/app',
+      },
+      treeshake: false,
+      preserveEntrySignatures: 'strict',
+    },
+    cssCodeSplit: false,
+    minify: false,
+  },
+})