Overview

Here lies a few packages for UI components used on Archive.org.

This repo is no longer open to receive new packages. Please refer to https://github.com/internetarchive/iaux-typescript-wc-template when creating new components.

Setup

EACH PACKAGE in /packages MUST INSTALL ITS OWN DEPS.

Note: we no longer use lerna to manage dependencies nor releases

Running ia-components (only)

Run our local UI component development environment.

cd packages/ia-components && yarn run storybook

Code Structure

There are several node packages in this one repo. They are located under the packages directory.

Publishing

EACH PACKAGE in /packages directory manages its own release.

To clarify in the commit/merge, please note package & its new version. ex. [email protected]

Coding rules

This is structured so that there is compatibility with the upstream Archive.org codebase.

JS Styleguide

Currently, we are using Airbnb's styleguide and will extend accordingly. We have added ESLint to help with staying in convention.

Using StorybookJS

Some packages use StorybookJS to show usage examples of our components. For details on how to run StorybookJS, visit the ia-components readme: IA Components Readme

Run Storybook in ia-components:

cd packages/ia-components && yarn run storybook

Unit Testing with JestJS

JestJS is pliable enough for us to test in JavaScript and TypeScript. Try running our tests:

cd packages/ia-components && yarn run test

Debugging

We are using the common debug module.

To add to a module, add a line like

const debug = require('debug')('ia-components:COMPONENTNAME')

To enable, for example, debugging in all ia-components, and debugging in the dweb-archive:Nav module.

In Node add a line to your top level application BEFORE requiring or importing the other modules.

process.env.DEBUG="ia-components:* dweb-archive:Nav"

In Browser, add a line to your index.html or equivalent BEFORE including the bundle.

<script type="text/javascript">localStorage.debug = "dweb-archive dweb-archive:* dweb-transports dweb-transports:* dweb-objects dweb-objects:*";</script>

Other

in v2mocks there is code that is pulled from IA "View Source" and converted to JSX using this tool: https://magic.reactjs.net/htmltojsx.htm

Archive.org v2 uses Bootstrap 3.0. Docs can be found here: http://bootstrapdocs.com/v3.0.0/docs/css/#overview

License

See our license file.