npm - slice-machine-ui - Versions diffs - 2.17.3-beta.6 → 2.17.3-beta.8 - Mend

slice-machine-ui 2.17.3-beta.6 → 2.17.3-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/out/settings.html DELETED Viewed

@@ -1 +0,0 @@

- <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/cc9b10286400c2b9.css" as="style"/><link rel="stylesheet" href="/_next/static/css/cc9b10286400c2b9.css" data-n-g=""/><link rel="preload" href="/_next/static/css/e5f781f20e24a5ea.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e5f781f20e24a5ea.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-b3522fdebabf510a.js" defer=""></script><script src="/_next/static/chunks/framework-ab7ddb551c23d05a.js" defer=""></script><script src="/_next/static/chunks/main-c46f4dcf6e3174bd.js" defer=""></script><script src="/_next/static/chunks/pages/_app-9bd805183e832369.js" defer=""></script><script src="/_next/static/chunks/397-e6c340070a3bcb41.js" defer=""></script><script src="/_next/static/chunks/pages/settings-01f4aeb9112a1f87.js" defer=""></script><script src="/_next/static/ycrZ72RsSEIu0t0h6roCF/_buildManifest.js" defer=""></script><script src="/_next/static/ycrZ72RsSEIu0t0h6roCF/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/settings","query":{},"buildId":"ycrZ72RsSEIu0t0h6roCF","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>

package/src/components/FieldSet/FieldSet.module.css DELETED Viewed

@@ -1,84 +0,0 @@
-.flex {
-  all: unset;
-  display: flex;
-}
-.column {
-  composes: flex;
-  flex-direction: column;
-}
-.root {
-  composes: column;
-  border-color: var(--grey6);
-  border-radius: 6px;
-  border-style: solid;
-  border-width: 1px;
-  box-shadow: var(--box-shadow-1);
-  overflow-x: hidden;
-}
-.row {
-  composes: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: 8px;
-  padding-inline: 16px;
-}
-.borderBottom {
-  box-sizing: border-box;
-  &:not(:last-child) {
-    border-bottom-color: var(--grey6);
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-  }
-}
-.legend {
-  composes: row borderBottom;
-  background-color: var(--grey2);
-  height: 48px;
-  order: 0;
-}
-.header {
-  composes: row borderBottom;
-  background-color: var(--grey2);
-  height: 72px;
-  order: 1;
-}
-.content {
-  composes: column;
-  background-color: var(--grey1);
-  order: 2;
-  padding: 16px;
-}
-.list {
-  composes: column;
-  max-height: 256px;
-  order: 2;
-  overflow-y: auto;
-}
-.listItem {
-  composes: row borderBottom;
-  background-color: var(--grey1);
-  flex-shrink: 0;
-  height: 64px;
-}
-.borderTop:not(:first-child) {
-  /* stylelint-disable-next-line declaration-property-value-allowed-list -- Displays a 1 px top border outside the element. */
-  box-shadow: 0 -1px 0 0 var(--grey6);
-}
-.footer {
-  composes: row borderTop;
-  background-color: var(--grey1);
-  height: 48px;
-  order: 3;
-  padding-right: 8px;
-}

package/src/components/FieldSet/FieldSet.module.css.d.ts DELETED Viewed

@@ -1,16 +0,0 @@
-declare const styles: {
-  readonly "borderBottom": string;
-  readonly "borderTop": string;
-  readonly "column": string;
-  readonly "content": string;
-  readonly "flex": string;
-  readonly "footer": string;
-  readonly "header": string;
-  readonly "legend": string;
-  readonly "list": string;
-  readonly "listItem": string;
-  readonly "root": string;
-  readonly "row": string;
-};
-export = styles;

package/src/components/FieldSet/FieldSet.stories.tsx DELETED Viewed

@@ -1,244 +0,0 @@
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  IconButton,
-  Select,
-  SelectItem,
-  Skeleton,
-  Text,
-  theme,
-} from "@prismicio/editor-ui";
-import type { Meta, StoryObj } from "@storybook/react";
-import { BitbucketIcon } from "../../icons/BitbucketIcon";
-import { GitHubIcon } from "../../icons/GitHubIcon";
-import { GitLabIcon } from "../../icons/GitLabIcon";
-import {
-  FieldSet,
-  FieldSetContent,
-  FieldSetFooter,
-  FieldSetHeader,
-  FieldSetLegend,
-  FieldSetList,
-  FieldSetListItem,
-} from "./FieldSet";
-type Story = StoryObj<typeof meta>;
-const meta = {
-  component: FieldSet,
-  argTypes: {
-    children: { control: { disable: true } },
-  },
-} satisfies Meta<typeof FieldSet>;
-export default meta;
-export const Default = {
-  args: {
-    children: (
-      <>
-        <FieldSetLegend />
-        <FieldSetHeader />
-        <FieldSetList>
-          <FieldSetListItem action={<Button color="grey">Action</Button>} />
-        </FieldSetList>
-        <FieldSetFooter action={<IconButton icon="openInNew" />} />
-      </>
-    ),
-  },
-} satisfies Story;
-export const WithButtonGroupContent = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
-        <FieldSetContent>
-          <ButtonGroup color="grey">
-            <Button
-              renderStartIcon={() => <GitHubIcon color={theme.color.grey11} />}
-              sx={{ flexBasis: 0, flexGrow: 1 }}
-            >
-              GitHub
-            </Button>
-            <Button
-              disabled
-              renderStartIcon={() => (
-                <BitbucketIcon color={theme.color.grey11} />
-              )}
-              sx={{ flexBasis: 0, flexGrow: 1 }}
-            >
-              Bitbucket{" "}
-              <Text color="inherit" variant="small">
-                (soon)
-              </Text>
-            </Button>
-            <Button
-              disabled
-              renderStartIcon={() => <GitLabIcon color={theme.color.grey11} />}
-              sx={{ flexBasis: 0, flexGrow: 1 }}
-            >
-              GitLab{" "}
-              <Text color="inherit" variant="small">
-                (soon)
-              </Text>
-            </Button>
-          </ButtonGroup>
-        </FieldSetContent>
-        <FieldSetFooter action={<IconButton icon="openInNew" />}>
-          Learn more about Prismic for Git
-        </FieldSetFooter>
-      </>
-    ),
-  },
-  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
-} satisfies Story;
-export const LoadingWithHeaderAndList = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
-        <FieldSetHeader>
-          <OwnerSelect disabled />
-        </FieldSetHeader>
-        <FieldSetList>
-          {[...Array(4).keys()].map((index) => (
-            <FieldSetListItem
-              action={<Skeleton height={32} width={67.59} />}
-              key={index}
-            >
-              <Skeleton
-                height={24}
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore TODO(DT-1918): add `verticalAlign: "middle"` to the `sx` prop.
-                sx={{ verticalAlign: "middle" }}
-                width={129.92}
-              />
-            </FieldSetListItem>
-          ))}
-        </FieldSetList>
-        <FieldSetFooter action={<IconButton icon="openInNew" />}>
-          Learn more about Prismic for Git
-        </FieldSetFooter>
-      </>
-    ),
-  },
-  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
-};
-export const WithHeaderAndListOverflow = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
-        <FieldSetHeader>
-          <OwnerSelect />
-        </FieldSetHeader>
-        <FieldSetList>
-          {[...Array(100).keys()].map((index) => (
-            <FieldSetListItem
-              action={<Button color="grey">Connect</Button>}
-              key={index}
-            >
-              Repository <Text color="grey11">• xd ago</Text>
-            </FieldSetListItem>
-          ))}
-        </FieldSetList>
-        <FieldSetFooter action={<IconButton icon="openInNew" />}>
-          Learn more about Prismic for Git
-        </FieldSetFooter>
-      </>
-    ),
-  },
-  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
-};
-export const WithSingleListItem = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
-        <FieldSetList>
-          <FieldSetListItem action={<Button color="grey">Disconnect</Button>}>
-            Repository <Text color="grey11">• xd ago</Text>
-          </FieldSetListItem>
-        </FieldSetList>
-        <FieldSetFooter action={<IconButton icon="openInNew" />}>
-          Learn more about Prismic for Git
-        </FieldSetFooter>
-      </>
-    ),
-  },
-  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
-};
-export const WithHeaderAndBoxContent = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
-        <FieldSetHeader>
-          <OwnerSelect />
-        </FieldSetHeader>
-        <FieldSetContent>
-          <Box
-            flexDirection="column"
-            /*
-             * TODO: these `padding` values actually don't match Figma, but they
-             * are the closest allowed by the `Box` component.
-             */
-            padding={{ block: 72, inline: 100 }}
-          >
-            <Text align="center" variant="emphasized">
-              No Results Found
-            </Text>
-            <Text align="center" color="grey11">
-              Try selecting a different Git account or organization on the top
-              left.
-            </Text>
-          </Box>
-        </FieldSetContent>
-        <FieldSetFooter action={<IconButton icon="openInNew" />}>
-          Learn more about Prismic for Git
-        </FieldSetFooter>
-      </>
-    ),
-  },
-  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
-};
-type OwnerSelectProps = { disabled?: boolean };
-function OwnerSelect(props: OwnerSelectProps) {
-  return (
-    <Select
-      {...props}
-      color="grey"
-      constrainContentWidth
-      flexContent
-      placeholder="Owner"
-      renderStartIcon={() => <GitHubIcon color={theme.color.grey11} />}
-      size="large"
-      sx={{ width: "calc(50% - 8px)" }}
-    >
-      {[...Array(2).keys()].map((index) => (
-        <SelectItem
-          key={index}
-          renderStartIcon={() => <GitHubIcon color={theme.color.grey11} />}
-          size="large"
-          value={`owner-${index}`}
-        >
-          Owner
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}

package/src/components/FieldSet/FieldSet.tsx DELETED Viewed

@@ -1,67 +0,0 @@
-import { Text } from "@prismicio/editor-ui";
-import type { FC, PropsWithChildren, ReactNode } from "react";
-import styles from "./FieldSet.module.css";
-export const FieldSet: FC<PropsWithChildren> = (props) => (
-  <div {...props} className={styles.root} />
-);
-export const FieldSetLegend: FC<PropsWithChildren> = ({
-  children,
-  ...otherProps
-}) => (
-  <div {...otherProps} className={styles.legend}>
-    <Text color="grey11" component="span" noWrap variant="smallBold">
-      {children}
-    </Text>
-  </div>
-);
-export const FieldSetHeader: FC<PropsWithChildren> = (props) => (
-  <div {...props} className={styles.header} />
-);
-export const FieldSetContent: FC<PropsWithChildren> = (props) => (
-  <div {...props} className={styles.content} />
-);
-export const FieldSetList: FC<PropsWithChildren> = (props) => (
-  <ul {...props} className={styles.list} />
-);
-type FieldSetListItemProps = PropsWithChildren<{ action?: ReactNode }>;
-export const FieldSetListItem: FC<FieldSetListItemProps> = ({
-  action,
-  children,
-  ...otherProps
-}) => (
-  <li {...otherProps} className={styles.listItem}>
-    <Text component="span" noWrap variant="bold" sx={{ flexGrow: 1 }}>
-      {children}
-    </Text>
-    {action}
-  </li>
-);
-type FieldSetFooterProps = PropsWithChildren<{ action?: ReactNode }>;
-export const FieldSetFooter: FC<FieldSetFooterProps> = ({
-  action,
-  children,
-  ...otherProps
-}) => (
-  <div {...otherProps} className={styles.footer}>
-    <Text
-      color="grey11"
-      component="span"
-      noWrap
-      variant="small"
-      sx={{ flexGrow: 1 }}
-    >
-      {children}
-    </Text>
-    {action}
-  </div>
-);

package/src/components/FieldSet/index.ts DELETED Viewed

@@ -1,9 +0,0 @@
-export {
-  FieldSet,
-  FieldSetContent,
-  FieldSetFooter,
-  FieldSetHeader,
-  FieldSetLegend,
-  FieldSetList,
-  FieldSetListItem,
-} from "./FieldSet";

package/src/features/builder/useAiSliceGenerationExperiment.ts DELETED Viewed

@@ -1,8 +0,0 @@
-import { useExperimentVariant } from "@/hooks/useExperimentVariant";
-type useAiSliceGenerationExperimentReturnType = { eligible: boolean };
-export function useAiSliceGenerationExperiment(): useAiSliceGenerationExperimentReturnType {
-  const variant = useExperimentVariant("slicemachine-image-to-slice");
-  return { eligible: variant?.value === "on" };
-}

package/src/features/settings/SettingsPage.tsx DELETED Viewed

@@ -1,50 +0,0 @@
-import { Box } from "@prismicio/editor-ui";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import { type FC, useEffect } from "react";
-import { BreadcrumbItem } from "@/components/Breadcrumb";
-import { ConnectGitRepository } from "@/features/settings/git/ConnectGitRepository";
-import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
-import {
-  AppLayout,
-  AppLayoutBreadcrumb,
-  AppLayoutContent,
-  AppLayoutHeader,
-} from "@/legacy/components/AppLayout";
-export const SettingsPage: FC = () => {
-  const gitIntegrationExperiment = useGitIntegrationExperiment();
-  const router = useRouter();
-  // TODO(DT-1801): implement a 404 page.
-  useEffect(() => {
-    if (!gitIntegrationExperiment.eligible) {
-      void router.replace("/");
-    }
-  }, [gitIntegrationExperiment.eligible, router]);
-  if (!gitIntegrationExperiment.eligible) {
-    return null;
-  }
-  return (
-    <>
-      <Head>
-        <title>Settings - Slice Machine</title>
-      </Head>
-      <AppLayout>
-        <AppLayoutHeader>
-          <AppLayoutBreadcrumb>
-            <BreadcrumbItem>Settings</BreadcrumbItem>
-          </AppLayoutBreadcrumb>
-        </AppLayoutHeader>
-        <AppLayoutContent>
-          <Box flexDirection="column" maxWidth={600}>
-            <ConnectGitRepository />
-          </Box>
-        </AppLayoutContent>
-      </AppLayout>
-    </>
-  );
-};

package/src/features/settings/git/ConnectGitRepository.tsx DELETED Viewed

@@ -1,112 +0,0 @@
-import { Button, IconButton, Tooltip } from "@prismicio/editor-ui";
-import {
-  isUnauthenticatedError,
-  isUnauthorizedError,
-} from "@slicemachine/manager/client";
-import { type FC, type ReactNode, Suspense } from "react";
-import {
-  FieldSet,
-  FieldSetContent,
-  FieldSetFooter,
-  FieldSetLegend,
-} from "@/components/FieldSet";
-import { ErrorBoundary } from "@/ErrorBoundary";
-import { ConnectGitRepositoryBlankSlate } from "@/features/settings/git/ConnectGitRepositoryBlankSlate";
-import { GitProviderConnectButtons } from "@/features/settings/git/GitProviderConnectButtons";
-import { GitRepositoriesList } from "@/features/settings/git/GitRepositoriesList";
-import {
-  GitRepositoriesSearch,
-  GitRepositoriesSearchSkeleton,
-} from "@/features/settings/git/GitRepositoriesSearch";
-import { useGitOwners } from "@/features/settings/git/useGitOwners";
-import { useLinkedGitRepos } from "@/features/settings/git/useLinkedGitRepos";
-import useSliceMachineActions from "@/modules/useSliceMachineActions";
-export const ConnectGitRepository: FC = () => (
-  <FieldSet>
-    <FieldSetLegend>Connected Git Repository</FieldSetLegend>
-    <ErrorBoundary renderError={renderError}>
-      <Suspense fallback={<GitRepositoriesSearchSkeleton gitOwnerSelect />}>
-        <Content />
-      </Suspense>
-    </ErrorBoundary>
-    <FieldSetFooter
-      action={
-        <Tooltip content="Documentation is coming soon." side="bottom">
-          <IconButton disabled icon="openInNew" />
-        </Tooltip>
-      }
-    >
-      Learn more about Prismic for Git
-    </FieldSetFooter>
-  </FieldSet>
-);
-const Content: FC = () => {
-  const { linkedGitRepos } = useLinkedGitRepos();
-  return linkedGitRepos.length > 0 ? (
-    <GitRepositoriesList mode="unlink" repos={linkedGitRepos} />
-  ) : (
-    <UnlinkedRepositoryContent />
-  );
-};
-const UnlinkedRepositoryContent: FC = () => {
-  const owners = useGitOwners();
-  return owners.length > 0 ? (
-    <GitRepositoriesSearch owners={owners} />
-  ) : (
-    <FieldSetContent>
-      <GitProviderConnectButtons />
-    </FieldSetContent>
-  );
-};
-function renderError(error: unknown, reset: () => void): ReactNode {
-  if (isUnauthenticatedError(error)) {
-    return <UnauthenticatedErrorContent />;
-  } else if (isUnauthorizedError(error)) {
-    return <UnauthorizedErrorContent />;
-  } else {
-    return <UnknownErrorContent reset={reset} />;
-  }
-}
-const UnauthenticatedErrorContent: FC = () => {
-  const { openLoginModal } = useSliceMachineActions();
-  return (
-    <FieldSetContent>
-      <ConnectGitRepositoryBlankSlate
-        title="It seems like you are logged out"
-        description="Log in to connect a Git repository."
-        action={<Button onClick={openLoginModal}>Log in to Prismic</Button>}
-      />
-    </FieldSetContent>
-  );
-};
-const UnauthorizedErrorContent: FC = () => (
-  <FieldSetContent>
-    <ConnectGitRepositoryBlankSlate
-      title="It seems like you do not have permission"
-      description="An owner or admin is required to connect a Git repository."
-    />
-  </FieldSetContent>
-);
-type UnknownErrorContentProps = { reset: () => void };
-const UnknownErrorContent: FC<UnknownErrorContentProps> = ({ reset }) => (
-  <FieldSetContent>
-    <ConnectGitRepositoryBlankSlate
-      title="Unable to fetch data"
-      description="An error occurred while fetching the list of connected Git repositories."
-      action={
-        <Button color="grey" onClick={reset}>
-          Retry
-        </Button>
-      }
-    />
-  </FieldSetContent>
-);

package/src/features/settings/git/ConnectGitRepositoryBlankSlate.tsx DELETED Viewed

@@ -1,33 +0,0 @@
-import { Box, ButtonGroup, Text } from "@prismicio/editor-ui";
-import type { FC, ReactNode } from "react";
-type ConnectGitRepositoryBlankSlateProps = {
-  title: string;
-  description: string;
-  action?: ReactNode;
-};
-export const ConnectGitRepositoryBlankSlate: FC<
-  ConnectGitRepositoryBlankSlateProps
-> = ({ title, description, action }) => (
-  <Box
-    flexDirection="column"
-    /*
-     * TODO: these `padding` values actually don't match Figma, but they are the
-     * closest allowed by the `Box` component.
-     */
-    padding={{ block: 72, inline: 100 }}
-  >
-    <Text align="center" variant="emphasized">
-      {title}
-    </Text>
-    <Text align="center" color="grey11">
-      {description}
-    </Text>
-    {Boolean(action) ? (
-      <ButtonGroup sx={{ alignSelf: "center", marginTop: 8 }}>
-        {action}
-      </ButtonGroup>
-    ) : undefined}
-  </Box>
-);