illright / attractions

A pretty cool UI kit for Svelte

I'm a front-end developer. Hi! 👋

23 y.o. • 🇷🇺 🇺🇸 🇳🇱 _{^{(een beetje)}}

Trusted technologies:

• 🚀 Svelte, React, Remix
• 🌐 TypeScript, JavaScript
• 🛠️ Vite, Rollup, Webpack
• 🚦 Git, Docker, GitHub Actions
• 🔍 Jest/Vitest, Cypress

Connect with me on LinkedIn!

My Developer Origins

I started coding in 2015, got really invested in Python. Their documentation was so nice to read that I would read it like a book instead of history classes. Pretty soon I realized that I just really enjoy seeing what I build, and so began my journey into the world of web dev. I loved learning because I would do it for pleasure rather than pressure such as from a job, which is how I ended up with many open-source projects and a deep respect for good developer experience.

Major Projects

I know CV's are supposed to list projects from the most recent one to the least, but that doesn't tell a good story, now does it?

Prior to these projects, I had a 🐍 back-end background, then started building static HTML pages and learning the intricacies of CSS. Around that time I also chewed on the YDKJS book series, which got me from "JavaScript is weird, {} + [] == 0? 😒" to "Oh yeah, JavaScript makes perfect sense (almost) 🤓".

Innopoints • 2019

Read the story

In 2019, I wanted to make a difference so I embarked on a large passion project to create a service for managing and rewarding extracurricular volunteer work at Innopolis University. I wasn't in it alone, working with two of my mates from university, but it is only when I look back at it that I realize how much was there to be desired in terms of project management. I designed the whole thing from scratch and played a major role in both the frontend and the backend. This was my first experience with a proper JS framework, and it all just clicked.

Also I may have been in love while doing this project, which really helped with the motivation :)

Here I learned modern JS, Svelte, Docker, Figma... Just practically everything that's needed for a full-stack web application these days.

🌐 Live Version  /  📕 Repositories

---

Attractions • 2020

Read the story

In order to design the Innopoints, I needed a solid UI kit. So I designed my own. Somewhat Material-ish, but at the same time, not at all. From the beginning it was made to be accessible by default, though it still has a way to go until it will get the title of “fully accessible”. My teammate from Innopoints joined me on evolving this UI kit into a separate project. We called it Attractions. Then came the trouble of creating an npm package and all the learning that came with it. The Svelte ecosystem wasn't as rich as it is now, so we wanted to give developers the benefits of strong typing without the burden of committing to TypeScript. I'd say it went well.

Here I learned TypeScript and npm packaging and got experience of maintaining an open-source project.

🌐 Website  /  📕 Repository

---

Draw, I'll Help • 2021

Read the story

A curious front-end developer taps into the unknown — practical machine learning! It's amazing how little effort is required nowadays for a very solid computer vision system, thanks to the state-of-the-art YOLOv4/YOLOv5 model. This project is not about that, however, and what it does surely doesn't require computer vision, but take my word for it, YOLOv4 is insanely powerful.

So what's this project about, then? Well, imagine if a powerful machine learning model of the YOLO variety ran in your browser. No need to wake up, it's not a dream. This project is a proof-of-concept that you can embed a computer vision model right into your SvelteKit application and export it into a bunch of static files to serve on GitHub Pages! This project was a solo effort, and that includes an all-nighter to get the project the best it can be before it has to be presented next morning. Yeah, not particularly proud of the sleep deprivation 💤.

Here I learned how to train and embed an ML model into the browser to be executed by JavaScript, powered by Web Workers. Also I learned about Feature-Sliced Design, which is now my favorite frontend architecture.

🌐 Live Version  /  📕 Repository

---

Cast • 2022

Read the story

Remember the Innopoints team? Reunited with two other strong developers into what is basically an unstoppable team, we started working on... a podcast player? Not just any podcast player, though, as the mission was to create the most robust podcast player out there.

Tools of the trade? Unit tests, integration tests, end-to-end tests, security tests, accessibility tests, visual tests- *deep breath in* CI/CD pipelines, type checking, uptime monitoring, beautiful architecture, GitHub authentication, unmanaged backend with Supabase *deep breath out*. Impressed yet? Then go check out the README in the repository, it speaks quite well for itself.

This project was a ton of fun, and a way for us to discover just how great it is to build a web app these days. I managed the team and was the lead developer, working on the project from all aspects. Also I created the design, sweet and simple. And a README (my best one yet!)

Here I learned all about automated testing, Supabase, but most importantly, how to manage a team of developers and create a productive and motivating environment where everyone feels equal and heard.

🌐 Live Version  /  📕 Repository

Acknowledgments & On Privilege

I recognize that my developer journey and my current skill set is a result of years of dedication, passion and practice. However, I also recognize that I'm privileged enough to have a strong education and all of the internet at my fingertips to turbocharge my self-learning and practice. Not everyone has such an advantage, and I would be honored to make a difference in the world that would enable more people a brighter future they dream of.

I'm grateful to:

• my mother, who encouraged me to take a scary leap in education and always trusted me to do the right thing.
• my high school, SESC USU, where the teachers were very talented and supportive.
• my university, Innopolis University, for a comfortable roof over my head, complete financial independence, and 4 years of creative freedom to find myself wherever it may be.
• my friends, who always made sure I have a fulfilling life apart from all this computer frenzy.

I believe in the principles of Ethical Design and pledge to use my privilege for the better.

---

My musical recommendation is WLUWD by Tristam.

_{My homeland, Russia, has brought war to Ukraine.}
^{I feel ashamed for the actions of Russian authorities and stand with the people of Ukraine. #StopTheRussianInvasion}

_{Thank you for reading this far ❤️}

attractions's Issues

Question About the Installation...

Hi @illright I know it's not a smart question. However, I am a bit struggle to go through the installation process of the attractions library. I start with the official Svelte rollup template code. I followed the installation of the following steps:

npm install --save-dev attractions
npm install --save-dev svelte-preprocess node-sass postcss

And I add the autoProcessor code to the rollup.config.js:

autoPreprocess({
  scss: {
    includePaths: [
      './src/theme',
    ],
  },
})

But it doesn't seem working properly when I tried to import a simple button component in App.svelte file.
The Button's style doesn't get applied.

<script>
	import { Button } from 'attractions';

	export let name;
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>

	<Button filled>button</Button>
  <Button outline>button</Button>
  <Button>button</Button>
</main>

(Btw, there's no document telling me how to import each component. I look up your GitHub code and finally found a sample import statement.)

Could you shed some light to me for the SCSS configuration?

Set up roles and ARIA attributes

Set up the necessary ARIA attributes and support keyboard navigation for the following components:

• Dialog (ARIA: Alert Dialog and ARIA: Modal Dialog)
• Button (ARIA: Button)
• Checkbox (ARIA: Checkbox (Two-state))
• Autocomplete (ARIA: Combobox with Listbox Popup and ARIA: Layout Grid)
• DatePicker (ARIA: Date Picker Dialog)
• RadioButton (ARIA: Radio Group)
• Tab (ARIA: Tabs with Manual Activation and ARIA: Tabs with Automatic Activation)

Think about how we can incorporate aria-labelledby in our components to allow effortless labelling.

Think about showing a keyboard arrows sign in the corner of the page to afford keyboard navigation.

Think about how to provide ARIA: Actions Menu Button for Dropdowns that form menus.

Implement focus traps and prevent scrolling for the modal.

The StarRating focus state is invisible

Document the `events` and `classes` utilities

Components refer to those utilities in their docs and link to non-existent pages currently.

Implement hiding certain values for hours, minutes and seconds in the TimePicker

Have the lists of values as props to allow changing which values can be picked

Autocomplete does not pass slots on to AutocompleteField

Hi, I am hoping to use Autocomplete and set my own values for the slots in AutocompleteField.

  <Autocomplete 
    {getOptions}
    bind:selection>
    <span slot="more-options">
      more
    </span>
    <span slot="too-many-options">
      too many
    </span>
  </Autocomplete>

However the Autocomplete implementation does not allow for slots to be passed through.

Is it possible to pass through slots when present in this component? Thank you!

The Autocomplete broke down

We changed the DropdownShell component to dispatch change events on both opening and closing. The Autocomplete relied on the previous behaviour, that the change events are only fired on close, therefore, it was preventing the option dropdown from appearing

Improvement: use css custom properties instead of scss variables for themeing

Presently Attactions requires a dependency on Sass for overriding variables. Personally I have found this troublesome since I am not really interested in using SASS otherwise. I recently tried to change the build and this was immediately a blocking issue. If Attractions used custom css properties (variables) for overrides (which is compatible with SASS), this would remove some friction for users. More info here: https://sass-lang.com/documentation/breaking-changes/css-vars.

Svelte plugin 'Tag' warning.

Updated to the latest attractions version and now I am getting a warning fo each component:
(!) Plugin svelte: The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?

I do not need this option. Do you know if there is a way to suppress the warning? Maybe something should be added to the documentation about this.

Button: font-size, padding --- how to control this?

How do I control:

1. the padding on a button
2. the font-size on a button

Unused CSS selector in Pagination component

Documentation bug: Navigating directly to component page breaks nav accordion

https://illright.github.io/attractions/docs/components/autocomplete/

Try to expand Components section from this or any similar nested page -- clicking does not have an effect on the accordion.

Can't override sass variables

Hello, thanks for releasing 3.0.0 alongside a migration guide! Unfortunately I ran into an issue with variable overrides and I'm not sure if I'm doing it right.

./public/theme.scss

@forward '~attractions/_variables' with (
  $main: green,
);

./svelte.config.js

const makeAttractionsImporter = require('attractions/importer.js');
const sveltePreprocess = require('svelte-preprocess');
const path = require('path');

module.exports = {
  preprocess: [
    sveltePreprocess({
      scss: {
        importer: makeAttractionsImporter({
          themeFile: path.join(__dirname, 'public/theme.scss'),
        }),
        includePaths: [path.join(__dirname, 'public')],
      },
    }),
  ],
};

package.json includes

• [email protected]
• [email protected]

as you can see, I'm not deviating from the docs too much -- but my elements are still colored the default #4300B0, not green. Any ideas what I'm doing wrong? Thanks again!

Question about Breadcrumbs and Navigation component?

@illright I notice that you have the breadcrumbs component on the doc site but is not available from the library. Same to the navigation bar component; is there a particular reason that not supporting it?

Many thanks for your time.

Datepickers in demo page do not always open

First thanks for you library. I have started using it on a small project. While testing out the datepicker (in Chrome version 84.0.4147.135 on a mac), I noticed the datepicker does not always open if you click between the four pickers a number of times.

Add prettier config

Would make it easier to do pull requests if the prettier settings were checked into the repo, e.g. .prettierrc or in the package.json

Autocomplete does not display options on focus, after a selected item is removed

Hi, I really enjoy using attractions. I am using Autocomplete as a form of dropdown select. In most cases, my application will populate the Autocomplete with just 1-5 selection options, and require 0 characters typed before displaying those options.

I expect the autocomplete input to show these selection options each time the input is focused.

• And indeed, on the first time the input component is focused, the selection options are displayed.
• However, if you remove a selected item with X and then click back on the input, the selection options are not displayed until you type again.

My use of the component looks like this

  <Autocomplete 
    {getOptions}
    bind:selection
    minSearchLength=0
    maxOptions=1 />

Allow customizing button font weight

As a user of attractions, I need a way to customize the font-weight of buttons, so that I can match my design mockups.

Currently, all <Button> instances are set to font-weight: vars.$bold-font-weight;.

Error parsing dates and times in the date-picker and time-picker when values are cleared

Steps to reproduce

1. enter a date or time
2. remove the date or time
3. blur the field

Results in one of the following:

Mobile bug: tapping an open dropdown doesn't close it

Incorrect typings of Snackbar positions

Im trying to change position but im not able to.

Error message:
Type 'string' is not assignable to type 'Readonly<{ TOP_LEFT: string; TOP_MIDDLE: string; TOP_RIGHT: string; MIDDLE_RIGHT: string; BOTTOM_RIGHT: string; BOTTOM_MIDDLE: string; BOTTOM_LEFT: string; MIDDLE_LEFT: string; }>'.

Please move to this to discussion if this invalid issue.

How do I control the style of a Dialog?

<Dialog
  title="Are you sure you want to exit?"
  closeCallback={() => console.log('Closing the dialog...')}
  danger
>
  <p>You have not saved your changes yet.</p>
  <p>If you exit without saving, changes will be lost.</p>
  <p>Are you sure you want to exit?</p>
  <Button>yes, exit</Button>
</Dialog>
<style>
.dialog{
   position: absolute;
   top: 100px;
}
</style>

The styling here doesn't work.

I can add a class to the Dialog like so:

<Dialog
  class="brown"
>

But I can't seem to write a selector that will affect that element. I've tried everything I can think of.

Tables

First and foremost, thanks for sharing this library. great job.

I see that you have a component for pagination, how would you use it with a table?
Implicitly, I am also asking for the table component which I couldn't find.

Thank you

Autocomplete-option fails when query includes regex pattern

For example, the autocomplete fails on the input + because js regex interprets that as 'repeat the last character'.

To reproduce, query +++ on the documentation page https://illright.github.io/attractions/docs/components/autocomplete

is this intended? If so, the documentation could include that detail. Or maybe this behavior could be exposed as a boolean flag.

Set the font for outlined text fields

As of now, they don't respect the font settings of the library

DatePicker/TimePicker miss inputClass

It would be nice to have the inputClass also for Date/TimePicker. This is a very convenient way to instruct and style the component.

Overriding sass variables only with rollup?

Just to make sure: you do use svelte.config.js in rollup.config.js, right? :)
Originally posted by @illright in #240 (comment)

I have the same problem as described in the above issue, BUT am using webpack.
Does the comment mean that overriding is not working with webpack?

Implement disabling certain days for the calendar

So that one could specify an array of days or ranges (unbounded too)

Pass the native event object in the detail of some custom events

For instance, a selection of a chip should have the following detail object: { value, checked, nativeEvent }.

The rename of event to nativeEvent is made to make the event.detail.event access chain less awkward.

Allow customizing the max-reached label for checkbox groups

As of now, it is fixed to Can only select {} values.. This could be customizable with a prop to allow for i18n.

how to import this components in sapper?

how to import this components in sapper?
please help to write proper steps in documentation.

Warning: Found 2 elements with non-unique id #null

TextFields and other components that have the id as a prop default to that ID being null for some reason, which is the reason of warnings in the console like:

Found 2 elements with non-unique id #null

Bug: Autocomplete field doesn't display current available options on focus

Good morning! Thank you for releasing 2.3.0 today. I found one issue with the new autocomplete-field and have created a PR to resolve the problem.

The autocomplete-field does not display current available options on focus, just on type. This allows the user to select the same option over and over:

https://i.imgur.com/fEWKbvm.gif

I have submitted PR #196. With this change, the component behaves properly:

https://i.imgur.com/taSg8Nj.gif

Thank you for your support and let me know if I can provide any more information.

Suggested improvements to the time-picker

1. Presently the time picker does not handle any special key press events. At a minimum, it would be nice if when the user presses RETURN, it would close with the current value selected.
2. I would also improve the UX if the current hour, minutes etc are highlighted to the current value in the popover selector.

How can I use hex colours?

// theme.scss

@forward '~attractions/_variables' with (
  $main: "#ff4002",
  $font: "'Open Sans', sans-serif",
  $button-radius: 4px
);
$something-else: red;

Error: $color2: "#ff4002" is not a color.

Do you have design system sketch file?

Hi iLLright,
I really like your work, it's an amazing library for Svelte. I would like to use this library for my work. I'm wondering if there's a sketch file for all the components of "attractions" library that I can use for mockup before starting a real code implementation?

Please advice.

Bring consistency to how classes are applied

Currently, not all components that accept class props disregard falsey values in all their props. For consistency, the classes utility function should be used throughout all class props of all components

Button: border radius, there's a better way.

Firstly I love Attractions. I've selected it for use.

One thing that seems completely wrong to me though is the approach to button radius. The way it works is just counter-intuitive and frankly, unusable.

Problems:

1. There's an assumption that's been made; that we want very round buttons as the norm, which is not the case, the norm is currently rectangular with custom radius.
2. The way rectangle prop has been used where it divides the $border-radius var means that if you want square buttons mostly, you can no longer have round buttons. In other words; if you change $border-radius to make square-corner buttons, round no longer works and you cannot have any round buttons. You really want the flexibility to have both.

Solution:

1. Start with $border-radius default being 0
2. rectangle should not adjust $border-radius
3. There should be a size rather than small, then we have have 5 different sizes: xs, sm, md (default), lg, xl.
4. round should adjust border radius, not by a factor but rather by a hard-coded value proportional to the size prop, or a calculated value proportional to height, and should always render a completely round button.

Mobile bug: a dropdown should close when navigating to a new page or, in general, when it loses focus

The build breaks with Webpack 4

We have a wildcard export in our index.js that Webpack 4 doesn't understand yet. Thus, we need to advise the Webpack 4 users to add an additional Babel transpilation step for this particular file to build the library successfully.

Create a generic `ChipGroup` component

I'd like to render a group of <Chip> instances.

My current options:

• resort to using a <CheckboxChip> or a <RadioChip>
• wrap my group of <Chip> instances in a container, and I have handle the group styles & chip spacing.

I'd love have a <ChipGroup {items} /> just like there's a <RadioChipGroup {items} name="group1" />.

SvelteKit Support?

Just a question really -- now that SvelteKit is getting more mature and (hopefully soon) ready for 1.0. I was wondering if there is any work being done on making this package compatible with it and the Vite thing it uses -- etc. etc. :) I want to use this package in a new SvelteKit project I am creating and just wondering how much PITA I am going to have .. any ideas? :)

No `Select` component?

I notice there is Dropdown but it's not quite the same thing. Select elements on form are pretty standard and you've got the basics of it done for autocomplete. Am I just missing something or is this an omission?

Add slot for FileDropzone to be able to change the wording/language

Hi. As far as I understand, right now there is no way to change the wording for FileDropzone "drag & drop here or click to upload files" to something like "перетащите сюда или нажмите, чтобы загрузить файлы". I hope it makes sense

Maybe by adding a slot or a special property we could manage the wording. Thanks

{#if disabled} {textDisabled} {:else if wrongType} {textIncorect} {:else if dragActive} {textDrag} {:else} {textDefault} {/if}

Move the components from Innopoints

The following components are to be moved from Innopoints:

• Accordion and AccordionSection
• Autocomplete
• Button
• Card (add an outlined version too)
• CheckboxChipGroup
• CheckboxGroup
• DatePicker
• Dialog
• Dot
• Dropdown
• FileInput
• FormField
• Modal
• Popover
• RadioChipGroup
• RadioGroup
• Snackbar
• StarRating
• Switch
• Tabs
• TextField
• TimePicker
• Chip

Allow users to pass the `closeCallback` prop for snackbars

Currently it's being overwritten by the SnackbarContainer, it's pretty straightforward to change it to augment that callback instead of overwriting it.

FileDropzone can't handle long unbreakable file names

When there are no spaces in the filename, the box is exceeded rather that forcefully wrapping or ellipsis'ing the text

Merge the SCSS variables from subcomponents

Some components use other components inside, and those other components have SCSS variables of their own, which is easy to overlook because they are referenced in a different file. This is a reminder to go through all the components and add the variables from their subcomponents into the table

[Bug] Date picker: February displays incomplete set of days

This is an interesting one -- I am looking into it myself, but I thought you might want to know as well: February does not display correctly in the attractions datepicker.

Reproduced in the docs: https://illright.github.io/attractions/docs/components/date-picker

Allow customizing outline TextField

As a user of attractions, I need a way to customize the outline variant of a TextField, so that I can match my design mockups.

Currently, all <TextField outline> instances are set to border-radius: 1.5625em;. Also, the label itself has a hard-coded background-color: #fff;. These are problematic because the rounded nature of the outline variant doesn't match any of my designs, and the background-color: #fff; doesn't look right if the containing element doesn't have the same background color.

Example: