open-index/open-npm huggingface dataset:
npm package: @rubus/rubus
Description: Svelte Rubus UI Components
Author: rubus-ui
Latest version: 0.0.74

<img alt='Banner' src="https://github.com/TIOvOIT/rubus/blob/master/static/banner.png" width="100%">

# What is Rubus?

A Svelte implementation of [Spectrum CSS](https://opensource.adobe.com/spectrum-css/index.html), [Adobe Design System](https://spectrum.adobe.com/).

[Documentation](https://rubus.dev)

[中文说明](https://github.com/TIOvOIT/rubus/blob/master/README-ZH.md)

# Install

```bash
npm install @rubus/rubus # or yarn
```

# Usage

## Precondition

### Depend

Install

```bash
npm install --dev postcss autoprefixer svelte-preprocess
#or
yarn --dev postcss autoprefixer svelte-preprocess
```

And configure `svelte-preprocess`, [Learn how to configure `svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess/blob/master/docs/usage.md)

### Import CSS

The Rubus component does not come with the spectrum CSS style, you need to manually import it as a static resource, but I have prepared an automatic script for you: `static/init-css.js`.
You need to create a `scripts` (not mandatory) folder in your project root directory, then copy the `init-css.js`file into it, and then add the command in`package.json`

```json
  "init-rubus": "cd scripts && node init-css.js"
```

Then:

```bash
npm run init-rubus # or yarn
```

And introduced in HTML (template entry, Routify is `__index.html`, sapper is `template.html`) file:

```html
<!--Routify-->
<link rel="stylesheet" href="/styles/@spectrum-css/index.css" />

<!--Sapper-->
<link rel="stylesheet" href="styles/@spectrum-css/index.css" />
```

You also need to install `svelte-preprocess` to analyze global styles. For specific installation usage, please see [here](https://github.com/sveltejs/svelte-preprocess).

Okay, so far you have almost imported the css file and installed the dependencies.
Then you can start using it 😊, if you encounter any problems during use, please file an issue in time. Your issue is the cornerstone of the project.

# FAQ

If this error message appears:

```bash
not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
```

You need to do:

```javascript
<script>
  import { Button, Cornerstone } from "@rubus/rubus/src";
</script>

<Cornerstone
    spectrumScale="large"
    spectrumTheme="darkest"
    >
	<Button> Start </Button>
</Cornerstone>
```

If this error message appears:

```bash
Unexpected token (Note that you need plugins to import files that are not JavaScript)
```

You need to do:

- Import .mjs file.

```javascript

<script>
  import { Button, Cornerstone } from "@rubus/rubus/dist/index.mjs";
</script>

<Cornerstone spectrumScale="large" spectrumTheme="darkest">
 	<Button> Start </Button>
</Cornerstone>

```

You can do the same:

- Install postcss plugin

```bash
npm install rollup-plugin-postcss
```

Change rollup.config.js file:

```javascript
import postcss from "rollup-plugin-postcss";

...

export default {
  plugins: [
    postcss({
      extensions: [".css"],
    }),
  ]
}
```
npm package: @rubus/svelte-spectrum-icons-ui
Description: Adobe Spectrum Design System ui icons SVG as Svelte components
Author: rubus-ui
Latest version: 0.1.96

# Install

```bash

npm install  @rubus/svelte-spectrum-icons-ui # or yarn
```

# Usage

Add Icon before the iconography name.

```javascript
<script>
  import { IconInfoMedium} from "@rubus/svelte-spectrum-icons-ui";
</script>

<IconInfoMedium class="spectrum-Icon" ariaLabel="info-medium"/>

```

Learn more about the [iconography](https://spectrum.adobe.com/page/icons/).

# Props

| Prop         | Type            | Defaults                                                                 | Value                                       |
| ------------ | --------------- | ------------------------------------------------------------------------ | ------------------------------------------- |
| className    | String          | ""                                                                       | As a fallback prop of the svg element class |
| scale        | String          | "M"                                                                      | "M" or "L"                                  |
| ariaLabel    | String          | Icon name                                                                | Element aria-label                          |
| width/height | String / number | Automatically obtain the width and height of the path element in the Svg | Svg element width and height attributes     |

# What is svelte-spectrum-icons-ui?

[Adobe Spectrum Design System](https://spectrum.adobe.com/page/icons/) `ui` icons SVG as Svelte components
npm package: @rubus/svelte-spectrum-icons-workflow
Description: Adobe Spectrum Design System SVG workflow icons as Svelte components
Author: rubus-ui
Latest version: 0.1.7

# Install

```bash

npm install  @rubus/svelte-spectrum-icons-workflow # or yarn
```

# Usage

Add Icon before the iconography name.

```javascript
<script>
  import { IconUsersAdd} from "@rubus/svelte-spectrum-icons-workflow/dist/index.mjs";
</script>

<IconUsersAdd ariaLabel="users-add" class="spectrum-Icon"/>

```

Learn more about the [iconography](https://spectrum.adobe.com/page/icons/).

# Props

| Prop         | Type   | Defaults  | Value                                       |
| ------------ | ------ | --------- | ------------------------------------------- |
| className    | String | ""        | As a fallback prop of the svg element class |
| scale        | String | "M"       | "M" or "L"                                  |
| width/height | number | 20        | Icon size                                   |
| ariaLabel    | String | Icon name | Element aria-label                          |

# What is svelte-spectrum-icons-workflow?

[Adobe Spectrum Design System](https://spectrum.adobe.com/page/icons/) `workflow` icons SVG as Svelte components