illright / attractions Goto Github PK

View Code? Open in Web Editor NEW

1.0K 12.0 35.0 4.13 MB

A pretty cool UI kit for Svelte

Home Page: https://illright.github.io/attractions

License: MIT License

JavaScript 19.41% SCSS 24.21% Svelte 56.14% Shell 0.03% TypeScript 0.21%

svelte ui-kit

attractions's Introduction

Attractions

A pretty cool UI kit for Svelte.

Refer to the main documentation: https://illright.github.io/attractions

Installation

Step 1. Install the library with your favorite package manager:

npm install --save-dev attractions
# -- or --
yarn add --dev attractions
# -- or --
pnpm add --save-dev attractions

Step 2. Install svelte-preprocess, Dart Sass and PostCSS:

npm install --save-dev svelte-preprocess sass postcss
# -- or --
yarn add --dev svelte-preprocess sass postcss
# -- or --
pnpm add --save-dev svelte-preprocess sass postcss

Step 3. Add svelte-preprocess to your preprocessor chain (as shown here):

// rollup.config.js
import sveltePreprocess from 'svelte-preprocess';

export default {
  // ...,
  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
    }),
  ],
};

Step 4. Import the desired components as named imports and use wherever you like!

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

<Button>click me</Button>

For more information on how to customize/theme your installation, see the docs.

Alternatively, the library can be used from a CDN, such as unpkg, and then the components will be registered as custom elements. This is especially useful for quick prototypes that do not need all the features provided.

Example usage:

<head>
  <script src="https://unpkg.com/attractions"></script>
</head>
<body>
  <a-button filled="filled">My button</a-button>
</body>

For more details, check out the docs.

License

This project is MIT licensed.

attractions's People

Contributors

Stargazers

Watchers

attractions's Issues

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.

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

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

Document the `events` and `classes` utilities

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

[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

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.

The StarRating focus state is invisible

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

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.

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.

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.

Set the font for outlined text fields

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

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

How do I control:

the padding on a button
the font-size on a button

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.

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 />

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.

Unused CSS selector in Pagination component

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.

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:

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.
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:

Start with $border-radius default being 0
rectangle should not adjust $border-radius
There should be a size rather than small, then we have have 5 different sizes: xs, sm, md (default), lg, xl.
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.

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.

Suggested improvements to the time-picker

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.
I would also improve the UX if the current hour, minutes etc are highlighted to the current value in the popover selector.

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.

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.

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.

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

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;.

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" />.

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

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.

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.

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}

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

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

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!

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

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?

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.

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? :)

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?

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.

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!

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

Steps to reproduce

enter a date or time
remove the date or time
blur the field

Results in one of the following:

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.

Implement disabling certain days for the calendar

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

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

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

Move the components from Innopoints

The following components are to be moved from Innopoints:

how to import this components in sapper?

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

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:

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