Fix imports

Update refresh command to correctly refer to files.

.amanuensis/next/src/theme.ts

@@ -0,0 +1,25 @@
+const theme = {
+	"color-shade": "0 0 0",
+	"color-negative": "34 34 34",
+	"color-positive": "238 238 238",
+	"color-primary": "199 138 179",
+	"color-secondary": "215 95 75",
+	"color-tertiary": "255 153 0",
+	"color-code-number": "116 249 94",
+	"color-code-keyword": "255 67 137",
+	"color-code-type": "80 151 210",
+	"color-code-instance-attribute": "118 167 210",
+	"color-code-function": "103 194 82",
+	"color-code-parameter": "145 94 194",
+	"color-code-property": "255 161 201",
+	"color-code-string": "238 211 113",
+	"color-code-variable": "139 194 117",
+	"color-code-regexp": "116 167 43",
+	"color-code-url": "0 153 204",
+	"color-code-global": "194 128 80",
+	"font-sans": '"Encode Sans"',
+	"font-headings": 'Glory, var(--font-sans)',
+	"font-mono": 'MonoLisa, mononoki',
+} as const;
+
+export default theme;

.amanuensis/package.json

@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "@tesseract-design/viewfinder-base": "link:../../../viewfinder/packages/base",
+    "@tesseract-design/viewfinder-react": "link:../../../viewfinder/packages/react",
+    "autoprefixer": "10.4.14",
+    "postcss": "8.4.24",
+    "tailwindcss": "0.0.0-insiders.7f31ac1"
+  }
+}

.amanuensis/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

.amanuensis/tailwind.config.js

@@ -0,0 +1,157 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+const {
+  dropdownSelectPlugin,
+  menuSelectPlugin,
+  radioButtonPlugin,
+  radioTickBoxPlugin,
+} = require('@tesseract-design/web-choice-react');
+const {
+  colorPickerPlugin,
+} = require('@tesseract-design/web-color-react');
+const {
+  menuMultiSelectPlugin,
+  tagInputPlugin,
+  toggleButtonPlugin,
+  toggleSwitchPlugin,
+  toggleTickBoxPlugin,
+} = require('@tesseract-design/web-multichoice-react');
+const {
+  numberSpinnerPlugin,
+  sliderPlugin,
+} = require('@tesseract-design/web-number-react');
+const {
+  dateDropdownPlugin,
+  timeSpinnerPlugin,
+} = require('@tesseract-design/web-temporal-react');
+const {
+  tailwind
+} = require('@tesseract-design/viewfinder-base');
+
+const plugin = require('tailwindcss/plugin')
+
+const tesseractPlugin = plugin(
+  ({ addUtilities }) => {
+    addUtilities({
+      '.font-condensed': {
+        'font-stretch': 'condensed',
+      },
+      '.font-semi-condensed': {
+        'font-stretch': 'semi-condensed',
+      },
+      '.font-expanded': {
+        'font-stretch': 'expanded',
+      },
+      '.font-semi-expanded': {
+        'font-stretch': 'semi-expanded',
+      },
+      '.font-inherit': {
+        'font-stretch': 'inherit',
+      },
+      '.linejoin-round': {
+        'stroke-linejoin': 'round',
+      },
+      '.linecap-round': {
+        'stroke-linecap': 'round',
+      },
+    });
+  },
+  {
+    theme: {
+      fontFamily: {
+        sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
+        headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
+        mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
+        inherit: ['inherit'],
+      },
+      colors: {
+        'sidebar': 'rgb(var(--color-sidebar)',
+        'topbar': 'rgb(var(--color-topbar)',
+
+        'shade': 'rgb(var(--color-shade))',
+        'negative': 'rgb(var(--color-negative))',
+        'positive': 'rgb(var(--color-positive))',
+        'primary': 'rgb(var(--color-primary))',
+        'secondary': 'rgb(var(--color-secondary))',
+        'tertiary': 'rgb(var(--color-tertiary))',
+        'code-number': 'rgb(var(--color-code-number))',
+        'code-keyword': 'rgb(var(--color-code-keyword))',
+        'code-type': 'rgb(var(--color-code-type))',
+        'code-instance-attribute': 'rgb(var(--color-code-instance-attribute))',
+        'code-function': 'rgb(var(--color-code-function))',
+        'code-parameter': 'rgb(var(--color-code-parameter))',
+        'code-property': 'rgb(var(--color-code-property))',
+        'code-string': 'rgb(var(--color-code-string))',
+        'code-variable': 'rgb(var(--color-code-variable))',
+        'code-regexp': 'rgb(var(--color-code-regexp))',
+        'code-url': 'rgb(var(--color-code-url))',
+        'code-global': 'rgb(var(--color-code-global))',
+        'current': 'currentcolor',
+        'inherit': 'inherit',
+        'transparent': 'transparent',
+      },
+      extend: {
+        fontSize: {
+          'lg': '1.125em',
+          'xl': '1.25em',
+          '2xl': '1.5em',
+          '3xl': '1.75em',
+          '4xl': '2em',
+          '5xl': '3em',
+          '6xl': '4em',
+          'xxs': '0.625rem',
+        },
+        borderRadius: {
+          inherit: 'inherit',
+        },
+        minWidth: {
+          6: '1.5rem',
+          10: '2.5rem',
+          12: '3rem',
+          16: '4rem',
+          48: '12rem',
+          64: '16rem',
+        },
+        minHeight: {
+          6: '1.5rem',
+          10: '2.5rem',
+          12: '3rem',
+          16: '4rem',
+          64: '16rem',
+        },
+        strokeWidth: {
+          3: '3',
+        },
+      },
+    },
+  },
+);
+
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/content/**/*.{js,ts,jsx,tsx,mdx}',
+    './node_modules/@tesseract-design/viewfinder-react/dist/**/*.js',
+    './node_modules/@tesseract-design/web-*-react/dist/**/*.js', // catch-all, can use individual packages
+  ],
+  plugins: [
+    tailwind.plugin(),
+    tesseractPlugin,
+    colorPickerPlugin,
+    dateDropdownPlugin,
+    dropdownSelectPlugin,
+    menuMultiSelectPlugin,
+    menuSelectPlugin,
+    numberSpinnerPlugin,
+    radioButtonPlugin,
+    radioTickBoxPlugin,
+    sliderPlugin,
+    tagInputPlugin,
+    timeSpinnerPlugin,
+    toggleButtonPlugin,
+    toggleSwitchPlugin,
+    toggleTickBoxPlugin,
+  ],
+}

amanuensis.config.json

@@ -9,5 +9,12 @@
 				"react": "@tesseract-design/*-react"
 			}
 		}
+	},
+	"additionalPackages": {
+		"tailwindcss": "*",
+		"autoprefixer": "*",
+		"postcss": "*",
+		"@tesseract-design/viewfinder-base": "*",
+		"@tesseract-design/viewfinder-react": "*"
 	}
 }

packages/amanuensis/next.config.js

@@ -7,7 +7,7 @@ const withMDX = require('@next/mdx')({
 		remarkPlugins: [],
 		rehypePlugins: [],
 		// If you use `MDXProvider`, uncomment the following line.
-		// providerImportSource: "@mdx-js/react",
+		providerImportSource: "@mdx-js/react",
 	},
 })
 
@@ -17,6 +17,12 @@ const nextConfig = {
 	pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
 	// Optionally, add any other Next.js config below
 	reactStrictMode: true,
+	webpack: (config, { isServer }) => {
+		if (!isServer) {
+			config.resolve.fallback.fs = false;
+		}
+		return config;
+	},
 }
 
 // Merge MDX config with Next.js config

packages/amanuensis/src/commands/refresh.ts

@@ -1,8 +1,17 @@
 import {
-	cp, readFile, rm, stat, writeFile,
+	cp,
+	readFile,
+	rm,
+	stat,
+	writeFile,
+	symlink,
 } from 'fs/promises';
 import {
- dirname, resolve, basename, extname, join,
+  dirname,
+	resolve,
+	basename,
+	extname,
+	join,
 } from 'path';
 import { Argv } from 'yargs';
 import { mkdirp } from 'mkdirp';
@@ -21,7 +30,7 @@ const linkComponents = async (cwd: string) => {
 
 	const projectCwd = resolve(cwd, '.amanuensis');
 	const defaultCwd = await useInternalPath('src', 'next');
-	const destCwd = await useInternalPath('.amanuensis', 'next');
+	const destCwd = await useInternalPath('.amanuensis', 'next', 'src');
 	const componentsList = [
 		'components/Wrapper.tsx',
 	];
@@ -54,20 +63,27 @@ const linkComponents = async (cwd: string) => {
 	}));
 
 	const packagesPath = await useInternalPath('.amanuensis', 'packages.json');
-	const typedocDataJson = await readFile(packagesPath, 'utf-8');
-	const typedocData = JSON.parse(typedocDataJson) as PackageData[];
+	const packagesDataJson = await readFile(packagesPath, 'utf-8');
+	const packagesData = JSON.parse(packagesDataJson) as PackageData[];
 
 	try {
 		await Promise.all(
-			typedocData.map(async (pkg) => {
+			packagesData.map(async (pkg) => {
+				const packageDir = await useBasePath(pkg.basePath);
+				const packageLinkDir = await useInternalPath('.amanuensis', 'next', 'node_modules', pkg.name);
+				await mkdirp(dirname(packageLinkDir));
+				console.log(packageDir, packageLinkDir);
+				await symlink(packageDir, packageLinkDir);
+
 				await mkdirp(resolve(destCwd, 'content', pkg.basePath));
 				await mkdirp(resolve(destCwd, 'pages', pkg.basePath));
 				await Promise.all(
 					pkg.markdown.map(async (m) => {
 						const srcPath = resolve(cwd, pkg.basePath, m.filePath);
 						const destPath = resolve(destCwd, 'content', pkg.basePath, m.name);
-						const pageDestPath = resolve(destCwd, 'pages', pkg.basePath, `${basename(m.name, extname(m.name))}.tsx`);
 						await cp(srcPath, destPath);
+
+						const pageDestPath = resolve(destCwd, 'pages', pkg.basePath, `${basename(m.name, extname(m.name))}.tsx`);
 						await writeFile(
 							pageDestPath,
 							`import {NextPage} from 'next';
@@ -86,14 +102,14 @@ export default IndexPage;
 `,
 							// todo fix problem when building with import aliases
 							// todo find a way to build with tailwind
-							// todo link components to next project
+							// todo link components to next project (done)
+							// todo merge contents of .amanuensis with next project
 						);
 					}),
 				);
 			}),
 		);
 	} catch (errRaw) {
-		console.log(errRaw);
 		throw new CommandError(GenerateReturnCode.COULD_NOT_GENERATE_PAGES, 'Could not write inner page file', errRaw as Error);
 	}
 
@@ -114,11 +130,7 @@ export interface RefreshArgs {
 	subcommands?: string[];
 }
 
-export const builder = (yargs: Argv) => yargs
-	.option('typedocJsonPath', {
-		type: 'string',
-		alias: 't',
-	});
+export const builder = (yargs: Argv) => yargs;
 
 const refresh = async (args: RefreshArgs) => {
 	try {

packages/amanuensis/src/next/next.config.js

@@ -1,6 +1,6 @@
-// next.config.js
+const nextMDX = require('@next/mdx')
 
-const withMDX = require('@next/mdx')({
+const withMDX = nextMDX({
 	extension: /\.mdx?$/,
 	options: {
 		// If you use remark-gfm, you'll need to use next.config.mjs
@@ -9,7 +9,7 @@ const withMDX = require('@next/mdx')({
 		remarkPlugins: [],
 		rehypePlugins: [],
 		// If you use `MDXProvider`, uncomment the following line.
-		// providerImportSource: "@mdx-js/react",
+		providerImportSource: "@mdx-js/react",
 	},
 })
 

packages/amanuensis/src/next/pages/_app.tsx

@@ -1,5 +1,16 @@
 import type { AppProps } from 'next/app'
+import { MDXProvider } from '@mdx-js/react'
 
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
-}
+const COMPONENTS = {};
+
+const App = ({ Component, pageProps }: AppProps) => {
+  return (
+    <MDXProvider
+      components={COMPONENTS}
+    >
+      <Component {...pageProps} />
+    </MDXProvider>
+  )
+};
+
+export default App;