Skip to content

Commit 16d8f87

Browse files
thetarnavthetarnav
committed
Merge branch 'main' of github.com:Tommypop2/solid-primitives into Tommypop2-main
1 parent 69cd152 commit 16d8f87

4 files changed

Lines changed: 150 additions & 22 deletions

File tree

‎packages/cookies/README.md‎

Lines changed: 124 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
<p>
2-
<img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=cookies" alt="Solid Primitives cookies">
2+
<img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=start" alt="Solid Primitives start">
33
</p>
44

5-
# @solid-primitives/cookies
5+
# @solid-primitives/start
66

77
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
8-
[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/cookies?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/cookies)
9-
[![version](https://img.shields.io/npm/v/@solid-primitives/cookies?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/cookies)
8+
[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/start?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/start)
9+
[![version](https://img.shields.io/npm/v/@solid-primitives/start?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/start)
1010
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
1111

12-
A set of primitives for handling cookies in solid
12+
A set of primitives for Solid Start
1313

1414
- [`createServerCookie`](#createservercookie) - Provides a getter and setter for a reactive cookie, which works isomorphically.
1515
- [`createUserTheme`](#createusertheme) - Creates a Server Cookie providing a type safe way to store a theme and access it on the server or client.
16+
- [`getUserAgent`](#getuseragent) - Creates a Server Cookie providing a type safe way to store a theme and access it on the server or client.
1617

1718
## Installation
1819

1920
```bash
20-
npm install @solid-primitives/cookies
21+
npm install @solid-primitives/start
2122
# or
22-
yarn add @solid-primitives/cookies
23+
yarn add @solid-primitives/start
2324
# or
24-
pnpm add @solid-primitives/cookies
25+
pnpm add @solid-primitives/start
2526
```
2627

2728
## How to use it
@@ -62,17 +63,130 @@ theme(); // => "light" | "dark" | undefined
6263
const [theme, setTheme] = createUserTheme("cookieName", {
6364
defaultValue: "light",
6465
});
66+
```
6567

6668
theme(); // => "light" | "dark"
69+
70+
## `getUserAgent`
71+
72+
Provides the value of the `userAgent` string isomorphically on the client or server
73+
74+
```ts
75+
const userAgent: string | null = getUserAgent();
6776
```
6877

6978
## Examples
7079

71-
Coming soon
80+
### `root.tsx`
81+
82+
This is the main entry file for SolidStart demonstrating usage of the `createUserTheme` function.
83+
84+
- Initializes the theme with the `createUserTheme` function.
85+
- Toggles between the "dark" and "light" themes using a button.
86+
- Sets the `data-theme` attribute adding compatibility between `createUserTheme` and libraries like [DaisyUI](https://daisyui.com/).
87+
- Includes a clean implementation of theming through a `Body` class.
88+
- Provides additional examples on using variant classes to style components.
89+
90+
```tsx
91+
import { Suspense } from "solid-js";
92+
import {
93+
A,
94+
Body,
95+
ErrorBoundary,
96+
FileRoutes,
97+
Head,
98+
Html,
99+
Meta,
100+
Routes,
101+
Scripts,
102+
Title,
103+
} from "solid-start";
104+
import Counter from "./components/Counter";
105+
import "./root.css";
106+
import { createUserTheme } from "~/primitives/start";
107+
108+
export default function Root() {
109+
const [theme, setTheme] = createUserTheme("dark-light-theme", { defaultValue: "dark" });
110+
const toggleTheme = () => setTheme(currentTheme => (currentTheme === "dark" ? "light" : "dark"));
111+
112+
return (
113+
// Set data-theme when using libraries like Daisyui:
114+
<Html lang="en" data-theme={theme()}>
115+
<Head>
116+
<Title>SolidStart - Bare</Title>
117+
<Meta charset="utf-8" />
118+
<Meta name="viewport" content="width=device-width, initial-scale=1" />
119+
</Head>
120+
// Apply theme as a class to the Body element:
121+
<Body class={theme()}>
122+
<div>
123+
<Counter
124+
classList={{
125+
// Within components apply theme-dependent classes/variants:
126+
"dark-variant": theme() !== "light",
127+
"light-variant": theme() === "light",
128+
}}
129+
/>
130+
<button onClick={toggleTheme}>
131+
<span>Toggle Theme</span>
132+
</button>
133+
</div>
134+
<Scripts />
135+
</Body>
136+
</Html>
137+
);
138+
}
139+
```
140+
141+
### `root.css`
142+
143+
Here is an absolute basic CSS file to demonstrate styling with the themes.
144+
145+
- The `body` selector has general styles.
146+
- The `.dark` and `.light` classes provide specific styles for each theme.
147+
- The `.dark span` and `.light span` selectors show how to style specific elements based on the theme.
148+
149+
```css
150+
body {
151+
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
152+
height: "100vh";
153+
width: "100vh";
154+
}
155+
156+
body.dark {
157+
background-color: black;
158+
color: aliceblue;
159+
}
160+
body.light {
161+
background-color: aliceblue;
162+
color: black;
163+
}
164+
165+
.dark span {
166+
color: #b1d4ff;
167+
}
168+
.light span {
169+
color: #003677;
170+
}
171+
```
172+
173+
### `Counter.css`
174+
175+
Continuation of the basic CSS scoped to the component using variant classes.
176+
177+
```css
178+
.dark-variant {
179+
border: 2px solid #569cf3;
180+
}
181+
182+
.light-variant {
183+
border: 2px solid #05ff22;
184+
}
185+
```
72186

73187
## Demo
74188

75-
You can view a demo of this primitive here: <https://codesandbox.io/p/sandbox/amazing-easley-wqk38i?file=%2Fsrc%2Fcookies_primitive%2Findex.ts%3A36%2C20>
189+
You can view a demo of this primitive here: <https://codesandbox.io/p/sandbox/amazing-easley-wqk38i?file=%2Fsrc%2Fstart_primitive%2Findex.ts%3A36%2C20>
76190

77191
## Changelog
78192

‎packages/cookies/dev/index.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
import { Component, createSignal } from "solid-js";
1+
import { Component } from "solid-js";
2+
import { createUserTheme } from "../src/index.js";
23

34
const App: Component = () => {
4-
const [count, setCount] = createSignal(0);
5-
const increment = () => setCount(count() + 1);
6-
5+
const [theme, setTheme] = createUserTheme();
6+
const increment = () => setTheme(theme() === "light" ? "dark" : "light");
77
return (
8-
<div class="box-border flex min-h-screen w-full flex-col items-center justify-center space-y-4 bg-gray-800 p-24 text-white">
9-
<div class="wrapper-v">
10-
<h4>Counter component</h4>
11-
<p class="caption">it's very important...</p>
12-
<button class="btn" onClick={increment}>
13-
{count()}
14-
</button>
8+
<div class={`min-h-screen ${"dark" == "dark" ? "dark" : ""}`}>
9+
<div class="box-border flex min-h-screen w-full flex-col items-center justify-center space-y-4 bg-gray-800 p-24 text-white">
10+
<div class="wrapper-v">
11+
<h4>Counter component</h4>
12+
<p class="caption">it's very important...</p>
13+
<button class="btn" onClick={increment}>
14+
{theme()}
15+
</button>
16+
</div>
1517
</div>
1618
</div>
1719
);

‎packages/cookies/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
"stage": 0,
2222
"list": [
2323
"createServerCookie",
24-
"createUserTheme"
24+
"createUserTheme",
25+
"getUserAgent"
2526
],
2627
"category": "Solid Start"
2728
},

‎packages/cookies/src/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,17 @@ export function parseCookie(cookie: string, key: string): string | undefined {
3333
return cookie.match(new RegExp(`(^| )${key}=([^;]+)`))?.[2];
3434
}
3535

36+
/**
37+
* A primitive that allows for the user agent string to be accessed isomorphically on the client, or on the server
38+
* @return Returns the user agent string, or null
39+
*/
40+
export function getUserAgent(): string | null {
41+
if (isServer) {
42+
return getRequestEvent()?.request.headers.get("user-agent") ?? null
43+
}
44+
return navigator.userAgent
45+
}
46+
3647
/**
3748
* A primitive for creating a cookie that can be accessed isomorphically on the client, or the server
3849
*

0 commit comments

Comments
 (0)