diff --git a/README.md b/README.md new file mode 100644 index 0000000..7713bc9 --- /dev/null +++ b/README.md @@ -0,0 +1,9 @@ +# goofy-goober + +Minimal styling, powered by Goober. + +Generate class names, while only focusing on pluggable styles. + +## Usage + +See the [examples folder](./examples) for usage details. diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..ca2cc09 --- /dev/null +++ b/examples/README.md @@ -0,0 +1,7 @@ +# goofy-goober +## Examples + +The current list of available examples are as follows: + +- [Vanilla](./vanilla) +- [React (using Next)](./react-next) diff --git a/examples/react-next/.eslintrc.json b/examples/react-next/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/examples/react-next/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/examples/react-next/.gitignore b/examples/react-next/.gitignore new file mode 100644 index 0000000..8f322f0 --- /dev/null +++ b/examples/react-next/.gitignore @@ -0,0 +1,35 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/react-next/README.md b/examples/react-next/README.md new file mode 100644 index 0000000..2feb9e3 --- /dev/null +++ b/examples/react-next/README.md @@ -0,0 +1,8 @@ +# goofy-goober +# React Example (using [Next](https://nextjs.org)) + +The setup for Next can be found in [src/pages/_app.tsx](./src/pages/_app.tsx) for the initialization and +[src/pages/_document.tsx](./src/pages/_document.tsx) for collecting styles for server-side rendering. Actual usage can +be found in [src/pages/index.tsx](./src/pages/index.tsx). + +Install dependencies and run the example, which can be viewed on `http://localhost:3000`. diff --git a/examples/react-next/next.config.js b/examples/react-next/next.config.js new file mode 100644 index 0000000..321a3fe --- /dev/null +++ b/examples/react-next/next.config.js @@ -0,0 +1,9 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, + experimental: { + externalDir: true, + }, +} + +module.exports = nextConfig diff --git a/examples/react-next/package.json b/examples/react-next/package.json new file mode 100644 index 0000000..40c4ad1 --- /dev/null +++ b/examples/react-next/package.json @@ -0,0 +1,26 @@ +{ + "name": "@tesseract-design/goofy-goober-example-react-next", + "version": "0.1.0", + "private": true, + "description": "Example project using goofy-goober", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "alias": { + "@tesseract-design/goofy-goober": "../../src" + }, + "dependencies": { + "@types/node": "18.15.11", + "@types/react": "18.0.33", + "@types/react-dom": "18.0.11", + "eslint": "8.38.0", + "eslint-config-next": "13.3.0", + "next": "13.3.0", + "react": "18.2.0", + "react-dom": "18.2.0", + "typescript": "5.0.4" + } +} diff --git a/examples/react-next/public/favicon.ico b/examples/react-next/public/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/examples/react-next/public/favicon.ico differ diff --git a/examples/react-next/public/next.svg b/examples/react-next/public/next.svg new file mode 100644 index 0000000..5174b28 --- /dev/null +++ b/examples/react-next/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/react-next/public/vercel.svg b/examples/react-next/public/vercel.svg new file mode 100644 index 0000000..d2f8422 --- /dev/null +++ b/examples/react-next/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/react-next/src/pages/_app.tsx b/examples/react-next/src/pages/_app.tsx new file mode 100644 index 0000000..80baa4a --- /dev/null +++ b/examples/react-next/src/pages/_app.tsx @@ -0,0 +1,10 @@ +import type { AppProps } from 'next/app' +import * as React from 'react'; +import { setup } from '@tesseract-design/goofy-goober'; +import * as prefixer from 'goober/prefixer'; + +setup(React.createElement, prefixer.prefix); + +export default function App({ Component, pageProps }: AppProps) { + return +} diff --git a/examples/react-next/src/pages/_document.tsx b/examples/react-next/src/pages/_document.tsx new file mode 100644 index 0000000..b564e5b --- /dev/null +++ b/examples/react-next/src/pages/_document.tsx @@ -0,0 +1,44 @@ +import NextDocument, {Html, Head, Main, NextScript, DocumentContext} from 'next/document'; +import { extractCss } from '@tesseract-design/goofy-goober'; + + +export default class Document extends NextDocument { + static async getInitialProps(ctx: DocumentContext) { + const page = await ctx.renderPage() + + const style = extractCss(); + + const initialProps = await NextDocument.getInitialProps(ctx) + + return { + ...initialProps, + ...page, + style, + } + } + + render() { + const { style: rawStyle } = this.props as Record + const style = rawStyle as string + + return ( + + + { + style.length > 0 + && ( +