Browse Source

Add contexts

Use contexts for customizing page layout.
master
TheoryOfNekomata 1 year ago
parent
commit
663f00871e
7 changed files with 85 additions and 6 deletions
  1. +11
    -0
      .amanuensis/next/src/components/PageLayout.tsx
  2. +2
    -0
      categories/web/action/react/src/components/ActionButton/ActionButton.mdx
  3. +25
    -6
      packages/amanuensis/src/commands/refresh.ts
  4. +30
    -0
      packages/amanuensis/src/next/components/Amanuensis.tsx
  5. +11
    -0
      packages/amanuensis/src/next/components/PageLayout.tsx
  6. +3
    -0
      packages/amanuensis/src/next/contexts/Component.ts
  7. +3
    -0
      packages/amanuensis/src/next/contexts/Preamble.ts

+ 11
- 0
.amanuensis/next/src/components/PageLayout.tsx View File

@@ -0,0 +1,11 @@
import { Preamble, Props, Playground } from '@/components/Amanuensis';

export const PageLayout = () => {
return (
<>
<Preamble />
<Props />
<Playground />
</>
)
};

+ 2
- 0
categories/web/action/react/src/components/ActionButton/ActionButton.mdx View File

@@ -1,5 +1,7 @@
import { ActionButton } from '@tesseract-design/web-action-react';

# ActionButton

The `<ActionButton>` component is a wrapper around the `<Button>` component that adds a few extra props to make it
easier to create action buttons.



+ 25
- 6
packages/amanuensis/src/commands/refresh.ts View File

@@ -41,6 +41,13 @@ const linkComponents = async (cwd: string) => {
// noop
}

try {
await rm(resolve(destCwd, 'pages'), { recursive: true });
await cp(resolve(defaultCwd, 'pages'), resolve(destCwd, 'pages'), { recursive: true });
} catch {
// noop
}

await Promise.all(componentsList.map(async (componentPath) => {
const destPath = resolve(destCwd, componentPath);
let baseCwd = projectCwd;
@@ -72,8 +79,12 @@ const linkComponents = async (cwd: string) => {
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);

try {
await symlink(packageDir, packageLinkDir);
} catch {
// noop
}

await mkdirp(resolve(destCwd, 'content', pkg.basePath));
await mkdirp(resolve(destCwd, 'pages', pkg.basePath));
@@ -84,22 +95,30 @@ const linkComponents = async (cwd: string) => {
await cp(srcPath, destPath);

const pageDestPath = resolve(destCwd, 'pages', pkg.basePath, `${basename(m.name, extname(m.name))}.tsx`);
const preambleImport = `@/${join('content', pkg.basePath, m.name)}`;

await writeFile(
pageDestPath,
`import {NextPage} from 'next';
import {Wrapper} from '@/components/Wrapper';
import Content from '@/${join('content', pkg.basePath, m.name)}';
import {ComponentContext} from '@/contexts/Component';
import {PreambleContext} from '@/contexts/Preamble';
import Preamble from '${preambleImport}';
import {PageLayout} from '@/components/PageLayout';

const IndexPage: NextPage = () => {
return (
<Wrapper>
<Content />
</Wrapper>
<PreambleContext.Provider value={Preamble}>
<Wrapper>
<PageLayout />
</Wrapper>
</PreambleContext.Provider>
);
};

export default IndexPage;
`,
// todo fetch components for display to props and preamble
// todo fix problem when building with import aliases
// todo find a way to build with tailwind
// todo link components to next project (done)


+ 30
- 0
packages/amanuensis/src/next/components/Amanuensis.tsx View File

@@ -0,0 +1,30 @@
import {useContext} from 'react';
import {ComponentContext} from '@/contexts/Component';
import {PreambleContext} from '@/contexts/Preamble';

export const Preamble = () => {
const Component = useContext(PreambleContext);
return (
<>
<Component />
</>
);
}

export const Props = () => {
const Component = useContext(ComponentContext);
return (
<>
Props
</>
);
}

export const Playground = () => {
const Component = useContext(ComponentContext);
return (
<>
Playground
</>
);
}

+ 11
- 0
packages/amanuensis/src/next/components/PageLayout.tsx View File

@@ -0,0 +1,11 @@
import { Preamble, Props, Playground } from '@/components/Amanuensis';

export const PageLayout = () => {
return (
<>
<Preamble />
<Props />
<Playground />
</>
)
};

+ 3
- 0
packages/amanuensis/src/next/contexts/Component.ts View File

@@ -0,0 +1,3 @@
import { createContext } from 'react';

export const ComponentContext = createContext(null as any);

+ 3
- 0
packages/amanuensis/src/next/contexts/Preamble.ts View File

@@ -0,0 +1,3 @@
import { createContext } from 'react';

export const PreambleContext = createContext(null as any);

Loading…
Cancel
Save