cherry-styled-components 0.1.0-1

package/.next/types/app/layout.ts

@@ -0,0 +1,79 @@
+// File: /Users/luan/Developer/cherry-styled-components/src/app/layout.tsx
+import * as entry from '../../../src/app/layout.js'
+import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
+
+type TEntry = typeof import('../../../src/app/layout.js')
+
+// Check that the entry is a valid entry
+checkFields<Diff<{
+  default: Function
+  config?: {}
+  generateStaticParams?: Function
+  revalidate?: RevalidateRange<TEntry> | false
+  dynamic?: 'auto' | 'force-dynamic' | 'error' | 'force-static'
+  dynamicParams?: boolean
+  fetchCache?: 'auto' | 'force-no-store' | 'only-no-store' | 'default-no-store' | 'default-cache' | 'only-cache' | 'force-cache'
+  preferredRegion?: 'auto' | 'global' | 'home' | string | string[]
+  runtime?: 'nodejs' | 'experimental-edge' | 'edge'
+  maxDuration?: number
+  
+  metadata?: any
+  generateMetadata?: Function
+  viewport?: any
+  generateViewport?: Function
+  
+}, TEntry, ''>>()
+
+// Check the prop type of the entry function
+checkFields<Diff<LayoutProps, FirstArg<TEntry['default']>, 'default'>>()
+
+// Check the arguments and return type of the generateMetadata function
+if ('generateMetadata' in entry) {
+  checkFields<Diff<LayoutProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
+  checkFields<Diff<ResolvingMetadata, SecondArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
+}
+
+// Check the arguments and return type of the generateViewport function
+if ('generateViewport' in entry) {
+  checkFields<Diff<LayoutProps, FirstArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>()
+  checkFields<Diff<ResolvingViewport, SecondArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>()
+}
+
+// Check the arguments and return type of the generateStaticParams function
+if ('generateStaticParams' in entry) {
+  checkFields<Diff<{ params: PageParams }, FirstArg<MaybeField<TEntry, 'generateStaticParams'>>, 'generateStaticParams'>>()
+  checkFields<Diff<{ __tag__: 'generateStaticParams', __return_type__: any[] | Promise<any[]> }, { __tag__: 'generateStaticParams', __return_type__: ReturnType<MaybeField<TEntry, 'generateStaticParams'>> }>>()
+}
+
+type PageParams = any
+export interface PageProps {
+  params?: any
+  searchParams?: any
+}
+export interface LayoutProps {
+  children?: React.ReactNode
+
+  params?: any
+}
+
+// =============
+// Utility types
+type RevalidateRange<T> = T extends { revalidate: any } ? NonNegative<T['revalidate']> : never
+
+// If T is unknown or any, it will be an empty {} type. Otherwise, it will be the same as Omit<T, keyof Base>.
+type OmitWithTag<T, K extends keyof any, _M> = Omit<T, K>
+type Diff<Base, T extends Base, Message extends string = ''> = 0 extends (1 & T) ? {} : OmitWithTag<T, keyof Base, Message>
+
+type FirstArg<T extends Function> = T extends (...args: [infer T, any]) => any ? unknown extends T ? any : T : never
+type SecondArg<T extends Function> = T extends (...args: [any, infer T]) => any ? unknown extends T ? any : T : never
+type MaybeField<T, K extends string> = T extends { [k in K]: infer G } ? G extends Function ? G : never : never
+
+
+
+function checkFields<_ extends { [k in keyof any]: never }>() {}
+
+// https://github.com/sindresorhus/type-fest
+type Numeric = number | bigint
+type Zero = 0 | 0n
+type Negative<T extends Numeric> = T extends Zero ? never : `${T}` extends `-${string}` ? T : never
+type NonNegative<T extends Numeric> = T extends Zero ? T : Negative<T> extends never ? T : '__invalid_negative_number__'

package/.next/types/app/page.ts

@@ -0,0 +1,79 @@
+// File: /Users/luan/Developer/cherry-styled-components/src/app/page.tsx
+import * as entry from '../../../src/app/page.js'
+import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
+
+type TEntry = typeof import('../../../src/app/page.js')
+
+// Check that the entry is a valid entry
+checkFields<Diff<{
+  default: Function
+  config?: {}
+  generateStaticParams?: Function
+  revalidate?: RevalidateRange<TEntry> | false
+  dynamic?: 'auto' | 'force-dynamic' | 'error' | 'force-static'
+  dynamicParams?: boolean
+  fetchCache?: 'auto' | 'force-no-store' | 'only-no-store' | 'default-no-store' | 'default-cache' | 'only-cache' | 'force-cache'
+  preferredRegion?: 'auto' | 'global' | 'home' | string | string[]
+  runtime?: 'nodejs' | 'experimental-edge' | 'edge'
+  maxDuration?: number
+  
+  metadata?: any
+  generateMetadata?: Function
+  viewport?: any
+  generateViewport?: Function
+  
+}, TEntry, ''>>()
+
+// Check the prop type of the entry function
+checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
+
+// Check the arguments and return type of the generateMetadata function
+if ('generateMetadata' in entry) {
+  checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
+  checkFields<Diff<ResolvingMetadata, SecondArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
+}
+
+// Check the arguments and return type of the generateViewport function
+if ('generateViewport' in entry) {
+  checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>()
+  checkFields<Diff<ResolvingViewport, SecondArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>()
+}
+
+// Check the arguments and return type of the generateStaticParams function
+if ('generateStaticParams' in entry) {
+  checkFields<Diff<{ params: PageParams }, FirstArg<MaybeField<TEntry, 'generateStaticParams'>>, 'generateStaticParams'>>()
+  checkFields<Diff<{ __tag__: 'generateStaticParams', __return_type__: any[] | Promise<any[]> }, { __tag__: 'generateStaticParams', __return_type__: ReturnType<MaybeField<TEntry, 'generateStaticParams'>> }>>()
+}
+
+type PageParams = any
+export interface PageProps {
+  params?: any
+  searchParams?: any
+}
+export interface LayoutProps {
+  children?: React.ReactNode
+
+  params?: any
+}
+
+// =============
+// Utility types
+type RevalidateRange<T> = T extends { revalidate: any } ? NonNegative<T['revalidate']> : never
+
+// If T is unknown or any, it will be an empty {} type. Otherwise, it will be the same as Omit<T, keyof Base>.
+type OmitWithTag<T, K extends keyof any, _M> = Omit<T, K>
+type Diff<Base, T extends Base, Message extends string = ''> = 0 extends (1 & T) ? {} : OmitWithTag<T, keyof Base, Message>
+
+type FirstArg<T extends Function> = T extends (...args: [infer T, any]) => any ? unknown extends T ? any : T : never
+type SecondArg<T extends Function> = T extends (...args: [any, infer T]) => any ? unknown extends T ? any : T : never
+type MaybeField<T, K extends string> = T extends { [k in K]: infer G } ? G extends Function ? G : never : never
+
+
+
+function checkFields<_ extends { [k in keyof any]: never }>() {}
+
+// https://github.com/sindresorhus/type-fest
+type Numeric = number | bigint
+type Zero = 0 | 0n
+type Negative<T extends Numeric> = T extends Zero ? never : `${T}` extends `-${string}` ? T : never
+type NonNegative<T extends Numeric> = T extends Zero ? T : Negative<T> extends never ? T : '__invalid_negative_number__'

package/.next/types/package.json

@@ -0,0 +1 @@
+{"type": "module"}

package/.prettierrc

@@ -0,0 +1,11 @@
+{
+	"printWidth": 80,
+	"useTabs": true,
+	"tabWidth": 4,
+	"endOfLine": "lf",
+	"semi": true,
+	"singleQuote": false,
+	"trailingComma": "all",
+	"bracketSpacing": true,
+	"arrowParens": "always"
+}

package/.vscode/settings.json

@@ -0,0 +1,67 @@
+{
+	"search.exclude": {
+		"# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.": true,
+		"# dependencies": true,
+		"/node_modules": true,
+		"/.pnp": true,
+		".pnp.js": true,
+		".yarn/install-state.gz": true,
+		"# testing": true,
+		"/coverage": true,
+		"# next.js": true,
+		"/.next/": true,
+		"/out/": true,
+		".next": true,
+		"# production": true,
+		"/build": true,
+		"# misc": true,
+		".DS_Store": true,
+		"*.pem": true,
+		"# debug": true,
+		"npm-debug.log*": true,
+		"yarn-debug.log*": true,
+		"yarn-error.log*": true,
+		"# local env files": true,
+		".env*.local": true,
+		"# vercel": true,
+		".vercel": true,
+		"# typescript": true,
+		"*.tsbuildinfo": true,
+		"next-env.d.ts": true,
+		".env": true,
+		".vscode": true
+	},
+	"files.exclude": {
+		"# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.": true,
+		"# dependencies": true,
+		"/node_modules": true,
+		"/.pnp": true,
+		".pnp.js": true,
+		".yarn/install-state.gz": true,
+		"# testing": true,
+		"/coverage": true,
+		"# next.js": true,
+		"/.next/": true,
+		"/out/": true,
+		".next": true,
+		"# production": true,
+		"/build": true,
+		"# misc": true,
+		".DS_Store": true,
+		"*.pem": true,
+		"# debug": true,
+		"npm-debug.log*": true,
+		"yarn-debug.log*": true,
+		"yarn-error.log*": true,
+		"# local env files": true,
+		".env*.local": true,
+		"# vercel": true,
+		".vercel": true,
+		"# typescript": true,
+		"*.tsbuildinfo": true,
+		"next-env.d.ts": true,
+		".env": true,
+		".vscode": true
+	},
+	"svg.preview.background": "editor"
+}

package/README.md

@@ -0,0 +1,15 @@
+# Cherry Design System
+## Introduction
+The **Cherry Design System** is a versatile foundation for your projects. As a starting point, it provides a clean slate—a white label—upon which you can build and extend. Whether you’re creating a web application, mobile app, or any other digital interface, Cherry defines the essential components you need.
+
+## Key Features
+- **White Label Base**: Cherry serves as a neutral canvas, allowing you to customize and brand it according to your project’s requirements.
+- **React Components**: We’ve carefully curated the fundamental building blocks for a typical interface. These include components, typography, color schemes, and layout guidelines.
+- **Theming Support**: Cherry embraces theming, enabling you to adapt the design system to different contexts while maintaining consistency.
+Sanity and Consistency: By adhering to Cherry’s guidelines, you’ll create a cohesive user experience across various screens and interactions.
+- **Open Source**: Cherry takes it a step further by providing ready-to-use source code for the **Figma designs**. This means you not only get the visual templates but also the actual implementation. It’s like having a bridge between your design tool and your codebase.
+
+Getting Started
+To begin using Cherry, refer to our comprehensive documentation at [cherry.design](https://cherry.design/). Explore the components, study the design principles, and integrate them seamlessly into your project. Remember, Cherry is not just a set of rules—it’s a toolkit that empowers you to create delightful user interfaces.
+
+Happy designing! 🍒

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/next.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+	compiler: {
+		styledComponents: true,
+	},
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "cherry-styled-components",
+  "version": "0.1.0-1",
+  "private": false,
+  "main": "src/app/components/index.ts",
+  "files": [
+    "**/*"
+  ],
+  "types": "types/src/app/components/index.d.ts",
+  "author": "Luan Gjokaj <luan@riangle.com>",
+  "homepage": "https://cherry.design",
+  "repository": "https://github.com/cherry-design-system/styled-components",
+  "license": "MIT",
+  "keywords": [
+    "cherry",
+    "react",
+    "components",
+    "css",
+    "framework",
+    "design",
+    "design system",
+    "styled-components"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "build:types": "rimraf ./types && tsc",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier --write \"./src/**/*.{js,json,ts,tsx}\" \"!.node_modules/**\""
+  },
+  "dependencies": {
+    "next": "14.1.3",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@mdx-js/loader": "^3.0.1",
+    "@next/mdx": "^14.1.3",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.3",
+    "polished": "^4.3.1",
+    "prettier": "^3.2.5",
+    "rimraf": "^5.0.5",
+    "styled-components": "^6.1.8",
+    "typescript": "^5"
+  }
+}

package/src/app/components/box.tsx

@@ -0,0 +1,16 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import { Container, ContainerProps } from "./container";
+
+const StylesBox = styled(Container)<ContainerProps>`
+	background: ${({ theme }) => theme.colors.light};
+	border-radius: ${({ theme }) => theme.spacing.radius.lg};
+	border: solid 1px ${({ theme }) => theme.colors.grayLight};
+`;
+
+function Box({ ...props }: ContainerProps) {
+	return <StylesBox {...props}>{props.children}</StylesBox>;
+}
+
+export { Box };

package/src/app/components/button.tsx

@@ -0,0 +1,177 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import styled, { css } from "styled-components";
+import {
+	Theme,
+	theme as localTheme,
+	formElementHeightStyles,
+	resetButton,
+} from "./utils";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	children?: React.ReactNode;
+	$variant?: "primary" | "secondary" | "tertiary";
+	$size?: "default" | "big";
+	$outline?: boolean;
+	$fullWidth?: boolean;
+	theme?: Theme;
+}
+
+interface LinkButtonProps extends ButtonProps {
+	href: string;
+	target?: "_blank" | "_self" | "_parent" | "_top";
+}
+
+const buttonStyles = (
+	theme: Theme,
+	$variant?: "primary" | "secondary" | "tertiary",
+	$size?: "default" | "big",
+	$outline?: boolean,
+	$fullWidth?: boolean,
+	disabled?: boolean,
+) => css`
+	${resetButton};
+	font-family: inherit;
+	display: inline-block;
+	padding: 15px 30px;
+	border-radius: 100px;
+	font-weight: 600;
+	white-space: nowrap;
+	hyphens: auto;
+	color: ${theme.colors.light};
+	text-decoration: none;
+	transition: all 0.3s ease;
+
+	${!disabled &&
+	$variant === "primary" &&
+	css`
+		color: ${$outline ? theme.colors.primary : theme.colors.light};
+		background: ${$outline ? "transparent" : theme.colors.primary};
+		border: solid 2px ${theme.colors.primary};
+		box-shadow: 0 0 0 0px ${theme.colors.primary};
+
+		@media (hover: hover) {
+			&:hover {
+				background: ${$outline
+					? "transparent"
+					: theme.colors.primaryDark};
+				border-color: ${theme.colors.primaryDark};
+				${$outline && `color: ${theme.colors.primaryDark}`};
+			}
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 4px ${theme.colors.primaryLight};
+		}
+
+		&:active {
+			box-shadow: 0 0 0 2px ${theme.colors.primaryLight};
+		}
+	`}
+
+	${!disabled &&
+	$variant === "secondary" &&
+	css`
+		color: ${$outline ? theme.colors.secondary : theme.colors.light};
+		background: ${$outline ? "transparent" : theme.colors.secondary};
+		border: solid 2px ${theme.colors.secondary};
+		box-shadow: 0 0 0 0px ${theme.colors.secondary};
+
+		@media (hover: hover) {
+			&:hover {
+				background: ${$outline
+					? "transparent"
+					: theme.colors.secondaryDark};
+				border-color: ${theme.colors.secondaryDark};
+				${$outline && `color: ${theme.colors.secondaryDark}`};
+			}
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
+		}
+
+		&:active {
+			box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
+		}
+	`}
+
+	${!disabled &&
+	$variant === "tertiary" &&
+	css`
+		color: ${$outline ? theme.colors.tertiary : theme.colors.light};
+		background: ${$outline ? "transparent" : theme.colors.tertiary};
+		border: solid 2px ${theme.colors.tertiary};
+		box-shadow: 0 0 0 0px ${theme.colors.tertiary};
+
+		@media (hover: hover) {
+			&:hover {
+				background: ${$outline
+					? "transparent"
+					: theme.colors.tertiaryDark};
+				border-color: ${theme.colors.tertiaryDark};
+				${$outline && `color: ${theme.colors.tertiaryDark}`};
+			}
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 4px ${theme.colors.tertiaryLight};
+		}
+
+		&:active {
+			box-shadow: 0 0 0 2px ${theme.colors.tertiaryLight};
+		}
+	`}
+
+	${formElementHeightStyles($size)}
+
+	${$size === "big"
+		? `font-size: ${theme.fontSizes.buttonBig.lg};
+			line-height: ${theme.lineHeights.buttonBig.lg};
+	`
+		: `font-size: ${theme.fontSizes.button.lg};
+			line-height: ${theme.lineHeights.button.lg};`}
+
+	${disabled &&
+	`
+		cursor: not-allowed;
+		background: ${theme.colors.grayLight};
+		border-color: ${theme.colors.grayLight};
+		color: ${theme.colors.gray};
+	`}
+
+	${$fullWidth && `width: 100%;`}
+`;
+
+const StyledButton = styled.button<ButtonProps>`
+	${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
+		buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
+`;
+
+const StyledLinkButton = styled(Link)<LinkButtonProps>`
+	${({ theme, $variant, $size, $outline, $fullWidth, disabled }) =>
+		buttonStyles(theme, $variant, $size, $outline, $fullWidth, disabled)}
+`;
+
+function Button({ $variant = "primary", ...props }: ButtonProps) {
+	return (
+		<StyledButton $variant={$variant} {...props}>
+			{props.children}
+		</StyledButton>
+	);
+}
+
+function LinkButton({
+	$variant = "primary",
+	theme = localTheme,
+	...props
+}: LinkButtonProps) {
+	return (
+		<StyledLinkButton $variant={$variant} {...props}>
+			{props.children}
+		</StyledLinkButton>
+	);
+}
+
+export { Button, LinkButton };

package/src/app/components/col.tsx

@@ -0,0 +1,39 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import { Theme, generateColSpanStyles } from "./utils";
+
+interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
+	children?: React.ReactNode;
+	$span?: number;
+	$xsSpan?: number;
+	$smSpan?: number;
+	$mdSpan?: number;
+	$lgSpan?: number;
+	$xlSpan?: number;
+	$xxlSpan?: number;
+	$xxxlSpan?: number;
+	theme?: Theme;
+}
+
+const StyledCol = styled.div<ColProps>`
+	${({ $span }) =>
+		$span &&
+		`
+		grid-column: span ${$span};
+	`}
+
+	${({ $xsSpan }) => $xsSpan && generateColSpanStyles("xs", $xsSpan)}
+	${({ $smSpan }) => $smSpan && generateColSpanStyles("sm", $smSpan)}
+	${({ $mdSpan }) => $mdSpan && generateColSpanStyles("md", $mdSpan)}
+	${({ $lgSpan }) => $lgSpan && generateColSpanStyles("lg", $lgSpan)}
+	${({ $xlSpan }) => $xlSpan && generateColSpanStyles("xl", $xlSpan)}
+	${({ $xxlSpan }) => $xxlSpan && generateColSpanStyles("xxl", $xxlSpan)}
+	${({ $xxxlSpan }) => $xxxlSpan && generateColSpanStyles("xxxl", $xxxlSpan)}
+`;
+
+function Col({ ...props }: ColProps) {
+	return <StyledCol {...props}>{props.children}</StyledCol>;
+}
+
+export { Col };

package/src/app/components/container.tsx

@@ -0,0 +1,55 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import { Theme, mq, generatePaddingStyles } from "./utils";
+
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+	className?: string;
+	children?: React.ReactNode;
+	$fluid?: boolean;
+	$textAlign?: "right" | "left" | "center";
+	$padding?: number | "none";
+	$xsPadding?: number | "none";
+	$smPadding?: number | "none";
+	$mdPadding?: number | "none";
+	$lgPadding?: number | "none";
+	$xlPadding?: number | "none";
+	$xxlPadding?: number | "none";
+	$xxxlPadding?: number | "none";
+	theme?: Theme;
+}
+
+const StyledContainer = styled.div<ContainerProps>`
+	margin: auto;
+	width: 100%;
+	max-width: ${({ theme, $fluid }) =>
+		$fluid ? `100%` : theme.spacing.maxWidth.xs};
+	${({ $textAlign }) => $textAlign && `text-align: ${$textAlign}`};
+	padding: ${({ $padding, theme }) =>
+		($padding && `${$padding}px`) || theme.spacing.padding.xs};
+
+	${mq("lg")} {
+		padding: ${({ $padding, theme }) =>
+			($padding && `${$padding}px`) || theme.spacing.padding.lg};
+	}
+
+	${mq("xxxl")} {
+		max-width: ${({ theme, $fluid }) =>
+			$fluid ? `100%` : theme.spacing.maxWidth.xxxl};
+	}
+
+	${({ $xsPadding }) => $xsPadding && generatePaddingStyles("xs", $xsPadding)}
+	${({ $smPadding }) => $smPadding && generatePaddingStyles("sm", $smPadding)}
+	${({ $mdPadding }) => $mdPadding && generatePaddingStyles("md", $mdPadding)}
+	${({ $lgPadding }) => $lgPadding && generatePaddingStyles("lg", $lgPadding)}
+	${({ $xlPadding }) => $xlPadding && generatePaddingStyles("xl", $xlPadding)}
+	${({ $xxlPadding }) => $xxlPadding && generatePaddingStyles("xxl", $xxlPadding)}
+	${({ $xxxlPadding }) =>
+		$xxxlPadding && generatePaddingStyles("xxxl", $xxxlPadding)}
+`;
+
+function Container({ ...props }: ContainerProps) {
+	return <StyledContainer {...props}>{props.children}</StyledContainer>;
+}
+
+export { Container };