skeletonlabs / skeleton Goto Github PK
View Code? Open in Web Editor NEWThe UI toolkit for Svelte and Tailwind.
Home Page: https://skeleton.dev
License: MIT License
The UI toolkit for Svelte and Tailwind.
Home Page: https://skeleton.dev
License: MIT License
The Step component gives the below error:
`<Step> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
Error: <Step> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
at Module.validate_component (/node_modules/svelte/internal/index.mjs:1747:15)
at Object.default (/src/routes/+page.svelte:189:37)
at Stepper.svelte:20:49
at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22)
at eval (/src/routes/+page.svelte:187:86)
at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22)
at Object.default (root.svelte:44:39)
at eval (/src/routes/+layout.svelte:13:47)
at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22)
at root.svelte:38:37`
Is there a way to SSR this? Below is the package.json
:
{
"name": "sveltekit-skeleton-demo",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"package": "svelte-kit package",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check --plugin-search-dir=. . && eslint .",
"format": "prettier --write --plugin-search-dir=. ."
},
"devDependencies": {
"@brainandbones/skeleton": "^0.30.7",
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"@tailwindcss/aspect-ratio": "^0.4.0",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/line-clamp": "^0.4.0",
"@tailwindcss/typography": "^0.5.4",
"@types/cookie": "^0.5.1",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"autoprefixer": "^10.4.7",
"eslint": "^8.16.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^4.0.0",
"postcss": "^8.4.14",
"postcss-load-config": "^4.0.1",
"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"svelte": "^3.46.0",
"svelte-check": "^2.7.1",
"svelte-preprocess": "^4.10.7",
"tailwindcss": "^3.1.5",
"tslib": "^2.3.1",
"typescript": "^4.7.4",
"vite": "^3.0.0"
},
"type": "module",
"dependencies": {
"@fontsource/fira-mono": "^4.5.0",
"cookie": "^0.4.1"
}
}
The import { Step } from '@brainandbones/skeleton'
gives error, so I manually added NavItem
component to /node_modules/@brainandbones/skeleton/index.d.ts
.
The import { NavItem } from '@brainandbones/skeleton'
also gives error, added it manually to both index.js
and index.d.ts
in /node_modules/@brainandbones/skeleton/
.
Evaluate different conventions to use to better organize component and documentation SVG icons.
See my comment here talking about this in greater detail:
#118
@niktek @thomasbjespersen and I discussed this on Discord.
General idea is we now have our Vitest configuration up to date, we have tests applied to every existing component, and we've improved the quality of these. However, we need to go a bit further to ensure we have an adequate number of quality of test cases per component. This will make it easier to introduce new features, handle refactors, and of course improve general QA testing.
@niktek has volunteered to aid with this, so please claim the ticket when you can sir! I can provide an in-depth overview of how the tests are implemented and working.
Notable changes may include:
With the ultimate goal of ensuring we have a set of simple and robust test cases that are not too rigid. Some component design and features are still in flux, so tests that are too strict may not be helpful.
Current users are required to do the following:
themes.css
locally within their projectWe would dramatically improve this part of the process be embedding the theses into the /lib
directory. This will mean they get packaged and distributed as part of the package. Then can then just import the CSS like many other packages do.
Likewise, we should make considerations for other CSS files to be included as well, such as our canned global styles.
I'm a huge fan of Vitest's version of this concept:
https://vitest.dev/guide/comparisons.html
I'd love to introduce a similar doc to Skeleton, as we've had similar questions come up in the past. Like "how does Skeleton stack up to library X or Y?".
Here's my first draft:
https://docs.google.com/document/d/1yI7kIxnJzPpMdGTConB2Y97GkTfKQThrKggdyqNC03c/edit#
I'm currently comparing to other a small set of framework-specific or Tailwind-based libraries, which aligns with where we reside more than the big alts like Material Design or Tailwind. However, if you think I've missed something important please let me know! I just don't want this to be too long.
I'll look to implement this in the near future, so copy reviews and updates are welcome. Feel free to request direct access to the doc if you wish to make changes!
The Skeleton documentation has been using the <CodeBlock>
component internally for a white. I believe it's adequately mature now. Let's go ahead and document this and make available as part of the library.
This will include the following changes:
/lib/index.js
Per Roadmap > Documentation > SEO
Make some minor modifications to the HTML <head>
element to include the following:
https://www.link-assistant.com/news/html-tags-for-seo.html
Reported on Reddit here:
https://www.reddit.com/r/sveltejs/comments/wmnkoi/comment/ik1a8va/?utm_source=share&utm_medium=web2x&context=
I've reproduced the issue in the iOS simulator here. Most likely a missing overflow:hidden style! Note it only occurs for avatars using an image source as shown:
Just a quick heads up:
When running npm run test
, Avatar, Button and Alert had issues with @testing-library/dom
not being present - needs to be added to the package.json
npm run lint
is currently showing issues in 141 files - just want to check what's going on here.
Cheers,
Nik
Per @niktek's suggestion, we need a branch between master and feature branches. This will allow hotpatching on master if we need it. We start simple and build up. Something like:
master
- as is, we'll build/package on update. Manual for now, automated later with CI/CD.dev
(or staging) - we introduce this as the proceeding branch. I don't think we need both yet.General idea is dev
will serve as our merge target. All PRs, etc target this. Updates from dev
are merged into master
when we're ready to deploy to production. We won't get any more complex than this until we need to.
This will come with updated guidance on the README and Contribution guidelines.
I welcome feedback on this, but expect it to appear tomorrow (US/CST time)
CodeBlock's use of Highlight.js is causing a number of issues. For reference, see the following:
Given the number of issues reported I'm going to go ahead and disable and remove access to the CodeBlock component for the next slated release. If you're using this component in your project, please make considerations to move away from this for now. We will, however, bring it back in the future - though please note it may operate differently, may require you to install extra dependencies, etc.
Sorry for the trouble on this, but I will aim to bring this back asap! If you need help implementing a replacement, please see the #support
channel on our Discord. I can provide some guidance:
https://discord.gg/EXqV7W8MtY
Thanks for your understanding.
Currently the value for RadioGroup components has to be passed in and retrieved using a writable store.
It would be nice if you could bind to the value the same way you can with native input elements.
This would have two advantages:
Safari seems to be the main culprit here:
The LHS menu of the docs site, none of the ListItems are available to tab navigation - Safari only.
Looking at the /routes/components/lists/ page, clicking an item and then trying to shift tab to go up the list does not work in Safari
On the same page - tabbing to a new item and then pressing space or enter does not highlight the ListItem in FF, Chrome, Safari due to elemItem being null - line 48 in ListItem.svelte
The old default port for SvelteKit's dev server was specified as 3000
:
"scripts": {
"dev": "vite dev --port 3000",
}
However, in new SvelteKit projects the port is no longer provided, meaning it uses Vite's default of 5173
"scripts": {
"dev": "vite dev",
}
You can then open the local dev site at:
http://localhost:5173/
I don't believe we document the port anywhere, so this should just be a small one-line change!
The Button component currently supports "href" which works very well, but not the target attribute to specify "_blank" for a new tab.
for me, this leads to issues with wrapping the button with "a" crashing any browser I try it on (I have absolutely no idea why) or the inner "a" value having a very small "hitbox" to click on.
My specific use case here is a chrome extension written in SvelteKit, I will poke around your source and see if I can contribute to a fix
<Button
background="bg-primary-500"
class="grow"
color="text-white"
href={`vscode://DeepLinkingWorksFine`}
>
Open in Visual Studio Code
</Button>
<Button
background="bg-primary-500"
class="grow"
color="text-white"
href={`/RouteLinksWorkFine`}
>
Open Different SvelteKit Route
</Button>
<Button
background="bg-primary-500"
class="grow"
color="text-white"
href={`https://github.com/LukeHagar/ExternalLinksInNewTabsDoNotWork`}
target="_blank"
>
Open Site URL in New Tab
</Button>
The current release of Skeleton provides support for tab focus, keyboard shortcuts, semantic elements, and of course implements changes to support the ARAI spec per each component.
That said, we still have several items to address in regards to a11y support. The the next major update should include further refinement and support for visual impairments. This includes but is not limited to:
We should consider making suggestions for tools dedicated to testing. These can include:
Finally, this will be a bit less of a concrete fix, as color values are completely in control of the users generating the theme. We may want to make considerations for improving a11y support for our theme, or creating separate/dedicated themes specifically built with a11y in mind. Likewise we should update documentation or provide recommendations for a11y (ex: "be mindful of color contrast radio when overriding color values", etc)
Update
Great find for a11y color generation and testing here:
https://stephaniewalter.design/blog/color-accessibility-tools-resources-to-design-inclusive-products/
Dark Theme recommendations:
https://twitter.com/vitalyf/status/1564607043406815233
Leonardo:
https://leonardocolor.io/
Astro has support for Svelte components. As part of our on-going effort to decouple Skeleton from SvelteKit I think it's a prime candidate for this effort. Plus it recently hit v1.0, which means there's a lot of new eyeballs on the framework which could help garner more attention for Skeleton.
I'll begin the process of testing and documenting the steps to implement and use Skeleton within an Astro project here. But welcome help in testing this.
Basic requirements:
__layout.svelte
(root element) and app.css
(global stylesheet)I want to note as well since its the item that failed at the top, that TabGroup doesn't work with a manually specified class prop for me at all
Originally posted by @LukeHagar in #127 (comment)
Improvements:
Expand Skeleton's support and instruction for any framework where Svelte and Tailwind can be used. Including, but not limited to:
Hello,
I am currently working on a template using Webpack Encore with Svelte. After following the installation instructions, I encountered a few issues when trying to run Webpack. I also found #68 and the errors seem to be the same for the most part ($app/env
and $app/stores
).
Here are the errors encountered when running Webpack :
Module build failed: Module not found:
"./node_modules/@brainandbones/skeleton/LightSwitch/LightSwitch.svelte" contains a reference to the file "$app/env".
This file can not be found, please check it for typos or update it if the file got moved.
"./node_modules/@brainandbones/skeleton/Menu/Menu.svelte" contains a reference to the file "$app/stores".
This file can not be found, please check it for typos or update it if the file got moved.
"./node_modules/@brainandbones/skeleton/index.js" contains a reference to the file "./Filters/filter".
This file can not be found, please check it for typos or update it if the file got moved.
"./node_modules/@brainandbones/skeleton/index.js" contains a reference to the file "./Notifications/Stores".
This file can not be found, please check it for typos or update it if the file got moved.
Also worth mentioning that Tailwindcss works fine on its own. This is certainly not a priority but I thought I'd share the errors I encountered to help with non-SvelteKit apps.
If we add class as a prop for any component then it won't be included restProps. See #45 for more details.
This should be a test that is applied to all applicable components.
The tailwind prettier plugin embeds the svelte prettier plugin and mainly does class re-ordering within strings. I've done a dry run locally and the changes are not that drastic at all (mainly affecting doc pages) and I think there is benefit to having things like all base classes appearing in the string before breakpoint variants of the classes and uniformity across the code base.
Instead of pushing a PR to see the changes, you can just do:
npm remove prettier-plugin-svelte
npm i -D prettier prettier-plugin-tailwindcss
npm run format
And preview the changes in the Source Control panel.
Vitest has made great progress and updated quite a bit since we originally configured and added it to the project back in February. However, our configuration has remain mostly static during that time. I'm going to review and see if there's some general improvements to be made to better optimize our use of this.
This is 100% a @sveltejs/package issue. Setting up on a new laptop:
pnpm i
Running postinstall script, failed in 145ms
.../node_modules/@sveltejs/kit postinstall$ node svelte-kit.js sync
│ > config.kit.package has been removed — use @sveltejs/package instead
Removing the package key in svelte.config.js
(which we used to prevent the tests from being packaged and conflicting with the testing commands) does make it work again. However their documentation hasn't changed yet in terms of where we now add the config to exclude these files. Doesn't seem to affect npm
installs afaics.
The aim is to improve overall accessibility across all component. This will be an on-going process that may be subdivided in to multiple parts.
Highly recommend this video showcasing each of the following tools.
The following suggestions were provided by user "Tropical" on the Svelte Discord
https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
<details>
and <summary>
NOTES:
- Animation not well supported with the <details> content region, so no animations for now
- Both slot ids have been updated to match the semantic names of their wrapping elements
- ARIA require unique ids, so we're generating these automatically, but can be overwritten on-demand
https://www.w3.org/WAI/ARIA/apg/patterns/button/
NOTE: these updates are available to all components that embed a Button component
https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
NOTES:
- ListGroup/ListItem have been completely rebuilt to better support a11y
- NavItem component has been removed, replace with ListItem
- List docs are updated to reflect all changes
https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/
https://www.w3.org/WAI/ARIA/apg/patterns/menu/
NOTE: most Menu improvements are derived from the updates to the List/ListItem components
https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
https://www.w3.org/WAI/ARIA/apg/patterns/switch/
https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
NOTE: users must provide their own 'tabpanel'.
Hi,
Maybe I'm doing something really wrong but if I have something simple like:
<Button
disabled={!enabled}
type="submit"
variant="filled-primary"
class="inline-flex ml-3">
Save
</Button>
And I change the enabled variable value from true to false, I lose all the Skeleton styling and only the 'class' values are used for styling.
If can't reproduce let me know a decent website I can post an example to and happily will.
Can we add a convention of using branches named chore/* for things like update of packages/linting/etc ?
Also, just want to flag that there are same major semver updates available to packages like the eslint and svelte eslint plugins that could have ramifications for the options available to us on #70
Although I've done a pnpm upgrade
and it all runs fine - I just want to check in with regards to how npm update --save
is meant to work, because it doesn't upgrade svelte-kit to .405 or the adaptors to their latest versions either.
The current Discord link has expired (sorry!) This includes the follow locations:
It needs to be replaced with the following perma-link:
https://discord.gg/EXqV7W8MtY
As reported here, we're well overdue for a linting pass: #67
I'd advise we handle this immediately following completion and merge of the a11y branch per this ticket: #41
I'm anticipating this to be a lot of small issues (missing semicolon, etc.), so general process should go something like this
bugfix/linting
)npm run lint
npm run test
Contact either @thomasbjespersen or myself if you have questions or need assistance
In the future we'll look to make this a regular process and/or automate with a CI/CD pipeline.
These include but are not limited to the following:
General idea is some folks choose to use these in favor of Tailwind. We've had a handful of questions or requests for support of these. So the first step is to review what can be done, document hurdles to overcome, then discuss adjustments that would allow for these to run.
See @niktek message regarding progression on Windi:
#79 (comment)
Known issues can be documented below:
The following need to included as exports in /src/lib/index.js
// Dialog Types
import { type DialogAlert, type DialogConfirm, type DialogPrompt } from '@brainandbones/skeleton';
// Toast Types
import { type Toast } from '@brainandbones/skeleton';
This does not match the expectations provided in the current documentation instructions.
There is a new option now for npm create svelte@next
that adds a library project type.
I've done a diff on the two project structures and the main things we should look at are:
package.json:
"build": "svelte-kit sync && svelte-package"
which presumably ensures that the types are properly generated before the packaging is done.
tsconfig.json
"moduleResolution": "NodeNext"
under compilerOptions.
I've done a test of these settings in Skeleton and there doesn't seem to be any issues at first glance.
I did a dry run through and it went really smoothly. Notes:
Must upgrade to SK version 405 pnpm i @sveltejs/[email protected]
Then npx svelte-migrate routes
which will transform all the pages under routes/
Unpin 405 in package.json and upgrade to 408
Everything works, even the data tables demo pages.
However, it clearly renames all of the files under routes - so creating a PR for this, even if it was based off the a11y branch is not going to be a nice merge. This would also be a good time to start looking at release/* branches to merge multiple feature branches into without jeopardising master in case of a hot fix release being needed.
The theme generation form leaves a lot to be desired on the Themes section of the documentation site:
https://skeleton.brainandbonesllc.com/guides/themes
Consider updating it to operate more like the following tools:
NOTE: Suggested by user "keeplearning" on the Svelte Discord (link)
Setup new social channels to extend interaction with the community beyond Github. This will initially include:
Open to other options in the future, but aiming to keep this small. We're a small team and don't want moderation to overwhelm us!
Currently we use a mix of +/- 10% brightness for a lot of hover states (ex: Buttons, etc). The standard for most libraries is to increase brightness on hover state, so we'll aim for that to be our new default. Of course this can typically be overwritten and changed on a per-component basis using the props/TW styles. But consistent defaults would be nice!
All of the testing I have been doing so far was based on forking and working in the skeleton repo itself, not using it in a brand new project.
When creating a new svelte-kit project as per the getting started guide, as soon as you import a component (e.g. Card), it will complain that it is not able to resolve highlight.js for CodeBlock, which makes sense as in the skeleton repo highlight.js is listed as a dev dependency. Either docs need to be updated to tell end users to install it npm I highlight.js
, which does fix the issue, or it is added as a non dev dependancy to Skeleton UI.
src/lib/button card and divider have lower case folder names, which cause an issue in src/lib/index.js imports and is probably why the @ts-nocheck was applied. Just need to capitalise the folder names and remove the ts-nocheck.
NOTE: moving this here to track progress
For reference - highlightjs/highlight.js#3527 there is a screen grab showing the exact error we get.
I've also gone ahead and asked them for any advice highlightjs/highlight.js#3597
Originally posted by @niktek in #83 (comment)
Updated the scope of this ticket to track the progress of documenting instruction and issues when utilizing Skeleton within a Vite/Svelte project.
NOTE: This was originally reported by @JensPfeifle
npm install highlight.js --save-dev
as suggested in the docs didn't fix the HighlightJS issue for me. This is with npm/Vite/Svelte and Skeleton v0.30.7.
Looks like we have at least one or two missing exports in /lib/index.js
, per: #102
So far the only component I know needs to be added is:
Step
- a child component for the Stepper componentPlease do not add or modify the following:
NavItem
- reported missing, but it's being dropped in the next releaseCodeBlock
- is being removed in the next release.ConicGradient
-a work in progress, not ready for end usersThemeGenerator
- this is only for use in the Docs.If you're unsure of any others just let me know. I'll clarify asap!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.