しまぶー lightsound

App Router 講座

React Server Components は、サーバーとクライアントを活用したハイブリッドアプリケーション構築のための新しいメンタルモデル

デザインシステム間の主な違いは、スタイリング。それ以外は共通の部分が多いのに各社イチから自分で実装していて大変。特にアクセシビリティ、国際化、キーボード、マウス、タッチインタラクション対応などは難しい。そこを何とかするのが React Spectrum。

React Spectrum ではコンポーネントを次の 3 つに分類する。

	{
	"hooks": {
	"PostToolUse": [
	{
	"matcher": "Write\|Edit\|MultiEdit",
	"hooks": [
	{
	"type": "command",
	"command": "bun run fix"
	}

	import type { ButtonProps } from "@mantine/core";
	import { Button } from "@mantine/core";
	import { cloneElement, forwardRef } from "react";

	export const NoAnimatedButton = forwardRef<
	HTMLButtonElement,
	ButtonProps<"button">
	>(({ sx, ...props }, ref) => {
	return cloneElement(<Button />, {
	sx: { ...sx, "&:not(:disabled):active": { transform: "none" } },

	// 一番シンプルな例
	const input = [1, 2, 3, 4];

	const output = input.reduce((prev, current) => {
	return prev + current;
	});

	console.log(output); // 10

	import { Tab } from "@headlessui/react";
	import type { VFC } from "react";
	import { Fragment } from "react";

	type Props = {
	items: { label: string; content: JSX.Element }[];
	};

	export const HorizontalTab: VFC<Props> = (props) => {
	return (

	import { AnyFramework, ComponentTitle, StoryAnnotations } from '@storybook/csf'
	import { ComponentMeta, ComponentStory } from '@storybook/react'
	import { VFC } from 'react'

	export const createStorybookFactory = <P extends object>(Component: VFC<P>) => {
	const Template = ((args) => <Component {...args} />) as ComponentStory<
	typeof Component
	>

	const Default = Template.bind({})