Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add storybook #51

Merged
merged 6 commits into from
Nov 12, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 0 additions & 30 deletions .github/workflows/format.yml

This file was deleted.

4 changes: 2 additions & 2 deletions .github/workflows/tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ jobs:
- name: Install dependencies
run: pnpm install

- name: Run Build and Tests
run: pnpm run build-test
# - name: Run Build and Tests
# run: pnpm run build-test

env:
CI: true
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,4 @@ lerna-debug.log
Thumbs.db
# Local Netlify folder
.netlify
storybook-static
4 changes: 2 additions & 2 deletions netlify.toml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# repository root netlify.toml
[build]
base = "/"
publish = "packages/playground-next/dist/public"
command = "pnpm --filter=@codeui/vanilla-extract build && pnpm --filter=@codeui/playground-next build"
publish = "packages/storybook/storybook-static"
command = "pnpm --filter=@codeui/storybook-playground build-storybook"
2 changes: 1 addition & 1 deletion packages/kit/src/components/RadioList/RadioList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { baseFieldContainer } from "../TextField/TextField.css";
import { createFieldMessageProps } from "../Field/FieldMessage/createFieldMessageProps";
import * as styles from "./Radio.css";

type RadioListProps = RadioGroup.RadioGroupRootProps &
export type RadioListProps = RadioGroup.RadioGroupRootProps &
BaseFieldProps &
FieldWithErrorMessageSupport & { label?: JSXElement; description?: string };

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ export function SegmentedControl(props: SegmentedControlProps) {
}, 0);

onMount(() => {
if (!listRef) {
return;
}
const resizeObserver = new ResizeObserver(handleListResize);
resizeObserver.observe(listRef);
});
Expand Down
4 changes: 4 additions & 0 deletions packages/kit/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,9 @@ export {
export { Popover, PopoverTrigger, PopoverContent } from "./components/Popover/Popover";
export { Select } from "./components/Select/Select";
export { createSelectOptions } from "./components/Select/createSelectValue";

export { RadioList, RadioListItem } from "./components/RadioList/RadioList";
export type { RadioListProps } from "./components/RadioList/RadioList";

export { Link } from "./components/Link/Link";

Expand All @@ -60,3 +62,5 @@ export {
layoutVars,
responsiveStyle,
} from "./foundation";

export { As } from "@kobalte/core";
24 changes: 24 additions & 0 deletions packages/storybook/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
12 changes: 12 additions & 0 deletions packages/storybook/.storybook/global-ve.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { globalStyle } from "@vanilla-extract/css";
import { themeVars } from "@codeui/kit";

globalStyle("[data-cui-theme=dark] html, body", {
background: themeVars.accent1,
color: themeVars.foreground,
});

globalStyle("[data-cui-theme=light] html, body", {
background: themeVars.background,
color: themeVars.foreground,
});
18 changes: 18 additions & 0 deletions packages/storybook/.storybook/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

html, body {
font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.multipleItemsContainer {
display: flex;
flex-direction: column;
gap: 2rem;
}

.itemsContainer {
display: flex;
align-items: center;
gap: 2rem;
}

30 changes: 30 additions & 0 deletions packages/storybook/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import type { StorybookConfig } from "storybook-solidjs-vite";

import { join, dirname } from "path";

/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string): any {
return dirname(require.resolve(join(value, "package.json")));
}

const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
getAbsolutePath("@storybook/addon-links"),
getAbsolutePath("@storybook/addon-essentials"),
getAbsolutePath("@storybook/addon-interactions"),
getAbsolutePath("storybook-dark-mode"),
],
framework: {
name: getAbsolutePath("storybook-solidjs-vite"),
options: {},
},
docs: {
autodocs: "tag",
},
};

export default config;
67 changes: 67 additions & 0 deletions packages/storybook/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { Preview } from "storybook-solidjs";
import { themes, ThemeVars } from "@storybook/theming";
import { DARK_MODE_EVENT_NAME, useDarkMode } from "storybook-dark-mode";
import { addons } from "@storybook/addons";
import { Component, createEffect, createSignal, FlowProps } from "solid-js";
import "./reset.css";
import "./global.css";
import "./global-ve.css";
import { DocsContainer, DocsContainerProps } from "@storybook/blocks";
import { themeVars } from "@codeui/kit";

function ThemeWrapper(props: FlowProps) {
const [darkMode, setDarkMode] = createSignal<boolean>(true);
const channel = addons.getChannel();
channel.on(DARK_MODE_EVENT_NAME, setDarkMode);

createEffect(() => {
document.documentElement.setAttribute(
"data-cui-theme",
darkMode() ? "dark" : "light",
);
});
return <div>{props.children}</div>;
}

export const decorators = [
(Story: () => any) => {
return <ThemeWrapper>{Story()}</ThemeWrapper>;
},
];

const darkTheme: ThemeVars = {
...themes.dark,
appBg: "#111",
barBg: "#111",
appContentBg: "#050505",
};

const lightTheme: ThemeVars = {
...themes.normal,
};

const preview: Preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
decorators: decorators,
darkMode: {
current: "dark",
dark: darkTheme,
light: lightTheme,
},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
docs: {
container: (props: DocsContainerProps) => {
const dark = useDarkMode();
return <DocsContainer {...props} theme={dark ? darkTheme : lightTheme} />;
},
},
},
};

export default preview;
Loading
Loading