npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@archer-edu/ux-components

v0.1.0-alpha.210

Published

Design is the digital design system for Archer products and experiences.

Downloads

13

Readme

Scale

Archer UXDS is the digital design system for Telekom products and experiences. By default, Archer UXDS is built to align with our corporate brand and design but allows for easy customization to fit your particular product. It helps you build your digital products faster and create superior experiences with ease. With production-ready components for code and design, a central library, and comprehensive documentation, Archer UXDS has everything you need. Currently, Archer UXDS is an open beta.

Archer UXDS components are customizable and written in TypeScript. If you want to represent the corporate identity of a separate brand, you need to replace the Telekom default theme (see detailed instructions below).

Scale badge License: MPL-2.0 GitHub code size in bytes GitHub repo size

Welcome to Archer UXDS

Access the comprehensive documentation for Scale on Telekom Brand & Design.

Are you a designer?

We provide a comprehensive Sketch library for designers building Telekom software. All components in the Sketch library are also available to your developers as code, making the handover very smooth and straightforward. For more information, access the Scale website with your Brand & Design credentials.

Customizing Archer UXDS for open source software

Although the code for Archer UXDS is free and available under the MPL 2.0 License, Deutsche Telekom fully reserves all rights to the Telekom brand. To prevent users from getting confused about the source of a digital product or experience, there are strict restrictions on using the Telekom brand and design, even when built into code that we provide. For any customization other than explicitly for the Telekom, you must replace the Deutsche Telekom default theme.

To use Archer UXDS as open source software and customize it with a neutral theme, please follow the instructions for our open source version.

Open source version

By following the instructions for the open source version, you obtain source code/packages that use a neutral theme and are fully covered by the MPL-2.0 License.

Setup with NPM

npm install @archer-edu/ux-components-neutral

To use the components, you need to load a CSS file and some JavaScript. The CSS file includes the fonts and design tokens.

Setup with plain HTML

<link
  rel="stylesheet"
  href="node_modules/@archer-edu/ux-components-neutral/dist/ux-components/ux-components.css"
/>
<script
  type="module"
  src="node_modules/@archer-edu/ux-components-neutral/dist/ux-components/ux-components.esm.js"
></script>

Setup with a bundler or ES modules

import '@archer-edu/ux-components-neutral/dist/ux-components/ux-components.css';
import {
  applyPolyfills,
  defineCustomElements,
} from '@archer-edu/ux-components-neutral/loader';

applyPolyfills().then(() => {
  defineCustomElements(window);
});

NPM packages

| Package name | Description | | ------------------------------------------ | ----------------------------- | | @archer-edu/ux-components-neutral | Stencil components | | @archer-edu/ux-components-react-neutral | Component proxies for React | | @archer-edu/ux-components-vue-neutral* | Component proxies for Vue | | @archer-edu/ux-components-angular-neutral* | Component proxies for Angular | | @archer-edu/ux-design-tokens-neutral | Design tokens |

*deprecated since v3.0.0-beta.x

Using the source code directly

If you want to use the source code, remove the following folders. These folders contain all the protected brand and design assets of the Telekom and are not available under the MPL-2.0 License:

| Folder | Content | | ------------------------------------------ | -------------------------- | | assets | UXDS key visual | | packages/components-sketch/ | Sketch generator templates | | packages/components/src/components/telekom | Telekom components | | packages/components/src/telekom | Telekom fonts & icons | | packages/components/src/html/telekom | Telekom code examples | | packages/design-tokens/src/telekom | Telekom design tokens | | packages/visual-tests/ | Visual tests | | storybook-vue | Telekom branded storybook |

Telekom version

Please note that the use of the Telekom brand and design assets – including but not limited to the logos, the color magenta, the typeface and icons, as well as the footer and header components – are not available for free use and require Deutsche Telekom's express permission for use in commerce.

Setup with NPM

Install the Archer UXDS component library in your project with NPM or Yarn:

npm install @archer-edu/ux-components

Setup with plain HTML

<link
  rel="stylesheet"
  href="node_modules/@archer-edu/ux-components/dist/ux-components/ux-components.css"
/>
<script
  type="module"
  src="node_modules/@archer-edu/ux-components/dist/ux-components/ux-components.esm.js"
></script>

Setup with a bundler or ES modules

import "@archer-edu/ux-components/dist/ux-components/ux-components.css";
import { applyPolyfills, defineCustomElements } from "@archer-edu/ux-components/loader";

applyPolyfills().then(() => {
  defineCustomElements(window);
});

NPM packages

| Package name | Description | | ---------------------------------- | ----------------------------- | | @archer-edu/ux-components | Stencil components | | @archer-edu/ux-components-react | Component proxies for React | | @archer-edu/ux-components-vue* | Component proxies for Vue | | @archer-edu/ux-components-angular* | Component proxies for Angular | | @archer-edu/ux-design-tokens | Archer design tokens |

*deprecated since v3.0.0-beta.x — please check out the info relative to frameworks in the documentation

Using the source code directly

Simply clone/download this repository and use the source code as is.

Monorepo packages overview

| Package name | Description | | ------------------ | ---------------------------------------------------------- | | components | Stencil components | | components-angular | Component proxies for Angular (auto-generated) | | components-react | Component proxies for React (auto-generated) | | components-sketch | Component templates for Sketch generation (auto-generated) | | components-vue | Component proxies for Vue (auto-generated) | | design-token | Design tokens | | generator-sketch | Sketch generator | | html-to-sketch | Component template Sketch conversion utilities | | storybook-vue | Our Storybook | | visual-tests | Visual snapshot testing |

Contributing

Code of conduct

This project has adopted the Contributor Covenant in version 2.0 as our code of conduct. Please see the details in our CODE_OF_CONDUCT.md. All contributors must abide by the code of conduct.

How to contribute

We always welcome and encourage contributions and feedback. For more information on how to contribute, the project structure, as well as additional information, see our Contribution Guidelines. By participating in this project, you agree to abide by its Code of Conduct at all times.

Contributors

Our commitment to open source means that we are enabling - even encouraging - all interested parties to contribute and become part of its developer community.

Licensing

Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG

Licensed under the Mozilla Public License 2.0 (MPL-2.0) (the "License"); you may not use this file except in compliance with the License.

You may obtain a copy of the License by reviewing the file LICENSE in the repository.

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the LICENSE for the specific language governing permissions and limitations under the License.

Local development

Get dependencies

yarn

Build assets

yarn build

Start development mode

yarn start

Component development

Useful commands

See the scripts section inside package.json for a list of all available commands

Testing

| Command | Description | | --------------------------------- | -------------------------------------- | | yarn test --spec | Run all tests | | yarn test --spec component-name | Run all tests for a specific component | | yarn test --spec --watch | Run all tests in watch mode | | yarn test --spec -u | Run all tests and update snapshots | | yarn test --spec--coverage | Run all tests and show coverage | | yarn test --e2e | Run all visual tests |

Some test commands can be combined e.g. yarn test -u --coverage

Format & lint

| Command | Description | | ------------- | ------------------------------------ | | yarn format | Run formatter on all supported files | | yarn lint | Run linter for all supported files |

Before you push

In order to satisfy the CI pipeline it is advised to run some scripts before pushing your changes to remote. Here some crucial ones:

yarn format yarn lint yarn test --spec --e2e -u

If any of the above commands throw an error, please fix the errors before pushing to remote


Find Archer UXDS on Bitbucket.