@viamrobotics/prime-core

@viamrobotics/prime-core

Getting started

@viamrobotics/prime-core is a collection of core Svelte components.

Installation

Add PRIME core using your package manager of choice:

pnpm add --save-dev @viamrobotics/prime-core

Install Tailwind. In the tailwind.config.js, add the components to the content and include the theme:

import { theme } from '@viamrobotics/prime-core/theme';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/@viamrobotics/prime-core/**/*.{ts,svelte}',
  ],
  theme,
  plugins: [],
};

Import the stylesheet. If you are using SvelteKit, you can do this in src/routes/+layout.svelte.

import '@viamrobotics/prime-core/prime.css';

You can now use the components in your app:

<script lang="ts">
  import { Badge } from '@viamrobotics/prime-core';
</script>

<Badge
  variant="green"
  label="Active"
/>

Playground

The playground can be used during development but is not used outside of the package.

pnpm install
pnpm -C packages/core dev

Linting

To lint and typecheck:

pnpm -C packages/core check        # check svelte and lint
pnpm -C packages/core check-svelte # check svelte only
pnpm -C packages/core check-lint   # check lint only with prettier and eslint
pnpm -C packages/core format       # format with prettier

Testing

To test with vitest:

pnpm -C packages/core test        # run once
pnpm -C packages/core test:watch  # watch tests