commit 85fa9aff4a8f0bd58b1febe24fa73911bb382e30 Author: Chris Kruining Date: Tue Sep 10 22:58:35 2024 +0200 inital commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..25f28f7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,32 @@ + +dist +.solid +.output +.vercel +.netlify +.vinxi + +# Environment +.env +.env*.local + +# dependencies +/node_modules + +# IDEs and editors +/.idea +.project +.classpath +*.launch +.settings/ + +# Temp +gitignore + +# System Files +.DS_Store +Thumbs.db + +## Panda +styled-system +styled-system-studio \ No newline at end of file diff --git a/.prettierrc.toml b/.prettierrc.toml new file mode 100644 index 0000000..5b5ad7a --- /dev/null +++ b/.prettierrc.toml @@ -0,0 +1,8 @@ +trailingComma = "all" +tabWidth = 2 +semi = true +singleQuote = true +bracketSpacing = true +bracketLine = false +arrowFunctionParenthesis = "avoid" +experimentalTernaries = true diff --git a/README.md b/README.md new file mode 100644 index 0000000..a84af39 --- /dev/null +++ b/README.md @@ -0,0 +1,32 @@ +# SolidStart + +Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com); + +## Creating a project + +```bash +# create a new project in the current directory +npm init solid@latest + +# create a new project in my-app +npm init solid@latest my-app +``` + +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```bash +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +## Building + +Solid apps are built with _presets_, which optimise your project for deployment to different environments. + +By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`. + +## This project was created with the [Solid CLI](https://solid-cli.netlify.app) diff --git a/app.config.ts b/app.config.ts new file mode 100644 index 0000000..fdfbc3e --- /dev/null +++ b/app.config.ts @@ -0,0 +1,12 @@ +import { defineConfig } from '@solidjs/start/config'; +import tsconfigPaths from 'vite-tsconfig-paths'; + +export default defineConfig({ + ssr: true, + server: { + preset: 'bun', + }, + vite: { + plugins: [tsconfigPaths({ root: './' })], + }, +}); diff --git a/bun.lockb b/bun.lockb new file mode 100644 index 0000000..8cf92fa Binary files /dev/null and b/bun.lockb differ diff --git a/package.json b/package.json new file mode 100644 index 0000000..e143b92 --- /dev/null +++ b/package.json @@ -0,0 +1,27 @@ +{ + "name": "example-basic", + "type": "module", + "scripts": { + "prepare": "panda codegen", + "dev": "vinxi dev", + "build": "vinxi build", + "start": "vinxi start", + "version": "vinxi version" + }, + "engines": { + "node": ">=18" + }, + "dependencies": { + "@ark-ui/solid": "^3.9.0", + "@solidjs/meta": "^0.29.4", + "@solidjs/router": "^0.14.1", + "@solidjs/start": "^1.0.6", + "solid-js": "^1.8.18", + "vinxi": "^0.4.1" + }, + "devDependencies": { + "@pandacss/dev": "^0.45.2", + "@park-ui/panda-preset": "^0.42.0", + "vite-tsconfig-paths": "^5.0.1" + } +} diff --git a/panda.config.ts b/panda.config.ts new file mode 100644 index 0000000..8ec0613 --- /dev/null +++ b/panda.config.ts @@ -0,0 +1,17 @@ +import { defineConfig } from '@pandacss/dev' +import { createPreset } from '@park-ui/panda-preset' + +export default defineConfig({ + preflight: true, + presets: [ + '@pandacss/preset-base', + createPreset({ + accentColor: 'jade', + grayColor: 'neutral', + borderRadius: 'sm', + }), + ], + include: ['./src/**/*.{js,jsx,ts,tsx,vue}'], + jsxFramework: 'solid', // or 'solid' or 'vue' + outdir: 'styled-system', +}) diff --git a/park-ui.json b/park-ui.json new file mode 100644 index 0000000..482cf63 --- /dev/null +++ b/park-ui.json @@ -0,0 +1,5 @@ +{ + "$schema": "https://park-ui.com/registry/latest/schema.json", + "jsFramework": "solid", + "outputPath": "./src/common/components/ui" +} diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..573efad --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,5 @@ +module.exports = { + plugins: { + '@pandacss/dev/postcss': {}, + }, +} \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..fb282da Binary files /dev/null and b/public/favicon.ico differ diff --git a/src/app.tsx b/src/app.tsx new file mode 100644 index 0000000..ffdbcc4 --- /dev/null +++ b/src/app.tsx @@ -0,0 +1,20 @@ +import { MetaProvider, Title } from "@solidjs/meta"; +import { Router } from "@solidjs/router"; +import { FileRoutes } from "@solidjs/start/router"; +import { Suspense } from "solid-js"; +import './index.css'; + +export default function App() { + return ( + ( + + Streamarr - Home + {props.children} + + )} + > + + + ); +} diff --git a/src/common/components/hero.tsx b/src/common/components/hero.tsx new file mode 100644 index 0000000..21d1fd7 --- /dev/null +++ b/src/common/components/hero.tsx @@ -0,0 +1,82 @@ +import { Index } from 'solid-js'; +import { css } from 'styled-system/css'; +import { Entry } from '~/features/content'; + +type HeroProps = { + entry: Entry; +}; + +export function Hero(props: HeroProps) { + return ( +
+

{props.entry.title}

+ + + + + + {props.entry.releaseDate} + + + {(source) => ( + <> +  •  + + {source().rating.score} {source().label} + + + )} + + + +

{props.entry.summary}

+
+ ); +} + +const container = css({ + display: 'grid', + grid: 'repeat(3, auto) / 10em 1fr', + gridTemplateAreas: ` + "thumbnail ." + "thumbnail title" + "thumbnail detail" + "thumbnail summary" + `, + alignContent: 'end', + gap: '1em', + blockSize: '80vh', +}); + +const title = css({ + gridArea: 'title', + fontSize: '2.5em', +}); + +const thumbnail = css({ + gridArea: 'thumbnail', + inlineSize: '15em', + aspectRatio: '3 / 5', + borderRadius: '1em', + objectFit: 'cover', + objectPosition: 'center', +}); + +const background = css({ + position: 'fixed', + inset: '0', + zIndex: '-1', + blockSize: '90vh', + inlineSize: '100%', + objectFit: 'cover', + objectPosition: 'center', +}); + +const detail = css({ + gridArea: 'detail', +}); + +const summary = css({ + gridArea: 'summary', + textWrap: 'balance', +}); diff --git a/src/common/components/list.tsx b/src/common/components/list.tsx new file mode 100644 index 0000000..a6f9572 --- /dev/null +++ b/src/common/components/list.tsx @@ -0,0 +1,55 @@ +import { ParentComponent, Index } from 'solid-js'; +import { css } from 'styled-system/css'; + +type ListProps = { + label: string; + items: T[]; + children: (item: T) => U; +}; + +export const List: ParentComponent<{ label: string; items: T[] }> = (props) => { + return ( +
+ + {props.label} + + +
    + {props.children} +
+
+ ); +}; + +const container = css({ + display: 'grid', + gridAutoFlow: 'row', + inlineSize: '100%', +}); + +const heading = css({ + fontSize: '2em', +}); + +const list = css({ + // layout + display: 'grid', + gridAutoFlow: 'column', + // gridAutoColumns: '', + + // spacing + gap: '2em', + padding: '10em 4em 5em', + scrollPadding: '4em', + margin: '-10em -4em 0em', + marginBlockStart: '-10em', + + // scroll + overflowInline: 'auto', + overflowBlock: 'visible', + scrollSnapType: 'inline proximity', + + '@media (hover: none)': { + '& > *': { scrollSnapAlign: 'start' }, + }, +}); diff --git a/src/common/components/ui/avatar.tsx b/src/common/components/ui/avatar.tsx new file mode 100644 index 0000000..601a82d --- /dev/null +++ b/src/common/components/ui/avatar.tsx @@ -0,0 +1,40 @@ +import { splitProps } from 'solid-js' +import * as StyledAvatar from './styled/avatar' + +export interface AvatarProps extends StyledAvatar.RootProps { + name?: string + src?: string +} + +export const Avatar = (props: AvatarProps) => { + const [localProps, rootProps] = splitProps(props, ['name', 'src']) + + return ( + + {getInitials(localProps.name) || } + + + ) +} + +const UserIcon = () => ( + + User Icon + + + +) + +const getInitials = (name = '') => + name + .split(' ') + .map((part) => part[0]) + .splice(0, 2) + .join('') + .toUpperCase() diff --git a/src/common/components/ui/badge.tsx b/src/common/components/ui/badge.tsx new file mode 100644 index 0000000..3119aea --- /dev/null +++ b/src/common/components/ui/badge.tsx @@ -0,0 +1 @@ +export { Badge, type BadgeProps } from './styled/badge' diff --git a/src/common/components/ui/button.tsx b/src/common/components/ui/button.tsx new file mode 100644 index 0000000..901d512 --- /dev/null +++ b/src/common/components/ui/button.tsx @@ -0,0 +1,37 @@ +import type { JSX } from 'solid-js' +import { Show, splitProps } from 'solid-js' +import { Center, styled } from 'styled-system/jsx' +import { Spinner } from './spinner' +import { Button as StyledButton, type ButtonProps as StyledButtonProps } from './styled/button' + +interface ButtonLoadingProps { + loading?: boolean + loadingText?: JSX.Element +} + +export interface ButtonProps extends StyledButtonProps, ButtonLoadingProps {} + +export const Button = (props: ButtonProps) => { + const [localProps, rest] = splitProps(props, ['loading', 'disabled', 'loadingText', 'children']) + const trulyDisabled = () => localProps.loading || localProps.disabled + + return ( + + + <> + + {localProps.children} + + + + ) +} + +const ButtonSpinner = () => ( +
+ +
+) diff --git a/src/common/components/ui/card.tsx b/src/common/components/ui/card.tsx new file mode 100644 index 0000000..bda3bd5 --- /dev/null +++ b/src/common/components/ui/card.tsx @@ -0,0 +1 @@ +export * as Card from './styled/card' diff --git a/src/common/components/ui/checkbox.tsx b/src/common/components/ui/checkbox.tsx new file mode 100644 index 0000000..754f473 --- /dev/null +++ b/src/common/components/ui/checkbox.tsx @@ -0,0 +1,51 @@ +import { Show, children } from 'solid-js' +import * as StyledCheckbox from './styled/checkbox' + +export interface CheckboxProps extends StyledCheckbox.RootProps {} + +export const Checkbox = (props: CheckboxProps) => { + const getChildren = children(() => props.children) + + return ( + + + + + + + + + + + {getChildren()} + + + + ) +} + +const CheckIcon = () => ( + + Check Icon + + +) + +const MinusIcon = () => ( + + Minus Icon + + +) diff --git a/src/common/components/ui/code.tsx b/src/common/components/ui/code.tsx new file mode 100644 index 0000000..76de0c8 --- /dev/null +++ b/src/common/components/ui/code.tsx @@ -0,0 +1 @@ +export { Code, type CodeProps } from './styled/code' diff --git a/src/common/components/ui/color-picker.tsx b/src/common/components/ui/color-picker.tsx new file mode 100644 index 0000000..18c1a20 --- /dev/null +++ b/src/common/components/ui/color-picker.tsx @@ -0,0 +1 @@ +export * as ColorPicker from './styled/color-picker' diff --git a/src/common/components/ui/combobox.tsx b/src/common/components/ui/combobox.tsx new file mode 100644 index 0000000..c72f967 --- /dev/null +++ b/src/common/components/ui/combobox.tsx @@ -0,0 +1 @@ +export * as Combobox from './styled/combobox' diff --git a/src/common/components/ui/date-picker.tsx b/src/common/components/ui/date-picker.tsx new file mode 100644 index 0000000..cb55f2c --- /dev/null +++ b/src/common/components/ui/date-picker.tsx @@ -0,0 +1 @@ +export * as DatePicker from './styled/date-picker' diff --git a/src/common/components/ui/dialog.tsx b/src/common/components/ui/dialog.tsx new file mode 100644 index 0000000..2b8a7e1 --- /dev/null +++ b/src/common/components/ui/dialog.tsx @@ -0,0 +1 @@ +export * as Dialog from './styled/dialog' diff --git a/src/common/components/ui/drawer.tsx b/src/common/components/ui/drawer.tsx new file mode 100644 index 0000000..e336a33 --- /dev/null +++ b/src/common/components/ui/drawer.tsx @@ -0,0 +1 @@ +export * as Drawer from './styled/drawer' diff --git a/src/common/components/ui/editable.tsx b/src/common/components/ui/editable.tsx new file mode 100644 index 0000000..80628b9 --- /dev/null +++ b/src/common/components/ui/editable.tsx @@ -0,0 +1 @@ +export * as Editable from './styled/editable' diff --git a/src/common/components/ui/field.tsx b/src/common/components/ui/field.tsx new file mode 100644 index 0000000..fdff2b6 --- /dev/null +++ b/src/common/components/ui/field.tsx @@ -0,0 +1 @@ +export * as Field from './styled/field' diff --git a/src/common/components/ui/file-upload.tsx b/src/common/components/ui/file-upload.tsx new file mode 100644 index 0000000..1b70a24 --- /dev/null +++ b/src/common/components/ui/file-upload.tsx @@ -0,0 +1 @@ +export * as FileUpload from './styled/file-upload' diff --git a/src/common/components/ui/heading.tsx b/src/common/components/ui/heading.tsx new file mode 100644 index 0000000..6c736e3 --- /dev/null +++ b/src/common/components/ui/heading.tsx @@ -0,0 +1 @@ +export { Heading, type HeadingProps } from './styled/heading' diff --git a/src/common/components/ui/icon-button.tsx b/src/common/components/ui/icon-button.tsx new file mode 100644 index 0000000..394bce2 --- /dev/null +++ b/src/common/components/ui/icon-button.tsx @@ -0,0 +1 @@ +export { IconButton, type IconButtonProps } from './styled/icon-button' diff --git a/src/common/components/ui/icon.tsx b/src/common/components/ui/icon.tsx new file mode 100644 index 0000000..3aaf509 --- /dev/null +++ b/src/common/components/ui/icon.tsx @@ -0,0 +1 @@ +export { Icon, type IconProps } from './styled/icon' diff --git a/src/common/components/ui/input.tsx b/src/common/components/ui/input.tsx new file mode 100644 index 0000000..e11a0a4 --- /dev/null +++ b/src/common/components/ui/input.tsx @@ -0,0 +1 @@ +export { Input, type InputProps } from './styled/input' diff --git a/src/common/components/ui/kbd.tsx b/src/common/components/ui/kbd.tsx new file mode 100644 index 0000000..e010213 --- /dev/null +++ b/src/common/components/ui/kbd.tsx @@ -0,0 +1 @@ +export { Kbd, type KbdProps } from './styled/kbd' diff --git a/src/common/components/ui/link.tsx b/src/common/components/ui/link.tsx new file mode 100644 index 0000000..4800911 --- /dev/null +++ b/src/common/components/ui/link.tsx @@ -0,0 +1 @@ +export { Link, type LinkProps } from './styled/link' diff --git a/src/common/components/ui/menu.tsx b/src/common/components/ui/menu.tsx new file mode 100644 index 0000000..8884a71 --- /dev/null +++ b/src/common/components/ui/menu.tsx @@ -0,0 +1 @@ +export * as Menu from './styled/menu' diff --git a/src/common/components/ui/number-input.tsx b/src/common/components/ui/number-input.tsx new file mode 100644 index 0000000..6e4fa60 --- /dev/null +++ b/src/common/components/ui/number-input.tsx @@ -0,0 +1,53 @@ +import { Show, children } from 'solid-js' +import * as StyledNumberInput from './styled/number-input' + +export interface NumberInputProps extends StyledNumberInput.RootProps {} + +export const NumberInput = (props: NumberInputProps) => { + const getChildren = children(() => props.children) + + return ( + + + {getChildren()} + + + + + + + + + + + + ) +} + +const ChevronUpIcon = () => ( + + Chevron Up Icon + + +) + +const ChevronDownIcon = () => ( + + Chevron Down Icon + + +) diff --git a/src/common/components/ui/pagination.tsx b/src/common/components/ui/pagination.tsx new file mode 100644 index 0000000..6afc778 --- /dev/null +++ b/src/common/components/ui/pagination.tsx @@ -0,0 +1,73 @@ +import { For } from 'solid-js' +import { Button } from './button' +import { IconButton } from './icon-button' +import * as StyledPagination from './styled/pagination' + +export interface PaginationProps extends StyledPagination.RootProps {} + +export const Pagination = (props: PaginationProps) => { + return ( + + ( + + + + )} + /> + + {(pagiation) => ( + + {(page, index) => + page.type === 'page' ? ( +