コンポーネントのテンプレート

使いどころ

コンポーネント(全体)の使用目的や、使用上の注意、基準などを書きます。種類ごとの使いどころは種類に書きます。

種類

コンポーネントのバリエーションを子見出しにわけて書きます。もし網羅的な比較が必要な場合、テーブル or previewでコンポーネントを一覧を表示します。

コンポーネント名(種類) 例: Primary

コンポーネント(種類)の説明が入ります。

単品

// ```tsx editable
// <>この中に JSX が書けます。コードブロック内にはすべての SmartHR UI コンポーネントが読み込まれているため明示的に import しないでも使えます。</>
// ```
<Button>ボタン</Button>

複数

// この編集可能な領域は Cluster で包まれ、gap と align を渡せます。
<>
<Button variant="primary">ボタン</Button>
<Button>ボタン</Button>
<Button variant="danger">ボタン</Button>
<Button variant="text">ボタン</Button>
</>

プロダクト

ドラッグして幅を変更
ドラッグして高さを変更
const AwesomeComponent:React.FC<{ children: React.ReactNode }> = ({ children }) => {
return (
<Wrapper>
<Heading>編集可能なコードブロック</Heading>
<InformationPanel title="使い方">{children}</InformationPanel>
</Wrapper>
)
}
// withStyled を渡すと styled-components を扱えるようになります。
// ただし必ず render() を呼ぶ必要があります。
render (
<AwesomeComponent>
<p>
<code>withStyled</code> を渡すと styled-components を扱えるようになります。
<br />
また、<code>layout=product</code> を使うと擬似的にプロダクトのような見た目になります。
</p>
</AwesomeComponent>
)
const Wrapper = styled(Stack)`
${({ theme: { space } }) => css`
margin-block: ${space(2)} ${space(1)};
`}
`

レイアウト

メインの種類でなく、コンポーネントが持つその他の種類(サイズやアイコン付きなど)がある場合に書きます。

状態

コンポーネントが持つ(hoverやdisabledなど)状態がある場合に書きます。

ライティング

主題に種類がなく、ライティングルールを書きたい場合はここに書きます。〇〇の使い方..などはこのグループに所属させます。AirTableも必要であれば埋め込めます。

アクセシビリティ

主題全体に対するアクセシビリティの考え方として、特段言及したい場合は書きます。

デザインパターン

コンポーネント独自のデザインパターンがあればこのグループ内に書きます、基準サイズなどもこの項目で書きます。

Props

コンポーネントが持つPropsを網羅して書きます。

NameRequiredTypeDescription
size-"s", "default"ボタンの大きさ
children-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalボタン内に表示する内容
className-stringコンポーネントに適用するクラス名
disabledDetail-{ icon?: FunctionComponent<{}>; message: ReactNode; }無効な理由
prefix-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalボタン内の先頭に表示する内容。 通常は、アイコンを表示するために用いる。
suffix-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalボタン内の末尾に表示する内容。 通常は、アイコンを表示するために用いる。
square-false, true`true` のとき、ボタンを正方形にする。
wide-false, true`true` のとき、ボタンの `width` を 100% にする。
variant-"text", "primary", "secondary", "danger", "skeleton"ボタンのスタイルの種類
loading-false, true処理が走ってるかどうか

関連リンク

  • link

参考文献

  • link