feat: add button

.prettierrc

@@ -1,8 +1,7 @@
 {
 	"trailingComma": "all",
 	"tabWidth": 2,
-	"printWidth": 100,
-	"semi": false,
+	"printWidth": 90,
 	"singleQuote": false,
 	"useTabs": true,
 	"arrowParens": "avoid",

packages/kit/CHANGELOG.md

@@ -0,0 +1 @@
+# @your-repository-name/hello

packages/kit/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 your-author-name
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/kit/README.md

@@ -0,0 +1,36 @@
+<a href="https://github.com/your-author-name/your-repository-name/tree/main/packages/hello#readme">
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=your-repository-name&background=tiles&project=Hello" alt="your-repository-name Hello">
+</p>
+
+# Hello
+
+Example hello world package in the your-repository-name repository.
+
+## Installation
+
+```bash
+npm install @your-repository-name/hello
+# or
+yarn add @your-repository-name/hello
+# or
+pnpm add @your-repository-name/hello
+```
+
+## How to use it
+
+```ts
+import { createHello } from "@your-repository-name/hello"
+
+const [hello, setHello] = createHello()
+
+hello() // => "Hello World!"
+
+setHello("Solid")
+
+hello() // => "Hello Solid!"
+```
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md).

packages/kit/jest.config.ssr.ts

@@ -0,0 +1,2 @@
+import config from "../../configs/jest.config.ssr"
+export default config

packages/kit/jest.config.ts

@@ -0,0 +1,2 @@
+import config from "../../configs/jest.config"
+export default config

packages/kit/package.json

@@ -0,0 +1,72 @@
+{
+	"name": "@codeui/kit",
+	"version": "0.0.1",
+	"description": "Example hello world package in the your-repository-name repository.",
+	"license": "MIT",
+	"author": "your-author-name",
+	"contributors": [],
+	"homepage": "https://github.com/your-nickname/your-repository-name#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/your-nickname/your-repository-name.git"
+	},
+	"bugs": {
+		"url": "https://github.com/your-nickname/your-repository-name/issues"
+	},
+	"keywords": [
+		"solid"
+	],
+	"private": false,
+	"sideEffects": false,
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"dist"
+	],
+	"type": "module",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"types": "dist/types/index.d.ts",
+	"exports": {
+		".": {
+			"solid": "./dist/source/index.jsx",
+			"import": "./dist/esm/index.js",
+			"browser": {
+				"import": "./dist/esm/index.js",
+				"require": "./dist/cjs/index.js"
+			},
+			"require": "./dist/cjs/index.js",
+			"node": "./dist/cjs/index.js"
+		}
+	},
+	"scripts": {
+		"dev": "pnpm run build -w",
+		"build": "rollup -c ../../configs/rollup.config.ts",
+		"test": "pnpm run test:client && pnpm run test:ssr",
+		"test:client": "jest --config jest.config.ts",
+		"test:ssr": "jest --config jest.config.ssr.ts",
+		"typecheck": "tsc --noEmit"
+	},
+	"devDependencies": {
+		"@testing-library/jest-dom": "^5.16.4",
+		"jest": "^28.1.3",
+		"jest-environment-jsdom": "^28.1.3",
+		"rollup": "^2.77.2",
+		"rollup-preset-solid": "^1.4.0",
+		"solid-js": "^1.4.8",
+		"solid-testing-library": "^0.3.0",
+		"ts-node": "^10.9.1",
+		"typescript": "^4.7.4"
+	},
+	"peerDependencies": {
+		"solid-js": "^1.4.4"
+	},
+	"packageManager": "[email protected]",
+	"dependencies": {
+		"@kobalte/core": "^0.1.0",
+		"@vanilla-extract/css": "^1.9.2",
+		"@vanilla-extract/dynamic": "^2.0.3",
+		"@vanilla-extract/recipes": "^0.3.0"
+	}
+}

packages/kit/src/components/Button/Button.css.ts

@@ -0,0 +1,66 @@
+import { createTheme } from "@vanilla-extract/css";
+import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
+import { themeTokens } from "../../foundation/themes.css";
+
+export const [buttonTheme, buttonVars] = createTheme({
+	buttonHeight: "",
+	fontSize: "",
+});
+
+export const enum ButtonSizes {
+	xs = "xs",
+	sm = "sm",
+	md = "md",
+	lg = "lg",
+	xl = "xl",
+}
+
+export const button = recipe({
+	base: [
+		buttonTheme,
+		{
+			appearance: "none",
+			position: "relative",
+			display: "inline-flex",
+			justifyContent: "center",
+			alignItems: "center",
+			flexShrink: 0,
+			outline: "none",
+			userSelect: "none",
+			whiteSpace: "nowrap",
+			verticalAlign: "middle",
+		},
+	],
+	variants: {
+		size: {
+			[ButtonSizes.lg]: {
+				vars: {
+					[buttonVars.buttonHeight]: "48px",
+					[buttonVars.fontSize]: themeTokens.fontSize.lg,
+				},
+				minWidth: "72px",
+			},
+			[ButtonSizes.md]: {
+				vars: {
+					[buttonVars.buttonHeight]: "42px",
+					[buttonVars.fontSize]: themeTokens.fontSize.md,
+				},
+			},
+			[ButtonSizes.sm]: {
+				vars: {
+					[buttonVars.buttonHeight]: "36px",
+					[buttonVars.fontSize]: themeTokens.fontSize.sm,
+				},
+			},
+			[ButtonSizes.xs]: {
+				vars: {
+					[buttonVars.buttonHeight]: "30px",
+					[buttonVars.fontSize]: themeTokens.fontSize.xs,
+				},
+				padding: `0 ${themeTokens.spacing["2"]}`,
+			},
+		},
+	},
+});
+
+export type ButtonVariants = RecipeVariants<typeof button>;

packages/kit/src/components/Button/Button.tsx

@@ -0,0 +1,17 @@
+import { Button as KButton, ButtonOptions } from "@kobalte/core";
+import { ParentProps, splitProps } from "solid-js";
+import * as styles from "./Button.css";
+
+export type ButtonProps = ButtonOptions & styles.ButtonVariants;
+
+export function Button(props: ParentProps<ButtonProps>) {
+	const [local, others] = splitProps(props, ["size"]);
+	return (
+		<KButton
+			class={styles.button({
+				size: local.size,
+			})}
+			{...others}
+		/>
+	);
+}

packages/kit/src/foundation/themes.css.ts

@@ -0,0 +1,6 @@
+import { createTheme } from "@vanilla-extract/css";
+import { tokens } from "./tokens";
+
+export const [theme, themeTokens] = createTheme({
+	...tokens,
+});

packages/kit/src/foundation/tokens.ts

@@ -0,0 +1,51 @@
+export const tokens = {
+	fontSize: {
+		xs: `0.8rem`,
+		sm: `0.875rem`,
+		md: `1rem`,
+		lg: `1.25rem`,
+		xl: `1.5rem`,
+	},
+	fontWeight: {
+		hairline: "100",
+		thin: "200",
+		light: "300",
+		normal: "400",
+		medium: "500",
+		semibold: "600",
+		bold: "700",
+		extrabold: "800",
+		black: "900",
+	},
+	spacing: {
+		auto: "auto",
+		px: "1px",
+		0: "0",
+		1: "0.25rem",
+		2: "0.5rem",
+		3: "0.75rem",
+		4: "1rem",
+		5: "1.25rem",
+		6: "1.5rem",
+		8: "2rem",
+		10: "2.5rem",
+		12: "3rem",
+		16: "4rem",
+		20: "5rem",
+		24: "6rem",
+		32: "8rem",
+		40: "10rem",
+		48: "12rem",
+		56: "14rem",
+		64: "16rem",
+	},
+	radii: {
+		none: "0",
+		sm: "0.125rem",
+		default: "0.25rem",
+		md: "0.375rem",
+		lg: "0.5rem",
+		xl: "1rem",
+		full: "9999px",
+	},
+} as const;

packages/kit/src/index.tsx

@@ -0,0 +1,21 @@
+import { Accessor, Component, createComputed, createSignal } from "solid-js";
+
+export function createHello(): [Accessor<string>, (to: string) => void] {
+	const [hello, setHello] = createSignal("Hello World!");
+
+	return [hello, (to: string) => setHello(`Hello ${to}!`)];
+}
+
+export const Hello: Component<{ to?: string }> = props => {
+	const [hello, setHello] = createHello();
+
+	createComputed(() => {
+		if (typeof props.to === "string") setHello(props.to);
+	});
+
+	return <div>{hello()}</div>;
+};
+
+export { Button, type ButtonProps } from "./components/Button/Button";
+export { tokens } from "./foundation/tokens";
+export { theme, themeTokens } from "./foundation/themes.css";

packages/kit/test/index.ssr.test.tsx

@@ -0,0 +1,29 @@
+import { isServer, renderToString } from "solid-js/web"
+import { createHello, Hello } from "../src"
+
+describe("environment", () => {
+	it("runs on server", () => {
+		expect(typeof window).toBe("undefined")
+		expect(isServer).toBe(true)
+	})
+})
+
+describe("createHello", () => {
+	it("Returns a Hello World signal", () => {
+		const [hello] = createHello()
+		expect(hello()).toBe("Hello World!")
+	})
+
+	it("Changes the hello target", () => {
+		const [hello, setHello] = createHello()
+		setHello("Solid")
+		expect(hello()).toBe("Hello Solid!")
+	})
+})
+
+describe("Hello", () => {
+	it("renders a hello component", () => {
+		const string = renderToString(() => <Hello />)
+		expect(string).toBe('<div data-hk="0-0">Hello World!</div>')
+	})
+})

packages/kit/test/index.test.tsx

@@ -0,0 +1,49 @@
+import { createRoot, createSignal } from "solid-js"
+import { isServer } from "solid-js/web"
+import { createHello, Hello } from "../src"
+import { render } from "solid-testing-library"
+
+describe("environment", () => {
+	it("runs on server", () => {
+		expect(typeof window).toBe("object")
+		expect(isServer).toBe(false)
+	})
+})
+
+describe("createHello", () => {
+	it("Returns a Hello World signal", () =>
+		createRoot(dispose => {
+			const [hello] = createHello()
+			expect(hello()).toBe("Hello World!")
+			dispose()
+		}))
+
+	it("Changes the hello target", () =>
+		createRoot(dispose => {
+			const [hello, setHello] = createHello()
+			setHello("Solid")
+			expect(hello()).toBe("Hello Solid!")
+			dispose()
+		}))
+})
+
+describe("Hello", () => {
+	it("renders a hello component", () => {
+		const { container } = render(() => <Hello />)
+		expect(container.innerHTML).toBe("<div>Hello World!</div>")
+	})
+
+	it("changes the hello target", () =>
+		createRoot(dispose => {
+			const [to, setTo] = createSignal("Solid")
+			const { container } = render(() => <Hello to={to()} />)
+			expect(container.innerHTML).toBe("<div>Hello Solid!</div>")
+			setTo("Tests")
+
+			// rendering is async
+			queueMicrotask(() => {
+				expect(container.innerHTML).toBe("<div>Hello Tests!</div>")
+				dispose()
+			})
+		}))
+})