chore: extract apps directory (#360)

.github/workflows/ci.yml

@@ -89,33 +89,10 @@ jobs:
       - name: 🏠 Run build
         run: pnpm run build
 
-  prettier:
-    name: 🔎 Prettier
-    runs-on: ubuntu-latest
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
-
-      - name: 📥 Install pnpm
-        uses: pnpm/action-setup@v2.2.4
-
-      - name: 📥 Use Node.js from .nvmrc
-        uses: actions/setup-node@v3
-        with:
-          cache: "pnpm"
-          node-version-file: ".nvmrc"
-
-      - name: 📥 Install via pnpm
-        run: pnpm install
-        shell: bash
-
-      - name: ❤️ Run format:check
-        run: pnpm run format:check
-
   release:
     name: 🚀 Release
     runs-on: ubuntu-latest
-    needs: [lint, prettier, test, build]
+    needs: [lint, test, build]
     if: ${{ github.ref == 'refs/heads/main' && github.event_name == 'push' }}
     steps:
       - name: ⬇️ Checkout repo

apps/react-playground/.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+example-dist

apps/react-playground/.gitignore

@@ -0,0 +1,5 @@
+*.log
+.DS_Store
+node_modules
+dist
+example-dist

apps/react-playground/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require("@singlestone/prettier-config-sugar");

apps/react-playground/README.md

@@ -0,0 +1,102 @@
+<h1 align="center">Welcome to @singlestone/sugar-react 👋</h1>
+<p>
+  <a href="https://npmjs.com/package/@singlestone/sugar-react" target="_blank">
+    <img alt="npm (scoped)" src="https://img.shields.io/npm/v/@singlestone/sugar-react">
+  </a>
+</p>
+
+> React bindings for Sugar
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Prerequisites](#prerequisites)
+- [Installation](#installation)
+  - [npm](#npm)
+  - [Yarn](#yarn)
+  - [pnpm](#pnpm)
+- [Setup](#setup)
+- [Usage](#usage)
+- [Development](#development)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Prerequisites
+
+- NodeJS 14+
+- A functioning [Tailwind and Sugar setup](../../sugar/sugar/README.md#setup)
+
+## Installation
+
+Install `@singlestone/sugar-react` with your NodeJS package manager of choice.
+
+### npm
+
+```shell
+$ npm install @singlestone/sugar-react
+```
+
+### Yarn
+
+```shell
+$ yarn add @singlestone/sugar-react
+```
+
+### pnpm
+
+```shell
+$ pnpm install @singlestone/sugar-react
+```
+
+## Setup
+
+After [installation](#installation), add Sugar React to your `tailwind.config.js` like so:
+
+```js
+// tailwind.config.js
+module.exports = {
+  mode: "jit",
+  content: [
+    // change this to fit your project as necessary
+    "./src/**/*.{ts,tsx}",
+    // add this
+    "./node_modules/@singlestone/sugar-react/**/*.js",
+  ],
+  plugins: [require("@singlestone/sugar").sugarCorePlugin()],
+};
+```
+
+## Usage
+
+Once you've followed the [Installation](#installation) and [Setup](#setup) process, you can import the various
+components in your application. All `@singlestone/sugar-react` components are thin wrappers around the semantic
+HTML elements that they represent, so you can use them exactly the same way that you'd use a normal element.
+
+```tsx
+import { Select, TextInput } from "@singlestone/sugar-react";
+
+// ...
+<Label htmlFor="some-select">Options!</Label>
+<Select id="some-select">
+    <option disabled value="">Select an Option</option>
+    <option value="option1">Option 1</option>
+</Select>
+```
+
+You can also pass additional class names to each component - they'll be appended to the resulting element.
+
+```tsx
+<Label htmlFor="some-select">Options!</Label>
+<Select className="w-full" id="some-select">
+    <option disabled value="">Select an Option</option>
+    <option value="option1">Option 1</option>
+</Select>
+```
+
+## Development
+
+This package is a bit unusual in how you can develop it at the moment. It follows the
+conventions of all the other projects by having most steps be able to be used by
+things depending on it (e.g., `pnpm run dev` outputs a built version of the library and
+watches for file changes). You can also start a Vite server for quick development of
+components (until we set up Storybook for it) via `pnpm run start`.

apps/react-playground/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@singlestone/sugar-react-playground</title>
+  </head>
+  <body class="bg-gray-100 font-sans text-slate-900 antialiased min-h-screen">
+    <div class="flex flex-col min-h-screen" id="root"></div>
+    <script type="module" src="./src/main.tsx"></script>
+  </body>
+</html>

apps/react-playground/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@singlestone/sugar-react-playground",
+  "version": "0.6.2",
+  "description": "React Playground for Sugar",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/singlestone/sugar.git",
+    "directory": "apps/react-playground"
+  },
+  "homepage": "https://github.com/singlestone/sugar/tree/main/apps/react-playground#readme",
+  "bugs": {
+    "url": "https://github.com/singlestone/sugar/issues"
+  },
+  "author": "SingleStone Consulting (https://www.singlestoneconsulting.com/)",
+  "license": "MIT",
+  "private": true,
+  "engines": {
+    "node": "^14 || ^16 || ^18 || >= 20"
+  },
+  "scripts": {
+    "build": "vite build",
+    "clean": "rimraf .turbo dist",
+    "dev": "vite",
+    "lint": "eslint --format stylish --max-warnings 0 --cache src && prettier -c src",
+    "lint:fix": "eslint --format stylish --max-warnings 0 --cache --fix src && prettier --write src"
+  },
+  "peerDependencies": {
+    "react": ">=16.0.0"
+  },
+  "dependencies": {
+    "@singlestone/sugar-react": "workspace:*",
+    "@singlestone/sugar-tokens": "workspace:*",
+    "clsx": "^1.2.1"
+  },
+  "devDependencies": {
+    "@singlestone/eslint-config-sugar": "workspace:*",
+    "@singlestone/postcss-preset-sugar": "workspace:*",
+    "@singlestone/prettier-config-sugar": "workspace:*",
+    "@singlestone/sugar": "workspace:*",
+    "@singlestone/tsup-config": "workspace:*",
+    "@types/node": "20.2.3",
+    "@types/react": "18.2.7",
+    "@types/react-dom": "18.2.4",
+    "@vitejs/plugin-react": "4.0.0",
+    "prettier": "2.8.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.2",
+    "vite": "4.3.8"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "prettier": "@singlestone/prettier-config-sugar",
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

sugar/react/example/App.tsx → apps/react-playground/src/App.tsx

@@ -15,7 +15,7 @@ export const App = () => (
     <header className="container mx-auto sticky top-0 z-40 bg-gray-100">
       <div className="flex h-16 items-center justify-between border-b border-b-slate-200 py-4">
         <h1 className="text-3xl font-bold tracking-tight text-gray-900">
-          @singlestone/sugar-react examples
+          @singlestone/sugar-react-playground
         </h1>
       </div>
     </header>

apps/react-playground/src/main.tsx

@@ -0,0 +1,12 @@
+import "./index.css";
+
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+import { App } from "./App";
+
+createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

sugar/react/example/panels/Button.tsx → apps/react-playground/src/panels/Button.tsx

@@ -1,6 +1,10 @@
+import {
+  Button,
+  ButtonWithIcon,
+  IconOnlyButton,
+} from "@singlestone/sugar-react";
 import { ALL_POSSIBLE_COLOR_VARIANTS_COMBINATIONS } from "@singlestone/sugar-tokens";
 
-import { Button, ButtonWithIcon, IconOnlyButton } from "../../src";
 import { Checkmark } from "../icons/Checkmark";
 import { getButtonDisplayValue } from "../utils";
 import { PanelBody, PanelHeading, PanelRoot } from "./Panel";

sugar/react/example/panels/Checkbox.tsx → apps/react-playground/src/panels/Checkbox.tsx

@@ -1,4 +1,5 @@
-import { Checkbox, Label } from "../../src";
+import { Checkbox, Label } from "@singlestone/sugar-react";
+
 import { PanelBody, PanelHeading, PanelRoot } from "./Panel";
 
 export const CheckboxPanel = () => {

sugar/react/example/panels/Input.tsx → apps/react-playground/src/panels/Input.tsx

@@ -1,4 +1,5 @@
-import { Label, TextInput } from "../../src";
+import { Label, TextInput } from "@singlestone/sugar-react";
+
 import { PanelBody, PanelHeading, PanelRoot } from "./Panel";
 
 export const InputPanel = () => {

sugar/react/example/panels/RadioGroup.tsx → apps/react-playground/src/panels/RadioGroup.tsx

@@ -1,6 +1,10 @@
+import {
+  Legend,
+  RadioGroupFieldset,
+  RadioGroupItem,
+} from "@singlestone/sugar-react";
 import { ChangeEventHandler, useState } from "react";
 
-import { Legend, RadioGroupFieldset, RadioGroupItem } from "../../src";
 import { PanelBody, PanelHeading, PanelRoot } from "./Panel";
 
 export const RadioGroupPanel = () => {

sugar/react/example/panels/Select.tsx → apps/react-playground/src/panels/Select.tsx

@@ -1,3 +1,4 @@
+import { Button, Select } from "@singlestone/sugar-react";
 import {
   ALL_POSSIBLE_COLOR_VARIANTS_COMBINATIONS,
   getSugarColor,
@@ -7,7 +8,6 @@ import {
 } from "@singlestone/sugar-tokens";
 import { ChangeEventHandler, useState } from "react";
 
-import { Button, Select } from "../../src";
 import { getButtonDisplayValue } from "../utils";
 import { PanelBody, PanelHeading, PanelRoot } from "./Panel";
 

sugar/react/example/panels/SideBySide.tsx → apps/react-playground/src/panels/SideBySide.tsx

@@ -1,4 +1,5 @@
-import { Label, Select, TextInput } from "../../src";
+import { Label, Select, TextInput } from "@singlestone/sugar-react";
+
 import { PanelBody, PanelHeading, PanelRoot } from "./Panel";
 
 export const SideBySidePanel = () => (

sugar/react/example/panels/TextArea.tsx → apps/react-playground/src/panels/TextArea.tsx

@@ -1,4 +1,5 @@
-import { Label, TextArea } from "../../src";
+import { Label, TextArea } from "@singlestone/sugar-react";
+
 import { PanelBody, PanelHeading, PanelRoot } from "./Panel";
 
 export const TextareaPanel = () => {

sugar/react/tailwind.config.ts → apps/react-playground/tailwind.config.ts

@@ -2,7 +2,11 @@ import { sugarCorePlugin } from "@singlestone/sugar";
 import type { Config } from "tailwindcss";
 
 export default {
-  content: ["./index.html", "./src/**/*.{ts,tsx}", "./example/**/*.{ts,tsx}"],
+  content: [
+    "./index.html",
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@singlestone/sugar-react/dist/*.{js,mjs}",
+  ],
   theme: {
     container: {
       center: true,

apps/react-playground/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.react.json",
+  "include": ["example", "src", "types"]
+}

apps/react-playground/vite.config.ts

@@ -0,0 +1,6 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+});

apps/storybook/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: ["@singlestone/eslint-config-sugar"],
+  settings: {
+    react: {
+      version: "999.999.999",
+    },
+  },
+};