Getting Started

Installation

コンポーネントを使用するためには、まずパッケージをインストールする必要があります。

npm i @loos/lism-core

本当は@lism/coreにしたいのですが、すでに@lismがnpm上で取得されてしまっていたので、仮のパッケージ名で公開しています。

CSSの読み込み

Reset CSSも含めたCSSファイルを用意していますので、基本的にはそれを読み込んでご利用ください。

例えば、Next.jsであれば、_app.jsやlayout.jsでglobalスタイルとして読み込んでください。

import '@loos/lism-core/css/all.css';

Purgeする

ビルド環境の調整ができる場合は、PurgeCSS (opens in a new tab)を利用して、必要なCSSだけを抽出することができます。未検証

Using Components

import { Box, Text, ... } from '@loos/lism-core';
 
// ...
<Box p={20} bgc="pale">
	<Text fz="l">Lorem ipsum text...</Text>
</Box>
// ...

特定の環境に合わせたコンポーネントの読み込み

Next.js (App Router)

@loos/lism-nextパッケージを追加すると、Lism コンポーネントに関する"use client"の記述を省略することができるようになります。

（"use client"が必要なものにはすでに記述された状態でimportできるようになります。）

Add package

npm i @loos/lism-next

パッケージから直接コンポーネントのソースコードをimportできるようにするため、next.config.jsのtranspilePackagesに"@loos/lism-next"を追加してください。

next.config.js

const nextConfig = {
	transpilePackages: ["@loos/lism-next"],
	// ...
};
 
module.exports = nextConfig;

これらの準備により、<Tabs>などの"use client"が必要なコンポーネントも簡単に利用できるようになります。
（Boxなどの普通のコンポーネントも、@loos/lism-nextから同時にimportできます。）

import { Box, Tabs, TabItem } from '@loos/lism-next';
 
<Tabs>
	<TabItem label='tab1'>
		<Box>...</Box>
	</TabItem>
	<TabItem label='tab2'>
		<Box>...</Box>
	</TabItem>
</Tabs>

Astro

.jsxファイルではなく、.astroファイルでもコンポーネントを配布しています。準備中

npm i @loos/lism-astro

import { Box, ... } from '@loos/lism-astro';

一部のコンポーネントは、ReactとAstroで利用方法が変わるで注意してください。（各コンポーネントの解説ページで個別に説明していく予定です。）

Concept