Skip to content

Commit

Permalink
Switch storybook framework to react vite
Browse files Browse the repository at this point in the history
  • Loading branch information
JunichiSugiura committed Dec 14, 2024
1 parent 657d176 commit 553ac67
Show file tree
Hide file tree
Showing 14 changed files with 311 additions and 1,065 deletions.
23 changes: 3 additions & 20 deletions packages/keychain/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { StorybookConfig } from "@storybook/nextjs";
import { join, dirname, resolve } from "path";
import type { StorybookConfig } from "@storybook/react-vite";
import { join, dirname } from "path";

/**
* This function is used to resolve the absolute path of a package.
Expand All @@ -17,26 +17,9 @@ const config: StorybookConfig = {
getAbsolutePath("@storybook/addon-interactions"),
],
framework: {
name: getAbsolutePath("@storybook/nextjs"),
name: getAbsolutePath("@storybook/react-vite"),
options: {},
},
webpackFinal: (config) => {
// config.output = {
// ...config.output,
// webassemblyModuleFilename: "../static/wasm/webauthn.wasm",
// };
config.experiments = {
...config.experiments,
asyncWebAssembly: true,
};
config.resolve = {
...config.resolve,
alias: {
react: resolve("node_modules/react"),
},
};
return config;
},
staticDirs: ["../public"],
};
export default config;
56 changes: 56 additions & 0 deletions packages/keychain/.storybook/mock.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { constants } from "starknet";
import { getChainName } from "@cartridge/utils";
import Controller from "@cartridge/controller";
import { SessionPolicies } from "@cartridge/presets";
import { Parameters } from "@storybook/react";
import { ConnectionContextValue } from "../src/components/Provider/connection";
import { UpgradeInterface } from "../src/hooks/upgrade";
import { ConnectCtx, ConnectionCtx } from "../src/utils/connection/types";
import { defaultTheme } from "@cartridge/presets";

export interface StoryParameters extends Parameters {
connection?: {
context?: ConnectionCtx;
controller?: Controller;
chainId?: string;
upgrade?: UpgradeInterface;
};
preset?: string;
policies?: SessionPolicies;
}

export function useMockedConnection({
chainId = constants.StarknetChainId.SN_SEPOLIA,
context = {
type: "connect",
origin: "http://localhost:3002",
policies: [],
resolve: () => {},
reject: () => {},
} as ConnectCtx,
...rest
}: StoryParameters["connection"] = {}): ConnectionContextValue {
const chainName = getChainName(chainId);

return {
context,
origin: "http://localhost:3002",
rpcUrl: "http://api.cartridge.gg/x/sepolia",
chainId,
chainName,
policies: {},
theme: defaultTheme,
prefunds: [],
hasPrefundRequest: false,
error: undefined,
setContext: () => {},
setController: () => {},
closeModal: () => {},
openModal: () => {},
logout: () => {},
openSettings: () => {},
controller: {},
upgrade: {},
...rest,
};
}
161 changes: 8 additions & 153 deletions packages/keychain/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,9 @@
import React, { PropsWithChildren } from "react";
import { QueryClient, QueryClientProvider } from "react-query";
import type { Parameters, Preview } from "@storybook/react";
import Controller from "@cartridge/controller";
import { Inter, IBM_Plex_Mono } from "next/font/google";
import { ControllerThemeContext, useChakraTheme } from "../src/hooks/theme";
import {
ConnectionContext,
ConnectionContextValue,
} from "../src/components/Provider/connection";
import { constants } from "starknet";
import { getChainName } from "@cartridge/utils";
import Script from "next/script";
import { ConnectCtx, ConnectionCtx } from "../src/utils/connection/types";
import { UpgradeInterface } from "../src/hooks/upgrade";
import {
defaultTheme,
controllerConfigs,
SessionPolicies,
ControllerTheme,
} from "@cartridge/presets";
import { mainnet } from "@starknet-react/chains";
import { StarknetConfig, publicProvider, voyager } from "@starknet-react/core";
import React from "react";
import type { Preview } from "@storybook/react";
import { StoryParameters } from "./mock";
import { Provider } from "./provider";

const inter = Inter({ subsets: ["latin"] });
const ibmPlexMono = IBM_Plex_Mono({
weight: "600",
subsets: ["latin"],
});
import "../src/index.css";
import { useThemeEffect } from "@cartridge/ui-next";
import { ChakraProvider } from "@chakra-ui/react";
import "../src/index.css"

const preview: Preview = {
parameters: {
Expand All @@ -44,130 +18,11 @@ const preview: Preview = {
},
decorators: [
(Story, { parameters }) => (
<>
<style
// @ts-expect-error type error
jsx
global
>{`
:root {
--font-inter: ${inter.style.fontFamily};
--font-ibm-plex-mono: ${ibmPlexMono.style.fontFamily};
}
body {
background: var(--chakra-colors-solid-bg);
}
html,
body {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
`}</style>
<Script src="/noflash.js" />

<Provider parameters={parameters as StoryParameters}>
<Story />
</Provider>
</>
<Provider parameters={parameters as StoryParameters}>
<Story />
</Provider>
),
],
};

function Provider({
children,
parameters,
}: { parameters: StoryParameters } & PropsWithChildren) {
const connection = useMockedConnection(parameters.connection);

if (parameters.preset) {
const config = controllerConfigs[parameters.preset];
connection.theme = config.theme || connection.theme;
connection.policies = config.policies || connection.policies;
}

return (
<StarknetConfig
chains={[mainnet]}
explorer={voyager}
provider={publicProvider()}
>
<QueryClientProvider client={queryClient}>
<ConnectionContext.Provider value={connection}>
<ControllerThemeProvider theme={connection.theme}>
{children}
</ControllerThemeProvider>
</ConnectionContext.Provider>
</QueryClientProvider>
</StarknetConfig>
);
}

interface StoryParameters extends Parameters {
connection?: {
context?: ConnectionCtx;
controller?: Controller;
chainId?: string;
upgrade?: UpgradeInterface;
};
preset?: string;
policies?: SessionPolicies;
}

export function useMockedConnection({
chainId = constants.StarknetChainId.SN_SEPOLIA,
context = {
type: "connect",
origin: "http://localhost:3002",
policies: [],
resolve: () => {},
reject: () => {},
} as ConnectCtx,
...rest
}: StoryParameters["connection"] = {}): ConnectionContextValue {
const chainName = getChainName(chainId);

return {
context,
origin: "http://localhost:3002",
rpcUrl: "http://api.cartridge.gg/x/sepolia",
chainId,
chainName,
policies: {},
theme: defaultTheme,
prefunds: [],
hasPrefundRequest: false,
error: undefined,
setContext: () => {},
setController: () => {},
closeModal: () => {},
openModal: () => {},
logout: () => {},
openSettings: () => {},
controller: {},
upgrade: {},
...rest,
};
}

const queryClient = new QueryClient();

export default preview;

export function ControllerThemeProvider({
children,
theme = defaultTheme,
}: PropsWithChildren<{ theme?: ControllerTheme }>) {
useThemeEffect({ theme, assetUrl: "" });
const chakraTheme = useChakraTheme(theme);

return (
<ControllerThemeContext.Provider value={theme}>
<ChakraProvider theme={chakraTheme}>{children}</ChakraProvider>
</ControllerThemeContext.Provider>
);
}
59 changes: 59 additions & 0 deletions packages/keychain/.storybook/provider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React, { PropsWithChildren } from "react";
import { QueryClient, QueryClientProvider } from "react-query";
import { ControllerThemeContext, useChakraTheme } from "../src/hooks/theme";
import { ConnectionContext } from "../src/components/Provider/connection";
import {
defaultTheme,
controllerConfigs,
ControllerTheme,
} from "@cartridge/presets";
import { mainnet } from "@starknet-react/chains";
import { StarknetConfig, publicProvider, voyager } from "@starknet-react/core";
import { useThemeEffect } from "@cartridge/ui-next";
import { ChakraProvider } from "@chakra-ui/react";
import { StoryParameters, useMockedConnection } from "./mock";

export function Provider({
children,
parameters,
}: { parameters: StoryParameters } & PropsWithChildren) {
const connection = useMockedConnection(parameters.connection);

if (parameters.preset) {
const config = controllerConfigs[parameters.preset];
connection.theme = config.theme || connection.theme;
connection.policies = config.policies || connection.policies;
}

return (
<StarknetConfig
chains={[mainnet]}
explorer={voyager}
provider={publicProvider()}
>
<QueryClientProvider client={queryClient}>
<ConnectionContext.Provider value={connection}>
<ControllerThemeProvider theme={connection.theme}>
{children}
</ControllerThemeProvider>
</ConnectionContext.Provider>
</QueryClientProvider>
</StarknetConfig>
);
}

const queryClient = new QueryClient();

function ControllerThemeProvider({
children,
theme = defaultTheme,
}: PropsWithChildren<{ theme?: ControllerTheme }>) {
useThemeEffect({ theme, assetUrl: "" });
const chakraTheme = useChakraTheme(theme);

return (
<ControllerThemeContext.Provider value={theme}>
<ChakraProvider theme={chakraTheme}>{children}</ChakraProvider>
</ControllerThemeContext.Provider>
);
}
4 changes: 1 addition & 3 deletions packages/keychain/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@
"graphql": "^16.3.0",
"graphql-request": "^5.0.0",
"js-cookie": "^3.0.1",
"next": "^14.2.5",
"p-throttle": "^6.2.0",
"posthog-js": "^1.181.0",
"react": "^18.3.1",
Expand All @@ -60,8 +59,8 @@
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/blocks": "^8.2.9",
"@storybook/nextjs": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/react-vite": "^8.4.7",
"@storybook/test": "^8.2.5",
"@storybook/test-runner": "^0.19.1",
"@testing-library/react": "^13.4.0",
Expand All @@ -72,7 +71,6 @@
"autoprefixer": "^10.4.18",
"concurrently": "^9.0.1",
"eslint": "^9.12.0",
"eslint-config-next": "^12.2.5",
"eslint-plugin-storybook": "^0.6.13",
"http-server": "^14.1.1",
"jsdom": "^25.0.1",
Expand Down
3 changes: 1 addition & 2 deletions packages/keychain/src/components/ErrorBoundary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Container, Content, Footer } from "./layout";
import { AlertIcon, ExternalIcon } from "@cartridge/ui";
import { Button, HStack, Link, Text } from "@chakra-ui/react";
import { useConnection } from "@/hooks/connection";
import NextLink from "next/link";
import { CARTRIDGE_DISCORD_LINK } from "@/const";
import posthog from "posthog-js";

Expand Down Expand Up @@ -76,7 +75,7 @@ export function ErrorPage({ error }: { error: Error }) {
Get help
</Text>

<Link as={NextLink} href={CARTRIDGE_DISCORD_LINK} isExternal>
<Link href={CARTRIDGE_DISCORD_LINK} isExternal>
<HStack>
<Text fontSize="sm">Cartridge Discord</Text>
<ExternalIcon fontSize="xl" />
Expand Down
4 changes: 2 additions & 2 deletions packages/keychain/src/components/connect/SessionConsent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { HStack, Text } from "@chakra-ui/react";
import { VerifiedIcon } from "@cartridge/ui";
import { useConnection } from "@/hooks/connection";
import { useMemo } from "react";
import Link from "next/link";
import { Link } from "react-router-dom";

export function SessionConsent({
isVerified,
Expand Down Expand Up @@ -34,7 +34,7 @@ export function SessionConsent({
<HStack color="text.secondary" fontSize="xs">
{isVerified && (
<Link
href="https://github.com/cartridge-gg/controller/blob/main/packages/controller/src/presets.ts"
to="https://github.com/cartridge-gg/controller/blob/main/packages/controller/src/presets.ts"
target="_blank"
>
<VerifiedIcon
Expand Down
3 changes: 0 additions & 3 deletions packages/keychain/src/components/home.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import dynamic from "next/dynamic";
import { usePostHog } from "posthog-js/react";
import { Signature } from "starknet";
import { useEffect } from "react";
Expand Down Expand Up @@ -154,5 +153,3 @@ export function Home() {
return <>*Waves*</>;
}
}

export default dynamic(() => Promise.resolve(Home), { ssr: false });
Loading

0 comments on commit 553ac67

Please sign in to comment.