getflip/swirl

Flip's design system to help us work together to build a great experience for all of our customers.

Swirl

Flips’s design system to help us work together to build a great experience for all of our customers.

Status	Owner	Help
Active	@getflip/swirl	New issue

About this repo

The Flip/swirl repository is a monorepo made up of NPM packages and websites.

swirl/
├── swirl-icons                 # Icon Set for Swirl
├── swirl-tokens                # Design Tokens for Swirl
├── swirl-components            # Web Components Library for Swirl
├── swirl-components-angular    # Angular Components Wrapper
├── swirl-components-react      # React Components Wrapper

Commands

Install dependencies and build workspaces

yarn && yarn build

Run a command

One workspace

Run commands from a selected workspace using turbo run <command> --filter=<workspace>... flag.

All workspaces

Run commands across all workspaces. This uses turbo run <command>.

Command	Runs
yarn dev	Start dev environment (Storybook)
yarn changeset	Adds a new changelog entry
yarn lint	Lints all workspaces
yarn test	Tests all workspaces
yarn type-check	Build types and check for type errors
yarn clean	Remove generated files
yarn format	Format files with prettier

Licenses

Source code is under a custom license based on MIT. The license restricts Swirl usage to applications that integrate or interoperate with Flip software or services, with additional restrictions for external, stand-alone applications.

swirl's Issues

use enableImportInjection: true

Would you consider using enableImportInjection: true which is available since stencil v3.2.0? Without it, the dynamic imports generated by stencil break vite production builds (potentially others too).

See https://stenciljs.com/docs/config-extras#enableimportinjection

I ran into this issue while testing a production build, which throws this error in the client:

Loading failed for the module with source “/*...*//swirl-app-layout_7.entry.js”.

Uncaught (in promise) TypeError: can't access property "isProxied", l is undefined

Without the flag, stencil uses dynamic imports to request the component files at runtime, e.g. import(./${l}.entry.js), which cannot be statically analyzed (aka the files are missing), breaking builds that optimize source code based on static analysis (like vite).

DateInput: Add option to disable manual input and allow only calendar-selection

Feature request summary

Add the option to disable the manually date-input and to open the DatePicker immediately instead.

Rationale

Explain the benefit of this feature
Currently, the DateInput renders an input-field that allows for manually entering a date, but also shows a date selected via the DatePicker. Clicking on the input will open the virtual keyboard on mobile devices. Some customers wished for the behavior, that the DatePicker would open immediately instead and that manual inputting a date is suppressed.

Heading breaks upon line break

Issue summary

A swirl-heading does not update anymore through the [text] input in Angular after it had a line break. If the text is short enough not to have a line break, it updates fine.

Expected behavior

The DOM element should update the rendered text even if it is long enough to cause new lines.

Actual behavior

The long text is rendered, but no subsequent changes affect the text.

Steps to reproduce the problem

1. Create a swirl-heading with a [text] input
2. Input some text
3. Change browser width to cause line break or input longer text
4. Try inputting new heading text, it does not update the heading

Specifications

• Swirl version number: 0.105.1
• Browser: Chrome
• Device: Macbook M1 Pro
• Operating System: macOs Sonoma 14.0

 System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 75.09 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 115.1.56.20
    Chrome: 117.0.5938.88
    Safari: 17.0

swirl-components-react: SwirlFileViewer sometimes throws an error on unmount

Issue summary

When using SwirlFileViewer, the following error is throwing occasionally:

Expected behavior

No error should be thrown

Actual behavior

Error is thrown :)

Steps to reproduce the problem

I am not sure about how to reproduce this, but it seems to happen when the component is unmounted while rendering.

Specifications

  System:
    OS: macOS 12.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 76.04 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.3.0 - ~/.nvm/versions/node/v18.3.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.3.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v18.3.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Firefox: 108.0.1
    Firefox Developer Edition: 111.0
    Safari: 16.0
  npmPackages:
    @getflip/swirl-components: 0.25.0 => 0.25.0 
    @getflip/swirl-components-react: 0.24.0 => 0.24.0 
    @testing-library/jest-dom: ^5.16.4 => 5.16.4 
    @testing-library/react: ^13.3.0 => 13.3.0 
    @types/jest: ^28.1.6 => 28.1.6 
    @types/node: ^18.0.3 => 18.0.3 
    @types/react: ^18.0.9 => 18.0.15 
    @types/react-dom: ^18.0.5 => 18.0.6 
    @types/validator: ^13.7.4 => 13.7.4 
    autoprefixer: ^10.4.7 => 10.4.7 
    axios: ^0.27.2 => 0.27.2 
    dayjs: ^1.11.3 => 1.11.3 
    eslint: ^8.16.0 => 8.19.0 
    eslint-config-entrecode: ^2.0.0 => 2.0.0 
    eslint-config-next: ^12.1.6 => 12.2.0 
    eslint-plugin-react-native: ^4.0.0 => 4.0.0 
    framer-motion: ^6.3.6 => 6.4.1 
    jest: ^28.1.3 => 28.1.3 
    jest-junit: ^14.0.0 => 14.0.0 
    keycloak-connect: ^18.0.2 => 18.0.2 
    miragejs: ^0.1.45 => 0.1.45 
    next: ^12.2.0 => 12.2.0 
    postcss: ^8.4.14 => 8.4.14 
    pretty-bytes: ^6.0.0 => 6.0.0 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    seafile-js: ^0.2.182 => 0.2.182 
    swr: ^1.3.0 => 1.3.0 
    tailwindcss: ^3.0.24 => 3.1.4 
    typescript: ^4.7.4 => 4.7.4 
    validator: ^13.7.0 => 13.7.0 
    winston: ^3.8.1 => 3.8.1 
    zustand: ^4.3.6 => 4.3.6

SwirlDatePicker skips a month when navigating to the next one

Issue summary

When selecting a date in the current month, which does not exist in the next month (e.g. January 30, because February 30 is non-existing) and then navigating to the next month, the next month is skiped and the DatePicker shows the month after that.

Update:
The reverse thing happens, when navigating to a previous month whose date does not exist in the currently selected month, e.g. when jumping one month back from march 31 to february. In this case, the datepicker stays in the current month and only clicking the navigation-button again will navigate to february.

Expected behavior

DatePicker should not skip months on navigation

Actual behavior

DatePicker skips a month.

Steps to reproduce the problem

1. Select a date in the current month, that does exist in the next month, e.g. January 30 or 31
2. Navigate to the next month
3. February should be displayed, but instead the Calendar jumps to march.
   Issue can be reproduced in the storybook: https://swirl-storybook.flip-app.dev/?path=/docs/components-swirldatepicker--docs

Specifications

• Swirl version number: 0.116.0
• Browser: 120.0 (64-bit)
• Device: Desktop
• Operating System: Linux Ubuntu 22.04.3 LTS

Date Input: Wrong time selected when the user is in a negative UTC-Timezone

Issue summary

When the currents devices timezone is set to one with a negative UTC, e.g. Cape Verde (UTC-1) to Alaska (UTC-9), and a date is selected in the date-picker, the component selects the day before the one that the user selected.

Expected behavior

The component should select the date that the user clicked on in the date-picker.

Actual behavior

The components selects the day before the one that the user selected.

Steps to reproduce the problem

This issue can be reproduced on the example date-input in the documentation:
https://swirl-storybook.flip-app.dev/?path=/story/components-swirldateinput--swirl-date-input

1. Set your devices timezone to negative UTC.
2. Reload the page that displays the date-input.
3. Open the date-picker and select a date.

Specifications

• Swirl version number: 0.107.0
• Browser: Firefox 119.0 (64-bit)
• Device: Desktop PC
• Operating System: Linux Ubuntu 22.04.3 LTS

Server Side Rendering

Feature request summary

It would be good if swirl components supported Server Side Rendering (SSR), to reduce loading times.
As most of the components are static, it does not make a lot of sense to render them on the client when using SSR anyway.

Rationale

As of now, these components cannot be rendered on the server. (At least I haven't found a way to do that). This leads to huge JS bundles being shipped to the client. I made a little test to confirm that. Here is a screenshot of the Network tab when just using one SwirlButton:

If the SwirlButton is removed, the network tab looks like this:

If react is used without swirl on the client, it looks like this:

So above the ~100kB of react, swirl adds another ~150kB for components that are mostly static.

It seems to be possible to export Stencil components for SSR, see https://stenciljs.com/docs/hydrate-app

For static views, this could save ~250kB, which is quite significant on slower networks (>1s on 3g).
For dynamic views, it would still save ~150kB (>600ms on 3g).

edit: The above screenshots are from an astro build (SSR mode), but I also got similar results using Next.js earlier

SwirlSwitch: `<input type="radio">` should not use `aria-checked` property

Issue summary

The SwirlSwitch component uses an <input> element with type="role". Additionally, it sets the aria-checked property on the element.
This should be unnecessary, as the <input>-element has native semantics for the checked-state. Thus setting the aria-checked property is against the first rule of ARIA which recommends to not add any aria-properties unless strictly necessary.

This gets flagged as an error by the W3 HTML validator:
https://validator.w3.org/nu/#l26c32939

Impact

We didn't encounter any usability issues due to this error. The application could be operated correctly using VoiceOver+Edge on MacOS.
The only impact we observed validation error, which is a failure of the WCAG Success Criterion 4.1.1 Parsing: https://www.w3.org/WAI/WCAG21/Understanding/parsing

Expected behavior

Using the <input type="radio"> should convey the semantics to screenreaders without the aria-checked property.

Actual behavior

Steps to reproduce the problem

Sample snippet:
<swirl-radio _ngcontent-ng-c2234221409="" input-id="first_half_day" input-name="radio" value="1" class="sc-swirl-radio-h sc-swirl-radio-s hydrated"><label class="radio radio--variant-default sc-swirl-radio radio--unchecked" for="first_half_day"><span class="radio__control sc-swirl-radio"><swirl-visually-hidden class="sc-swirl-radio sc-swirl-visually-hidden-h sc-swirl-visually-hidden-s hydrated"><!----><input aria-checked="false" class="radio__input sc-swirl-radio" id="first_half_day" name="radio" type="radio" value="1"></swirl-visually-hidden><span aria-hidden="true" class="radio__box sc-swirl-radio"></span></span><span class="radio__label-container sc-swirl-radio"><span class="radio__label sc-swirl-radio">First half of the day</span></span></label></swirl-radio>

Specifications

• Swirl version number: 0.165.0

Component swirl-date-input is not localized

Issue summary

The component swirl-date-input is not localized. The component only displays months and days with english translations.

Expected behavior

The component should respect the users browser-/device-language or have the option to set a language-key.

Actual behavior

Browser-/Device-language is ignored. Texts are always displayed in english.

Steps to reproduce the problem

1. Change the browser-/device-language to a language other than english
2. Open a swirl-date-input
3. The calendar displays english translations

Specifications

• Swirl version number: 0.87.1
• Browser: Firefox 118.0.2 (64-bit)
• Device: Desktop
• Operating System: Ubuntu 22.04.3 LTS

TimePicker for selecting times

Feature request summary

Similar to the SwirlDatePicker, but lets the user select Times (hh:mm - hours and minutes).

Rationale

This feature was requested by a customer, who wanted an alternative to inputting numbers via the SwirlTimeInput.

DateInput: valueChange event update behavior

Feature request summary

Add a new event or update the valueChange event. Change the event valueChange of swirl-date-input so it triggers every single number input of the user instead of being fired after the complete input of the user, whether it is valid or not.

Rationale

It prevents the previous value is being used and provides better value tracking, instead of abandoned input of the user like the video here:

example.swirl.date.input.abandon.mp4

---

Feature requests that are not yet planned will be closed. We then use the
issue’s
👍 upvotes
to track and set priorities.

DatePicker: Option to highlight specified days in the calendar

Feature request summary

This is a request for a new option for the DatePicker and DateInput, that allows the developer to pass an array of dates to the component, so the rendered calendar can highlight these days.

Rationale

A customer, who uses this component in an app to track absences, wished for this feature. Context: In the app, users can see an overview of their existing absences / vacations and request new ones. When creating a new absence, the user should see in the DatePicker, which days are already planned for an absence.

Possible to upgrade `pdfjs-dist` dependency to 3.x?

swirl-components depends on pdfjs-dist 2.16.105:

swirl/packages/swirl-components/package.json

Line 59 in fec6223

"pdfjs-dist": "^2.16.105",

That, in turn, depends on dommatrix v1.0.3, which is abandoned: https://www.npmjs.com/package/dommatrix
I therefore keep getting warnings every time I run npm install.

This dependency has been removed in version pdfjs-dist v3.0.

Is it possible to upgrade swirl-components to a more recent version of pdfjs-dist, or will that break anything?