add basic Histoire setup for design system/component kit

.gitignore

@@ -9,4 +9,5 @@ node_modules
 .env
 
 # Local Netlify folder
-.netlify
+.netlify
+.histoire

README.md

@@ -65,10 +65,13 @@ See https://swyxkit.netlify.app/ (see [Deploy Logs](https://app.netlify.com/site
     - [Tap targets](https://web.dev/tap-targets/?utm_source=lighthouse&utm_medium=lr)
   - Custom scrollbar https://css-tricks.com/strut-your-stuff-with-a-custom-scrollbar/
   - Defensive CSS touches https://ishadeed.com/article/defensive-css
-- **Code Quality**
+- **Developer Experience**
   - [JSDoc Typechecking](https://swyxkit.netlify.app/how-to-add-jsdoc-typechecking-to-sveltekit)
   - ESLint + Prettier
   - [Nightly lockfile upgrades](https://mobile.twitter.com/FredKSchott/status/1489287560387956736)
+  - Design system sandbox/"Storybook" setup:
+    - `npm run story:dev` to view on http://localhost:6006/. This is also included in your `npm start` command.
+
 
 This is a partial implementation of https://www.swyx.io/the-surprisingly-high-table-stakes-of-modern-blogs/
 
@@ -80,7 +83,7 @@ This is a partial implementation of https://www.swyx.io/the-surprisingly-high-ta
 npx degit https://github.com/sw-yx/swyxkit
 export GH_TOKEN=your_gh_token_here # can skip if just trying out this repo casually
 npm install
-npm run start
+npm run start # launches site locally at http://localhost:5173/ and histoire at http://localhost:6006/
 ```
 
 You should be able to deploy this project straight to Netlify as is, just [like this project is](https://app.netlify.com/sites/swyxkit/deploys/). This project [recently switched](https://github.com/sw-yx/swyxkit/pull/100#issue-1352898457) to use `sveltejs/adapter-auto` (Oct 2022: currently pinned to v72 [because of a netlify issue](https://github.com/sveltejs/kit/issues/6440#issuecomment-1269274541)), so you should also be able to deploy to Vercel and Cloudflare, but this is not regularly tested (please report/help fix issues if you find them)!

histoire.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'histoire'
+import { HstSvelte } from '@histoire/plugin-svelte'
+
+export default defineConfig({
+  setupFile: '/src/histoire-setup.js',
+  plugins: [
+    HstSvelte(),
+  ],
+  // https://histoire.dev/guide/svelte3/hierarchy.html
+  tree: {
+    groups: [
+      {
+        id: 'top',
+        title: '', // No toggle
+      },
+      // {
+      //   title: 'Components',
+      //   include: file => !file.title.includes('Serialize'),
+      // },
+      {
+        title: 'Others',
+        include: () => true,
+      },
+    ],
+  },
+})

package.json

@@ -3,28 +3,34 @@
 	"private": true,
 	"version": "0.0.1",
 	"scripts": {
-		"start": "vite dev",
+		"dev": "vite dev",
+		"start": "concurrently --names \"APP,HISTOIRE\" -c \"bgBlue.bold,bgMagenta.bold\" \"npm run dev\" \"npm run story:dev\"",
 		"build": "vite build",
 		"package": "vite package",
 		"preview": "vite preview",
 		"check": "svelte-check --tsconfig ./jsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./jsconfig.json --watch",
+		"story:dev": "histoire dev",
+		"story:build": "histoire build",
 		"test": "playwright test",
 		"lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
 		"format": "prettier --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
+		"@histoire/plugin-svelte": "^0.11.0",
 		"@playwright/test": "^1.26.1",
 		"@sveltejs/adapter-auto": "1.0.0-next.72",
 		"@sveltejs/kit": "^1.0.0-next.510",
 		"@tailwindcss/typography": "^0.5.7",
 		"@typescript-eslint/eslint-plugin": "^5.39.0",
 		"@typescript-eslint/parser": "^5.39.0",
 		"autoprefixer": "^10.4.12",
+		"concurrently": "^7.4.0",
 		"eslint": "^8.24.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"gray-matter": "^4.0.3",
+		"histoire": "^0.11.3",
 		"mdsvex": "^0.10.6",
 		"postcss": "^8.4.17",
 		"postcss-load-config": "^4.0.1",

src/components/FeatureCard.story.svelte

@@ -0,0 +1,58 @@
+<!-- https://histoire.dev/guide/svelte3/stories.html -->
+<!-- https://histoire.dev/guide/svelte3/controls.html -->
+<script>
+	import FeatureCard from './FeatureCard.svelte';
+	export let Hst;
+  let prefixString = "Welcome to "
+</script>
+
+<Hst.Story title="FeatureCard" layout={{ type: 'grid', width: '100%' }}>
+  <svelte:fragment slot="controls">
+    <Hst.Text bind:value={prefixString} title="prefixString" />
+  </svelte:fragment>
+	<Hst.Variant title="group usage">
+		<section class="mb-16 w-full">
+			<h3 class="mb-6 text-2xl font-bold tracking-tight text-black dark:text-white md:text-4xl">
+				Featured Posts
+			</h3>
+			<div class="flex flex-col gap-6 md:flex-row">
+				<FeatureCard title="Welcome to swyxkit 2022!" href="/welcome" stringData="Jan 2022" />
+				<FeatureCard
+					title="Moving to a GitHub CMS"
+					href="/moving-to-a-github-cms"
+					stringData="Jan 2022"
+				/>
+				<FeatureCard title="HTML Ipsum demo" href="/moo" stringData="Jan 2022" />
+			</div>
+			<a
+				class="mt-8 flex h-6 rounded-lg leading-7 text-gray-600 transition-all dark:text-gray-400 dark:hover:text-gray-200"
+				href="/blog"
+				>See latest posts<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					class="ml-1 h-6 w-6"
+					><path
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M17.5 12h-15m11.667-4l3.333 4-3.333-4zm3.333 4l-3.333 4 3.333-4z"
+					/></svg
+				></a
+			>
+		</section>
+	</Hst.Variant>
+
+	<Hst.Variant title="Fastxx">
+    <div class="flex flex-col gap-6 md:flex-row">
+      <FeatureCard title={prefixString + " Fast 2022!"} href="/welcome" stringData="Jan 2022" />
+    </div>
+	</Hst.Variant>
+	<Hst.Variant title="Slowxx">
+    <div class="flex flex-col gap-6 md:flex-row">
+      <FeatureCard title={prefixString + " Slow 2022!"} href="/welcome" stringData="Jan 2022" />
+    </div>
+	</Hst.Variant>
+
+</Hst.Story>

src/components/FeatureCard.svelte

@@ -2,7 +2,7 @@
 	export let title = 'Untitled post';
 	export let href = '#';
 	/** @type {string} */
-	export let stringData;
+	export let stringData; // we intentionally force this prop to be a string, not children, because dont want to allow arbitrary display of components for such a small contained component. feel free to refactor this if you need to
 </script>
 
 <a

src/components/Introduction.story.md

@@ -0,0 +1,9 @@
+---
+icon: 'carbon:bookmark'
+group: 'top'
+---
+
+# Welcome to Swyxkit Components
+
+This is a design system sandbox/display built with [Histoire](https://histoire.dev/).
+

src/components/Reactions.story.svelte

@@ -0,0 +1,59 @@
+
+<script>
+
+  import Reactions from './Reactions.svelte';
+  export let Hst
+</script>
+
+
+<Hst.Story
+  title="Reactions"
+  layout={{ type: 'grid', width: '100%' }}
+>
+  <Hst.Variant title="full">
+    <Reactions reactions={{
+      total_count: 40,
+      '+1': 5,
+      '-1': 5,
+      laugh: 5,
+      hooray: 5,
+      confused: 5,
+      heart: 5,
+      rocket: 5,
+      eyes: 5,
+    }}
+    issueUrl="https://github.com/sw-yx/swyxkit/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc"
+    />
+  </Hst.Variant>
+  <Hst.Variant title="No reactions">
+    <Reactions reactions={{
+      total_count: 0,
+      '+1': 0,
+      '-1': 0,
+      laugh: 0,
+      hooray: 0,
+      confused: 0,
+      heart: 0,
+      rocket: 0,
+      eyes: 0,
+    }}
+    issueUrl="https://github.com/sw-yx/swyxkit/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc"
+    />
+
+  </Hst.Variant>
+  <Hst.Variant title="Some">
+    <Reactions reactions={{
+      total_count: 21,
+      '+1': 5,
+      '-1': 4,
+      laugh: 3,
+      hooray: 2,
+      confused: 1,
+      heart: 0,
+      rocket: 0,
+      eyes: 0,
+    }}
+    issueUrl="https://github.com/sw-yx/swyxkit/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc"
+    />
+  </Hst.Variant>
+</Hst.Story>

src/components/Reactions.svelte

@@ -1,7 +1,7 @@
 <script>
 	/** @type {import('$lib/types').GHReactions} */
 	export let reactions;
-	/** @type {string}*/
+	/** @type {string} */
 	export let issueUrl;
 	let emojiMap = {
 		'+1': '👍',

src/histoire-setup.js

@@ -0,0 +1 @@
+import './tailwind.css'