Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pepabo/inhouse-components-web

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/pepabo/inhouse-components-web
Owner: pepabo
Created: 2023-04-18T06:28:18.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-11-16T10:01:32.000Z (about 2 months ago)
Last Synced: 2024-11-17T20:03:07.069Z (about 2 months ago)
Language: SCSS
Homepage: https://pepabo.github.io/inhouse-components-web/
Size: 1.46 MB
Stars: 2
Watchers: 24
Forks: 1
Open Issues: 6
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Inhouse Components for the web

- [Installation & Usage](packages/components-web/README.md)

## Components

- [App Bar](packages/app-bar)
- [Bottom Navigation](packages/bottom-navigation)
- [Button](packages/button)
- [Card](packages/card)
- [Checkbox](packages/checkbox)
- [Container](packages/container)
- [Description List](packages/description-list)
- [Grid](packages/grid)
- [Icon](packages/icon)
- [Interactive List](packages/interactive-list)
- [Interactive Table](packages/interactive-table)
- [List](packages/list)
- [Navigation Drawer](packages/navigation-drawer)
- [Progress Indicator](packages/progress-indicator)
- [Radio](packages/radio)
- [Select](packages/select)
- [Side Navigation](packages/side-navigation)
- [Snackbar](packages/snackbar)
- [Table](packages/table)
- [Textfield](packages/textfield)

### Storybook
[inhouse-components-web](https://pepabo.github.io/inhouse-components-web)

## Customization

components-web にはビルド済みの production ready な CSS とは別で、 Sass と NPM を使った flavor によるカスタマイズの仕組みが備わっています。

components-web では各コンポーネント Sass がインストール必須にはなっていないのですが、各コンポーネントを全てインストールすることによって Sass から CSS をビルドできるようにしています。このときに、 pepabo-inhouse/flavor に相当する内容を持ったパッケージ（以降 pepabo-inhouse/flavor 互換パッケージと表記）を pepabo-inhouse/flavor という名前でインストールすると解決されるようになっています。

それを実現するには以下のようなコマンド、あるいは package.json の設定をするとよいでしょう。

```bash
$ npm install @pepabo-inhouse/flavor@npm:@some-org/some-flavor --save
```

```jsonc
{
// 省略
"dependencies": {
"@pepabo-inhouse/flavor": "npm:@some-org/[email protected]"
}
// 省略
}
```

## Development philosophy

ウェブページ、ひいてはコンポーネントを設計するにあたって、既存のデザインライブラリやコンポーネントライブラリではすでに用意されたクラス名を当て込む、あるいは既存の名前のコンポーネントを組み立てることで実現できると考えられてきました。しかし、このアプローチには2つの問題点があります。

* ビルド済み CSS をデザインライブラリとして使う場合、捨てにくい（どこで使っているのかわからなくなる）
* それが実質何のコンポーネントであるかという実装をページ側が知る必要があり、セマンティックではなく構造が優先されてしまう

この問題を解決するため、Inhouse では構造的なコンポーネントではなくセマンティックなコンポーネントファーストでの実装を勧めています。

```html