n00nday / stwui

Opinionated yet customizable Svelte-TailwindCSS component library

Hey I am Craig Howell

I am a Full-Stack Developer working in West Michigan.

I am passionate about clean and simple designs that just make sense to an end user. My experience is primarily centered around creating high performance web applications for companies looking to streamline their workflow and maximize their efficiency.

I am currently working on STWUI a component library for Svelte and TailwindCSS projects.

Tech Stack:

Languages:

       

Technologies:

                   

Statistics

Pinned Repositories

stwui's Issues

Multi-drawer example broken

Multi-drawer example broke after publishing.

Icon Component color prop not working as expected

Finalize the TextArea Component

The component is good as is but I want to add more functionality to the component. I would like to add the following enhancements to the TextArea:

• Overlayed action buttons
• Mention and Hashtag functionality
• Comment box styling
• Post/Blog box styling
• Possibly WYSIWYG (ie. bold, italic, etc)

Add type to Select option button to prevent form submission

The button elements within the Select component options need a type="button in order to prevent a containing form from submitting when clicked.

Missing errors prop

Would be nice to have a streamlined experience over all components.

The Checkbox, CheckboxGroup and also Toggle are missing the errors prop. Potentially more components are missing them.

Discord invite on the docs page is invalid

...title says it all.

Handle named form actions using Button component

I'm sorry if this is a trivial thing but I'm new to SvelteKit and can't figure out how to use named server-side form actions specified in +page.server.ts with Buttons from stwui.

I couldn't find anything about forms in the STWUI docs either. Is this not yet supported?

As per the official SvelteKit documentation, you can create a form and

• specify the formaction for each button
• leave the formaction blank and use the specified form action
• leave the formaction blank and use the default form action

to have the submission handled by the server.

+page.server.ts

 export const actions: Actions = {
	login: async ({cookies, request}) => {
		const data = await request.formData();
		const email = data.get("email");
		const password = data.get("password");
		console.log(`LOGIN: email: ${email}\npassword: ${password}`);
		return {success: true};
	},
	register: async ({cookies, request}) => {
		const data = await request.formData();
		const email = data.get("email");
		const password = data.get("password");
		console.log(`REGISTER: email: ${email}\npassword: ${password}`);
		return {success: true};
	}
};

Vanilla Sveltekit: +page.svelte

As an example, each button calls a different action.

<form method="POST" action="?/login" use:enhance>
    <button type="submit">Login</button>
    <button type="submit" formaction="?/register">Register</button>
</form>

STWUI: +page.svelte

Using the Button for the form/default action works fine, but what if I want to use named actions? Where can I do this?

<form method="POST" use:enhance>
    <Button type="primary" htmlType="submit">Login</Button>
    <Button type="link">Register</Button>
</form>

Finalize Autocomplete component

Currently the autocomplete component is completely styled via properties instead of slots like other components. For example the label, and leading prop should not be props but slots to follow component composition like the rest of the library.

Eliminate needless context overhead

Currently, each child component is checking if it is being used inside the appropriate parent component. With dot notation, this is fairly self-explanatory. If developers want to use a component outside of its designed purpose they may do so but may have unexpected issues that need to be resolved on their end to make it work.

This will clean up a lot of repeating code and make the reusability of components better across the entire library.

Finalize Toggle component

Needs to be slightly refactored to align with the rest of the library and to allow for further customization.

Responsive gutters for Grid component

It'd be a worthwhile feature to have control over the gutter size(s) passed to a Row component across multiple viewports.

I had some success testing out multiple arrays being passed through and converting those to tailwind margin/padding classes, but hit an issue whereby since the classes are dynamic they're missed by the compiler and excluded from the build.

An example of responsive columns for the grid component in the docs would also be useful, providing responsive gutters can be achieved.

Custom width for table td elements

At the moment, the td elements have an attribute width: 20% for 5 td in a row. Changing or removing this attribute doesnt make a difference. If it is deadweight, it should be removed.

I'd like to have a way to resize individual td's such that not every td takes the same amount of space.

Pagination showing wrong number of pages in table

Hi,

When using pagination in the table component, it is showing less 1 page number than supposed, see attached image

[feature-request] Allow `Button` to accept `href` attribute

As topic.

Autocomplete error label

The label is always displayed as an error.

Document Carousel being response

Update documentation for the Carousel component to include a container div with height and width styles set.

Modal / Drawer do not create focus traps

The focus should not be allowed outside of the topmost modal or drawer

Missing keyboard accessibility for Select

According to the WebAIM org it should be possible to navigate options of the select component with the key up and key down buttons.

https://webaim.org/techniques/keyboard/

Potentially, there are more violations, I'll report back in case I notice more issues.

Trying to get stwui to work and missing styling

When I try out this component library. I wanted to visualize my profile after I got google auth working. So I used a Chip. I see tailwind styles being applied to other markup. I'm likely doing something basic/wrong as I have been away from the front end for a looong time.

<script lang="ts">
   // ...
    import { Chip } from 'stwui';
  // ...
</script>

{#if $page.data.session.user}
    <Chip size="lg">
        <Chip.Avatar slot="avatar" src="{$page.data.session.user.user_metadata.avatar_url}"/>
        <Chip.Label slot="label">{$page.data.session.user.user_metadata.full_name}</Chip.Label>
    </Chip>
{/if}

I see mark up being emitted but it is not styled:

I expected it to look this (but with a dude not as good looking):

tailwind.config.cjs

module.exports = {
  content: 
  [
    './src/**/*.{html,js,svelte,ts}',
    '../node_modules/stwui/**/*.{svelte,js,ts,html}'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
		require('stwui/plugin')
  ],
  darkMode: 'class'
}

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

+layout.svelte

<script lang="ts">
  // importing app css in the layout
  import "../app.css";
  // ...
</script>

Allow for complete style customization

Move as much styling out of the Tailwind plugin back into the individual component file and replace twmerge with clsx to clean up the styling logic.

VSCode autocompete/intellisense

Currently, child elements are not recognized by autocomplete/IntelliSense this is a development nuisance that must be addressed.

Layout Documentation?

Is there any documentation of the Layout components?

Finalize Select Component

Currently the select component is completely styled via properties instead of slots like other components. For example the label prop and leading prop should not be props but slots to follow component composition like the rest of the library.

DatePicker bind:value is broken

Using bind:value on DatePicker shows incorrect date format.

What is actually happening:

What I expect to see:

Add much needed testing for the entire package

Sadly it explains itself...

Allow for global customization of themes

Currently, the library forces the user to either to use the existing light and dark themes baked in, recreate each component for reuse with their own style, or overwrite each class they don't want every single time they use a component. This is not ideal and I have been working on a solution for this and have finally landed on a solid plan to move forward. Theming will be handled via css variables or in the stwui.theme object in your tailwind.config.cjs.

tailwind.config.cjs

stwui: {
  themes: [
    'light',
    'dark'
    {
      myCustomTheme: {
        primary: 'myPrimaryColor',
        danger: 'myDangerColor',
        ...
        --some-variable: 'someValue'
      }
    }
  ]
}

This will be a breaking change and will take significant work to finish and when upgrading your projects will most likely cause styling breakage.

I will be using this Issue to track my progress for anyone that is interested in tracking it. I will also be posting a Discussion Announcement when I am close to the release detailing all the changes and how to migrate your existing projects.

Exposing on:click events

Copy-paste from discord https://discordapp.com/channels/1027197401905233990/1027197402949615639/1099641665943240704

I was playing around some more yesterday. I was wondering if I have not yet completely understood the svelte way of doing things. I have following code:

{#each tokens as token}
<form
method="POST"
action="?/setActive"
class="flex gap-[8px] self-center"
use:enhance={enhanceSetActive}
>
    <Toggle name="active" on={token?.active}>
        <Toggle.ContentLeft slot="content-left">
            <Toggle.ContentLeft.Label slot="label">Active</Toggle.ContentLeft.Label>
        </Toggle.ContentLeft>
    </Toggle>
</form>
{/each}

I want to submit the form every time the toggle is pressed. From what I've gathered, there is no native way of achieving this without manually calling upon form.submit(). Since there is no on:toggle or similar event exposed for the Toggle component, I was wondering what the state-of-the art solution for this problem is.
Should I create and maintain a separate data structure which contains the current toggle values for all tokens and then use bind:on={datastructure[token.id]} in combination with reactive statements to call form.submit()? This seems rather tedious to me, when all it would take a on:click={() => form.submit() on the toggle.

Add type to Autocomplete option button to prevent form submission

Just a small change needed to the Autocomplete options that will prevent the containing form to be submitted on selection.

Adding type="button" fixes the issue.

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

DatePicker animation should be reversed

The animation for going +1 on month/year is the animation that should be used when you go -1, and vice versa.

It's very confusing.

Feature: Footer in Layout component

A footer would be a nice addition to the Layout component

Finalize TextArea component

Currently the test-area component is completely styled via properties instead of slots like other components. For example the label, trailing, and leading prop should not be props but slots to follow component composition like the rest of the library.

Finalize Currency component

Currently the currency component is completely styled via properties instead of slots like other components. For example the label, trailing, and leading prop should not be props but slots to follow component composition like the rest of the library.

Finalize InputNumer component

Currently the input-number component is completely styled via properties instead of slots like other components. For example the label, trailing, and leading prop should not be props but slots to follow component composition like the rest of the library.

Autocomplete input does not work

It seems like you cannot type into the Autocomplete component

Allow for more customization with Dropdown Items

<Dropdown.Items slot="items">
    <Dropdown.Items.Item>
        <Button>
            <a href="/auth/profile">Profile</a>
            <Button.Trailing slot="trailing">
                <Button.Icon slot = "icon" icon="account_circle" />
            </Button.Trailing>
        </Button>   
    </Dropdown.Items.Item>
    <Dropdown.Items.Item>
        <a href="/auth/logout">Sign Out <Icon icon="logout"/></a>
    </Dropdown.Items.Item>
</Dropdown.Items>

First item hover has nested styling for hover:

Second item hover looks correct but is missing the nice alignment of the Button:

Error when Building: EISDIR: illegal operation on a directory, read

When trying to build a Svelte-Kit App with stwui Components I get the error:

[vite:load-fallback] Could not load /Users/domenicwalther/Documents/Programming/test-app/node_modules/stwui (imported by src/routes/+page.svelte): EISDIR: illegal operation on a directory, read
error during build:
Error: Could not load /Users/domenicwalther/Documents/Programming/test-app/node_modules/stwui (imported by src/routes/+page.svelte): EISDIR: illegal operation on a directory, read

Can be reproduced by just following stwui Docs for installing and adding a component somewhere and then running npm run build.

Remove Material Icons dependency

Currently material icons is required for the project which is not ideal. This dependency needs to be removed to allow developers to use any icons they want to.

Select inside form automatically submits when changed

When I change a select value inside a form, it automatically submits the form, is this the expected behaviour?

Finalize the Pagination component

Currently, this component is extremely closed off and allows for little to no customization by developers. There should be slots for each child component to allow for full customization, the ability to swap out parts, and the ability to take back functionality (ie. when previous, next, or a number is clicked).

Placeholder disabling

The ability to disable placeholders via prop instead of passing an blank element to the slot.

Datepicker auto close broken

This is due to changes with Dropdown. Just needs to be adjusted according to those updates.

Radio active state not displaying correctly

Active Radio is just showing a border but not the selected style or animation.

Leading Icon all inputs

Leading icon for all inputs (Input, InputNumber, Currency, Datepicker, etc) not showing on mobile.

Finalize the Timeline Component

Currently, this component is extremely closed off and allows for little to no customization by developers. There should be slots for each child component to allow for full customization and the ability to swap out parts.

Less strict component hierarchy for Dropdown

Reference: https://discord.com/channels/1027197401905233990/1100768860459761734/1100771038721224754

At the moment, the Dropdown items expects components of type <Dropdown.Items.Item/>. This makes it impossible to have a Dropdown Item Button as a form submit. It would be good to ease the component hierarchy here and allow arbitrary components in the items.item slots (or something like this, I'm not well versed with svelte).

Swap out Hover

The Hover animation is a bit jarring and is not customizable by developers. This should be swapped out and replaced with a tailwind hover: class so it can be easily overriden.

Checkbox (checked, disabled) not being passed down to root component.

First of all, im extremely impressed by the work you guys have been doing so far.

I currently use your library for a portotype project, and noticed while implementing the Checkbox component, only a specific portion of props are passed down. I would expect, since its an input component, that all props passed to the component, would be forwarded/drilled down to the root HTML Input element. 😅

Steps to reproduce

1. Create a checkbox, as per documentation
2. Set props, either disabled={true} or checked={true}

Expected behavior
The component should be disabled, and checked.

Current behavior
It's not checked, and not disabled.

Code

<CheckboxGroup>
	<CheckboxGroup.Checkbox name="aName" value={'testing'} disabled={true} checked={true}>
		<CheckboxGroup.Checkbox.Label slot="label">Check me!</CheckboxGroup.Checkbox.Label/>
	</CheckboxGroup.Checkbox>
</CheckboxGroup>

I will be happy to open a PR to help solve the issue.

Cheers 🍻

Finalize DatePicker component

Currently the datepicker component is completely styled via properties instead of slots like other components. For example the label, trailing, and leading prop should not be props but slots to follow component composition like the rest of the library.

Finalize Input component

Currently the input component is completely styled via properties instead of slots like other components. For example the label, trailing, and leading prop should not be props but slots to follow component composition like the rest of the library.