Skip to content

Commit

Permalink
nav tabs + format
Browse files Browse the repository at this point in the history
  • Loading branch information
DaveDarsa committed Oct 13, 2024
1 parent c00eabe commit c35d193
Show file tree
Hide file tree
Showing 183 changed files with 27,418 additions and 27,417 deletions.
100 changes: 50 additions & 50 deletions .storybook/decorators/withTheme.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
import React from "react";
import { ThemeProvider } from "styled-components";
import { Decorator } from "@storybook/react";
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { Decorator } from '@storybook/react';

import GlobalStyles from "../../src/providers/GlobalStyles";
import { lightTheme, darkTheme } from "../../src/styles/theme";
import GlobalStyles from '../../src/providers/GlobalStyles';
import { lightTheme, darkTheme } from '../../src/styles/theme';

import styled, { css } from "styled-components";
import styled, { css } from 'styled-components';

const ThemeBlock = styled.div<{ left?: boolean; fill?: boolean }>(
({ left, fill, theme }) => css`
position: absolute;
top: 0;
left: ${left || fill ? 0 : "50vw"};
border-right: ${left ? "1px solid #202020" : "none"};
right: ${left ? "50vw" : 0};
width: ${fill ? "100vw" : "50vw"};
bottom: 0;
overflow: auto;
padding: 1rem;
background: ${theme.colorScheme === "dark" ? "#1f1d1d" : "#fff"};
`
({ left, fill, theme }) => css`
position: absolute;
top: 0;
left: ${left || fill ? 0 : '50vw'};
border-right: ${left ? '1px solid #202020' : 'none'};
right: ${left ? '50vw' : 0};
width: ${fill ? '100vw' : '50vw'};
bottom: 0;
overflow: auto;
padding: 1rem;
background: ${theme.colorScheme === 'dark' ? '#1f1d1d' : '#fff'};
`,
);

const withTheme: Decorator = (StoryFn, context) => {
const { theme } = context.globals;
const themeToUse = theme === "light" ? lightTheme : darkTheme;
const { theme } = context.globals;
const themeToUse = theme === 'light' ? lightTheme : darkTheme;

switch (theme) {
case "side-by-side": {
return (
<>
<ThemeProvider theme={lightTheme}>
<GlobalStyles />
<ThemeBlock left>
<StoryFn />
</ThemeBlock>
</ThemeProvider>
<ThemeProvider theme={darkTheme}>
<GlobalStyles />
<ThemeBlock>
<StoryFn />
</ThemeBlock>
</ThemeProvider>
</>
);
}
default: {
return (
<ThemeProvider theme={themeToUse}>
<GlobalStyles />
<ThemeBlock fill theme={themeToUse}>
<StoryFn />
</ThemeBlock>
</ThemeProvider>
);
}
}
switch (theme) {
case 'side-by-side': {
return (
<>
<ThemeProvider theme={lightTheme}>
<GlobalStyles />
<ThemeBlock left>
<StoryFn />
</ThemeBlock>
</ThemeProvider>
<ThemeProvider theme={darkTheme}>
<GlobalStyles />
<ThemeBlock>
<StoryFn />
</ThemeBlock>
</ThemeProvider>
</>
);
}
default: {
return (
<ThemeProvider theme={themeToUse}>
<GlobalStyles />
<ThemeBlock fill theme={themeToUse}>
<StoryFn />
</ThemeBlock>
</ThemeProvider>
);
}
}
};
export default withTheme;
66 changes: 33 additions & 33 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
import type { StorybookConfig } from "@storybook/react-webpack5";
import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-controls",
"@storybook/addon-a11y",
"@storybook/addon-designs",
],
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-controls',
'@storybook/addon-a11y',
'@storybook/addon-designs',
],

framework: {
name: "@storybook/react-webpack5",
options: {
builder: {
useSWC: true,
},
},
},
docs: {
autodocs: true,
},
core: {
disableTelemetry: true,
},
swc: () => ({
jsc: {
transform: {
react: {
runtime: "automatic",
},
},
},
}),
framework: {
name: '@storybook/react-webpack5',
options: {
builder: {
useSWC: true,
},
},
},
docs: {
autodocs: true,
},
core: {
disableTelemetry: true,
},
swc: () => ({
jsc: {
transform: {
react: {
runtime: 'automatic',
},
},
},
}),
};
export default config;
3 changes: 1 addition & 2 deletions .storybook/manager-head.html
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/logo.svg" sizes="192x192">
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" type="image/png" href="/logo.svg" sizes="192x192" />
12 changes: 6 additions & 6 deletions .storybook/manager.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { addons } from "@storybook/manager-api";
import { addons } from '@storybook/manager-api';

import LagoonTheme from "./theme";
import LagoonTheme from './theme';

addons.setConfig({
theme: LagoonTheme,
sidebar: {
showRoots: false,
},
theme: LagoonTheme,
sidebar: {
showRoots: false,
},
});
3 changes: 0 additions & 3 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,8 @@ const preview: Preview = {
date: /Date$/i,
},
},


docs: {


source: {
language: 'tsx',
},
Expand Down
14 changes: 7 additions & 7 deletions .storybook/theme.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { create } from "@storybook/theming";
import { create } from '@storybook/theming';

import logo from "./public/logo.svg";
import logo from './public/logo.svg';

export default create({
base: "dark",
brandTitle: "Lagoon",
brandUrl: "http://lagoon.sh/",
brandImage: logo,
brandTarget: "_blank",
base: 'dark',
brandTitle: 'Lagoon',
brandUrl: 'http://lagoon.sh/',
brandImage: logo,
brandTarget: '_blank',
});
Loading

0 comments on commit c35d193

Please sign in to comment.