mirror of
https://github.com/nestriness/nestri.git
synced 2025-12-12 08:45:38 +02:00
✨ feat: Add tailwind and cloudflare support
This commit is contained in:
Wanjohi
@@ -5,15 +5,21 @@
|
||||
"files": [
|
||||
"library.js",
|
||||
"next.js",
|
||||
"react-internal.js"
|
||||
"react-internal.js",
|
||||
"qwik.js"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@vercel/style-guide": "^5.2.0",
|
||||
"eslint-config-turbo": "^2.0.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-only-warn": "^1.1.0",
|
||||
"@typescript-eslint/parser": "^7.1.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
||||
"typescript": "^5.3.3"
|
||||
"@types/eslint": "8.56.10",
|
||||
"@types/node": "20.14.11",
|
||||
"@typescript-eslint/eslint-plugin": "7.16.1",
|
||||
"@typescript-eslint/parser": "7.16.1",
|
||||
"eslint": "8.57.0",
|
||||
"eslint-plugin-qwik": "^1.8.0",
|
||||
"prettier": "3.3.3",
|
||||
"typescript": "5.4.5"
|
||||
}
|
||||
}
|
||||
|
||||
42
packages/eslint-config/qwik.js
Normal file
42
packages/eslint-config/qwik.js
Normal file
@@ -0,0 +1,42 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:qwik/recommended",
|
||||
],
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ["./tsconfig.json"],
|
||||
ecmaVersion: 2021,
|
||||
sourceType: "module",
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
plugins: ["@typescript-eslint"],
|
||||
rules: {
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||
"@typescript-eslint/no-inferrable-types": "off",
|
||||
"@typescript-eslint/no-non-null-assertion": "off",
|
||||
"@typescript-eslint/no-empty-interface": "off",
|
||||
"@typescript-eslint/no-namespace": "off",
|
||||
"@typescript-eslint/no-empty-function": "off",
|
||||
"@typescript-eslint/no-this-alias": "off",
|
||||
"@typescript-eslint/ban-types": "off",
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
"prefer-spread": "off",
|
||||
"no-case-declarations": "off",
|
||||
"no-console": "off",
|
||||
"@typescript-eslint/no-unused-vars": ["error"],
|
||||
"@typescript-eslint/consistent-type-imports": "warn",
|
||||
"@typescript-eslint/no-unnecessary-condition": "warn",
|
||||
},
|
||||
};
|
||||
|
||||
223
packages/ui/globals.css
Normal file
223
packages/ui/globals.css
Normal file
@@ -0,0 +1,223 @@
|
||||
@tailwind components;
|
||||
@tailwind base;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
@layer base {
|
||||
|
||||
html,
|
||||
html * {
|
||||
scrollbar-color: theme("colors.gray.700") theme("colors.gray.300");
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
*::selection {
|
||||
background-color: theme("colors.primary.200");
|
||||
}
|
||||
|
||||
*::-moz-selection {
|
||||
background-color: theme("colors.primary.200");
|
||||
}
|
||||
|
||||
html.dark *::selection {
|
||||
background-color: theme("colors.primary.800");
|
||||
}
|
||||
|
||||
html.dark *::-moz-selection {
|
||||
background-color: theme("colors.primary.800");
|
||||
}
|
||||
|
||||
html.dark,
|
||||
html.dark * {
|
||||
scrollbar-color: theme("colors.gray.300") theme("colors.gray.700");
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
*::selection {
|
||||
background-color: theme("colors.primary.800");
|
||||
}
|
||||
|
||||
*::-moz-selection {
|
||||
background-color: theme("colors.primary.800");
|
||||
}
|
||||
|
||||
html,
|
||||
html * {
|
||||
scrollbar-color: theme("colors.gray.300") theme("colors.gray.700");
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:focus {
|
||||
transition: background-color 0s 600000s, color 0s 600000s !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.marquee-container {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
scale: var(--scale);
|
||||
}
|
||||
|
||||
.marquee-container[data-spill=true]::after {
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: hsl(10 80% 0% / 0.25);
|
||||
width: calc(var(--scale) * 10000vw);
|
||||
height: calc(var(--scale) * 10000vh);
|
||||
pointer-events: none;
|
||||
translate: -50% -50%;
|
||||
mask:
|
||||
linear-gradient(white, white) 50% 50% / 100% 100% no-repeat,
|
||||
linear-gradient(white, white) 50% 50% / calc(100cqi + (var(--padding-x) * 2)) calc(100cqh + (var(--padding-y) * 2)) no-repeat;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
.marquee-container:not([data-spill=true]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-direction=horizontal] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[data-direction=vertical] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.marquee-container ul {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
[data-reverse=true] * {
|
||||
animation-direction: reverse !important;
|
||||
}
|
||||
|
||||
[data-translate=track][data-direction=horizontal] ul {
|
||||
--destination-x: -100%;
|
||||
animation: track-translate calc(var(--speed) * 1s) infinite linear;
|
||||
}
|
||||
|
||||
[data-translate=track][data-direction=vertical] ul {
|
||||
--destination-y: -100%;
|
||||
animation: track-translate calc(var(--speed) * 1s) infinite linear;
|
||||
}
|
||||
|
||||
[data-translate=track][data-direction=horizontal][data-pad=true] ul {
|
||||
--destination-x: calc((100% / -3) * 2);
|
||||
translate: calc(100% / -3) 0;
|
||||
}
|
||||
|
||||
[data-translate=track][data-direction=vertical][data-pad=true] ul {
|
||||
--destination-y: calc((100% / -3) * 2);
|
||||
translate: 0 calc(100% / -3);
|
||||
}
|
||||
|
||||
|
||||
[data-pad-diff=true] .pad {
|
||||
background: hsl(0 0% 10%);
|
||||
color: hsl(0 0% 98%);
|
||||
}
|
||||
|
||||
@keyframes track-translate {
|
||||
to {
|
||||
translate: var(--destination-x, 0) var(--destination-y, 0);
|
||||
}
|
||||
}
|
||||
|
||||
[data-direction=horizontal] ul {
|
||||
height: max-content;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
[data-direction=vertical] ul {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
justify-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* .marquee-container ul li {
|
||||
height: auto;
|
||||
aspect-ratio: 4 / 3;
|
||||
background: hsl(0 0% 90%);
|
||||
border-radius: 6px;
|
||||
font-size: clamp(2rem, 4vw + 1rem, 8rem);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid hsl(0 0% 50%);
|
||||
} */
|
||||
|
||||
[data-play-state=running] :is(ul, li) {
|
||||
animation-play-state: running !important;
|
||||
}
|
||||
|
||||
[data-play-state=paused] :is(ul, li) {
|
||||
animation-play-state: paused !important;
|
||||
}
|
||||
|
||||
|
||||
/* The animation stuff */
|
||||
@media(prefers-reduced-motion: no-preference) {
|
||||
[data-translate=items] ul {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
[data-translate=items][data-direction=horizontal].marquee-container {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
[data-translate=items][data-direction=vertical].marquee-container {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
[data-translate=items][data-spill=true][data-direction=horizontal].marquee-container::after {
|
||||
--padding-x: 0rem;
|
||||
}
|
||||
|
||||
[data-translate=items][data-direction=vertical][data-spill=true].marquee-container::after {
|
||||
--padding-y: 0rem;
|
||||
}
|
||||
|
||||
[data-pause-on-hover=true]:hover li {
|
||||
animation-play-state: paused !important;
|
||||
}
|
||||
|
||||
[data-translate=items] li {
|
||||
--duration: calc(var(--speed) * 1s);
|
||||
--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - (var(--count) * 0.5)));
|
||||
animation: slide var(--duration) calc(var(--delay) - (var(--count) * 0.5s)) infinite linear paused;
|
||||
translate: var(--origin-x) var(--origin-y);
|
||||
}
|
||||
|
||||
[data-translate=items][data-direction=horizontal] li {
|
||||
--origin-x: calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);
|
||||
--origin-y: 0;
|
||||
--destination-x: calc(calc((var(--index) + 1 + var(--outset, 0)) * -100%));
|
||||
--destination-y: 0;
|
||||
}
|
||||
|
||||
[data-translate=items][data-direction=vertical] li {
|
||||
--origin-x: 0;
|
||||
--origin-y: calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);
|
||||
--destination-x: 0;
|
||||
--destination-y: calc(calc((var(--index) + 1 + var(--outset, 0)) * -100%));
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
100% {
|
||||
translate: var(--destination-x) var(--destination-y);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5,24 +5,35 @@
|
||||
"exports": {
|
||||
"./button": "./src/button.tsx",
|
||||
"./card": "./src/card.tsx",
|
||||
"./code": "./src/code.tsx"
|
||||
"./code": "./src/code.tsx",
|
||||
"./tailwind.config": "./tailwind.config.js",
|
||||
"./globals.css": "./globals.css",
|
||||
"./postcss": "./post.config.js"
|
||||
},
|
||||
"files": ["tailwind.config.js", "post.config.js", "globals.css", "postcss.config.js"],
|
||||
"scripts": {
|
||||
"lint": "eslint . --max-warnings 0",
|
||||
"generate:component": "turbo gen react-component"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@builder.io/qwik": "^1.8.0",
|
||||
"@builder.io/qwik-react": "^0.5.5",
|
||||
"@nestri/eslint-config": "*",
|
||||
"@nestri/typescript-config": "*",
|
||||
"@turbo/gen": "^1.12.4",
|
||||
"@types/node": "^20.11.24",
|
||||
"@types/eslint": "^8.56.5",
|
||||
"@types/react": "^18.2.61",
|
||||
"@types/react-dom": "^18.2.19",
|
||||
"@types/node": "^20.11.24",
|
||||
"@types/react": "^18.3.4",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^8.57.0",
|
||||
"framer-motion": "^11.3.31",
|
||||
"postcss": "^8.4.41",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwind-variants": "^0.2.1",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
6
packages/ui/post.config.js
Normal file
6
packages/ui/post.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
134
packages/ui/tailwind.config.js
Normal file
134
packages/ui/tailwind.config.js
Normal file
@@ -0,0 +1,134 @@
|
||||
import colors from "tailwindcss/colors";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
'./{src,components,app}/**/*.{ts,tsx,html}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: "#FFEDE5",
|
||||
100: "#FFDBCC",
|
||||
200: "#FFB899",
|
||||
300: "#FF9466",
|
||||
400: "#FF7033",
|
||||
500: "#FF4F01",
|
||||
600: "#CC3D00",
|
||||
700: "#992E00",
|
||||
800: "#661F00",
|
||||
900: "#330F00",
|
||||
950: "#190800",
|
||||
DEFAULT: "#FF4F01"
|
||||
},
|
||||
secondary: colors.orange,
|
||||
accent: colors.amber,
|
||||
gray: {
|
||||
...colors.neutral,
|
||||
925: "#111111",
|
||||
},
|
||||
danger: colors.red,
|
||||
warning: colors.yellow,
|
||||
success: colors.green,
|
||||
info: colors.blue,
|
||||
},
|
||||
fontFamily: {
|
||||
body: [
|
||||
"Geist Sans",
|
||||
"ui-sans-serif",
|
||||
"system-ui",
|
||||
"-apple-system",
|
||||
"BlinkMacSystemFont",
|
||||
"Inter",
|
||||
"Segoe UI",
|
||||
"Roboto",
|
||||
"sans-serif",
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji",
|
||||
],
|
||||
title: [
|
||||
"Bricolage Grotesque",
|
||||
"-apple-system",
|
||||
"blinkmacsystemfont",
|
||||
"segoe ui",
|
||||
"roboto",
|
||||
"oxygen",
|
||||
"ubuntu",
|
||||
"cantarell",
|
||||
"fira",
|
||||
"sans",
|
||||
"droid sans",
|
||||
"helvetica neue",
|
||||
"sans-serif",
|
||||
]
|
||||
},
|
||||
boxShadow: {
|
||||
"shadow-floating-light": "0px 6px 12px 0px rgba(99,99,99,.06),0px 22px 22px 0px rgba(99,99,99,.05),0px 50px 30px 0px rgba(99,99,99,.03),0px 89px 36px 0px rgba(99,99,99,.01),0px 140px 39px 0px rgba(99,99,99,0)",
|
||||
"inner-shadow-dark-float": "0px 1px 0px 0px hsla(0,0%,100%,.03) inset,0px 0px 0px 1px hsla(0,0%,100%,.03) inset,0px 0px 0px 1px rgba(0,0,0,.1),0px 2px 2px 0px rgba(0,0,0,.1),0px 4px 4px 0px rgba(0,0,0,.1),0px 8px 8px 0px rgba(0,0,0,.1)",
|
||||
"fullscreen": "0 0 0 1px rgba(0,0,0,.08),0px 1px 1px rgba(0,0,0,.02),0px 8px 16px -4px rgba(0,0,0,.04),0px 24px 32px -8px rgba(0,0,0,.06)",
|
||||
"menu": "0 0 0 1px rgba(0,0,0,.08),0px 1px 1px rgba(0,0,0,.02),0px 4px 8px -4px rgba(0,0,0,.04),0px 16px 24px -8px rgba(0,0,0,.06)",
|
||||
},
|
||||
keyframes: {
|
||||
"fade-up": {
|
||||
"0%": {
|
||||
opacity: "0",
|
||||
transform: "translateY(10px)",
|
||||
},
|
||||
"80%": {
|
||||
opacity: "0.7",
|
||||
},
|
||||
"100%": {
|
||||
opacity: "1",
|
||||
transform: "translateY(0px)",
|
||||
},
|
||||
},
|
||||
"fade-down": {
|
||||
"0%": {
|
||||
opacity: "0",
|
||||
transform: "translateY(-10px)",
|
||||
},
|
||||
"80%": {
|
||||
opacity: "0.6",
|
||||
},
|
||||
"100%": {
|
||||
opacity: "1",
|
||||
transform: "translateY(0px)",
|
||||
},
|
||||
},
|
||||
shake: {
|
||||
"25%": {
|
||||
translate: "0.25ch 0"
|
||||
},
|
||||
"75%": {
|
||||
translate: "-0.25ch 0"
|
||||
}
|
||||
},
|
||||
slide: {
|
||||
"100%": {
|
||||
translate: "var(--destination-x) var(--destination-y);",
|
||||
},
|
||||
},
|
||||
"multicolor": {
|
||||
"0%": {
|
||||
transform: "translateX(0%)"
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateX(-50%)"
|
||||
}
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
// Fade up and down
|
||||
"fade-up": "fade-up 0.5s",
|
||||
"fade-down": "fade-down 0.5s",
|
||||
"shake": "shake 0.075s 8",
|
||||
"multicolor": "multicolor 5s linear 0s infinite"
|
||||
},
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
"compilerOptions": {
|
||||
"outDir": "dist"
|
||||
},
|
||||
"include": ["src", "turbo"],
|
||||
"include": ["src", "tailwind.config.js", "post.config.js"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user