refactor: add simple SVG file loader

itsjavi · Sep 3, 2023 · cff5373 · cff5373
1 parent cf6ecb8
commit cff5373
Show file tree

Hide file tree

Showing 14 changed files with 134 additions and 10 deletions.
diff --git a/packages/docs/.storylite/config.tsx b/packages/docs/.storylite/config.tsx
@@ -1,7 +1,7 @@
 import { SLAddonPropsWithoutId, SLAppComponentProps } from '@storylite/storylite'
 import { BoxIcon, GithubIcon, ZapIcon } from 'lucide-react'
 
-const config: SLAppComponentProps = {
+const config: Partial<SLAppComponentProps> = {
   title: ' ⚡️ StoryLite',
   defaultStory: 'index-default',
   useIframeStyles: false,

diff --git a/packages/docs/public/logo.svg b/packages/docs/public/logo.svg
diff --git a/packages/docs/stories/index.stories.tsx b/packages/docs/stories/index.stories.tsx
@@ -13,9 +13,8 @@ export default {
   renderFrame: 'root',
   component: () => (
     <div>
-      <img src="logo.svg" alt="StoryLite Logo" />
-      <h1>⚡️ StoryLite,</h1>
-      <h3>a lightweight alternative to StoryBook.</h3>
+      <img src="logo.svg" width={64} height={64} alt="StoryLite Logo" />
+      <h1>StoryLite, a lightweight alternative to StoryBook.</h1>
       <p>
         <b>StoryLite</b> is a modern and lightweight toolkit for crafting and managing design
         systems and components with ease. Inspired by the popular StoryBook UI and powered by

diff --git a/packages/examples/react/.storylite/config.tsx b/packages/examples/react/.storylite/config.tsx
@@ -1,6 +1,6 @@
 import { SLAddonPropsWithoutId, SLAppComponentProps } from '@storylite/storylite'
 
-const config: SLAppComponentProps = {
+const config: Partial<SLAppComponentProps> = {
   title: ' ⚡️ StoryLite React',
   defaultStory: 'index-default',
   useIframeStyles: false,

diff --git a/packages/examples/react/public/logo.svg b/packages/examples/react/public/logo.svg
diff --git a/packages/storylite/assets/logo.svg b/packages/storylite/assets/logo.svg
diff --git a/packages/storylite/declaration.d.ts b/packages/storylite/declaration.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string
+  export default content
+}
diff --git a/packages/storylite/public/vite.svg b/packages/storylite/public/vite.svg
diff --git a/packages/storylite/src/app/stores/DefaultTitle.tsx b/packages/storylite/src/app/stores/DefaultTitle.tsx
@@ -0,0 +1,14 @@
+import logo from '@/assets/logo.svg'
+import { InlineHtml } from '@/components/InlineHtml'
+
+export function DefaultTitle(): JSX.Element {
+  return (
+    <>
+      <InlineHtml style={{ width: '24px', height: '24px' }}>{logo}</InlineHtml> StoryLite
+    </>
+  )
+}
+
+export function getDefaultTitle(): JSX.Element {
+  return <DefaultTitle />
+}
diff --git a/packages/storylite/src/app/stores/global.ts b/packages/storylite/src/app/stores/global.ts
@@ -8,6 +8,7 @@ import {
 } from '@/components/addons/getToolbarAddons'
 import { SLAddonsMap, SLParameters, SLUserDefinedAddons, StoryMap, StoryModuleMap } from '@/types'
 
+import { getDefaultTitle } from './DefaultTitle'
 import { StoryLiteActions, StoryLiteState } from './global.types'
 
 const builtinAddons: SLAddonsMap = new Map(
@@ -21,7 +22,7 @@ const defaultState: StoryLiteState = {
     standalone: false,
   },
   config: {
-    title: 'Story Lite',
+    title: getDefaultTitle(),
     defaultStory: 'index',
     iframeProps: {},
     useIframeStyles: true,

diff --git a/packages/storylite/src/components/InlineHtml.tsx b/packages/storylite/src/components/InlineHtml.tsx
@@ -0,0 +1,16 @@
+import { HTMLProps } from 'react'
+import { cn } from '@r1stack/cn'
+
+type InlineHtmlProps = {
+  children: string
+} & HTMLProps<HTMLSpanElement>
+
+export function InlineHtml({ children, className, ...rest }: InlineHtmlProps): JSX.Element {
+  return (
+    <span
+      className={cn('storylite-inlinehtml', className)}
+      dangerouslySetInnerHTML={{ __html: children }}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/storylite/src/styles/base.css b/packages/storylite/src/styles/base.css
@@ -73,3 +73,8 @@
 :where(.storylite-iframe:not(.storylite-iframe--default-styles)) {
   background: transparent;
 }
+
+.storylite-inlinehtml {
+  display: inline-block;
+  vertical-align: middle;
+}
diff --git a/packages/storylite/tsconfig.json b/packages/storylite/tsconfig.json
@@ -18,10 +18,11 @@
     "noEmit": true,
     "baseUrl": ".",
     "paths": {
+      "@/assets/*": ["./assets/*"],
       "@/": ["./src/"],
       "@/*": ["./src/*"]
     },
     "types": ["node", "jest", "react", "react-dom"]
   },
-  "include": ["src", "*.ts"]
+  "include": ["src", "assets", "*.ts"]
 }
diff --git a/packages/storylite/tsup.config.ts b/packages/storylite/tsup.config.ts
@@ -29,6 +29,9 @@ export default defineConfig([
         types: ['node'],
       },
     },
+    loader: {
+      '.svg': 'text',
+    },
     sourcemap: true,
     splitting: true,
     minify: false,