cherry-styled-components 0.1.0 → 0.1.1

package/src/lib/select.tsx

@@ -0,0 +1,121 @@
+"use client";
+import React, { forwardRef } from "react";
+import styled, { IStyledComponent } 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: 0 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};`
+      : `font-size: ${theme.fontSizes.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: IStyledComponent<"web", SelectProps> = 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 {
+    padding-right: 40px;
+  }
+
+  & select:active:not([disabled]) ~ svg,
+  & select:focus:not([disabled]) ~ svg {
+    transform: translateY(-50%) rotate(180deg);
+  }
+`;
+
+function LocalSelect({ ...props }: SelectProps, ref: React.Ref<HTMLSelectElement>) {
+  return (
+    <StyledInputWrapper $fullWidth={props.$fullWidth} $label={props.$label}>
+      {props.$label && <StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>}
+      <StyledIconWrapper $fullWidth={props.$fullWidth}>
+        <StyledSelect {...props} ref={ref}>
+          {props.children}
+        </StyledSelect>
+        <IconArrow />
+      </StyledIconWrapper>
+    </StyledInputWrapper>
+  );
+}
+
+const Select = forwardRef(LocalSelect);
+
+export { Select };

package/src/lib/space.tsx

@@ -0,0 +1,52 @@
+"use client";
+import React, { forwardRef } 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 LocalSpace({ ...props }: SpaceProps, ref: React.Ref<HTMLSpanElement>) {
+  return <StyledSpace {...props} ref={ref} />;
+}
+
+const Space = forwardRef(LocalSpace);
+
+export { Space };

package/src/{app/components/cherry → lib}/styled-components/index.ts

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

package/src/lib/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} enableVendorPrefixes>
+      {children}
+    </StyleSheetManager>
+  );
+}
+
+export { StyledComponentsRegistry };

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

@@ -0,0 +1,49 @@
+"use client";
+import React, { createContext, useEffect, useState } from "react";
+import { ThemeProvider as StyledThemeProvider } from "styled-components";
+import { GlobalStyles, Theme } from "../utils";
+
+interface ThemeContextProps {
+  setTheme: any;
+}
+
+export const ThemeContext = createContext<ThemeContextProps>({
+  setTheme: null,
+});
+
+function CherryThemeProvider({
+  children,
+  theme,
+  themeDark,
+}: {
+  children: React.ReactNode;
+  theme: Theme;
+  themeDark?: Theme;
+}) {
+  const [currentTheme, setTheme] = useState(theme);
+  useEffect(() => {
+    if (!themeDark) return setTheme(theme);
+    if (
+      localStorage.theme === "dark" ||
+      (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+      document.documentElement.classList.add("dark");
+      setTheme(themeDark);
+    } else {
+      document.documentElement.classList.remove("dark");
+      setTheme(theme);
+    }
+  }, []);
+  const GlobalStylesComponent = GlobalStyles(currentTheme);
+
+  return (
+    <StyledThemeProvider theme={currentTheme}>
+      <ThemeContext.Provider value={{ setTheme }}>
+        <GlobalStylesComponent />
+        {children}
+      </ThemeContext.Provider>
+    </StyledThemeProvider>
+  );
+}
+
+export { CherryThemeProvider };

package/src/lib/textarea.tsx

@@ -0,0 +1,94 @@
+"use client";
+import React, { forwardRef } 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;
+  rows?: number;
+}
+
+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: break-spaces;
+  hyphens: none;
+  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 LocalTextarea({ ...props }: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {
+  return (
+    <StyledInputWrapper $fullWidth={props.$fullWidth} $label={props.$label}>
+      {props.$label && (
+        <StyledLabel htmlFor={props.id} $label={props.$label}>
+          {props.$label}
+        </StyledLabel>
+      )}
+      <StyledTextarea {...props} ref={ref}>
+        {props.children}
+      </StyledTextarea>
+    </StyledInputWrapper>
+  );
+}
+
+const Textarea = forwardRef(LocalTextarea);
+
+export { Textarea };

package/src/lib/toggle.tsx

@@ -0,0 +1,147 @@
+"use client";
+import React, { forwardRef } 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 LocalToggle(
+  { type = "checkbox", ...props }: ToggleProps,
+  ref: React.Ref<HTMLInputElement>,
+) {
+  return (
+    <StyledInputWrapper $fullWidth={props.$fullWidth} $label={props.$label}>
+      <StyledToggleWrapper>
+        <StyledToggle {...props} type={type} ref={ref} />
+        <StyledFakeToggle
+          $error={props.$error}
+          $success={props.$success}
+          className="fake-toggle"
+          $size={props.$size}
+        />
+      </StyledToggleWrapper>
+      {props.$label && <StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>}
+    </StyledInputWrapper>
+  );
+}
+
+const Toggle = forwardRef(LocalToggle);
+
+export { Toggle };

package/src/{app/components/cherry → lib}/utils/global.tsx

@@ -1,78 +1,95 @@
-"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 };
+"use client";
+import { createGlobalStyle } from "styled-components";
+import { Theme } from "./theme";
+
+const GlobalStyles = (theme: Theme) => createGlobalStyle`
+html,
+body {
+	margin: 0;
+	padding: 0;
+	min-height: 100%;
+	scroll-behavior: smooth;
+	background-color: ${theme.colors.light};
+}
+
+body {
+	font-family: "Inter", sans-serif;
+	-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,
+ul li,
+ol li {
+	margin: 0;
+	padding: 0;
+	color: ${theme.colors.dark};
+}
+
+a {
+	color: ${theme.isDark ? theme.colors.dark : theme.colors.primary};
+}
+
+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;
+}
+
+hr {
+  margin: 20px 0;
+  border: none;
+  border-bottom: 1px solid ${theme.colors.grayLight};
+}
+`;
+
+export { GlobalStyles };