aidos-ui 3.0.6 → 3.0.8

package/src/index.ts

@@ -1,4 +1,3 @@
-export * from "./aria";
 export * from "./Badge";
 export * from "./BaseButton";
 export * from "./BaseInput";
@@ -11,6 +10,7 @@ export * from "./Box";
 export * from "./Button";
 export * from "./Calendar";
 export * from "./Checkbox";
+export * from "./Card";
 export * from "./Circle";
 export * from "./Column";
 export * from "./DarkMode";
@@ -46,6 +46,7 @@ export * from "./RootView";
 export * from "./Row";
 export * from "./StackContext";
 export * from "./stateMachineContextFactory";
+export * from "./Select";
 export * from "./StaticCheckbox";
 export * from "./Storage";
 export * from "./Stream";

package/src/pages/Card.mdx

@@ -0,0 +1,71 @@
+import { Card } from "../Card";
+import { Button } from "../Button";
+import { TextInput } from "../TextInput";
+import { TextArea } from "../TextArea";
+import { H2, P } from "../Text";
+
+# Card
+
+Cards can be used to make give cohesion to some UI elements, grouping them visually in a distinct way.
+
+<Card>
+  <H2>Contact Us</H2>
+  <P>If you have any questions or inquiries, please feel free to contact us.</P>
+  <TextInput
+    name="email"
+    placeholder="Email"
+    value={null}
+    padding={"medium"}
+    type="email"
+    onValueChange={() => {}}
+  />
+  <TextArea
+    jsStyle={{
+      resize: "vertical",
+    }}
+    name="message"
+    placeholder="Type your query here..."
+    value={null}
+    type="text"
+    onValueChange={() => {}}
+  />
+  <Button
+    jsStyle={{ animation: "all 1s ease-out" }}
+    onClick={() => {}}
+    type="submit"
+    label="Subscribe"
+    color="positive"
+  />
+</Card>
+
+```js
+<Card>
+  <H2>Contact Us</H2>
+  <P>If you have any questions or inquiries, please feel free to contact us.</P>
+  <TextInput
+    name="email"
+    placeholder="Email"
+    value={null}
+    padding={"medium"}
+    type="email"
+    onValueChange={() => {}}
+  />
+  <TextArea
+    jsStyle={{
+      resize: "vertical",
+    }}
+    name="message"
+    placeholder="Type your query here..."
+    value={null}
+    type="text"
+    onValueChange={() => {}}
+  />
+  <Button
+    jsStyle={{ animation: "all 1s ease-out" }}
+    onClick={() => {}}
+    type="submit"
+    label="Subscribe"
+    color="positive"
+  />
+</Card>
+```

package/src/pages/_app.tsx

@@ -33,7 +33,7 @@ import { Column } from "../Column";
 import { Icon } from "../Icon";
 import { BaseLinkComponentOverrideContext } from "../BaseLink";
 import { DocsMDXProvider, labelToID } from "../docs/mdx";
-import { dot } from "@xenova/transformers";
+import { Pipeline, dot, pipeline } from "@xenova/transformers";
 import { pages } from "../docs/pages";
 
 const transformers = import("@xenova/transformers");
@@ -141,35 +141,37 @@ export default function App({ Component, pageProps }: AppProps) {
     queryIndexRef.current = queryIndex;
   }, [queryIndex]);
 
+  const stateRef = useRef<string | null>(null);
+
   useEffect(() => {
     if (sanetisedQuery.length === 0) {
       return;
     }
 
-    let state = { cancel: false };
+    const effectId = self.crypto.randomUUID();
+    stateRef.current = effectId;
+
+    const isInvalid = () => effectId !== stateRef.current;
 
     async function run() {
       const data = await searchIndex;
 
-      if (state.cancel) {
-        return;
-      }
-      const { pipeline } = await transformers;
-      if (state.cancel) {
+      if (isInvalid()) {
         return;
       }
-      const generateEmbeddings = await pipeline(
-        "feature-extraction",
-        "Xenova/all-MiniLM-L6-v2"
-      );
-      if (state.cancel) {
+
+      const generateEmbeddings = await loadModel();
+
+      if (isInvalid()) {
         return;
       }
+
       const queryEmbeddings = await generateEmbeddings(query, {
         normalize: true,
         pooling: "mean",
       }).then((embedding) => embedding.data);
-      if (state.cancel) {
+
+      if (isInvalid()) {
         return;
       }
 
@@ -209,10 +211,6 @@ export default function App({ Component, pageProps }: AppProps) {
     }
 
     run();
-
-    return () => {
-      state.cancel = true;
-    };
   }, [sanetisedQuery]);
 
   useEffect(() => {
@@ -433,3 +431,15 @@ export default function App({ Component, pageProps }: AppProps) {
     </>
   );
 }
+
+let modelPromise: Promise<Pipeline> | null = null;
+
+const loadModel: () => Promise<Pipeline> = async () => {
+  const { pipeline } = await transformers;
+  if (modelPromise == null) {
+    modelPromise = pipeline("feature-extraction", "Xenova/all-MiniLM-L6-v2");
+  }
+  const generateEmbeddings = await modelPromise;
+
+  return generateEmbeddings;
+};