add stitching product (#770)

.changeset/tough-ants-sit.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': patch
+---
+
+add stitching

.github/workflows/ci.yml

@@ -17,10 +17,10 @@ jobs:
         with:
           version: 7
 
-      - name: Use Node.js 16
+      - name: Use Node.js 18
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: pnpm
 
       - name: Install Dependencies

.npmrc

@@ -1,3 +1,2 @@
 shell-emulator=true
-# TODO: fix types errors and enable this
-enable-pre-post-scripts=false
+enable-pre-post-scripts=true

.prettierrc.cjs

@@ -3,4 +3,13 @@ const { plugins, ...prettierConfig } = require('@theguild/prettier-config');
 module.exports = {
   ...prettierConfig,
   plugins: [...plugins, require('prettier-plugin-tailwindcss')],
+  overrides: [
+    ...prettierConfig.overrides,
+    {
+      files: '*.svg',
+      options: {
+        parser: 'html',
+      },
+    },
+  ],
 };

.storybook/main.ts

@@ -48,6 +48,15 @@ const config: StorybookConfig = {
       ...config.resolve.fallback,
       url: false,
     };
+
+    config.module?.rules?.unshift({
+      test: /\.svg$/,
+      loader: '@svgr/webpack',
+      options: {
+        svgo: false, // otherwise setting SVG component width/height will don't affect
+      },
+    });
+
     return config;
   },
   features: {

.storybook/next.config.cjs

@@ -1,4 +1,6 @@
 // Needs for `storybook-addon-next`
+
+/** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
 };

package.json

@@ -1,23 +1,22 @@
 {
-  "name": "the-guild-components-monorepo",
+  "name": "the-guild-docs-monorepo",
   "type": "module",
   "private": true,
   "packageManager": "[email protected]",
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
   "scripts": {
     "build": "turbo run build",
     "build-storybook": "storybook build",
     "build:css": "NODE_ENV=production tailwindcss --config tailwind.config.cjs --postcss --output packages/components/style.css",
     "lint": "eslint --cache --ignore-path .gitignore .",
     "lint:prettier": "prettier --cache --check .",
-    "prebuild": "rimraf packages/*/dist/ .turbo/",
     "prepare": "husky install",
     "prerelease": "pnpm build",
     "prettier": "prettier --cache --write --list-different .",
     "release": "changeset publish",
-    "start": "storybook dev",
+    "start": "storybook dev --port 4000",
     "type-check": "tsc",
     "type-check:watch": "tsc --watch"
   },
@@ -28,8 +27,10 @@
     "@storybook/addon-essentials": "7.0.0-beta.11",
     "@storybook/addon-links": "7.0.0-beta.11",
     "@storybook/addon-postcss": "3.0.0-alpha.1",
+    "@storybook/core-common": "7.0.0-beta.11",
     "@storybook/mdx2-csf": "0.0.4",
     "@storybook/react-webpack5": "7.0.0-beta.11",
+    "@svgr/webpack": "6.5.1",
     "@tailwindcss/line-clamp": "0.4.2",
     "@theguild/eslint-config": "0.7.0-alpha-20230112182953-377ac47",
     "@theguild/prettier-config": "1.1.0",
@@ -38,6 +39,7 @@
     "@types/react-instantsearch-core": "6.26.3",
     "@types/react-instantsearch-dom": "6.12.3",
     "@types/react-paginate": "7.1.1",
+    "@types/webpack": "5.28.0",
     "concurrently": "7.6.0",
     "css-loader": "6.7.3",
     "eslint": "8.33.0",

packages/algolia/src/types.ts

@@ -15,7 +15,7 @@ export type AlgoliaRecordSource =
   | 'Shield'
   | 'Swift'
   | 'SOFA'
-  | 'Stencil'
+  | 'Stitching'
   | 'Angular'
   | 'WhatsApp'
   | 'KitQL';

packages/components/package.json

@@ -80,15 +80,20 @@
   },
   "devDependencies": {
     "@theguild/algolia": "workspace:*",
+    "@theguild/editor": "workspace:*",
     "@types/dedent": "0.7.0",
+    "@types/mdast": "3.0.10",
     "@types/mermaid": "9.1.0",
     "@types/react-dom": "18.0.10",
     "@types/semver": "7.3.13",
     "dedent": "0.7.0",
+    "esbuild-plugin-svgr": "1.0.1",
+    "graphql": "16.6.0",
     "next": "13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "3.2.4"
+    "tailwindcss": "3.2.4",
+    "unified": "10.1.2"
   },
   "publishConfig": {
     "access": "public"

packages/components/src/components/ecosystem-list.tsx

@@ -19,6 +19,7 @@ const productCategories = [
     items: [
       PRODUCTS.CODEGEN,
       PRODUCTS.TOOLS,
+      PRODUCTS.STITCHING,
       PRODUCTS.HIVE,
       PRODUCTS.CONDUCTOR,
       PRODUCTS.INSPECTOR,
@@ -32,14 +33,11 @@ const productCategories = [
   // },
   {
     title: 'Build great user experience',
-    items: [PRODUCTS.SWIFT, PRODUCTS.ANGULAR, PRODUCTS.STENCIL, PRODUCTS.KITQL],
+    items: [PRODUCTS.SWIFT, PRODUCTS.ANGULAR, PRODUCTS.KITQL],
   },
 ];
 
-export const EcosystemList = forwardRef<HTMLDivElement>(function EcosystemList(
-  _,
-  forwardedRef,
-): ReactElement {
+export const EcosystemList = forwardRef<HTMLDivElement>((_, forwardedRef): ReactElement => {
   return (
     <div
       className="max-h-[calc(100vh-70px)] min-h-[300px] w-[800px] overflow-y-auto rounded-lg bg-white p-5 dark:bg-neutral-800"
@@ -91,3 +89,5 @@ export const EcosystemList = forwardRef<HTMLDivElement>(function EcosystemList(
     </div>
   );
 });
+
+EcosystemList.displayName = 'EcosystemList';

packages/components/src/components/footer-extended.tsx

@@ -1,10 +1,10 @@
 import { ReactElement, useCallback } from 'react';
 import clsx from 'clsx';
+import { GuildLogo, TheGuild } from '../logos';
 import { PRODUCTS } from '../products';
 import { IFooterExtendedProps, ILink } from '../types/components';
 import { Anchor } from './anchor';
 import { Image } from './image';
-import { GuildLogo, TheGuild } from './logos';
 import csaStar from '../static/illustrations/csa-star-level-1-badge.png';
 
 const COMPANY: ILink[] = [

packages/components/src/components/header.tsx

@@ -12,11 +12,11 @@ import {
 import clsx from 'clsx';
 import { useTheme } from 'nextra-theme-docs';
 import { useWindowSize } from '../helpers/hooks';
+import { GuildLogo, TheGuild } from '../logos';
 import { IHeaderProps } from '../types/components';
 import { Anchor } from './anchor';
 import { EcosystemList } from './ecosystem-list';
 import { CaretIcon, HamburgerIcon, MoonIcon } from './icons';
-import { GuildLogo, TheGuild } from './logos';
 import { Nav } from './nav';
 import { SearchBar } from './search-bar';
 import { SolutionsMenu } from './solutions-menu';

packages/components/src/components/index.ts

@@ -12,7 +12,6 @@ export { HeroVideo } from './hero-video';
 export * from './icons/index';
 export { Image } from './image';
 export { InfoList } from './info-list';
-export * from './logos/index';
 export { MarketplaceList } from './marketplace-list';
 export { MarketplaceSearch } from './marketplace-search';
 export { mdxComponents } from './mdx-components';