Skip to content

Commit

Permalink
update primitive code
Browse files Browse the repository at this point in the history
  • Loading branch information
@okane16
okane16 committed Oct 21, 2024
1 parent 94cd517 commit 9c86e83
Show file tree
Hide file tree
Showing 5 changed files with 213 additions and 218 deletions.
81 changes: 36 additions & 45 deletions apps/framework-landing/app/sections/home/MooseValuePropSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,51 @@
import {
Section,
Grid,
FullWidthContentContainer,
ThirdWidthContentContainer,
} from "@514labs/design-system-components/components/containers";
import {
Heading,
HeadingLevel,
} from "@514labs/design-system-components/typography";
import { IconCard } from "@514labs/design-system-components/components";
import { ServerIcon } from "lucide-react";
import { Bot, Cloud, Wand2 } from "lucide-react";

export default function MooseValuePropSection() {
return (
<>
<Section className="2xl:max-w-6xl mx-auto flex flex-col items-center px-5 my-16 sm:my-64">
<Grid>
<FullWidthContentContainer>
<Heading
level={HeadingLevel.l2}
className="max-w-5xl justify-center align-center text-center md:mb-24 sm:text-5xl"
>
Designed with the future of software development in mind.
<span className="bg-gradient bg-clip-text text-transparent">
{" "}
All in pure TypeScript or Python.
</span>
</Heading>
</FullWidthContentContainer>
</Grid>
</Section>
<Section>
<Grid>
<ThirdWidthContentContainer>
<IconCard
title="Simple Primitives"
description="Simple data engineering abstractions to help you do more with less boilerplate"
Icon={ServerIcon}
/>
</ThirdWidthContentContainer>
<ThirdWidthContentContainer>
<IconCard
title="Automated Glue"
description="Write code, get the results you expect. Moose makes sure the data keeps flowing"
Icon={ServerIcon}
/>
</ThirdWidthContentContainer>
<ThirdWidthContentContainer>
<IconCard
title="Build-time Data Context"
description="Never guess a table name or field. Moose pulls data context into dev workflows"
Icon={ServerIcon}
/>
</ThirdWidthContentContainer>
</Grid>
</Section>
</>
<Section className="max-w-5xl mx-auto">
<Heading
level={HeadingLevel.l2}
className="max-w-5xl justify-center align-center text-center md:mb-24 sm:text-5xl"
>
Tools you love, context you need.
<span className="bg-gradient bg-clip-text text-transparent">
{" "}
Built for modern, AI-centric development workflows
</span>
</Heading>
<Grid>
<ThirdWidthContentContainer>
<IconCard
title="Local to cloud development workflows"
description="Build your app locally using the tools you love then take your app to the cloud reliably"
Icon={Cloud}
/>
</ThirdWidthContentContainer>
<ThirdWidthContentContainer>
<IconCard
title="Data Model awareness for you and your AI co-pilots"
description="Data context pulled directly into your development workflow at dev and build time"
Icon={Wand2}
/>
</ThirdWidthContentContainer>
<ThirdWidthContentContainer>
<IconCard
title="Infra automation to keep you focused"
description="Write code, get infra. Moose uses framework-defined infra to keep you focused"
Icon={Bot}
/>
</ThirdWidthContentContainer>
</Grid>
</Section>
);
}
214 changes: 108 additions & 106 deletions apps/framework-landing/app/sections/home/PrimitivesCode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import {
SelectValue,
SelectContent,
SelectItem,
IconCard,
BackgroundIcon,
} from "@514labs/design-system-components/components";
import { TrackableTabsTrigger } from "@514labs/design-system-components/trackable-components";
import { CopyButton } from "../../copy-button";

import { cn } from "@514labs/design-system-components/utils";
import {
Heading,
Text,
Expand All @@ -35,7 +35,7 @@ import {
HardDriveUpload,
CopyIcon,
} from "lucide-react";
import { useState, Fragment } from "react";
import { useState } from "react";
import CodeBlock from "../../shiki";

const content = {
Expand All @@ -45,29 +45,33 @@ const content = {
"Codify the shape and structure of the data that is used in your application",
filename: "/datamodels/models",
ts: `
import { Key } from "@514labs/moose-lib"
export interface UserActivity {
id: string;
id: Key<string>;
userId: string;
activity: string;
timestamp: Date;
}
export interface ParsedActivity {
id: string;
id: Key<string>;
userId: string;
activity: string;
utcTimestamp: Date;
}`,
py: `
from moose_lib import Key
from moose_lib import Key, moose_data_model
@moose_data_model
@dataclass
class UserActivity:
eventId: Key[str]
timestamp: str
userId: str
activity: str
@moose_data_model
@dataclass
class ParsedActivity:
eventId: Key[str]
Expand Down Expand Up @@ -95,7 +99,7 @@ export default function run(source: UserActivity): ParsedActivity {
} `,
py: `
from app.datamodels.models import UserActivity, ParsedActivity
from moose_lib import Flow
from moose_lib import StreamingFunction
def parse_activity(activity: UserActivity) -> ParsedActivity:
return ParsedActivity(
Expand All @@ -105,7 +109,7 @@ def parse_activity(activity: UserActivity) -> ParsedActivity:
activity=activity.activity,
)
my_flow = Flow(
my_flow = StreamingFunction(
run=parse_activity
)
`,
Expand Down Expand Up @@ -295,107 +299,105 @@ const infrastructure = [
];

export const PrimitivesCode = () => {
const [activeTab, setActiveTab] = useState<keyof typeof content>("models");
const [language, setLanguage] = useState("ts");

return (
<Fragment>
<Section className="mx-auto max-w-5xl sm:px-6 lg:px-8">
<Grid className="flex flex-col">
<FullWidthContentContainer className="flex md:flex-row flex-col gap-5 p-4 sm:p-6 border rounded-3xl h-fit">
<HalfWidthContentContainer className="flex flex-col gap-5 justify-start md:w-1/2 w-full">
<Heading level={HeadingLevel.l3} className="mb-0">
Develop application logic
</Heading>
<Text className="text-muted-foreground">
Define data workflows locally in your TypeScript or Python
project code.
</Text>
<Tabs
value={activeTab}
onValueChange={(tab) =>
setActiveTab(tab as keyof typeof content)
}
<Section className="mx-auto max-w-5xl sm:px-6 lg:px-8">
<FullWidthContentContainer className="w-full justify-center">
<Tabs defaultValue="models">
<TabsList className="mx-auto w-full justify-center">
{Object.keys(content).map((tab) => (
<TrackableTabsTrigger
name={"primitives-code-snippet"}
subject={tab}
key={tab}
value={tab}
className="py-0 px-1"
>
<TabsList className="mx-auto w-full justify-start">
{Object.keys(content).map((tab) => (
<TrackableTabsTrigger
key={tab}
value={tab}
className="py-0 px-1"
name="Moose Primitives Code"
subject={tab}
>
<Text className="py-0 px-2 ">
{content[tab as keyof typeof content]?.title}
</Text>
</TrackableTabsTrigger>
))}
</TabsList>
{Object.keys(content).map((tab) => (
<TabsContent key={tab} value={tab}>
<Text className="text-muted-foreground">
{content[tab as keyof typeof content]?.description}
</Text>
</TabsContent>
))}
</Tabs>
</HalfWidthContentContainer>
<HalfWidthContentContainer className="md:w-2/3 w-full overflow-hidden">
<div className="flex justify-end gap-2 items-center">
<Select value={language} onValueChange={setLanguage}>
<SelectTrigger className="px-2 py-1 w-fit justify-between gap-2 border text-primary">
<SelectValue placeholder="Select Language" />
</SelectTrigger>
<SelectContent>
<SelectItem value="ts">TypeScript</SelectItem>
<SelectItem value="py">Python</SelectItem>
</SelectContent>
</Select>
<CopyButton
copyText={content[activeTab]?.[language as "ts" | "py"] || ""}
subject={content[activeTab]?.filename}
name={content[activeTab]?.filename}
className="px-2 py-1 w-fit justify-between gap-2 border-muted bg-transparent hover:bg-primary/10"
>
<CopyIcon size={16} />
</CopyButton>
</div>
<CodeBlock
className="mt-2"
code={content[activeTab]?.[language as "ts" | "py"] || ""}
language={language as "ts" | "py"}
filename={`${content[activeTab]?.filename}.${language}` || ""}
/>
</HalfWidthContentContainer>
</FullWidthContentContainer>
<FullWidthContentContainer className="flex flex-col gap-2.5 border p-5 rounded-3xl justify-start text-left">
<Heading level={HeadingLevel.l3} className="mb-0">
Moose automatically derives the infrastructure
</Heading>
<Text className="text-muted-foreground">
Moose automatically creates and manages the APIs, topics, tables,
and processes needed to support the data workflows defined in your
project code.
</Text>
<div className="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
{infrastructure.map((infra) => (
<IconCard
className={`${
infra.primitive === activeTab
? "bg-primary/10 shadow-sm"
: ""
} ${infra.order}`}
key={infra.title}
Icon={infra.icon}
title={infra.title}
description={infra.infra}
/>
))}
</div>
</FullWidthContentContainer>
</Grid>
</Section>
</Fragment>
<Text className="py-0 px-2 ">
{content[tab as keyof typeof content]?.title}
</Text>
</TrackableTabsTrigger>
))}
</TabsList>
{Object.keys(content).map((tab) => (
<TabsContent key={tab} value={tab} className="mx-auto w-full">
{/* <Text className="text-muted-foreground">
{content[tab as keyof typeof content]?.description}
</Text> */}
<Grid className="w-full">
<HalfWidthContentContainer className="md:col-span-7">
<div>
<Heading level={HeadingLevel.l3} className="mb-0">
Develop application logic
</Heading>
</div>
<div className="flex flex-col w-full overflow-hidden relative mt-2">
<div className="flex flex-row justify-end gap-2 items-center absolute top-6 right-4 z-10">
<Select value={language} onValueChange={setLanguage}>
<SelectTrigger className="px-2 py-1 w-fit justify-between gap-2 border text-primary bg-background">
<SelectValue placeholder="Select Language" />
</SelectTrigger>
<SelectContent>
<SelectItem value="ts">TypeScript</SelectItem>
<SelectItem value="py">Python</SelectItem>
</SelectContent>
</Select>
<CopyButton
copyText={
content[tab as keyof typeof content]?.[
language as "ts" | "py"
] || ""
}
subject={content[tab as keyof typeof content]?.filename}
name={content[tab as keyof typeof content]?.filename}
className="px-2 py-1 w-fit justify-between gap-2 border-muted bg-transparent hover:bg-primary/10"
>
<CopyIcon size={16} />
</CopyButton>
</div>
<CodeBlock
className="mt-4 pb-4 h-96"
code={
content[tab as keyof typeof content]?.[
language as "ts" | "py"
] || ""
}
language={language as "ts" | "py"}
filename={
`${content[tab as keyof typeof content]?.filename}.${language}` ||
""
}
/>
</div>
</HalfWidthContentContainer>
<HalfWidthContentContainer className="md:col-span-5 flex-grow-0">
<Heading level={HeadingLevel.l3}>Moose derives infra</Heading>
<div className="w-full grid grid-row-6 gap-2 mt-2">
{infrastructure.map((infra) => (
<div
key={infra.title}
className={cn(
"flex flex-row items-start justify-start gap-4 rounded-2xl p-1",
tab === infra.primitive ? "bg-muted" : "",
)}
>
<BackgroundIcon Icon={infra.icon} variant="default" />
<div>
<Text className="my-0">{infra.title}</Text>
<Text className="my-0 text-muted-foreground">
{infra.infra}
</Text>
</div>
</div>
))}
</div>
</HalfWidthContentContainer>
</Grid>
</TabsContent>
))}
</Tabs>
</FullWidthContentContainer>
</Section>
);
};
Loading

0 comments on commit 9c86e83

Please sign in to comment.