@getprovi/fizz-components

Fizz Component Library

This is the package for the Fizz Component Library @getprovi/fizz-components. It is designed to be used with the Fizz Styles package and the Fizz Icons package.

Creating a new component

To start creating a new component, create a new directory named for component in the packages/components/src/dev directory. Inside of the new directory, create a new file named Component.svelte and any other files that are needed for the component. Utility files should go under packages/components/dev/utils. These components live in the dev directory while they are being developed. Once they are ready to be published, they will be moved to the packages/components/src/lib/components directory. To build out the component, you can use the main SvelteKit application or the Storybook application.

SvelteKit

To use the SvelteKit application, run the pnpm components script from the root of the project. This will start the Vite server and you can view the component in the browser at localhost:5173. You can edit the packages/components/src/routes/+page.svelte file to add the component you are building to the page. There is an alias set up for the src/dev - $dev, src/lib/components - $components, and the src/lib/utils - $utils directories.

Storybook

To use the Storybook application, run the pnpm sb script from the root of the project. Start creating the component story under the src/stories/components directory. Create a new folder named after your component and add a Component.stories.ts file. If your component does not use slots, you can create a simple story using the following template:

import type { Meta, StoryObj } from '@storybook/svelte'

import ComponentName from './ComponentName.svelte'

// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
const meta = {
	title: 'Storybook/Example/ComponentName',
	component: ComponentName,
	// autodocs will automatically generate the props table for the component and any stories
	// More on autodocs: https://storybook.js.org/blog/storybook-7-docs/
	tags: ['autodocs'],
	// More on argTypes: https://storybook.js.org/docs/7.0/svelte/writing-stories/args#argtypes
	argTypes: {
		// Storybook handles these props and controls better if they are explicitly defined here
	}
} satisfies Meta<ComponentName>

export default meta
type Story = StoryObj<typeof meta>

// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
export const Primary: Story = {
	args: {
		// Add any props here
	}
}

However, if your component uses slots, you will need to create a svelte file for the component to use in the story. This is because Storybook does not support slots in the ts file. Create your component for the story under the component's folder and name it Component.story.svelte. You can then import the component into the Component.stories.ts file and use it in the story.

The downside to this method is that Storybook will not autogenerate the correct code for the component. You will need to manually add the documentation to the story.

Publishing a component

To make Jest and Vite happy in the Provi app the src/lib folder needs to be published along with the dist directory generated by the package command. This publishes the uncompiled Svelte files as is to NPM. In the Provi app, the aliases for the component library need to be up to date in the svelte.config.js file. These are the current aliases from the component library:

      $dev: './src/dev',
      $components: './src/lib/components',
      $utils: './src/lib/utils',
      $types: './src/lib/types',