docs: Add templates to try-it-out page (#63)

* docs: Add templates to try-it-out page

* register only once

* fix type check

* pr suggestions

* remove path-browserify

* add @types/webpack-env

* use paths instead of nodes

* remove app.js filtering

* Update apps/website/src/components/Playground/index.tsx

Co-authored-by: Oleksandr Fediashov <[email protected]>

Co-authored-by: Oleksandr Fediashov <[email protected]>

CONTRIBUTING.md

@@ -72,7 +72,7 @@ Pull requests are the greatest contributions, so be sure they are focused in sco
 
    > Note: A change file tells beachball how to increment each package's semantic version (semver) upon publish. The message in the change file will be included in the package release notes, so make it brief but informative.
 
-5. Push the branch for your new feature 
+4. Push the branch for your new feature
 
    ```bash
    git push origin fix/bug

apps/website/docs/try-it-out.mdx → apps/website/docs/try-it-out/try-it-out.mdx

@@ -1,11 +1,17 @@
-import Playground from '../src/components/Playground';
+---
+displayed_sidebar: tryItOutSidebar
+sidebar_position: 1
+---
+
+import Playground from '../../src/components/Playground';
 
 # Try it out
 
 Don't know how to get started writing styles in Griffel ?
 
 Having trouble getting your styles to work the way you want to ?
 
-Use the editor below to try it out! Griffel on the left, CSS on the right.
+Use the editor below to try it out! Griffel on the left, CSS on the right. There are a collection
+of templates on the sidebar to get you started.
 
 <Playground />

apps/website/docusaurus.config.js

@@ -60,7 +60,7 @@ const config = {
           },
           {
             type: 'doc',
-            docId: 'try-it-out',
+            docId: 'try-it-out/try-it-out',
             position: 'left',
             label: 'Try it out',
           },

apps/website/sidebars.js

@@ -1,8 +1,56 @@
-// @ts-check
+const path = require('path');
+const fs = require('fs');
+const babel = require('@babel/core');
+
+function generateTryItOutSidebar() {
+  const playgroundTemplatePath = path.join(__dirname, '/src/components/Playground/code/templates');
+  const templateFiles = fs.readdirSync(playgroundTemplatePath);
+  return templateFiles
+    .map(templateFile => {
+      const id = path.parse(templateFile).name;
+      const templatePath = path.join(playgroundTemplatePath, templateFile);
+      const code = fs.readFileSync(templatePath, { encoding: 'utf-8' });
+      const res = babel.parseSync(code, { filename: templateFile });
+      const meta = { name: id };
+      babel.traverse(res, {
+        VariableDeclarator(path) {
+          const idPath = path.get('id');
+          const initPath = path.get('init');
+
+          if (idPath.isIdentifier({ name: 'meta' }) && initPath.isObjectExpression) {
+            const properties = initPath.get('properties');
+            if (Array.isArray(properties)) {
+              properties.forEach(propertyPath => {
+                if (propertyPath.isObjectProperty()) {
+                  const keyPath = propertyPath.get('key');
+                  const valuePath = propertyPath.get('value');
+
+                  if (keyPath.isIdentifier() && (valuePath.isStringLiteral() || valuePath.isBooleanLiteral())) {
+                    meta[keyPath.node.name] = valuePath.node.value;
+                  }
+                }
+              });
+            }
+          }
+        },
+      });
+
+      /** @type { {type: 'link'; label: string; href: string }} */
+      const sidebarItem = {
+        type: 'link',
+        label: meta.name,
+        href: `/try-it-out#${id}`,
+      };
+
+      return sidebarItem;
+    })
+    .filter(Boolean);
+}
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
   reactSidebar: [{ type: 'autogenerated', dirName: 'react' }],
+  tryItOutSidebar: generateTryItOutSidebar(),
 };
 
 module.exports = sidebars;

apps/website/src/components/Playground/template/App.js → apps/website/src/components/Playground/code/app.js

@@ -5,7 +5,7 @@ import 'highlight.js/styles/vs.css';
 import beautify from 'js-beautify';
 import React from 'react';
 import css from 'highlight.js/lib/languages/css';
-import styles from './Styles';
+import styles from './styles';
 hljs.registerLanguage('css', css);
 
 export default function App() {

apps/website/src/components/Playground/code/templates/border.js

@@ -0,0 +1,20 @@
+import { makeStyles, shorthands } from '@griffel/core';
+
+export default makeStyles({
+  border: {
+    ...shorthands.border('1px', 'solid', 'red'),
+  },
+  borderTop: {
+    ...shorthands.borderTop('2px', 'solid', 'blue'),
+  },
+  borderColor: {
+    ...shorthands.borderColor('red'),
+  },
+  borderRadius: {
+    ...shorthands.borderRadius('5px'),
+  },
+});
+
+export const meta = {
+  name: 'Border',
+};

apps/website/src/components/Playground/code/templates/global.js

@@ -0,0 +1,13 @@
+import { makeStyles, shorthands } from '@griffel/core';
+
+export default makeStyles({
+  global: {
+    ':global([data-global-style])': {
+      ...shorthands.border('1px', 'solid'),
+    },
+  },
+});
+
+export const meta = {
+  name: 'Global styles',
+};

apps/website/src/components/Playground/code/templates/margin.js

@@ -0,0 +1,22 @@
+import { makeStyles, shorthands } from '@griffel/core';
+
+export default makeStyles({
+  one: {
+    ...shorthands.margin('1px'),
+  },
+  two: {
+    ...shorthands.margin('2px', '2px'),
+  },
+
+  three: {
+    ...shorthands.margin('3px', '3px'),
+  },
+
+  four: {
+    ...shorthands.margin('4px', '4px', '5px'),
+  },
+});
+
+export const meta = {
+  name: 'Margin',
+};

apps/website/src/components/Playground/code/templates/media.js

@@ -0,0 +1,18 @@
+import { makeStyles, shorthands } from '@griffel/core';
+
+export default makeStyles({
+  root: {
+    '@media(forced-colors: active)': {
+      ...shorthands.borderColor('transparent'),
+    },
+
+    '@media screen and (max-width: 468px)': {
+      ...shorthands.gap('1.5rem'),
+      display: 'grid',
+    },
+  },
+});
+
+export const meta = {
+  name: 'Media queries',
+};

apps/website/src/components/Playground/code/templates/nested.js

@@ -0,0 +1,17 @@
+import { makeStyles } from '@griffel/core';
+
+export default makeStyles({
+  nested: {
+    '& span': {
+      '& .p': {
+        ':hover': {
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
+export const meta = {
+  name: 'Nested selectors',
+};

apps/website/src/components/Playground/code/templates/padding.js

@@ -0,0 +1,22 @@
+import { makeStyles, shorthands } from '@griffel/core';
+
+export default makeStyles({
+  one: {
+    ...shorthands.padding('1px'),
+  },
+  two: {
+    ...shorthands.padding('2px', '2px'),
+  },
+
+  three: {
+    ...shorthands.padding('3px', '3px'),
+  },
+
+  four: {
+    ...shorthands.padding('4px', '4px', '5px'),
+  },
+});
+
+export const meta = {
+  name: 'Padding',
+};

apps/website/src/components/Playground/code/templates/pseudo-elements.js

@@ -0,0 +1,22 @@
+import { makeStyles } from '@griffel/core';
+
+export default makeStyles({
+  before: {
+    ':before': {
+      content: '""',
+      position: 'absolute',
+    },
+  },
+
+  after: {
+    ':after': {
+      color: 'red',
+      content: '""',
+      position: 'absolute',
+    },
+  },
+});
+
+export const meta = {
+  name: 'Pseudo-elements',
+};

apps/website/src/components/Playground/code/templates/pseudo-selectors.js

@@ -0,0 +1,25 @@
+import { makeStyles } from '@griffel/core';
+
+export default makeStyles({
+  focus: {
+    ':focus': {
+      color: 'red',
+    },
+  },
+
+  hover: {
+    ':hover': {
+      color: 'red',
+    },
+  },
+
+  active: {
+    ':active': {
+      color: 'red',
+    },
+  },
+});
+
+export const meta = {
+  name: 'Pseudo-selectors',
+};

apps/website/src/components/Playground/code/templates/selectors.js

@@ -0,0 +1,31 @@
+import { makeStyles } from '@griffel/core';
+
+export default makeStyles({
+  element: {
+    '& > span': {
+      color: 'red',
+    },
+  },
+
+  attribute: {
+    '&[data-attribute]': {
+      color: 'red',
+    },
+  },
+
+  class: {
+    '&. child-class': {
+      color: 'red',
+    },
+  },
+
+  childClass: {
+    '&.my-class': {
+      color: 'red',
+    },
+  },
+});
+
+export const meta = {
+  name: 'Selectors',
+};

apps/website/src/components/Playground/index.tsx

@@ -1,14 +1,29 @@
 import React from 'react';
 import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview } from '@codesandbox/sandpack-react';
 import { useColorMode } from '@docusaurus/theme-common';
-import AppCode from '!!raw-loader!./template/App.js';
-import StylesCode from '!!raw-loader!./template/Styles.js';
+import { useLocation } from '@docusaurus/router';
+import AppCode from '!!raw-loader!./code/app.js';
+import DefaultStylesCode from '!!raw-loader!./code/styles.js';
+
+const ctx = require.context('!!raw-loader!./code/templates', false, /\.js$/);
+
+const templates: Record<string, string> = ctx.keys().reduce((acc, modulePath) => {
+  if (modulePath.includes('app')) {
+    return acc;
+  }
+
+  const templateName = modulePath.split('/').slice(-1)[0].split('.')[0];
+  acc[templateName] = ctx(modulePath).default;
+  return acc;
+}, {} as Record<string, string>);
 
 const PLAYGROUND_HEIGHT = 400;
 
 export default function Playground() {
   const { isDarkTheme } = useColorMode();
   const sandpackTheme = isDarkTheme ? 'dark' : 'github-light';
+  const location = useLocation();
+  const template = templates[location.hash.slice(1)] ?? DefaultStylesCode;
   return (
     <SandpackProvider
       template="react"
@@ -17,7 +32,7 @@ export default function Playground() {
         files: {
           '/App.js': { code: AppCode, hidden: true },
           // Template files are in JS but type checked, don't want unnecessary comments leaking into docs
-          '/Styles.js': { code: StylesCode.replace('//@ts-check\n', ''), active: true },
+          '/styles.js': { code: template.replace('//@ts-check\n', ''), active: true },
         },
       }}
     >

apps/website/tsconfig.json

@@ -3,15 +3,22 @@
   "compilerOptions": {
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
+    "checkJs": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "outDir": "../../dist/out-tsc",
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "types": [
+      "environment",
+      "static-assets",
+      "@docusaurus/module-type-aliases",
+      "@docusaurus/theme-classic",
+      "webpack-env"
+    ]
   },
-  "types": ["environment", "static-assets", "@docusaurus/module-type-aliases", "@docusaurus/theme-classic"],
   "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"]
 }

package.json

@@ -60,6 +60,7 @@
     "@types/react-dom": "17.0.9",
     "@types/stylis": "4.0.2",
     "@types/tmp": "0.2.3",
+    "@types/webpack-env": "^1.17.0",
     "@typescript-eslint/eslint-plugin": "~5.3.0",
     "@typescript-eslint/parser": "~5.3.0",
     "babel-jest": "27.2.3",
@@ -91,7 +92,7 @@
     "syncpack": "6.2.0",
     "tmp": "0.2.1",
     "ts-jest": "27.0.5",
-    "typescript": "~4.4.3",
+    "typescript": "~4.5.2",
     "url-loader": "^3.0.0"
   },
   "dependencies": {