cherry-styled-components 0.1.0-1

package/src/app/components/select.tsx

@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import {
+	Theme,
+	IconArrow,
+	formElementHeightStyles,
+	fullWidthStyles,
+	resetButton,
+	resetInput,
+	statusBorderStyles,
+} from "./utils";
+import { StyledInputWrapper, StyledLabel } from "./input";
+
+interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
+	children?: React.ReactNode;
+	$label?: string;
+	$size?: "default" | "big";
+	$error?: boolean;
+	$success?: boolean;
+	$fullWidth?: boolean;
+	theme?: Theme;
+}
+
+const StyledSelect = styled.select<SelectProps>`
+	${resetButton};
+	${resetInput};
+	font-family: inherit;
+	display: inline-block;
+	padding: 15px;
+	border-radius: ${({ theme }) => theme.spacing.radius.xs};
+	font-weight: 400;
+	white-space: nowrap;
+	hyphens: auto;
+	color: ${({ theme }) => theme.colors.dark};
+	background: ${({ theme }) => theme.colors.light};
+	border: solid 2px ${({ theme }) => theme.colors.grayLight};
+	box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primaryLight};
+	transition: all 0.3s ease;
+
+	&::placeholder {
+		color: ${({ theme }) => theme.colors.gray};
+	}
+
+	@media (hover: hover) {
+		&:hover:not([disabled]) {
+			border-color: ${({ theme }) => theme.colors.primary};
+		}
+	}
+
+	&:focus:not([disabled]) {
+		box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+		border-color: ${({ theme }) => theme.colors.primary};
+	}
+
+	&:active:not([disabled]) {
+		box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+	}
+
+	${({ $size }) => formElementHeightStyles($size)}
+
+	${({ $size, theme }) =>
+		$size === "big"
+			? `font-size: ${theme.fontSizes.inputBig.lg};
+			line-height: ${theme.lineHeights.inputBig.lg};
+	`
+			: `font-size: ${theme.fontSizes.input.lg};
+			line-height: ${theme.lineHeights.input.lg};`}
+
+	${({ $error, $success, theme }) => {
+		return statusBorderStyles(
+			$error ? true : false,
+			$success ? true : false,
+			theme,
+		);
+	}}
+
+	${({ disabled, theme }) =>
+		disabled &&
+		`cursor: not-allowed;
+		background: ${theme.colors.grayLight};
+		border-color: ${theme.colors.gray};
+		color: ${theme.colors.gray};
+	`}
+
+	${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+`;
+
+export const StyledIconWrapper = styled.span<SelectProps>`
+	position: relative;
+	${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+
+	& svg {
+		position: absolute;
+		top: 50%;
+		right: 15px;
+		transform: translateY(-50%) rotate(0);
+		transition: all 0.3s ease;
+		pointer-events: none;
+	}
+
+	& select:active:not([disabled]) ~ svg,
+	& select:focus:not([disabled]) ~ svg {
+		transform: translateY(-50%) rotate(180deg);
+	}
+`;
+
+function Select({ ...props }: SelectProps) {
+	return (
+		<StyledInputWrapper $fullWidth={props.$fullWidth}>
+			{props.$label && (
+				<StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>
+			)}
+			<StyledIconWrapper $fullWidth={props.$fullWidth}>
+				<StyledSelect {...props}>{props.children}</StyledSelect>
+				<IconArrow />
+			</StyledIconWrapper>
+		</StyledInputWrapper>
+	);
+}
+
+export { Select };

package/src/app/components/space.tsx

@@ -0,0 +1,54 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import { Breakpoints, mq } from "./utils";
+
+interface SpaceProps {
+	$size?: number | "none";
+	$xs?: number | "none";
+	$sm?: number | "none";
+	$md?: number | "none";
+	$lg?: number | "none";
+	$xl?: number | "none";
+	$xxl?: number | "none";
+	$xxxl?: number | "none";
+	$horizontal?: boolean;
+}
+
+const styles = ($size: number | "none", $horizontal: boolean) =>
+	$horizontal
+		? `display: inline-block;
+			max-height: 0;
+			min-width: ${$size}px;
+			max-width: ${$size}px;`
+		: `display: block;
+			min-height: ${$size}px;
+			max-height: ${$size}px;`;
+
+function responsiveStyles(props: any) {
+	return Object.keys(props)
+		.filter((key) => key.startsWith("$"))
+		.map((key) => {
+			const size = key.substring(1) as keyof Breakpoints<number>;
+			return (
+				props[key] &&
+				mq(size) +
+					`{ ${styles(props[key], props.$horizontal || false)} }`
+			);
+		})
+		.join("");
+}
+
+const StyledSpace = styled.span<SpaceProps>`
+	${({ $horizontal, $size }) => `
+		${$size && $size !== "none" && styles($size, $horizontal || false)};
+		${$size === "none" && `display: none;`};
+	`}
+	${(props) => responsiveStyles(props)}
+`;
+
+function Space({ ...props }: SpaceProps) {
+	return <StyledSpace {...props} />;
+}
+
+export { Space };

package/src/app/components/styled-components/index.ts

@@ -0,0 +1,2 @@
+export * from "./registry";
+export * from "./theme-provider";

package/src/app/components/styled-components/registry.tsx

@@ -0,0 +1,26 @@
+"use client";
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+
+function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
+	// Only create stylesheet once with lazy initial state
+	// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+	const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+	useServerInsertedHTML(() => {
+		const styles = styledComponentsStyleSheet.getStyleElement();
+		styledComponentsStyleSheet.instance.clearTag();
+		return <>{styles}</>;
+	});
+
+	if (typeof window !== "undefined") return <>{children}</>;
+
+	return (
+		<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+			{children}
+		</StyleSheetManager>
+	);
+}
+
+export { StyledComponentsRegistry };

package/src/app/components/styled-components/theme-provider.tsx

@@ -0,0 +1,21 @@
+"use client";
+import React from "react";
+import { ThemeProvider as StyledThemeProvider } from "styled-components";
+import { theme as defaultTheme, GlobalStyles } from "../utils";
+
+function CherryThemeProvider({
+	children,
+	theme,
+}: {
+	children: any;
+	theme?: any;
+}) {
+	return (
+		<StyledThemeProvider theme={theme || defaultTheme}>
+			<GlobalStyles />
+			{children}
+		</StyledThemeProvider>
+	);
+}
+
+export { CherryThemeProvider };

package/src/app/components/textarea.tsx

@@ -0,0 +1,98 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import {
+	Theme,
+	fullWidthStyles,
+	resetButton,
+	resetInput,
+	statusBorderStyles,
+} from "./utils";
+import { StyledInputWrapper, StyledLabel } from "./input";
+
+interface TextareaProps
+	extends Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "size"> {
+	children?: React.ReactNode;
+	$label?: string;
+	$size?: "default" | "big";
+	$error?: boolean;
+	$success?: boolean;
+	$fullWidth?: boolean;
+	theme?: Theme;
+}
+
+const StyledTextarea = styled.textarea<TextareaProps>`
+	${resetButton};
+	${resetInput};
+	font-family: inherit;
+	display: inline-block;
+	padding: 15px;
+	border-radius: ${({ theme }) => theme.spacing.radius.xs};
+	font-weight: 400;
+	white-space: nowrap;
+	hyphens: auto;
+	color: ${({ theme }) => theme.colors.dark};
+	background: ${({ theme }) => theme.colors.light};
+	border: solid 2px ${({ theme }) => theme.colors.grayLight};
+	box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primaryLight};
+	transition: all 0.3s ease;
+	min-height: 80px;
+
+	&::placeholder {
+		color: ${({ theme }) => theme.colors.gray};
+	}
+
+	@media (hover: hover) {
+		&:hover:not([disabled]) {
+			border-color: ${({ theme }) => theme.colors.primary};
+		}
+	}
+
+	&:focus:not([disabled]) {
+		box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+		border-color: ${({ theme }) => theme.colors.primary};
+	}
+
+	&:active:not([disabled]) {
+		box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+	}
+
+	${({ $size, theme }) =>
+		$size === "big"
+			? `font-size: ${theme.fontSizes.inputBig.lg};
+			line-height: ${theme.lineHeights.text.lg};
+	`
+			: `font-size: ${theme.fontSizes.input.lg};
+			line-height: ${theme.lineHeights.text.lg};`}
+
+	${({ $error, $success, theme }) => {
+		return statusBorderStyles(
+			$error ? true : false,
+			$success ? true : false,
+			theme,
+		);
+	}}
+
+	${({ disabled, theme }) =>
+		disabled &&
+		`cursor: not-allowed;
+		background: ${theme.colors.grayLight};
+		border-color: ${theme.colors.gray};
+		color: ${theme.colors.gray};
+	`}
+
+	${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+`;
+
+function Textarea({ ...props }: TextareaProps) {
+	return (
+		<StyledInputWrapper $fullWidth={props.$fullWidth}>
+			{props.$label && (
+				<StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>
+			)}
+			<StyledTextarea {...props}>{props.children}</StyledTextarea>
+		</StyledInputWrapper>
+	);
+}
+
+export { Textarea };

package/src/app/components/toggle.tsx

@@ -0,0 +1,148 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import { Theme, resetButton, statusBorderStyles } from "./utils";
+import { StyledInputWrapper, StyledLabel } from "./input";
+
+interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
+	children?: React.ReactNode;
+	type?: "checkbox" | "radio";
+	$label?: string;
+	$size?: "default" | "big";
+	$error?: boolean;
+	$success?: boolean;
+	$fullWidth?: boolean;
+	theme?: Theme;
+}
+
+const StyledToggleWrapper = styled.span<ToggleProps>`
+	display: inline-block;
+	margin: auto 0;
+	position: relative;
+	vertical-align: middle;
+`;
+
+const StyledFakeToggle = styled.span<ToggleProps>`
+	display: block;
+	border: solid 2px ${({ theme }) => theme.colors.grayLight};
+	background: ${({ theme }) => theme.colors.light};
+	border-radius: ${({ theme }) => theme.spacing.radius.xl};
+	pointer-events: none;
+	transition: all 0.3s ease;
+	box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
+	transform: none;
+	width: ${({ $size }) => ($size === "big" ? "56px" : "46px")};
+	height: ${({ $size }) => ($size === "big" ? "32px" : "22px")};
+
+	${({ $error, $success, theme }) => {
+		return statusBorderStyles(
+			$error ? true : false,
+			$success ? true : false,
+			theme,
+		);
+	}}
+
+	&::before,
+	&::after {
+		content: "";
+		display: block;
+		position: absolute;
+	}
+
+	&::before {
+		top: 5px;
+		left: 5px;
+		width: calc(100% - 10px);
+		height: calc(100% - 10px);
+		max-width: 0;
+		border-radius: ${({ theme }) => theme.spacing.radius.xl};
+		background: ${({ theme }) => theme.colors.light};
+		transition: all 0.3s ease;
+	}
+
+	&::after {
+		left: 0;
+		top: 0;
+		border-radius: 50%;
+		transition: all 0.3s ease;
+		transform: translateX(0);
+		background: ${({ theme }) => theme.colors.primary};
+		width: ${({ $size }) => ($size === "big" ? "32px" : "22px")};
+		height: ${({ $size }) => ($size === "big" ? "32px" : "22px")};
+	}
+`;
+
+const StyledToggle = styled.input<ToggleProps>`
+	${resetButton};
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	outline: none;
+	z-index: 10;
+
+	&:checked ~ .fake-toggle {
+		&::before {
+			max-width: 46px;
+			background: ${({ theme }) => theme.colors.primaryLight};
+		}
+
+		&::after {
+			transform: translateX(25px);
+		}
+	}
+
+	@media (hover: hover) {
+		&:hover:not([disabled]) ~ .fake-toggle {
+			border-color: ${({ theme }) => theme.colors.primary};
+		}
+	}
+
+	&:focus:not([disabled]) ~ .fake-toggle {
+		outline: none;
+		border-color: ${({ theme }) => theme.colors.primary};
+		box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
+	}
+
+	&:active:not([disabled]) ~ .fake-toggle {
+		box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
+	}
+
+	${({ disabled, theme }) =>
+		disabled &&
+		`cursor: not-allowed;
+
+		& ~ .fake-toggle {
+			border-color: ${theme.colors.gray};
+
+			&::before {
+				background: ${theme.colors.grayLight};
+			}
+
+			&::after {
+				background: ${theme.colors.gray};
+			}
+		}`}
+`;
+
+function Toggle({ type = "checkbox", ...props }: ToggleProps) {
+	return (
+		<StyledInputWrapper $fullWidth={props.$fullWidth}>
+			<StyledToggleWrapper>
+				<StyledToggle {...props} type={type} />
+				<StyledFakeToggle
+					$error={props.$error}
+					$success={props.$success}
+					className="fake-toggle"
+					$size={props.$size}
+				/>
+			</StyledToggleWrapper>
+			{props.$label && (
+				<StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>
+			)}
+		</StyledInputWrapper>
+	);
+}
+
+export { Toggle };

package/src/app/components/utils/global.tsx

@@ -0,0 +1,78 @@
+"use client";
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyles = createGlobalStyle`
+html,
+body {
+	margin: 0;
+	padding: 0;
+	min-height: 100%;
+	scroll-behavior: smooth;
+}
+
+body {
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
+	-webkit-font-smoothing: antialiased;
+}
+
+* {
+	box-sizing: border-box;
+	min-width: 0;
+}
+
+pre,
+code,
+kbd,
+samp {
+	font-family: monospace, monospace;
+}
+
+pre,
+code,
+kbd,
+samp,
+blockquote,
+p,
+a,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin: 0;
+	padding: 0;
+}
+
+ol,
+ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+figure {
+	margin: 0;
+}
+
+fieldset {
+	appearance: none;
+	border: none;
+}
+
+button,
+input,
+a,
+img,
+svg,
+svg * {
+	transition: all 0.3s ease;
+}
+
+strong,
+b {
+	font-weight: 700;
+}`;
+
+export { GlobalStyles };