ccl-component-kit4svelte

CANDY CHUPS Labのサイトで使うコンポーネントのキットです。 元々Reactコンポーネントで開発していたのをSvelteに移行しました。

このライブラリの開発を行うにはSvelteの導入が必要です。

Figma

Figma

Chromatic

Chromatic

Chromaticによるビジュアルテストをローカルで実施したい場合はreiji1020までご連絡ください。

利用用途

CANDY CHUPS Lab.名義でWebサービスを開発したり、ハッカソンに参加する時に簡単に使用できるコンポーネントになります。

基本的にはCCLメンバー以外が使ってもうま味はないです。俺得ライブラリの予定です。

利用方法

利用しているパッケージマネージャーのコマンドでライブラリを導入して下さい。

yarn add cclkit4svelte

npm i cclkit4svelte

pnpm install cclkit4svelte

本ライブラリの開発について

コンポーネントライブラリの開発には、Node.jsのVersion20以降の環境が必要です。パッケージマネージャにはnpmを使用します。詳細なバージョンについてはpackage.jsonに記載をしていますのでご確認ください。

Node.jsのバージョン切り替えにはVoltaをおすすめします。

volta install node
# or
volta install node@20

node -v
#任意のNodeのバージョンが表示されればOK
v20.11.1

また、本ライブラリの開発にはpnpmの導入が必要です。npmやyarnでは開発準備ができないためご注意ください。voltaを使用している場合、pnpmもvoltaを使用して導入することができます。

volta install pnpm

新規コンポーネントを開発する場合は、必ずStorybookで確認できるコンポーネント仕様書を一緒に作成してください。storiesはsrc/storiesディレクトリの中に格納してください。

コンポーネントそのものはlibディレクトリの中に格納してください。

ccl-component-kit

This is a kit of components for use at the CANDY CHUPS Lab site. Originally developed with React components, we migrated to Svelte.

Everything you need to build a Svelte project, powered by create-svelte.

Figma

Figma

Chromatic

Chromatic

Please contact reiji1020 if you wish to carry out visual testing with Chromatic locally.

Usage

It will be a component that can be easily used when developing web services under the name of CANDY CHUPS Lab. or participating in hackathons.

Basically, it is not intended to be used by non-CCL members. It is planned to be a private library.

How to use

Please install the library with the following command.

yarn add cclkit4svelte

npm i cclkit4svelte

pnpm install cclkit4svelte

About the development of this library

The development of component libraries requires a Node.js environment with Version 20 or higher. Use pnpm as the package manager. Please check the package.json for detailed version information.

We recommend Volta for switching Node.js versions.

volta install node
# or
volta install node@20

node -v
#Once the desired Node version is displayed, it is OK.
v20.11.1

Also, you need to install pnpm to develop this library. Note that npm and yarn do not prepare you for development; if you are using volta, pnpm can also be installed using volta.

volta install pnpm

When developing a new component, always create a component specification together with it, which can be found in the Storybook. Store stories in the src/stories directory.

The component itself should be stored in the lib directory.