@xyd-js/storybook 0.0.1-xyd.5 → 0.0.1-xyd.7

package/.storybook/preview.ts

@@ -1,8 +1,6 @@
 import type {Preview} from "@storybook/react";
 
-import "@xyd-js/atlas/index.css"
-import "@xyd-js/atlas/tokens.css"
-import "@xyd-js/fable-wiki/theme.css" // TODO: remove in the future but now it imports fonts, and other xyd-js components css
+import "@xyd-js/theme-poetry/index.css" // TODO: in the future configurable themes via UI?
 
 import './styles.css'
 

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @xyd-js/storybook
 
+## 0.0.1-xyd.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.13
+  - @xyd-js/components@0.1.0-xyd.8
+  - @xyd-js/content@0.1.0-xyd.11
+  - @xyd-js/theme-poetry@0.1.0-xyd.24
+  - @xyd-js/ui@0.1.0-xyd.13
+  - @xyd-js/fable-wiki@0.1.0-xyd.11
+
+## 0.0.1-xyd.6
+
+### Patch Changes
+
+- @xyd-js/fable-wiki@0.1.0-xyd.10
+
 ## 0.0.1-xyd.5
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 xyd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/storybook",
-  "version": "0.0.1-xyd.5",
+  "version": "0.0.1-xyd.7",
   "type": "module",
   "dependencies": {
     "@mdx-js/react": "^3.0.1",
@@ -11,11 +11,12 @@
     "react-dom": "^19.0.0",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.0",
-    "@xyd-js/atlas": "0.1.0-xyd.12",
-    "@xyd-js/components": "0.1.0-xyd.7",
-    "@xyd-js/fable-wiki": "0.1.0-xyd.9",
-    "@xyd-js/ui": "0.1.0-xyd.12",
-    "@xyd-js/content": "0.1.0-xyd.10"
+    "@xyd-js/atlas": "0.1.0-xyd.13",
+    "@xyd-js/components": "0.1.0-xyd.8",
+    "@xyd-js/content": "0.1.0-xyd.11",
+    "@xyd-js/ui": "0.1.0-xyd.13",
+    "@xyd-js/theme-poetry": "0.1.0-xyd.24",
+    "@xyd-js/fable-wiki": "0.1.0-xyd.11"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",

package/src/docs/components/writer/Badge.stories.tsx

@@ -1,44 +1,53 @@
-import React, {} from 'react';
-import type {Meta} from '@storybook/react';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge, type BadgeStyles } from '@xyd-js/components/writer';
+import { useStyle } from '@xyd-js/components/utils';
 
-import {Badge} from "@xyd-js/components/writer";
+const meta: Meta<typeof Badge> = {
+    title: 'Writer/Badge',
+    component: Badge,
+    tags: ['autodocs'],
+};
 
-export default {
-    title: 'Components/Writer/Badge',
-} as Meta;
+export default meta;
+type Story = StoryObj<typeof Badge>;
 
-export const Default = () => {
-    return <div style={{
-        padding: "100px",
-        paddingTop: "0px",
-        margin: "0 auto",
-    }}>
-        <Badge kind="">
-            Default
-        </Badge>
-    </div>
-}
+// Basic usage
+export const Default: Story = {
+    args: {
+        children: 'Default Badge',
+        kind: 'warning',
+    },
+};
 
-export const Warning = () => {
-    return <div style={{
-        padding: "100px",
-        paddingTop: "0px",
-        margin: "0 auto",
-    }}>
-        <Badge kind="warning">
-            Warning
-        </Badge>
-    </div>
-}
+// Custom styled version
+const CustomStyledBadge = () => {
+    const styled = useStyle<BadgeStyles>(Badge);
+    
+    // Override warning style
+    const warningClass = styled.BadgeHostWarning`
+        background-color: #fff3dc;
+        border: 2px solid #ffb020;
+    `;
 
-export const Info = () => {
-    return <div style={{
-        padding: "100px",
-        paddingTop: "0px",
-        margin: "0 auto",
-    }}>
-        <Badge kind="info">
-            Warning
-        </Badge>
-    </div>
-}
+    // Override info style
+    const infoClass = styled.BadgeHostInfo`
+        background-color: #d8f3ff;
+        border: 2px solid #0288d1;
+    `;
+
+    return (
+        <div style={{ display: 'flex', gap: '16px' }}>
+            <Badge kind="warning" className={warningClass}>
+                Custom Warning Badge
+            </Badge>
+            <Badge kind="info" className={infoClass}>
+                Custom Info Badge
+            </Badge>
+        </div>
+    );
+};
+
+export const CustomStyled: Story = {
+    render: () => <CustomStyledBadge />,
+};

package/storybook-static/index.html

@@ -143,7 +143,7 @@
         
       
         
-          window['STORYBOOK_FRAMEWORK'] = "/Users/zdunecki/Code/livesession/xyd/node_modules/.pnpm/@storybook+react-vite@8.6.11_@storybook+test@8.6.11_storybook@8.6.11_prettier@2.8.8___react-d_4nodhecrfvgvdw2hz4equw6f2y/node_modules/@storybook/react-vite";
+          window['STORYBOOK_FRAMEWORK'] = "/Users/zdunecki/Code/livesession/xyd/node_modules/.pnpm/@storybook+react-vite@8.6.11_@storybook+test@8.6.11_storybook@8.6.11_prettier@2.8.8___react-d_qc3pzf6vdi3esdwvuhmxvfzmg4/node_modules/@storybook/react-vite";
         
       
     </script>

package/storybook-static/index.json

@@ -1 +1 @@
-{"v":5,"entries":{"atlas-atlas--default":{"type":"story","id":"atlas-atlas--default","name":"Default","title":"Atlas/Atlas","importPath":"./src/docs/atlas/Atlas.stories.tsx","componentPath":"@xyd-js/atlas","tags":["dev","test"]},"atlas-atlasindex--default":{"type":"story","id":"atlas-atlasindex--default","name":"Default","title":"Atlas/AtlasIndex","importPath":"./src/docs/atlas/AtlasIndex.stories.tsx","componentPath":"@xyd-js/atlas/atlas-index","tags":["dev","test"]},"components-writer-badge--default":{"type":"story","id":"components-writer-badge--default","name":"Default","title":"Components/Writer/Badge","importPath":"./src/docs/components/writer/Badge.stories.tsx","tags":["dev","test"]},"components-writer-badge--warning":{"type":"story","id":"components-writer-badge--warning","name":"Warning","title":"Components/Writer/Badge","importPath":"./src/docs/components/writer/Badge.stories.tsx","tags":["dev","test"]},"components-writer-badge--info":{"type":"story","id":"components-writer-badge--info","name":"Info","title":"Components/Writer/Badge","importPath":"./src/docs/components/writer/Badge.stories.tsx","tags":["dev","test"]},"components-writer-breadcrumbs--default":{"type":"story","id":"components-writer-breadcrumbs--default","name":"Default","title":"Components/Writer/Breadcrumbs","importPath":"./src/docs/components/writer/Breadcrumbs.stories.tsx","tags":["dev","test"]},"components-writer-callout--default":{"type":"story","id":"components-writer-callout--default","name":"Default","title":"Components/Writer/Callout","importPath":"./src/docs/components/writer/Callout.stories.tsx","tags":["dev","test"]},"components-writer-guidecard--default":{"type":"story","id":"components-writer-guidecard--default","name":"Default","title":"Components/Writer/GuideCard","importPath":"./src/docs/components/writer/GuideCard.stories.tsx","tags":["dev","test"]},"components-writer-guidecard--grid":{"type":"story","id":"components-writer-guidecard--grid","name":"Grid","title":"Components/Writer/GuideCard","importPath":"./src/docs/components/writer/GuideCard.stories.tsx","tags":["dev","test"]},"components-writer-heading--default":{"type":"story","id":"components-writer-heading--default","name":"Default","title":"Components/Writer/Heading","importPath":"./src/docs/components/writer/Heading.stories.tsx","tags":["dev","test"]},"components-writer-navlinks--default":{"type":"story","id":"components-writer-navlinks--default","name":"Default","title":"Components/Writer/NavLinks","importPath":"./src/docs/components/writer/NavLinks.stories.tsx","tags":["dev","test"]},"components-writer-pre--default":{"type":"story","id":"components-writer-pre--default","name":"Default","title":"Components/Writer/Pre","importPath":"./src/docs/components/writer/Pre.stories.tsx","tags":["dev","test"]},"components-writer-steps--default":{"type":"story","id":"components-writer-steps--default","name":"Default","title":"Components/Writer/Steps","importPath":"./src/docs/components/writer/Steps.stories.tsx","tags":["dev","test"]},"components-writer-table--default":{"type":"story","id":"components-writer-table--default","name":"Default","title":"Components/Writer/Table","importPath":"./src/docs/components/writer/Table.stories.tsx","tags":["dev","test"]},"components-writer-table--v-2":{"type":"story","id":"components-writer-table--v-2","name":"V 2","title":"Components/Writer/Table","importPath":"./src/docs/components/writer/Table.stories.tsx","tags":["dev","test"]},"components-coder-codesample--default":{"type":"story","id":"components-coder-codesample--default","name":"Default","title":"Components/Coder/CodeSample","importPath":"./src/docs/components/coder/CodeSample.stories.tsx","tags":["dev","test"]},"components-brand-button--default":{"type":"story","id":"components-brand-button--default","name":"Default","title":"Components/Brand/Button","importPath":"./src/docs/components/brand/Button.stories.tsx","tags":["dev","test"]},"components-brand-button--secondary":{"type":"story","id":"components-brand-button--secondary","name":"Secondary","title":"Components/Brand/Button","importPath":"./src/docs/components/brand/Button.stories.tsx","tags":["dev","test"]},"components-brand-ctabanner--default":{"type":"story","id":"components-brand-ctabanner--default","name":"Default","title":"Components/Brand/CTABanner","importPath":"./src/docs/components/brand/CTABanner.stories.tsx","tags":["dev","test"]},"ui-nav--default":{"type":"story","id":"ui-nav--default","name":"Default","title":"UI/Nav","importPath":"./src/docs/ui/Nav.stories.tsx","tags":["dev","test"]},"ui-sidebar--default":{"type":"story","id":"ui-sidebar--default","name":"Default","title":"UI/Sidebar","importPath":"./src/docs/ui/Sidebar.stories.tsx","tags":["dev","test"]},"ui-subnav--default":{"type":"story","id":"ui-subnav--default","name":"Default","title":"UI/SubNav","importPath":"./src/docs/ui/SubNav.stories.tsx","tags":["dev","test"]},"themes--design-system":{"type":"story","id":"themes--design-system","name":"Design System","title":"Themes","importPath":"./src/docs/themes/themes-designsystem.stories.tsx","tags":["dev","test"]},"themes-default--default":{"type":"story","id":"themes-default--default","name":"Default","title":"Themes/Default","importPath":"./src/docs/themes/themes.stories.tsx","tags":["dev","test"]},"templates-pages--default":{"type":"story","id":"templates-pages--default","name":"Default","title":"Templates/Pages","importPath":"./src/docs/templates/CodeSample.stories.tsx","tags":["dev","test"]}}}
+{"v":5,"entries":{"atlas-atlas--default":{"type":"story","id":"atlas-atlas--default","name":"Default","title":"Atlas/Atlas","importPath":"./src/docs/atlas/Atlas.stories.tsx","componentPath":"@xyd-js/atlas","tags":["dev","test"]},"atlas-atlasindex--default":{"type":"story","id":"atlas-atlasindex--default","name":"Default","title":"Atlas/AtlasIndex","importPath":"./src/docs/atlas/AtlasIndex.stories.tsx","componentPath":"@xyd-js/atlas/atlas-index","tags":["dev","test"]},"components-writer-breadcrumbs--default":{"type":"story","id":"components-writer-breadcrumbs--default","name":"Default","title":"Components/Writer/Breadcrumbs","importPath":"./src/docs/components/writer/Breadcrumbs.stories.tsx","tags":["dev","test"]},"components-writer-callout--default":{"type":"story","id":"components-writer-callout--default","name":"Default","title":"Components/Writer/Callout","importPath":"./src/docs/components/writer/Callout.stories.tsx","tags":["dev","test"]},"components-writer-guidecard--default":{"type":"story","id":"components-writer-guidecard--default","name":"Default","title":"Components/Writer/GuideCard","importPath":"./src/docs/components/writer/GuideCard.stories.tsx","tags":["dev","test"]},"components-writer-guidecard--grid":{"type":"story","id":"components-writer-guidecard--grid","name":"Grid","title":"Components/Writer/GuideCard","importPath":"./src/docs/components/writer/GuideCard.stories.tsx","tags":["dev","test"]},"components-writer-heading--default":{"type":"story","id":"components-writer-heading--default","name":"Default","title":"Components/Writer/Heading","importPath":"./src/docs/components/writer/Heading.stories.tsx","tags":["dev","test"]},"components-writer-navlinks--default":{"type":"story","id":"components-writer-navlinks--default","name":"Default","title":"Components/Writer/NavLinks","importPath":"./src/docs/components/writer/NavLinks.stories.tsx","tags":["dev","test"]},"components-writer-pre--default":{"type":"story","id":"components-writer-pre--default","name":"Default","title":"Components/Writer/Pre","importPath":"./src/docs/components/writer/Pre.stories.tsx","tags":["dev","test"]},"components-writer-steps--default":{"type":"story","id":"components-writer-steps--default","name":"Default","title":"Components/Writer/Steps","importPath":"./src/docs/components/writer/Steps.stories.tsx","tags":["dev","test"]},"components-writer-table--default":{"type":"story","id":"components-writer-table--default","name":"Default","title":"Components/Writer/Table","importPath":"./src/docs/components/writer/Table.stories.tsx","tags":["dev","test"]},"components-writer-table--v-2":{"type":"story","id":"components-writer-table--v-2","name":"V 2","title":"Components/Writer/Table","importPath":"./src/docs/components/writer/Table.stories.tsx","tags":["dev","test"]},"components-coder-codesample--default":{"type":"story","id":"components-coder-codesample--default","name":"Default","title":"Components/Coder/CodeSample","importPath":"./src/docs/components/coder/CodeSample.stories.tsx","tags":["dev","test"]},"components-brand-button--default":{"type":"story","id":"components-brand-button--default","name":"Default","title":"Components/Brand/Button","importPath":"./src/docs/components/brand/Button.stories.tsx","tags":["dev","test"]},"components-brand-button--secondary":{"type":"story","id":"components-brand-button--secondary","name":"Secondary","title":"Components/Brand/Button","importPath":"./src/docs/components/brand/Button.stories.tsx","tags":["dev","test"]},"components-brand-ctabanner--default":{"type":"story","id":"components-brand-ctabanner--default","name":"Default","title":"Components/Brand/CTABanner","importPath":"./src/docs/components/brand/CTABanner.stories.tsx","tags":["dev","test"]},"ui-nav--default":{"type":"story","id":"ui-nav--default","name":"Default","title":"UI/Nav","importPath":"./src/docs/ui/Nav.stories.tsx","tags":["dev","test"]},"ui-sidebar--default":{"type":"story","id":"ui-sidebar--default","name":"Default","title":"UI/Sidebar","importPath":"./src/docs/ui/Sidebar.stories.tsx","tags":["dev","test"]},"ui-subnav--default":{"type":"story","id":"ui-subnav--default","name":"Default","title":"UI/SubNav","importPath":"./src/docs/ui/SubNav.stories.tsx","tags":["dev","test"]},"themes--design-system":{"type":"story","id":"themes--design-system","name":"Design System","title":"Themes","importPath":"./src/docs/themes/themes-designsystem.stories.tsx","tags":["dev","test"]},"themes-default--default":{"type":"story","id":"themes-default--default","name":"Default","title":"Themes/Default","importPath":"./src/docs/themes/themes.stories.tsx","tags":["dev","test"]},"writer-badge--docs":{"id":"writer-badge--docs","title":"Writer/Badge","name":"Docs","importPath":"./src/docs/components/writer/Badge.stories.tsx","type":"docs","tags":["dev","test","autodocs"],"storiesImports":[]},"writer-badge--default":{"type":"story","id":"writer-badge--default","name":"Default","title":"Writer/Badge","importPath":"./src/docs/components/writer/Badge.stories.tsx","componentPath":"@xyd-js/components/writer","tags":["dev","test","autodocs"]},"writer-badge--custom-styled":{"type":"story","id":"writer-badge--custom-styled","name":"Custom Styled","title":"Writer/Badge","importPath":"./src/docs/components/writer/Badge.stories.tsx","componentPath":"@xyd-js/components/writer","tags":["dev","test","autodocs"]},"templates-pages--default":{"type":"story","id":"templates-pages--default","name":"Default","title":"Templates/Pages","importPath":"./src/docs/templates/CodeSample.stories.tsx","tags":["dev","test"]}}}

package/storybook-static/project.json

@@ -1 +1 @@
-{"generatedAt":1743276508031,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{},"hasRouterPackage":false,"monorepo":"Nx","packageManager":{"type":"pnpm","version":"9.10.0","agent":"pnpm"},"features":{"experimentalRSC":true},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"8.6.11","storybookVersionSpecifier":"^8.3.5","language":"typescript","storybookPackages":{"@chromatic-com/storybook":{"version":"1.9.0"},"@storybook/addon-essentials":{"version":"8.6.11"},"@storybook/addon-interactions":{"version":"8.6.11"},"@storybook/addon-links":{"version":"8.6.11"},"@storybook/addon-onboarding":{"version":"8.6.11"},"@storybook/blocks":{"version":"8.6.11"},"@storybook/react":{"version":"8.6.11"},"@storybook/react-vite":{"version":"8.6.11"},"@storybook/test":{"version":"8.6.11"},"eslint-plugin-storybook":{"version":"0.9.0"},"storybook":{"version":"8.6.11"}},"addons":{"$SNIP/node_modules/.pnpm/@storybook+addon-onboarding@8.6.11_storybook@8.6.11_prettier@2.8.8_/node_modules/@storybook/addon-onboarding":{"version":null},"$SNIP/node_modules/.pnpm/@storybook+addon-links@8.6.11_react@19.1.0_storybook@8.6.11_prettier@2.8.8_/node_modules/@storybook/addon-links":{"version":null},"$SNIP/node_modules/.pnpm/@storybook+addon-essentials@8.6.11_@types+react@19.0.12_storybook@8.6.11_prettier@2.8.8_/node_modules/@storybook/addon-essentials":{"version":null},"$SNIP/node_modules/.pnpm/@chromatic-com+storybook@1.9.0_react@19.1.0/node_modules/@chromatic-com/storybook":{"version":null},"$SNIP/node_modules/.pnpm/@storybook+addon-interactions@8.6.11_storybook@8.6.11_prettier@2.8.8_/node_modules/@storybook/addon-interactions":{"version":null},"@storybook/addon-docs":{"version":"8.6.11"}}}
+{"generatedAt":1744047752613,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{},"hasRouterPackage":false,"monorepo":"Nx","packageManager":{"type":"pnpm","version":"9.10.0","agent":"pnpm"},"features":{"experimentalRSC":true},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"8.6.11","storybookVersionSpecifier":"^8.3.5","language":"typescript","storybookPackages":{"@chromatic-com/storybook":{"version":"1.9.0"},"@storybook/addon-essentials":{"version":"8.6.11"},"@storybook/addon-interactions":{"version":"8.6.11"},"@storybook/addon-links":{"version":"8.6.11"},"@storybook/addon-onboarding":{"version":"8.6.11"},"@storybook/blocks":{"version":"8.6.11"},"@storybook/react":{"version":"8.6.11"},"@storybook/react-vite":{"version":"8.6.11"},"@storybook/test":{"version":"8.6.11"},"eslint-plugin-storybook":{"version":"0.9.0"},"storybook":{"version":"8.6.11"}},"addons":{"$SNIP/node_modules/.pnpm/@storybook+addon-onboarding@8.6.11_storybook@8.6.11_prettier@2.8.8_/node_modules/@storybook/addon-onboarding":{"version":null},"$SNIP/node_modules/.pnpm/@storybook+addon-links@8.6.11_react@19.1.0_storybook@8.6.11_prettier@2.8.8_/node_modules/@storybook/addon-links":{"version":null},"$SNIP/node_modules/.pnpm/@storybook+addon-essentials@8.6.11_@types+react@19.0.12_storybook@8.6.11_prettier@2.8.8_/node_modules/@storybook/addon-essentials":{"version":null},"$SNIP/node_modules/.pnpm/@chromatic-com+storybook@1.9.0_react@19.1.0/node_modules/@chromatic-com/storybook":{"version":null},"$SNIP/node_modules/.pnpm/@storybook+addon-interactions@8.6.11_storybook@8.6.11_prettier@2.8.8_/node_modules/@storybook/addon-interactions":{"version":null},"@storybook/addon-docs":{"version":"8.6.11"}}}