README

Spindle UI (In development)

Spindle (Ameba Design System) UI Components

Spindle

Spindle UIは試験開発中のため、大幅に変更される可能性があります。安定版リリースまでの間はバージョン番号は0となり、バージョンに関わらずbreaking changeが行われることがありますので、利用時には注意してください。変更内容は、CHANGELOGに記載されています。

MIT licence npm

Spindle UIは、Amebaのデザインシステム「Spindle」で定義されたコンポーネントを配布するライブラリです。様々なタイプのプロジェクトに導入できるように設計されています。

インストール

npm install @openameba/spindle-ui

yarn add @openameba/spindle-ui

利用方法

Spindle UIは以下のように利用できます。

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@openameba/spindle-ui';

function App() {
  return <Button size="large" variant="contained">Spindle</Button>;
}

ReactDOM.render(<App />, document.querySelector('#app'));

Spindle UIはmodule版の配信もしています。利用する際には、導入ガイドを参考にしてください。

さらなる詳細はコンポーネント一覧、サンプルアプリケーションを参照してください。

NOTE: アイコン利用時はSpindle IconsのReactコンポーネントを読み、注意点を確認してください。

コンポーネント一覧

利用可能なコンポーネントは、Storybookで公開されています。各コンポーネントの開発状況はStoybook DocのStability Budgeで以下のように表されています。

想定された機能が実装、テストされており本番環境で利用できます
足りていない機能や不安定な動作があり、まだ完全ではないですが、本番環境で利用できます
開発中のため、本番環境での利用はしない方がよいでしょう
実験的な機能で大きな変更や削除される可能性があります
廃止される予定のため、できるだけはやく利用を停止してください

サンプルアプリケーション

Spindle UIは様々なパターンのアプリケーションで利用できます。詳細は各サンプルコードを閲覧してください。

スタイリング

Spindle UIのスタイルは、名前空間(spui)をもったCSSとして定義されています。これはスタイルを利用時に再定義する必要がないほか、コンポーネント志向のアプリケーションだけでなく、HTMLを中心としたWebページでも利用可能にするためです。

スタイルは以下の方法で利用できます。

必要なスタイルのみをビルド (推奨)

webpackやPostCSS、Sassなどを利用してアプリケーションに必要なスタイルのみをビルドします。生成したファイルは各アプリケーションで利用しているサーバから配信します。

この方法ではCSSファイルのサイズが最小限になり、配信サーバの品質も管理可能なため、できる限りこの方法での利用を推奨します。

導入の際には、サンプルアプリケーション(CSS Modules、PostCSS、Sass、styled-components)を参考にしてください。

CDNから読み込み

簡易的にSpindle UIのスタイルを試す場合には、CDNから読み込むと便利です。Webページの読み込み速度がそこまで重要でない場合、例えば開発環境や一部のランディングページなどで利用できます。

<!-- Spindle UIで用意されている全てのスタイルを読み込む場合 -->
<!-- 常に最新のスタイルを読み込む場合。ただしリダイレクトされるため遅延します -->
<link rel="stylesheet" href="https://unpkg.com/@openameba/spindle-ui/index.css">
<!-- バージョンを指定して読み込む場合。リダイレクトされないのでレスポンスが少し早いです -->
<link rel="stylesheet" href="https://unpkg.com/@openameba/spindle-ui@0.11.2/index.css">

<!-- コンポーネント毎にスタイルを読み込む場合 -->
<!-- 常に最新のスタイルを読み込む場合。ただしリダイレクトされるため遅延します -->
<link rel="stylesheet" href="https://unpkg.com/@openameba/spindle-ui/Button/Button.css">
<!-- バージョンを指定して読み込む場合。リダイレクトされないのでレスポンスが少し早いです -->
<link rel="stylesheet" href="https://unpkg.com/@openameba/spindle-ui@0.11.2/Button/Button.css">

ただし、CSSファイルサイズやファイル数が不必要に大きくなり、CDNサーバが遅延の原因になる可能性があるため本番Webアプリケーションでの利用は推奨していません。

ブラウザサポート

Spindle UIはFirefox、Google Chrome、Microsoft Edge、Safariの最新版とInternet Explorer 11で動作確認しています。ただし、CSS custom propertiesを使用しているため、Internet Explorer 11での利用時にはie11-custom-propertiesやcss-vars-ponyfillなどpolyfillとの併用が必要です。

開発方法

yarn install
yarn dev # storybookが起動します

ライセンス

Spindle UIはMITライセンスで公開されています。ただし、アイコンはSpindle Iconsに準じて、Creative Commons BY-NC-ND 4.0ライセンスで公開されています。

@openameba/spindle-ui

Usage no npm install needed!