@getprovi/craft NPM

Project

pnpx create svelte@latest
pnpx svelte-add tailwindcss
rename tailwind.config.js to tailwind.config.ts and update to esm syntax if needed
import { craftPreset } from '@getprovi/craft' into tailwind.config.ts and add the preset: [craftPreset] to the config.

import type { Config } from 'tailwindcss';
import { craftPreset } from '@getprovi/craft/dist/tailwind/craft-preset.js';

export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	presets: [craftPreset]
} satisfies Config;

add @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Kanit&display=swap'); to the top of the app.postcss file or whatever your tailwind css file is named.
Aliases for the file paths can be used or added if more are needed. They are in the svelte.config.js file.

kit: {
		alias: {
			$components: './src/lib/components',
			$flowbite: './src/lib/flowbite',
			$icons: './src/lib/styles/icons',
			$styles: './src/lib/styles',
			$tokens: './src/lib/tokens',
			$tailwind: './src/lib/tailwind',
			$utils: './src/lib/utils'
		}
  }

Packaging

Svelte field in package.json https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#conflicts-in-svelte-resolve

Publishing

Run pnpm build in the root directory to build the packages
Bump the version in the packages/ui/package.json file by 1 while in beta.
Run pnpm changeset in the root directory to run changesets and add documentation to the generated markdown file.
PR the release branch into main, then back into dev branch.
pnpm publish --access public in the packages/ui directory goes straight to npm

Tokens

run plugin in figma and export all tokens, core tokens, and contextual tokens
check for default names and alias tokens that need to be manually updated until DS-347 is completed.
move files into src/lib/tokens directory
generate tokens with pnpm build:tokens from the tokens.config.mjs file, the output file is at src/lib/tokens-output/tokens.css

generate js versions of the tokens by plugging into this tool until a script is added https://transform.tools/css-to-js
- update the output to be export const convertedVariables and remove contextual-, and -default from the output and comment out border color.

Update a token

add to tailwind config if there
add to tokens.json file
add to convertedVars in src/lib/tokens-output/js-vars.ts

Issues

Some border tokens need to be updated to include width and style

Tailwind Setup

config base file with defaults
plugin addBase css variables, add custom utility classes, add base config
preset add the plugin and export for other packages to use
Font import has to be added to top of the css file from google fonts
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Kanit&display=swap');

Update the tailwind config file to be tailwind.config.ts and to have this content

/** @type {import('tailwindcss').Config}*/
import { craftPlugin } from './src/lib/tailwind/craft-plugin.js';

export default {
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		'./node_modules/@getprovi/craft/**/*.{html,js,svelte,ts}'
	],
	plugins: [craftPlugin]
};

| Note you may have to import craftPlugin without the file extension before you change the filename, once the filename is changed you can import with the file extension. The content array will be unique to your application, but the './node_modules/@getprovi/craft/**/*.{html,js,svelte,ts}' import will need to be added to get the tailwind classes from the craft package. https://github.com/tailwindlabs/tailwindcss/discussions/7720

Icons

| If name is updated, delete the components directory and the ICONS.md file.

src/lib/icons includes the components directory of Svelte components and types, an svg directory of the svg icons, a sprite.svg file, and the IconLibrary.svelte component.

<head>
	<link rel="preload" as="image/svg+xml" href="sprite.svg" />
</head>

Build Sprite

Sprite pnpm build:sprite

Generates src/lib/icons/sprite.svg of svg icons.

Build Icon Components

Svelvg pnpm build:icons

Generates src/lib/icons/components directory of Svelte components and types of the svg icons.

Icon Library

There is an IconLibrary.svelte component that can be used to import all the icons and use them in the docs.

Components

src/lib/components

reexport the components in the src/lib/index.ts file
add any types that need exported in the src/lib/types.d.ts file

Plop

pnpm plop will run the plop generator to create a new component from the root directory. It will ask for prompts to generate the component file and a storybook file.

@floating-ui/dom class-variance-authority clsx tailwind-merge

@everything-registry/sub-chunk-359

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago