From 7a0f445f8ba82de8f0bc7175e92a2444c4855ace Mon Sep 17 00:00:00 2001 From: Jacob Bowdoin <7559478+jacob-8@users.noreply.github.com> Date: Thu, 26 Oct 2023 22:53:27 +0800 Subject: [PATCH 1/4] Update 1-get-started.md --- packages/kitbook/src/docs/1-get-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kitbook/src/docs/1-get-started.md b/packages/kitbook/src/docs/1-get-started.md index 5f99712d..9bbe0d4e 100644 --- a/packages/kitbook/src/docs/1-get-started.md +++ b/packages/kitbook/src/docs/1-get-started.md @@ -38,7 +38,7 @@ src/routes/ You may find it a bit jarring to have your component workbench included in your main app. Kitbook originally worked as a companion app, like all previous art does, but this created a lot of friction: - Starting two dev servers is a pain and you will find yourself only working in Kitbook or only in your app, but not both which is the sweet spot. -- Set up the component workbench with just the right scaffolding to match the main app is a pain. It's annoying to have to keep everything in sync (like i18n) for example. The layout structure above makes it easy to clearly specify what context is needed for components and what is app only. +- Setting up the component workbench with just the right scaffolding to match the main app is a pain. It's annoying to have to keep everything in sync (like i18n for example). The layout structure above makes it easy to clearly specify what context is needed for components and what is app only. - The status checks for Playwright E2E tests running against Vercel deployments breaks down when your app deployment finishes before your Kitbook workbench deployment. Furthermore the combined app + Kitbook approach is the only way to get the [[2-viewer]] tool which is a huge benefit. Let's move on to learn about Kitbook's [[2-viewer]] tool which bridges the gap between our app and our component workbench. From e0999da1be6d02991db66b8780bbfd55bdfe2af4 Mon Sep 17 00:00:00 2001 From: Jacob Bowdoin <7559478+jacob-8@users.noreply.github.com> Date: Thu, 26 Oct 2023 22:56:23 +0800 Subject: [PATCH 2/4] Update 2-viewer.md --- packages/kitbook/src/docs/2-viewer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kitbook/src/docs/2-viewer.md b/packages/kitbook/src/docs/2-viewer.md index 18f410e5..5828012d 100644 --- a/packages/kitbook/src/docs/2-viewer.md +++ b/packages/kitbook/src/docs/2-viewer.md @@ -9,7 +9,7 @@ In dev mode you'll see a cross-hairs button in the lower right corner. This is K These docs will be updated in the future as the tool is fleshed out. It's kind of a hybrid between Nuxt DevTools and Storybook, but much simpler than both of those. -For now, why don't you try activating it by clicking the button and selecting one of your components that you'd like to create variants for. Click the `Add Variant from Current State` button (this will be more interesting if you choose a component with props) and you should find yourself in VSCode with a new file. If you selected `Button.svelte` for example, you'll now see yourself looking at a file named `Button.variants.ts`. You'll notice it's an array of variants, and you have been given one to start, using the current props of the component you just clicked on. Now you probably want to continue on to learn more about [[3-component-variants]]. +With Kitbook added to your app and your dev server running, try activating the Viewer by clicking the button and selecting one of your components that you'd like to create variants for. Click the `Add Variant from Current State` button (this will be more interesting if you choose a component with props) and you should find yourself in VSCode with a new file. If you selected `Button.svelte` for example, you'll now see yourself looking at a file named `Button.variants.ts`. You'll notice it's an array of variants, and you have been given one to start, using the current props of the component you just clicked on. Now you probably want to continue on to learn more about [[3-component-variants]]. [//begin]: # "Autogenerated link references for markdown compatibility" From 6e0264a4aab7d4cf77fedc8a60d039a66fbb182b Mon Sep 17 00:00:00 2001 From: Jacob Bowdoin <7559478+jacob-8@users.noreply.github.com> Date: Thu, 26 Oct 2023 23:06:14 +0800 Subject: [PATCH 3/4] Update 3-component-variants.md --- packages/kitbook/src/docs/3-component-variants.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/kitbook/src/docs/3-component-variants.md b/packages/kitbook/src/docs/3-component-variants.md index 6e68d4ef..73c1136f 100644 --- a/packages/kitbook/src/docs/3-component-variants.md +++ b/packages/kitbook/src/docs/3-component-variants.md @@ -91,9 +91,9 @@ The same applies to layout files. Just add a `_layout.variants.ts` file and you' The wonderful thing about variants is they're written in TypeScript so you can easily spin up varieties of variants with minimal effort without having to duplicate data. Just use features of the language like `...spread` and `.map()` or import data from mocks folder and apply it across multiple different components. -That will be enough to keep you busy for awhile, but there may come a point where you want to mock something which uses named slots* or perhaps is a composition of components working together. You'll want to keep reading to learn about [[4-component-compositions|Compositions]]. +That will be enough to keep you busy for awhile, but there may come a point where you want to mock something which uses named slots[^1] or perhaps is a composition of components working together. You'll want to keep reading to learn about [[4-component-compositions|Compositions]]. -**Yes, there is a way to dynamically create slots but it's a bit of hack using Svelte's internal API and hasn't been implemented.* +[^1]: Yes, there is a way to dynamically create slots but it's a bit of hack using Svelte's internal API and hasn't been implemented. [//begin]: # "Autogenerated link references for markdown compatibility" From 704d9e1107db7df84d07263a74833279b72c5725 Mon Sep 17 00:00:00 2001 From: Jacob Bowdoin <7559478+jacob-8@users.noreply.github.com> Date: Thu, 26 Oct 2023 23:10:47 +0800 Subject: [PATCH 4/4] Update 7a-i18n.md --- packages/kitbook/src/docs/7a-i18n.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/kitbook/src/docs/7a-i18n.md b/packages/kitbook/src/docs/7a-i18n.md index 3df89dbd..d6e2f145 100644 --- a/packages/kitbook/src/docs/7a-i18n.md +++ b/packages/kitbook/src/docs/7a-i18n.md @@ -45,7 +45,7 @@ If you use [[7-visual-regression-testing]], screenshots will be automatically be ## Fine-grained language control -Just like viewport have [[3-component-variants#Fine-grained viewport control]], you can override project language defaults on a variant file basis or for an individual variant. For example, in a project with English, Spanish, and French, we could do the following to restrict down to just two or even one language: +Just like viewports have [[3-component-variants#Fine-grained viewport control]], you can override project language defaults on a variant file basis or for an individual variant. For example, in a project with English, Spanish, and French, we could do the following to restrict down to just two or even one language: ```ts title="foo.variants.ts" import type { Language, Variant } from 'kitbook' @@ -80,7 +80,7 @@ There is also an optional `languages` export from the composition file: export const languages: Language[] = [ { code: 'en', name: 'English' }, - { code: 'es', name: 'Spanish' }, + { code: 'fr', name: 'French' }, ] ```