@latitude-data/svelte v0.6.1
@latitude-data/svelte
Collection of Svelte components used in Latitude apps.
Develop for apps/server
We have a SvelteKit app that we use for showing data apps and building queries.
This app use @latitude-data/svelte
ui components. To run both packages run
pnpm dev
in the root of the monorepo.
Develop individual components (Storybook)
For adding or editing isolated components the recomended way is by running Storybook. It gives to a way of visualizing your component in isolation and also check how the component looks in dark mode or with different themes.
pnpm storybook
Shadcn (components)
For some fundamental UI pieces we use shadcn-svelte)(https://www.shadcn-svelte.com/) it's a port of the original React version. It has some interesting concepts like a CLI to create components that you fully control and also we use their theming system.
components.json - This file is part of shadcn CLI. It has some default settings.
Adding a new element is like this [component] for ex.: button
:
npx shadcn-svelte@latest add [component]
Publishing the package in pnpm
This is a SvelteKit project in library mode. This way the components inside src/components/ui
can be used by other Svelte(kit) projects.
TODO: Document how to publish this component library in npm.
pnpm build
pnpm package
CSS in Latitude theming
When using Latitude client components you have two npm packages:
@latitude-data/client
- Generic package that manage. Data calling, caching and also CSS theming@latitude-data/[framework]
- This is where the UI components for your framework are places. For example we have@latitude-data/svelte
for Svelte.
The UI components come unstyled. You have to options to include our styles.
Pre-generated CSS files (first option)
The first is by importing in your own css files or in the <head />
of your
webapp our styles like this:
@import '@latitude-data/client/css/all.css';
This add all the styles of all our components to your app. This might be overkill if you are just using a couple of our components. For that we also expose individual css components.
Ex.:
@import '@latitude-data/client/css/button.css';
@import '@latitude-data/client/css/chart.css';
@import '@latitude-data/client/css/column.css';
@import '@latitude-data/client/css/table.css';
/* You can see all in: node_modules/@latitude-data/client/css/*.css */
Use our TailwinCSS preset (second option)
If you're already using TailwindCSS or you need to configure more the look & feel of things like spacing, typography, animations a good way is by using our Tailwind config as a preset for yours:
import preset from '@latitude-data/client/theme/preset'
/** @type {import('tailwindcss').Config} */
export default {
presets: [preset],
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/@latitude-data/client/src/theme/components/**/*.ts',
],
theme: {
extend: {},
},
plugins: [],
}
You have to (1) use the preset. (2) Point in content
to our latitude theme files.
After that you need to import our tailwind css file in yours like this:
This will import all tailwind layers/base/components
@import '@latitude-data/svelte/latitude.css';
If you don't have already Tailwind running you can see how is done for your framework of choice here
1 day ago
2 days ago
7 days ago
9 days ago
28 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago