Skip to content

Commit

Permalink
chore: add playroom setup
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 b508f0c
Show file tree
Hide file tree
Showing 8 changed files with 2,960 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
57 changes: 57 additions & 0 deletions packages/orbit-components/playroom.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
const path = require("path");

module.exports = {
title: "Orbit Playroom",
components: "./playroomComponents.ts",
outputPath: "./.playroom",
frameComponent: "./playroom/FrameComponent.tsx",
port: 9000,
openBrowser: false,
widths: [320, 768, 1024, 1440],
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$/,
sideEffects: true,
use: [
"style-loader",
{
loader: "css-loader",
options: { importLoaders: 1 },
},
{
loader: "postcss-loader",
options: { implementation: require.resolve("postcss") },
},
],
},
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
},
},
},
],
},
}),
};
13 changes: 13 additions & 0 deletions packages/orbit-components/playroom/FrameComponent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from "react";

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

// Wrap all examples in OrbitProvider for proper theming
export default function FrameComponent({ children }) {
return (
<OrbitProvider theme={defaultTheme} useId={React.useId}>
<div style={{ padding: "20px" }}>{children}</div>
</OrbitProvider>
);
}
31 changes: 31 additions & 0 deletions packages/orbit-components/playroom/snippets.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
export default [
{
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>`,
},
];
33 changes: 33 additions & 0 deletions packages/orbit-components/playroomComponents.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
// Re-export components from Orbit
export {
Alert,
AlertButton,
Badge,
Box,
Button,
ButtonLink,
Card,
CardSection,
Checkbox,
ChoiceGroup,
Heading,
Icon,
InputField,
InputGroup,
InputSelect,
List,
ListItem,
Loading,
Modal,
ModalHeader,
ModalSection,
ModalFooter,
Popover,
Select,
Stack,
Tag,
Text,
TextLink,
Tooltip,
OrbitProvider,
} from "./src";
Loading

0 comments on commit b508f0c

Please sign in to comment.