scaleway / ultraviolet Goto Github PK

View Code? Open in Web Editor NEW

101.0 14.0 20.0 82.97 MB

A monorepo Design System with React components.

Home Page: https://ultraviolet.scaleway.com

License: Apache License 2.0

JavaScript 0.66% TypeScript 94.03% MDX 1.42% CSS 3.88% Dockerfile 0.01%

react ui scaleway ui-components ui-library reakit styled-components typescript form ultraviolet

ultraviolet's Introduction

Ultraviolet Core

Ultraviolet Core contains the core features of the Ultraviolet UI library. It is set of React library that can be used to build fast application.

Ultraviolet UI: The main library that includes a set of components and utilities to build fast application.
Ultraviolet Plus: An extension of UI with more complex components.
Ultraviolet Form: A library to build forms with Ultraviolet UI components, it is using React Final Form under the hood.
Ultraviolet Themes: A set of themes for the Ultraviolet UI library (default theme is included in @ultraviolet/ui).
Ultraviolet Icons: A library that provides a set of icons to use with Ultraviolet UI.

Installation

Quick start

$ pnpm add @ultraviolet/ui @emotion/react @emotion/styled

Documentation

Development

Before any command, install dependencies running following command:

$ pnpm install

Storybook

Our storybook includes @ultraviolet/ui, @ultraviolet/form and @ultraviolet/icons.

In order to start storybook without errors you will need to build the project once (this is because @ultraviolet/form uses @ultraviolet/ui build to run).

$ pnpm build
$ pnpm run start

Storybook documentation will then be available on http://localhost:6006

Test

Unit

$ pnpm run test:unit # Will run all tests
$ pnpm run test:unit:update # Will update all snapshots
$ pnpm run test:unit:watch # Will watch tests and only rerun the one who are modified
$ pnpm run test:unit:coverage # Will generate a coverage report
$ pnpm run testunit::coverage --coverageReporters lcov && open coverage/lcov-report/index.html # Will generate an open an html code coverage report

Accessibility

$ pnpm run test:a11y # Will run all accessibility tests
$ pnpm run test:a11y src/components/Alert # Will run accessibility test of Alert component only

Lint

$ pnpm run lint
$ pnpm run lint:fix

Typecheck

Running npx typecheck --noEmit won't work at root of the project. To run type check for all packages you need to run the following command:

$ pnpm run typecheck # this is a package json script that will run typecheck for all packages recursively

If you still want to use npx, you can run it from a package folder:

$ cd packages/ui
$ npx typecheck --noEmit

Build

$ pnpm run build
$ pnpm run build:profile # Will open a visual representation of the modules inside the compile package

Use a locally built package

You might want to test your local changes against a React application.

yalc is a tool aiming to simplify working with local npm packages by providing a different workflow than npm/pnpm link, hence avoiding most of their issues with module resolving.

$ pnpm install --global yalc # Make sure to have the yalc binary

Here is an example for using @ultraviolet/ui as a local package:

$ pnpm run build && cd packages/ui && yalc publish
$ # Now it's ready to install in your project
$ cd ../project-something
$ yalc add @ultraviolet/ui
$ cd ../ultraviolet
$ # If you do some changes into your package
$ pnpm run build && yalc publish --push --sig # --push will automatically update the package on projects where it have been added, --sig updates the signature hash to trigger webpack update

You can redo the same with @ultraviolet/form if you want to test it

⚠️ since 1.0.0.pre.51 (2021-04-23), yalc publish needs the --sig option to trigger webpack module actual update.

⚠️ yalc create a yalc.lock and updates the package.json in the target project. Make sure to not commit these changes

⚠️ if you are trying to yalc @ultraviolet/ui & @ultraviolet/form in your application and hope to see the change of @ultraviolet/ui into the component used by @ultraviolet/form you should be sure to not have any peerDeps of @ultraviolet/ui installed as it's will be resolve. If your are using pnpm and vite you can add pnpm.override: { "@ultraviolet/ui": "$@ultraviolet/ui" }. If this rfc is accepted this will solve our issue https://github.com/pnpm/rfcs/blob/main/text/0001-catalogs.md

Versioning

We are using Changeset to manage our versioning.

Once your modifications are ready to be released, you can run pnpm run changeset to create a new changeset. It will ask you to describe your changes and will create a new changeset file in the changesets folder.

Documentation

Checkout our documentation website.

Contributing

📝 You can participate in the development and start contributing to it.

ultraviolet's People

Contributors

Stargazers

Watchers

ultraviolet's Issues

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: .github/renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: packageRules: You have included an unsupported manager in a package rule. Your list: pnpm. Supported managers are: (ansible, ansible-galaxy, argocd, asdf, azure-pipelines, batect, batect-wrapper, bazel, bazelisk, bitbucket-pipelines, buildkite, bundler, cake, cargo, cdnurl, circleci, cloudbuild, cocoapods, composer, conan, deps-edn, docker-compose, dockerfile, droneci, fleet, flux, fvm, git-submodules, github-actions, gitlabci, gitlabci-include, gomod, gradle, gradle-wrapper, helm-requirements, helm-values, helmfile, helmsman, helmv3, hermit, homebrew, html, jenkins, jsonnet-bundler, kotlin-script, kubernetes, kustomize, leiningen, maven, meteor, mint, mix, nix, nodenv, npm, nuget, nvm, osgi, pip-compile, pip_requirements, pip_setup, pipenv, poetry, pre-commit, pub, puppet, pyenv, regex, ruby-version, sbt, setup-cfg, swift, tekton, terraform, terraform-version, terragrunt, terragrunt-version, tflint-plugin, travis, velaci, woodpecker).

fix: lineHeight issue with Text component

Line height are too big depending on context, a rework is needed.

refactor: remove FlexBox

We should remove it.

fix: refactor pagination

We need to refactor Pagination into PaginationV2 in order to change behavior. We will then need to migration Pagination everywhere we use it (List for example) to use new PaginationV2. Once migration is fully ended we can remove Pagination and rename PaginationV2 into Pagination.

refactor: xstyled removal

We'd like to move on from xstyled to have a more conventional usage of our components. Meaning no props based styled modifiers, spacing should be handled by the parent component

This issue might be transformed into a milestone at some point because it's a huge task

fix: RichSelect types

doc: rewrite documentation of all components

We should check each and every component documentation to verify it is still clean and workable.

Cloned and getting installation error

I cloned the project added pnpm and run pnpm install command. It added all need decencies and then i ran pnpm run start. It throws an error.

My node version is 18.12.0
pnpm version: 7.25.1

I tried version 16 and 19 for node and it gives same error. For version shifting i am using nvm

Failed to load preset: {"type":"presets"} on level 1
ERR! TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of Object
ERR!     at new NodeError (node:internal/errors:393:5)
ERR!     at validateString (node:internal/validators:163:11)
ERR!     at Module.require (node:internal/modules/cjs/loader:1054:3)
ERR!     at require (node:internal/modules/cjs/helpers:103:18)
ERR!     at interopRequireDefault (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:178:16)
ERR!     at getContent (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:194:10)
ERR!     at loadPreset (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:203:20)
ERR!     at /home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:256:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:255:18)
ERR!     at loadPreset (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:225:81)
ERR!     at /home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:256:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:255:18)
ERR!     at getPresets (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:313:23)
ERR!     at loadAllPresets (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:365:10)
ERR!     at buildDev (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_5icj5b5eayv74ugp47po7l6rpm/node_modules/@storybook/core-server/dist/cjs/build-dev.js:209:50)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:95:5)
ERR!  TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of Object
ERR!     at new NodeError (node:internal/errors:393:5)
ERR!     at validateString (node:internal/validators:163:11)
ERR!     at Module.require (node:internal/modules/cjs/loader:1054:3)
ERR!     at require (node:internal/modules/cjs/helpers:103:18)
ERR!     at interopRequireDefault (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:178:16)
ERR!     at getContent (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:194:10)
ERR!     at loadPreset (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:203:20)
ERR!     at /home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:256:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:255:18)
ERR!     at loadPreset (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:225:81)
ERR!     at /home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:256:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:255:18)
ERR!     at getPresets (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:313:23)
ERR!     at loadAllPresets (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_ezwbcwsuf2bqvxzlg3s7mwruqi/node_modules/@storybook/core-common/dist/cjs/presets.js:365:10)
ERR!     at buildDev (/home/junaidklair/github.com/scaleway-ui/node_modules/.pnpm/@[email protected]_5icj5b5eayv74ugp47po7l6rpm/node_modules/@storybook/core-server/dist/cjs/build-dev.js:209:50)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:95:5) {
ERR!   code: 'ERR_INVALID_ARG_TYPE'
ERR! }

refator: migrate scaleway ui website into here

Scaleway UI Website should be merged into here instead of a separated repository in order to manage everything link to SCW UI right here and nowhere else.

https://github.com/scaleway/scaleway-ui-website

refactor: remove Grid

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:

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.

Cannot push to the Git repository.

semantic-release cannot push the version tag to the branch main on the remote Git repository with URL https://x-access-token:[secure]@github.com/scaleway/scaleway-ui.

This can be caused by:

a misconfiguration of the repositoryUrl option
the repository being unavailable
or missing push permission for the user configured via the Git credentials on your CI environment

Good luck with your project ✨

Your semantic-release bot 📦🚀

chore: consistent component interface

We need to have a consistent way of naming our props

For example:
In Avatar we use textBgColor and in Popper we use backgroundColor

feat: remove GlobalStyle

Our GlobalStyle component was made for scaleway console, we should remove it

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.

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

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.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

refactor: Alert component

Alert component needs to be refactor to use new theme and properties.

ci: a11y automated tests

Would be nice to have a way to check through the CI that our components are accessible,

This axe jest matcher could be a nice solution

Error: Evaluation failed: TestingLibraryElementError: Unable to find an accessible element with the role "button"

Hi,

I'am trying to reuse the storybook in my project but when i push the code on codemagic with the following command:

npx chromatic --project-token=1a5d[...] --build-script-name=build:storybook --allow-console-errors

An error appears:

Chromatic CLI v6.14.0
https://www.chromatic.com/docs/cli

  ✔ Authenticated with Chromatic
    → Using project token '********5491'
  ✔ Retrieved git information
    → Commit 'bec27bf' on branch 'main'; found 1 parent build
  ✔ Collected Storybook metadata
    → ; no supported addons found
  ✔ Initialized build
    → Build 6 initialized
  ✔ Storybook built in 4 minutes 31 seconds
    → View build log at /root/scaleway-ui/build-storybook.log
  ✔ Publish complete in 45 seconds
    → View your Storybook at https://63bebe8ce693f446618df4b5-zhrkhnbyvw.chromatic.com
  ✔ Started build 6
    → Continue setup at https://www.chromatic.com/setup?appId=63bebe8ce693f446618df4b5
  ✔ Build 6 failed after 37 seconds
    → Tested 413 stories across 82 components; captured 413 snapshots and found 1 component error

This is the content of the error:

Error: Evaluation failed: TestingLibraryElementError: Unable to find an accessible element with the role "button"

Here are the accessible roles:

  combobox:

  Name "Select...":
  <input
    aria-autocomplete="list"
    aria-expanded="false"
    aria-haspopup="true"
    autocapitalize="none"
    autocomplete="off"
    autocorrect="off"
    class=""
    id=":r0:"
    role="combobox"
    spellcheck="false"
    style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"
    tabindex="0"
    type="text"
    value=""
  />

  --------------------------------------------------

Ignored nodes: comments, script, style
<body
  class="sb-main-padded sb-show-main"
>
  <div
    class="sb-preparing-story sb-wrapper"
  >
    <div
      class="sb-loader"
    />
  </div>
  <div
    class="sb-preparing-docs sb-wrapper"
  >
    <div
      class="sb-previewBlock"
    >
      <div
        class="sb-previewBlock_header"
      >
        <div
          class="sb-previewBlock_icon"
        />
        <div
          class="sb-previewBlock_icon"
        />
        <div
          class="sb-previewBlock_icon"
        />
        <div
          class="sb-previewBlock_icon"
        />
      </div>
      <div
        class="sb-previewBlock_body"
      >
        <div
          class="sb-loader"
        />
      </div>
    </div>
    <table
      aria-hidden="true"
      class="sb-argstableBlock"
    >
      <thead
        class="sb-argstableBlock-head"
      >
        <tr>
          <th>
            <span>
              Name
            </span>
          </th>
          <th>
            <span>
              Description
            </span>
          </th>
          <th>
            <span>
              Default
            </span>
          </th>
          <th>
            <span>
              Control
            </span>
          </th>
        </tr>
      </thead>
      <tbody
        class="sb-argstableBlock-body"
      >
        <tr>
          <td>
            <span>
              propertyName
            </span>
            <span
              title="Required"
            >
              *
            </span>
          </td>
          <td>
            <div>
              <span>
                This is a short description
              </span>
            </div>
            <div
              class="sb-argstableBlock-summary"
            >
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
            </div>
          </td>
          <td>
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
          </td>
          <td>
            <button>
              Set string
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          <td>
            <div>
              <span>
                This is a short description
              </span>
            </div>
            <div
              class="sb-argstableBlock-summary"
            >
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
            </div>
          </td>
          <td>
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
          </td>
          <td>
            <button>
              Set string
            </button>
          </td>
        </tr>
        <tr>
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          <td>
            <div>
              <span>
                This is a short description
              </span>
            </div>
            <div
              class="sb-argstableBlock-summary"
            >
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
            </div>
          </td>
          <td>
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
          </td>
          <td>
            <button>
              Set string
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div
    class="sb-nopreview sb-wrapper"
  >
    <div
      class="sb-nopreview_main"
    >
      <h1
        class="sb-nopreview_heading sb-heading"
      >
        No Preview
      </h1>
      <p>
        Sorry, but you either have no stories or none are selected somehow.
      </p>
      <ul>
        <li>
          Please check the Storybook config.
        </li>
        <li>
          Try reloading the page.
        </li>
      </ul>
      <p>
        If the problem persists, check the browser console, or the terminal you've run Storybook from.
      </p>
    </div>
  </div>
  <div
    class="sb-errordisplay sb-wrapper"
  >
    <pre
      class="sb-heading"
      id="error-message"
    />
    <pre
      class="sb-errordisplay_code"
    >
      <code
        id="error-stack"
      />
    </pre>
  </div>
  <div
    id="root"
  >
    <div
      style="margin-bottom: 150px;"
    >
      <div
        style="height: 80px;"
      >
        <div
          class=" css-1t0vhyn-container e1lzna4r5"
          data-testid="rich-select-basic"
        >
          <span
            class="css-7pg0cj-a11yText"
            id="react-select-2-live-region"
          />
          <span
            aria-atomic="false"
            aria-live="polite"
            aria-relevant="additions text"
            class="css-7pg0cj-a11yText"
          />
          <div
            class=" css-rjf8lv-control"
          >
            <div
              class=" css-qm2nwd"
            >
              <label
                aria-live="assertive"
                as="label"
                class="css-isgbik e1lzna4r2"
                for=":r0:"
              >
                Select...
              </label>
              <div
                class=" css-19ckjwh-singleValue"
              >
                Option A
              </div>
              <div
                class="css-7ygvwy"
                data-value=""
              >
                <input
                  aria-autocomplete="list"
                  aria-expanded="false"
                  aria-haspopup="true"
                  autocapitalize="none"
                  autocomplete="off"
                  autocorrect="off"
                  class=""
                  id=":r0:"
                  role="combobox"
                  spellcheck="false"
                  style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"
                  tabindex="0"
                  type="text"
                  value=""
                />
              </div>
            </div>
            <div
              class=" css-ffo8u1"
            >
              <span
                class=" css-1rlboq6-indicatorSeparator"
              />
              <div
                aria-hidden="true"
                class=" css-1xc3v61-indicatorContainer"
              >
                <div
                  class="css-108jn5w e1sgck4o0"
                >
                  <svg
                    class="css-klb7kl etwatq50"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M8 11c-.28 0-.55-.11-.74-.3L3.3 6.77a1.04 1.04 0 0 1 0-1.47 1.06 1.06 0 0 1 1.49 0L8 8.48l3.2-3.17a1.06 1.06 0 0 1 1.72.33 1.04 1.04 0 0 1-.23 1.14L8.74 10.7c-.2.2-.46.31-.74.31"
                    />
                  </svg>
                </div>
              </div>
            </div>
          </div>
          <input
            name="basic"
            type="hidden"
            value="a"
          />
          <div
            class="css-9vn1ol e1lzna4r3"
          >
            <div
              class="css-19pioxy e1lzna4r4"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    hidden="true"
    id="docs-root"
  />
</body>
    at Object.getElementError (https://63bebe8ce693f446618df4b5-zhrkhnbyvw.capture.chromatic.com/75330.834ff524.iframe.bundle.js:2:1916496)
    at https://63bebe8ce693f446618df4b5-zhrkhnbyvw.capture.chromatic.com/75330.834ff524.iframe.bundle.js:2:1935143
    at https://63bebe8ce693f446618df4b5-zhrkhnbyvw.capture.chromatic.com/75330.834ff524.iframe.bundle.js:2:1934342
    at https://63bebe8ce693f446618df4b5-zhrkhnbyvw.capture.chromatic.com/75330.834ff524.iframe.bundle.js:2:1935683
    at Playground.play (https://63bebe8ce693f446618df4b5-zhrkhnbyvw.capture.chromatic.com/main.7e9be0db.iframe.bundle.js:1:660171)
    at _callee7$ (https://63bebe8ce693f446618df4b5-zhrkhnbyvw.capture.chromatic.com/75330.834ff524.iframe.bundle.js:2:1373312)
    at tryCatch (https://63bebe8ce693f446618df4b5-zhrkhnbyvw.capture.chromatic.com/75330.834ff524.iframe.bundle.js:2:4694795)
    at Generator.invoke (https://63bebe8ce693f446618df4b5-zhrkhnbyvw.capture.chromatic.com/75330.834ff524.iframe.bundle.js:2:4697342)
    at Generator.next (https://63bebe8ce693f446618df4b5-zhrkhnbyvw.capture.chromatic.com/75330.834ff524.iframe.bundle.js:2:4695570)
    at StoryRender_asyncGeneratorStep (https://63bebe8ce693f446618df4b5-zhrkhnbyvw.capture.chromatic.com/75330.834ff524.iframe.bundle.js:2:1365728)
    at ExecutionContext._evaluateInternal (/var/task/capture-v4/build/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:218:19)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async ExecutionContext.evaluate (/var/task/capture-v4/build/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:107:16)
    at async /var/task/capture-v4/build/bundle.js:703215:7
    at async NavigatorWatcher2.waitForIdle (/var/task/capture-v4/build/bundle.js:673194:9)
    at async PuppeteerRenderer.renderSpec (/var/task/capture-v4/build/bundle.js:703162:25)
    at async PuppeteerRenderer.renderSnapshot (/var/task/capture-v4/build/bundle.js:703054:21)
    at async PuppeteerRenderer.captureSpecs (/var/task/capture-v4/build/bundle.js:703003:18)
    at async PuppeteerRenderer.executeWithCallback (/var/task/capture-v4/build/bundle.js:703269:14)

A screen of element in error:

fix: useId to generate id instead of getUUID

Since react 18 has a hook for generating IDs we can directly use it instead of using getUUID helper. Helper should also be removed.

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.

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

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.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

doc: all stories rework

Stories needs to be seen again in order to have clean code examples and clear documentation.

feat: new Icons

Current Icons are getting old and as seen with design we wish to change them as soon as possible. It will be a great addition for v1.

feat: port remaining components

We should have one last pass on scaleway console's component and see if we can migrate some

The automated release is failing 🚨

🚨 The automated release from the `master` branch failed. 🚨

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

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 resolve 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 master branch. You can also manually restart the failed CI job that runs semantic-release.

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

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.

Cannot push to the Git repository.

semantic-release cannot push the version tag to the branch master on the remote Git repository with URL https://github.com/scaleway/scaleway-ui.

This can be caused by:

a misconfiguration of the repositoryUrl option
the repository being unavailable
or missing push permission for the user configured via the Git credentials on your CI environment

Good luck with your project ✨

Your semantic-release bot 📦🚀

fix: List types

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.

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

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.

Cannot push to the Git repository.

semantic-release cannot push the version tag to the branch main on the remote Git repository with URL https://x-access-token:[secure]@github.com/scaleway/scaleway-ui.

This can be caused by:

a misconfiguration of the repositoryUrl option
the repository being unavailable
or missing push permission for the user configured via the Git credentials on your CI environment

Good luck with your project ✨

Your semantic-release bot 📦🚀

refactor: migrate Typography to Text

New component Text should be used instead of Typography. Migration process is available here: https://main.ui.scaleway.com/?path=/docs/migrations-typography-to-text--page

Once migration is done we should remove Typography component from library.

Reporting a vulnerability

Hello!

I hope you are doing well!

We are a security research team. Our tool automatically detected a vulnerability in this repository. We want to disclose it responsibly. GitHub has a feature called Private vulnerability reporting, which enables security research to privately disclose a vulnerability. Unfortunately, it is not enabled for this repository.

Can you enable it, so that we can report it?

Thanks in advance!

PS: you can read about how to enable private vulnerability reporting here: https://docs.github.com/en/code-security/security-advisories/repository-security-advisories/configuring-private-vulnerability-reporting-for-a-repository

feat: layout and grid system

Current system with Grid, Row and Col doesn't match our needs we need to find a better alternative.

feat: new Banner component

A new component needs to be created: Banner it is like an Alert but more marketing oriented.

doc: breaking changes and how to handle it

refactor: Toggle

fix: remove RadioBorderedBox

Since we created SelectableCard we can remove RadioBorderedBox.

feat: new button

We want to re-do Button component in order to be clean for a V1 release.

This migration will be done in two steps:

We create ButtonV2 then migrate all Button to ButtonV2
We rename ButtonV2 in Button and remove old component

chore: define theme interface

We need to define the theme contract interface to be able to experiment theme switching

Some examples:
https://github.com/WTTJ/welcome-ui/tree/master/packages/Themes
https://material-ui.com/customization/default-theme/#default-theme
https://github.com/salesforce/design-system-react/blob/989bbeb2ea940fce5c2fe7a8fa6505a48f630b7c/utilities/design-tokens/dist/force-base.common.js

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	`@types/react-datepicker`

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

fix(deps): update nivo monorepo to v0.87.0 (@nivo/bar, @nivo/core, @nivo/line, @nivo/pie, @nivo/scales)
fix(deps): update dependency react-datepicker to v7 (react-datepicker, @types/react-datepicker)

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

chore(devdeps): update pnpm to v9.7.0
fix(deps): update dependency @commitlint/cli to v19.4.0
fix(deps): update dependency eslint to v9.9.0
fix(deps): update dependency eslint-plugin-testing-library to v6.3.0
fix(deps): update dependency vite to v5.4.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

fix(deps): update dependency @scaleway/eslint-config-react to v4.0.4

Detected dependencies

dockerfile

Dockerfile

node 20.16.0-alpine

github-actions

.github/workflows/action.yml

kentaro-m/auto-assign-action v2.0.0

.github/workflows/changesets-renovate.yml

actions/checkout v4

pnpm/action-setup v4.0.0

.github/workflows/ci.yml

actions/checkout v4

pnpm/action-setup v4.0.0

actions/setup-node v4.0.3

actions/checkout v4

pnpm/action-setup v4.0.0

actions/setup-node v4.0.3

actions/checkout v4

pnpm/action-setup v4.0.0

actions/setup-node v4.0.3

actions/checkout v4

pnpm/action-setup v4.0.0

actions/setup-node v4.0.3

codecov/codecov-action v4.5.0

actions/checkout v4

pnpm/action-setup v4.0.0

actions/setup-node v4.0.3

actions/checkout v4

rlespinasse/github-slug-action v4

bobheadxi/deployments v1.5.0

actions/cache v4

docker/setup-buildx-action v3

docker/login-action v3

docker/build-push-action v6

philibea/scaleway-containers-deploy v1.1.5

bobheadxi/deployments v1.5.0

ubuntu 22.04

ubuntu 22.04

ubuntu 22.04

ubuntu 22.04

ubuntu 22.04

ubuntu 22.04

.github/workflows/illustrations-update.yml

actions/checkout v4

pnpm/action-setup v4.0.0

actions/setup-node v4.0.3

stefanzweifel/git-auto-commit-action v5.0.1

.github/workflows/illustrations-upload.yml

actions/checkout v4

actions/setup-python v5

pnpm/action-setup v4.0.0

actions/setup-node v4.0.3

.github/workflows/pull_request_title.yml

actions/checkout v4

pnpm/action-setup v4.0.0

actions/setup-node v4.0.3

ubuntu 22.04

.github/workflows/release.yml

actions/checkout v4

pnpm/action-setup v4.0.0

actions/setup-node v4.0.3

.github/workflows/size-limit.yml

actions/checkout v4

pnpm/action-setup v4.0.0

actions/setup-node v4.0.3

ubuntu 22.04

.github/workflows/sync-design-tokens.yml

actions/checkout v4

pnpm/action-setup v4.0.0

actions/setup-node v4.0.3

peter-evans/create-pull-request v6

ubuntu 22.04

.github/workflows/teardown_pull_request.yml

actions/checkout v4

rlespinasse/github-slug-action v4

philibea/scaleway-containers-deploy v1.1.5

bobheadxi/deployments v1.5.0

ubuntu 22.04

npm

examples/next-advanced/package.json

@emotion/react 11.13.0

@emotion/styled 11.13.0

next 14.2.5

react 18.3.1

react-dom 18.3.1

react-schemaorg 2.0.0

react-syntax-highlighter 15.5.0

react-use-clipboard 1.0.9

schema-dts 1.1.2

@babel/core 7.25.2

@types/node 20.14.15

@types/react 18.3.3

next-transpile-modules 10.0.1

@types/react-syntax-highlighter 15.5.13

examples/next-login/package.json

@emotion/react 11.13.0

@emotion/styled 11.13.0

next 14.2.5

react 18.3.1

react-dom 18.3.1

react-schemaorg 2.0.0

react-syntax-highlighter 15.5.0

react-use-clipboard 1.0.9

schema-dts 1.1.2

@babel/core 7.25.2

@types/node 20.14.15

@types/react 18.3.3

@types/react-syntax-highlighter 15.5.13

next-transpile-modules 10.0.1

examples/next-simple/package.json

@emotion/react 11.13.0

@emotion/styled 11.13.0

next 14.2.5

react 18.3.1

react-dom 18.3.1

react-schemaorg 2.0.0

react-syntax-highlighter 15.5.0

react-use-clipboard 1.0.9

schema-dts 1.1.2

@babel/core 7.25.2

@types/node 20.14.15

@types/react 18.3.3

next-transpile-modules 10.0.1

@types/react-syntax-highlighter 15.5.13

package.json

@babel/core 7.25.2

@babel/eslint-parser 7.25.1

@babel/plugin-transform-runtime 7.24.7

@babel/preset-env 7.25.3

@babel/preset-react 7.24.7

@babel/preset-typescript 7.24.7

@babel/runtime 7.25.0

@biomejs/biome 1.8.3

@changesets/changelog-github 0.5.0

@changesets/cli 2.27.7

@commitlint/cli 19.3.0

@commitlint/config-conventional 19.2.2

@emotion/babel-plugin 11.12.0

@emotion/cache 11.13.1

@emotion/eslint-plugin 11.12.0

@emotion/jest 11.13.0

@emotion/react 11.13.0

@emotion/styled 11.13.0

@eslint/compat 1.1.1

@eslint/eslintrc 3.1.0

@scaleway/eslint-config-react 4.0.3

@scaleway/tsconfig 1.1.1

@scaleway/use-i18n 6.1.10

@size-limit/file 11.1.4

@size-limit/preset-big-lib 11.1.4

@storybook/addon-a11y 8.2.8

@storybook/addon-essentials 8.2.8

@storybook/addon-interactions 8.2.8

@storybook/addon-links 8.2.8

@storybook/addon-mdx-gfm 8.2.8

@storybook/addon-themes 8.2.8

@storybook/blocks 8.2.8

@storybook/builder-vite 8.2.8

@storybook/components 8.2.8

@storybook/core-events 8.2.8

@storybook/manager-api 8.2.8

@storybook/mdx2-csf 1.1.0

@storybook/react 8.2.8

@storybook/react-vite 8.2.8

@storybook/theming 8.2.8

@svgr/rollup 8.1.0

@testing-library/dom 10.4.0

@testing-library/jest-dom 6.4.8

@testing-library/react 16.0.0

@testing-library/user-event 14.5.2

@types/node 20.14.15

@types/react 18.3.3

@types/react-datepicker 6.2.0

@types/react-dom 18.3.0

@types/zxcvbn 4.4.4

@vitejs/plugin-react 4.3.1

@vitest/coverage-istanbul 2.0.5

@vitest/ui 2.0.5

babel-loader 9.1.3

babel-plugin-annotate-pure-calls 0.4.0

babel-plugin-named-exports-order 0.0.2

browserslist 4.23.3

cross-env 7.0.3

cz-conventional-changelog 3.3.0

date-fns 3.6.0

emoji-toolkit 9.0.1

esbuild-plugin-browserslist 0.14.0

eslint 9.8.0

eslint-plugin-testing-library 6.2.2

expect 29.7.0

file-loader 6.2.0

globals 15.9.0

happy-dom 14.12.3

http-server 14.1.1

husky 9.1.4

identity-obj-proxy 3.0.0

jest-axe 9.0.0

lint-staged 15.2.8

postcss 8.4.41

react 18.3.1

react-dom 18.3.1

read-pkg 9.0.1

regenerator-runtime 0.14.1

require-from-string 2.0.2

rollup-plugin-postcss 4.0.2

shx 0.3.4

size-limit 11.1.4

storybook 8.2.8

timekeeper 2.3.1

turbo 2.0.12

typescript 5.5.4

vite 5.3.5

vitest 2.0.5

vitest-canvas-mock 0.3.3

vitest-localstorage-mock 0.1.2

zxcvbn 4.4.2

node >=18.x

pnpm >=9.x

pnpm 9.6.0

packages/form/package.json

@babel/runtime 7.25.0

@emotion/react 11.13.0

@emotion/styled 11.13.0

react-select 5.8.0

react-hook-form 7.52.2

@babel/core 7.25.2

@types/final-form-focus 1.1.7

@types/react 18.3.3

@types/react-dom 18.3.0

react 18.3.1

react-dom 18.3.1

@emotion/react 11.13.0

@emotion/styled 11.13.0

react 18.x

react-dom 18.x

react-hook-form 7.52.2

node >=18.x

pnpm >=9.x

packages/icons/package.json

@babel/core 7.25.2

@types/react 18.3.3

@types/react-dom 18.3.0

@emotion/react 11.13.0

@emotion/styled 11.13.0

react 18.3.1

react-dom 18.3.1

node >=18.x

pnpm >=9.x

packages/illustrations/package.json

@emotion/react 11.13.0

@emotion/styled 11.13.0

react 18.3.1

react-dom 18.3.1

node >=18.x

pnpm >=9.x

packages/plus/package.json

@uiw/codemirror-extensions-langs 4.23.0

@uiw/codemirror-theme-material 4.23.0

@uiw/react-codemirror 4.23.0

react-intersection-observer 9.13.0

@babel/core 7.25.2

@emotion/react 11.13.0

@emotion/styled 11.13.0

@types/react 18.3.3

@types/react-dom 18.3.0

react 18.3.1

react-dom 18.3.1

@emotion/react 11.13.0

@emotion/styled 11.13.0

react 18.3.1

react-dom 18.3.1

node >=18.x

pnpm >=9.x

packages/themes/package.json

deepmerge 4.3.1

node >=18.x

pnpm >=9.x

packages/ui/package.json

@emotion/serialize 1.3.0

@nivo/bar 0.80.0

@nivo/core 0.80.0

@nivo/line 0.80.0

@nivo/pie 0.80.0

@nivo/scales 0.80.0

@scaleway/random-name 5.1.0

@scaleway/use-media 3.0.1

deepmerge 4.3.1

react-datepicker 6.9.0

react-select 5.8.0

react-toastify 10.0.5

react-use-clipboard 1.0.9

reakit 1.3.11

@babel/core 7.25.2

@emotion/react 11.13.0

@emotion/styled 11.13.0

@types/react 18.3.3

@types/react-datepicker 6.2.0

@types/react-dom 18.3.0

react 18.3.1

react-dom 18.3.1

@emotion/react 11.13.0

@emotion/styled 11.13.0

react 18.3.1

react-dom 18.3.1

node >=18.x

pnpm >=9.x

Check this box to trigger a request for Renovate to run again on this repository

Should List V2 handle the case where there is no selectable row, but List is multiselectable?

https://github.com/scaleway/scaleway-ui/blob/77bf1b6b43441daa4b6843ee11cfe9989e9b7fa9/packages/ui/src/components/ListV2/ListHeaderRow.tsx#L84

For now, whenever all rows are selectable=false (so will be disabled), the checkbox in the header to select / unselect all is not disabled (or hidden). Maybe it would be better if it was?

Add support for devcontainer

Is your feature request related to a problem? Please describe.

https://code.visualstudio.com/docs/remote/containers

It could allow users to use github codespace for contributing to your project

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Component]: This is a test

Type of request

Enhancement

Is it Front-End or Design related only?

Design

Library

Describe the needs

this is a test

Include any specifications

this is a test

Screenshots / Videos

this is a test

Any other details?

No response

scaleway / ultraviolet Goto Github PK

ultraviolet's Introduction

Ultraviolet Core

Installation

Quick start

Documentation

Development

Storybook

Test

Unit

Accessibility

Lint

Typecheck

Build

Use a locally built package

Versioning

Documentation

Contributing

ultraviolet's People

Contributors

Stargazers

Watchers

Forkers

ultraviolet's Issues

🚨 The automated release from the main branch failed. 🚨

Cannot push to the Git repository.

🚨 The automated release from the main branch failed. 🚨

Invalid npm token.

🚨 The automated release from the main branch failed. 🚨

Invalid npm token.

🚨 The automated release from the master branch failed. 🚨

Cannot push to the Git repository.

🚨 The automated release from the main branch failed. 🚨

Cannot push to the Git repository.

Edited/Blocked

Pending Status Checks

Open

Detected dependencies

Type of request

Is it Front-End or Design related only?

Library

Describe the needs

Include any specifications

Screenshots / Videos

Any other details?

Recommend Projects

Recommend Topics

Recommend Org

🚨 The automated release from the `main` branch failed. 🚨

🚨 The automated release from the `main` branch failed. 🚨

🚨 The automated release from the `main` branch failed. 🚨

🚨 The automated release from the `master` branch failed. 🚨

🚨 The automated release from the `main` branch failed. 🚨