Skip to content

Commit

Permalink
chore: add playroom and storybook-addon-playroom dependencies
Browse files Browse the repository at this point in the history
  • Loading branch information
devin-ai-integration[bot] and DSil committed Jan 13, 2025
1 parent 3955bd7 commit 1b9e1de
Show file tree
Hide file tree
Showing 9 changed files with 2,946 additions and 1,106 deletions.
17 changes: 16 additions & 1 deletion packages/orbit-components/.storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,23 @@ function getAbsolutePath(value: string): string {

const config: StorybookConfig = {
staticDirs: [path.resolve(__dirname, "../static")],
stories: ["../src/**/*.stories.*"],
stories: ["../src/**/*.@(mdx|stories.*)"],
framework: getAbsolutePath("@storybook/react-webpack5"),

addons: [
getAbsolutePath("@storybook/addon-controls"),
getAbsolutePath("@storybook/addon-a11y"),
getAbsolutePath("storybook-addon-pseudo-states"),
{
name: getAbsolutePath("storybook-addon-playroom"),
options: {
playroom: {
url: "http://localhost:9000",
codeUrl: "http://localhost:9000/code",
baseUrl: "http://localhost:9000",
},
},
},
{
name: getAbsolutePath("@storybook/addon-essentials"),
options: {
Expand Down Expand Up @@ -44,6 +54,7 @@ const config: StorybookConfig = {
},
},
],

webpackFinal(cfg) {
if (cfg) {
// resolve to .js rather than .mjs to avoid webpack failing because of ambiguous imports
Expand All @@ -60,6 +71,10 @@ const config: StorybookConfig = {
}
return undefined;
},

typescript: {
reactDocgen: "react-docgen-typescript",
},
};

export default config;
3 changes: 3 additions & 0 deletions packages/orbit-components/.storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ const preview: Preview = {
a11y: {
element: ".story-content",
},
playroom: {
url: "http://localhost:9000",
},
},
};

Expand Down
27 changes: 15 additions & 12 deletions packages/orbit-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"scripts": {
"storybook": "storybook dev -p 6007 -c .storybook --ci",
"playroom:start": "playroom start",
"cy:dev": "vite cypress/integration --logLevel silent",
"cy:run": "start-server-and-test cy:dev http-get://localhost:3000 'cypress run'",
"cy:open": "start-server-and-test cy:dev http-get://localhost:3000 'cypress open'",
Expand Down Expand Up @@ -91,17 +92,17 @@
"@nanostores/router": "^0.3.1",
"@playwright/experimental-ct-react": "^1.44.1",
"@size-limit/webpack-why": "^11.1.4",
"@storybook/addon-a11y": "^8.2.4",
"@storybook/addon-controls": "^8.2.4",
"@storybook/addon-essentials": "^8.2.4",
"@storybook/addon-styling-webpack": "^1.0.0",
"@storybook/blocks": "^8.2.4",
"@storybook/manager-api": "^8.2.4",
"@storybook/preview-api": "^8.2.4",
"@storybook/react": "^8.2.4",
"@storybook/addon-a11y": "^8.4.7",
"@storybook/addon-controls": "^8.4.7",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-styling-webpack": "^1.0.1",
"@storybook/blocks": "^8.4.7",
"@storybook/manager-api": "^8.4.7",
"@storybook/preview-api": "^8.4.7",
"@storybook/react": "^8.4.7",
"@storybook/react-webpack5": "^8.4.7",
"@storybook/storybook-deployer": "^2.8.16",
"@storybook/theming": "^8.2.1",
"@storybook/theming": "^8.4.7",
"@svgr/core": "^6.3.1",
"@svgr/plugin-jsx": "^6.3.1",
"@svgr/plugin-prettier": "^6.3.1",
Expand All @@ -116,7 +117,7 @@
"babel-plugin-require-context-hook": "^1.0.0",
"css-loader": "^7.1.2",
"cypress": "^13.2.0",
"eslint-plugin-storybook": "^0.9.0",
"eslint-plugin-storybook": "^0.11.2",
"fs-extra": "^11.2.0",
"jscodeshift": "^0.13.1",
"jsdom": "^20.0.3",
Expand All @@ -125,15 +126,17 @@
"onecolor": "^4.1.0",
"ora": "^6.1.0",
"pixelmatch": "^5.3.0",
"playroom": "^0.39.1",
"pngjs": "^7.0.0",
"postcss-loader": "8.1.1",
"prism-react-renderer": "^2.3.1",
"react-element-to-jsx-string": "^14.3.2",
"react-window": "^1.8.10",
"sharp": "^0.32.6",
"start-server-and-test": "^1.13.1",
"storybook": "^8.2.4",
"storybook-addon-pseudo-states": "^3.1.1",
"storybook": "^8.4.7",
"storybook-addon-playroom": "^6.0.0",
"storybook-addon-pseudo-states": "^4.0.2",
"style-loader": "^4.0.0",
"surge": "^0.23.0",
"svg2ttf": "^6.0.0",
Expand Down
61 changes: 61 additions & 0 deletions packages/orbit-components/playroom.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
const path = require("path");
const { defaultFoundation } = require("@kiwicom/orbit-design-tokens");

module.exports = {
title: "Orbit Playroom",
components: require.resolve("./playroomComponents.tsx"),
outputPath: "./.playroom",
frameComponent: "./playroom/FrameComponent.tsx",
snippets: "./playroom/snippets.ts",
port: 9000,
openBrowser: false,
widths: Object.values(defaultFoundation.breakpoint),
baseUrl: "/",
webpackConfig: () => ({
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx", ".css"],
modules: [
"node_modules",
path.resolve(__dirname),
path.resolve(__dirname, "src"),
path.resolve(__dirname, "lib"),
path.resolve(__dirname, "node_modules"),
path.resolve(__dirname, "../.."),
],
alias: {
"@kiwicom/orbit-components": path.resolve(__dirname),
},
},
module: {
rules: [
{
test: /\.css$/i,
sideEffects: true,
exclude: /node_modules/,
use: [
require.resolve("style-loader"),
require.resolve("css-loader"),
{
loader: require.resolve("postcss-loader"),
options: {
postcssOptions: {
plugins: [require.resolve("tailwindcss"), require.resolve("autoprefixer")],
},
},
},
],
},
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
},
},
},
],
},
}),
};
15 changes: 15 additions & 0 deletions packages/orbit-components/playroom/FrameComponent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import * as React from "react";
import "./index.css";

import { OrbitProvider } from "../src";
import defaultTheme from "../src/defaultTheme";

// Wrap all examples in OrbitProvider for proper theming
const FrameComponent = ({ children }) => {
return (
<OrbitProvider theme={defaultTheme} useId={React.useId}>
<div style={{ padding: "20px" }}>{children}</div>
</OrbitProvider>
);
};
export default FrameComponent;
3 changes: 3 additions & 0 deletions packages/orbit-components/playroom/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
39 changes: 39 additions & 0 deletions packages/orbit-components/playroom/snippets.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
interface Snippet {
group: string;
name: string;
code: string;
}

const snippets: Snippet[] = [
{
group: "Basic Components",
name: "Button Primary",
code: `<Button>Click me</Button>`,
},
{
group: "Basic Components",
name: "Alert Info",
code: `<Alert type="info">This is an informational message</Alert>`,
},
{
group: "Forms",
name: "Input Field",
code: `<InputField label="Username" placeholder="Enter your username" />`,
},
{
group: "Layout",
name: "Card with Content",
code: `
<Card>
<CardSection>
<Stack>
<Heading type="title3">Card Title</Heading>
<Text>This is some content inside a card.</Text>
<Button>Learn More</Button>
</Stack>
</CardSection>
</Card>`,
},
];

export default snippets;
2 changes: 2 additions & 0 deletions packages/orbit-components/playroomComponents.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// Re-export components from Orbit
export * from "@kiwicom/orbit-components";
Loading

0 comments on commit 1b9e1de

Please sign in to comment.