plone · sneridagh · Feb 23, 2024 · Feb 23, 2024 · Feb 23, 2024
diff --git a/packages/components/.storybook/Logo.svg b/packages/components/.storybook/Logo.svg
diff --git a/packages/components/.storybook/main.ts b/packages/components/.storybook/main.ts
@@ -9,7 +9,6 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/addon-mdx-gfm',
   ],
   framework: {
     name: '@storybook/react-vite',

diff --git a/packages/components/.storybook/manager.js b/packages/components/.storybook/manager.js
@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});
diff --git a/packages/components/.storybook/preview.ts b/packages/components/.storybook/preview.ts
@@ -1,3 +1,5 @@
+import './storybook-base.css';
+
 export const parameters = {
   backgrounds: {
     default: 'light',

diff --git a/packages/components/.storybook/storybook-base.css b/packages/components/.storybook/storybook-base.css
@@ -0,0 +1,15 @@
+/* Base styles */
+:root {
+  --basic-font-family: system-ui;
+  --basic-font-size: 16px;
+  background: var(--background-color);
+  font-family: var(--basic-font-family);
+  font-size: var(--basic-font-size);
+  line-height: 1.5;
+}
+
+.sbdocs.sbdocs-content {
+  p {
+    font-size: 16px;
+  }
+}
diff --git a/packages/components/.storybook/theme.ts b/packages/components/.storybook/theme.ts
@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming/create';
+import logo from './Logo.svg';
+
+export default create({
+  base: 'light',
+  brandTitle: '@plone/components StoryBook',
+  brandUrl: 'https://plone-components.netlify.app/',
+  brandImage: logo,
+  brandTarget: '_self',
+});
diff --git a/packages/components/news/5791.bugfix b/packages/components/news/5791.bugfix
@@ -0,0 +1 @@
+Move basic general CSS rules to StoryBook so we don't spoil the build @sneridagh
diff --git a/packages/components/news/5791.internal b/packages/components/news/5791.internal
@@ -0,0 +1 @@
+Improve StoryBook look and feel @sneridagh
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -91,9 +91,11 @@
     "@storybook/addon-links": "^7.5.1",
     "@storybook/addon-mdx-gfm": "^7.5.1",
     "@storybook/blocks": "^7.5.1",
+    "@storybook/manager-api": "^7.6.17",
     "@storybook/react": "^7.5.1",
     "@storybook/react-vite": "^7.5.1",
     "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.6.17",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@types/jest-axe": "^3.5.7",

diff --git a/packages/components/src/stories/Introduction.stories.mdx b/packages/components/src/stories/Introduction.stories.mdx
@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Introduction" />
+
+
+# `@plone/components`
+
+This package contains ReactJS components for using Plone as a headless CMS.
+
+The purpose of this package is to provide an agnostic set of baseline components to build Plone sites upon.
+
+## Usage
+
+Using the package manager of your choice (npm, yarn, pnpm) install the package:
+
+```shell
+yarn add @plone/components
+```
+
+Whenever you want to use the components, all are exported as named exports:
+
+```ts
+import { TextField } from '@plone/components';
+
+const MyComponent = (props) => {
+  return (
+    <>
+      <TextField label="Username" />
+    </>;
+  )
+}
+
+export default MyComponent;
+```
+
diff --git a/packages/components/src/styles/basic/theme.css b/packages/components/src/styles/basic/theme.css
@@ -1,15 +1,5 @@
 @import '../quanta/colors.css';
 
-/* Base styles */
-:root {
-  --basic-font-family: system-ui;
-  --basic-font-size: 14px;
-  background: var(--background-color);
-  font-family: var(--basic-font-family);
-  font-size: var(--basic-font-size);
-  line-height: 1.5;
-}
-
 /* color themes for dark and light modes, generated with Leonardo.
  * Light: https://leonardocolor.io/theme.html?name=Light&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A98%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
 :root {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Move basic general CSS rules to StoryBook so we don't spoil the build @sneridagh