@bezdenegsvarkinet/ui-library 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -2,18 +2,8 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
- const Button = ({ primary = false, size = "medium", backgroundColor, label, ...props }) => {
6
- const mode = primary ? "storybook-button--primary" : "storybook-button--secondary";
7
- return /* @__PURE__ */ jsxRuntime.jsx(
8
- "button",
9
- {
10
- type: "button",
11
- className: ["storybook-button bg-red-500! text-blue-500!", `storybook-button--${size}`, mode].join(" "),
12
- style: { backgroundColor },
13
- ...props,
14
- children: label
15
- }
16
- );
5
+ const Button = ({ label, ...props }) => {
6
+ return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bg-red-500 text-white", ...props, children: label });
17
7
  };
18
8
  const Header = ({ user, onLogin, onLogout, onCreateAccount }) => /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "storybook-header bg-pink-400!", children: [
19
9
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/stories/Button.tsx","../src/stories/Header.tsx","../src/stories/Page.tsx"],"sourcesContent":["export interface ButtonProps {\n\t/** Is this the principal call to action on the page? */\n\tprimary?: boolean\n\t/** What background color to use */\n\tbackgroundColor?: string\n\t/** How large should the button be? */\n\tsize?: 'small' | 'medium' | 'large'\n\t/** Button contents */\n\tlabel: string\n\t/** Optional click handler */\n\tonClick?: () => void\n}\n\n/** Primary UI component for user interaction */\nexport const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => {\n\tconst mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'\n\treturn (\n\t\t<button\n\t\t\ttype='button'\n\t\t\tclassName={['storybook-button bg-red-500! text-blue-500!', `storybook-button--${size}`, mode].join(' ')}\n\t\t\tstyle={{ backgroundColor }}\n\t\t\t{...props}\n\t\t>\n\t\t\t{label}\n\t\t</button>\n\t)\n}","import { Button } from './Button'\n\ntype User = {\n\tname: string\n}\n\nexport interface HeaderProps {\n\tuser?: User\n\tonLogin?: () => void\n\tonLogout?: () => void\n\tonCreateAccount?: () => void\n}\n\nexport const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (\n\t<header>\n\t\t<div className='storybook-header bg-pink-400!'>\n\t\t\t<div>\n\t\t\t\t<svg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t<path d='M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z' fill='#FFF' />\n\t\t\t\t\t\t<path d='M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z' fill='#555AB9' />\n\t\t\t\t\t\t<path d='M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z' fill='#91BAF8' />\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t\t<h1 className={'text-green-500'}>Acme</h1>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t{user ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<span className='welcome'>\n\t\t\t\t\t\t\tWelcome, <b>{user.name}</b>!\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<Button size='small' onClick={onLogout} label='Log out' />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Button size='small' onClick={onLogin} label='Log in' />\n\t\t\t\t\t\t<Button primary size='small' onClick={onCreateAccount} label='Sign up' />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t</header>\n)","import { Header } from './Header'\nimport { FC, useState } from 'react'\n\ntype User = {\n\tname: string\n}\n\nexport const Page: FC = () => {\n\tconst [user, setUser] = useState<User>()\n\n\treturn (\n\t\t<article>\n\t\t\t<Header\n\t\t\t\tuser={user}\n\t\t\t\tonLogin={() => setUser({ name: 'Jane Doe' })}\n\t\t\t\tonLogout={() => setUser(undefined)}\n\t\t\t\tonCreateAccount={() => setUser({ name: 'Jane Doe' })}\n\t\t\t/>\n\n\t\t\t<section className='storybook-page'>\n\t\t\t\t<h2>Pages in Storybook</h2>\n\t\t\t\t<p>\n\t\t\t\t\tWe recommend building UIs with a{' '}\n\t\t\t\t\t<a href='https://componentdriven.org' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\t<strong>component-driven</strong>\n\t\t\t\t\t</a>{' '}\n\t\t\t\t\tprocess starting with atomic components and ending with pages.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tRender pages with mock data. This makes it easy to build and review page states without needing to navigate to\n\t\t\t\t\tthem in your app. Here are some handy patterns for managing page data in Storybook:\n\t\t\t\t</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tUse a higher-level connected component. Storybook helps you compose such data from the \"args\" of child\n\t\t\t\t\t\tcomponent stories\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tAssemble data in the page component from your services. You can mock these services out using Storybook.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>\n\t\t\t\t\tGet a guided tutorial on component-driven development at{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/tutorials/' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tStorybook tutorials\n\t\t\t\t\t</a>\n\t\t\t\t\t. Read more in the{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/docs' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tdocs\n\t\t\t\t\t</a>\n\t\t\t\t\t.\n\t\t\t\t</p>\n\t\t\t\t<div className='tip-wrapper'>\n\t\t\t\t\t<span className='tip'>Tip</span> Adjust the width of the canvas with the{' '}\n\t\t\t\t\t<svg width='10' height='10' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td='M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z'\n\t\t\t\t\t\t\t\tid='a'\n\t\t\t\t\t\t\t\tfill='#999'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</svg>\n\t\t\t\t\tViewports addon in the toolbar\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</article>\n\t)\n}"],"names":["jsx","jsxs","Fragment","useState"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/stories/Button.tsx","../src/stories/Header.tsx","../src/stories/Page.tsx"],"sourcesContent":["export interface ButtonProps {\n\t/** Is this the principal call to action on the page? */\n\tprimary?: boolean\n\t/** What background color to use */\n\tbackgroundColor?: string\n\t/** How large should the button be? */\n\tsize?: 'small' | 'medium' | 'large'\n\t/** Button contents */\n\tlabel: string\n\t/** Optional click handler */\n\tonClick?: () => void\n}\n\n/** Primary UI component for user interaction */\nexport const Button = ({ label, ...props }: ButtonProps) => {\n\treturn (\n\t\t<button type='button' className={'bg-red-500 text-white'} {...props}>\n\t\t\t{label}\n\t\t</button>\n\t)\n}","import { Button } from './Button'\n\ntype User = {\n\tname: string\n}\n\nexport interface HeaderProps {\n\tuser?: User\n\tonLogin?: () => void\n\tonLogout?: () => void\n\tonCreateAccount?: () => void\n}\n\nexport const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (\n\t<header>\n\t\t<div className='storybook-header bg-pink-400!'>\n\t\t\t<div>\n\t\t\t\t<svg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t<path d='M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z' fill='#FFF' />\n\t\t\t\t\t\t<path d='M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z' fill='#555AB9' />\n\t\t\t\t\t\t<path d='M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z' fill='#91BAF8' />\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t\t<h1 className={'text-green-500'}>Acme</h1>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t{user ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<span className='welcome'>\n\t\t\t\t\t\t\tWelcome, <b>{user.name}</b>!\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<Button size='small' onClick={onLogout} label='Log out' />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Button size='small' onClick={onLogin} label='Log in' />\n\t\t\t\t\t\t<Button primary size='small' onClick={onCreateAccount} label='Sign up' />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t</header>\n)","import { Header } from './Header'\nimport { FC, useState } from 'react'\n\ntype User = {\n\tname: string\n}\n\nexport const Page: FC = () => {\n\tconst [user, setUser] = useState<User>()\n\n\treturn (\n\t\t<article>\n\t\t\t<Header\n\t\t\t\tuser={user}\n\t\t\t\tonLogin={() => setUser({ name: 'Jane Doe' })}\n\t\t\t\tonLogout={() => setUser(undefined)}\n\t\t\t\tonCreateAccount={() => setUser({ name: 'Jane Doe' })}\n\t\t\t/>\n\n\t\t\t<section className='storybook-page'>\n\t\t\t\t<h2>Pages in Storybook</h2>\n\t\t\t\t<p>\n\t\t\t\t\tWe recommend building UIs with a{' '}\n\t\t\t\t\t<a href='https://componentdriven.org' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\t<strong>component-driven</strong>\n\t\t\t\t\t</a>{' '}\n\t\t\t\t\tprocess starting with atomic components and ending with pages.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tRender pages with mock data. This makes it easy to build and review page states without needing to navigate to\n\t\t\t\t\tthem in your app. Here are some handy patterns for managing page data in Storybook:\n\t\t\t\t</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tUse a higher-level connected component. Storybook helps you compose such data from the \"args\" of child\n\t\t\t\t\t\tcomponent stories\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tAssemble data in the page component from your services. You can mock these services out using Storybook.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>\n\t\t\t\t\tGet a guided tutorial on component-driven development at{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/tutorials/' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tStorybook tutorials\n\t\t\t\t\t</a>\n\t\t\t\t\t. Read more in the{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/docs' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tdocs\n\t\t\t\t\t</a>\n\t\t\t\t\t.\n\t\t\t\t</p>\n\t\t\t\t<div className='tip-wrapper'>\n\t\t\t\t\t<span className='tip'>Tip</span> Adjust the width of the canvas with the{' '}\n\t\t\t\t\t<svg width='10' height='10' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td='M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z'\n\t\t\t\t\t\t\t\tid='a'\n\t\t\t\t\t\t\t\tfill='#999'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</svg>\n\t\t\t\t\tViewports addon in the toolbar\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</article>\n\t)\n}"],"names":["jsx","jsxs","Fragment","useState"],"mappings":"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"}
package/dist/index.mjs CHANGED
@@ -1,17 +1,7 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import { useState } from "react";
3
- const Button = ({ primary = false, size = "medium", backgroundColor, label, ...props }) => {
4
- const mode = primary ? "storybook-button--primary" : "storybook-button--secondary";
5
- return /* @__PURE__ */ jsx(
6
- "button",
7
- {
8
- type: "button",
9
- className: ["storybook-button bg-red-500! text-blue-500!", `storybook-button--${size}`, mode].join(" "),
10
- style: { backgroundColor },
11
- ...props,
12
- children: label
13
- }
14
- );
3
+ const Button = ({ label, ...props }) => {
4
+ return /* @__PURE__ */ jsx("button", { type: "button", className: "bg-red-500 text-white", ...props, children: label });
15
5
  };
16
6
  const Header = ({ user, onLogin, onLogout, onCreateAccount }) => /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsxs("div", { className: "storybook-header bg-pink-400!", children: [
17
7
  /* @__PURE__ */ jsxs("div", { children: [
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../src/stories/Button.tsx","../src/stories/Header.tsx","../src/stories/Page.tsx"],"sourcesContent":["export interface ButtonProps {\n\t/** Is this the principal call to action on the page? */\n\tprimary?: boolean\n\t/** What background color to use */\n\tbackgroundColor?: string\n\t/** How large should the button be? */\n\tsize?: 'small' | 'medium' | 'large'\n\t/** Button contents */\n\tlabel: string\n\t/** Optional click handler */\n\tonClick?: () => void\n}\n\n/** Primary UI component for user interaction */\nexport const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => {\n\tconst mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'\n\treturn (\n\t\t<button\n\t\t\ttype='button'\n\t\t\tclassName={['storybook-button bg-red-500! text-blue-500!', `storybook-button--${size}`, mode].join(' ')}\n\t\t\tstyle={{ backgroundColor }}\n\t\t\t{...props}\n\t\t>\n\t\t\t{label}\n\t\t</button>\n\t)\n}","import { Button } from './Button'\n\ntype User = {\n\tname: string\n}\n\nexport interface HeaderProps {\n\tuser?: User\n\tonLogin?: () => void\n\tonLogout?: () => void\n\tonCreateAccount?: () => void\n}\n\nexport const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (\n\t<header>\n\t\t<div className='storybook-header bg-pink-400!'>\n\t\t\t<div>\n\t\t\t\t<svg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t<path d='M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z' fill='#FFF' />\n\t\t\t\t\t\t<path d='M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z' fill='#555AB9' />\n\t\t\t\t\t\t<path d='M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z' fill='#91BAF8' />\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t\t<h1 className={'text-green-500'}>Acme</h1>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t{user ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<span className='welcome'>\n\t\t\t\t\t\t\tWelcome, <b>{user.name}</b>!\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<Button size='small' onClick={onLogout} label='Log out' />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Button size='small' onClick={onLogin} label='Log in' />\n\t\t\t\t\t\t<Button primary size='small' onClick={onCreateAccount} label='Sign up' />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t</header>\n)","import { Header } from './Header'\nimport { FC, useState } from 'react'\n\ntype User = {\n\tname: string\n}\n\nexport const Page: FC = () => {\n\tconst [user, setUser] = useState<User>()\n\n\treturn (\n\t\t<article>\n\t\t\t<Header\n\t\t\t\tuser={user}\n\t\t\t\tonLogin={() => setUser({ name: 'Jane Doe' })}\n\t\t\t\tonLogout={() => setUser(undefined)}\n\t\t\t\tonCreateAccount={() => setUser({ name: 'Jane Doe' })}\n\t\t\t/>\n\n\t\t\t<section className='storybook-page'>\n\t\t\t\t<h2>Pages in Storybook</h2>\n\t\t\t\t<p>\n\t\t\t\t\tWe recommend building UIs with a{' '}\n\t\t\t\t\t<a href='https://componentdriven.org' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\t<strong>component-driven</strong>\n\t\t\t\t\t</a>{' '}\n\t\t\t\t\tprocess starting with atomic components and ending with pages.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tRender pages with mock data. This makes it easy to build and review page states without needing to navigate to\n\t\t\t\t\tthem in your app. Here are some handy patterns for managing page data in Storybook:\n\t\t\t\t</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tUse a higher-level connected component. Storybook helps you compose such data from the \"args\" of child\n\t\t\t\t\t\tcomponent stories\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tAssemble data in the page component from your services. You can mock these services out using Storybook.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>\n\t\t\t\t\tGet a guided tutorial on component-driven development at{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/tutorials/' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tStorybook tutorials\n\t\t\t\t\t</a>\n\t\t\t\t\t. Read more in the{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/docs' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tdocs\n\t\t\t\t\t</a>\n\t\t\t\t\t.\n\t\t\t\t</p>\n\t\t\t\t<div className='tip-wrapper'>\n\t\t\t\t\t<span className='tip'>Tip</span> Adjust the width of the canvas with the{' '}\n\t\t\t\t\t<svg width='10' height='10' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td='M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z'\n\t\t\t\t\t\t\t\tid='a'\n\t\t\t\t\t\t\t\tfill='#999'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</svg>\n\t\t\t\t\tViewports addon in the toolbar\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</article>\n\t)\n}"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.mjs","sources":["../src/stories/Button.tsx","../src/stories/Header.tsx","../src/stories/Page.tsx"],"sourcesContent":["export interface ButtonProps {\n\t/** Is this the principal call to action on the page? */\n\tprimary?: boolean\n\t/** What background color to use */\n\tbackgroundColor?: string\n\t/** How large should the button be? */\n\tsize?: 'small' | 'medium' | 'large'\n\t/** Button contents */\n\tlabel: string\n\t/** Optional click handler */\n\tonClick?: () => void\n}\n\n/** Primary UI component for user interaction */\nexport const Button = ({ label, ...props }: ButtonProps) => {\n\treturn (\n\t\t<button type='button' className={'bg-red-500 text-white'} {...props}>\n\t\t\t{label}\n\t\t</button>\n\t)\n}","import { Button } from './Button'\n\ntype User = {\n\tname: string\n}\n\nexport interface HeaderProps {\n\tuser?: User\n\tonLogin?: () => void\n\tonLogout?: () => void\n\tonCreateAccount?: () => void\n}\n\nexport const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (\n\t<header>\n\t\t<div className='storybook-header bg-pink-400!'>\n\t\t\t<div>\n\t\t\t\t<svg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t<path d='M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z' fill='#FFF' />\n\t\t\t\t\t\t<path d='M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z' fill='#555AB9' />\n\t\t\t\t\t\t<path d='M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z' fill='#91BAF8' />\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t\t<h1 className={'text-green-500'}>Acme</h1>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t{user ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<span className='welcome'>\n\t\t\t\t\t\t\tWelcome, <b>{user.name}</b>!\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<Button size='small' onClick={onLogout} label='Log out' />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Button size='small' onClick={onLogin} label='Log in' />\n\t\t\t\t\t\t<Button primary size='small' onClick={onCreateAccount} label='Sign up' />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t</header>\n)","import { Header } from './Header'\nimport { FC, useState } from 'react'\n\ntype User = {\n\tname: string\n}\n\nexport const Page: FC = () => {\n\tconst [user, setUser] = useState<User>()\n\n\treturn (\n\t\t<article>\n\t\t\t<Header\n\t\t\t\tuser={user}\n\t\t\t\tonLogin={() => setUser({ name: 'Jane Doe' })}\n\t\t\t\tonLogout={() => setUser(undefined)}\n\t\t\t\tonCreateAccount={() => setUser({ name: 'Jane Doe' })}\n\t\t\t/>\n\n\t\t\t<section className='storybook-page'>\n\t\t\t\t<h2>Pages in Storybook</h2>\n\t\t\t\t<p>\n\t\t\t\t\tWe recommend building UIs with a{' '}\n\t\t\t\t\t<a href='https://componentdriven.org' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\t<strong>component-driven</strong>\n\t\t\t\t\t</a>{' '}\n\t\t\t\t\tprocess starting with atomic components and ending with pages.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tRender pages with mock data. This makes it easy to build and review page states without needing to navigate to\n\t\t\t\t\tthem in your app. Here are some handy patterns for managing page data in Storybook:\n\t\t\t\t</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tUse a higher-level connected component. Storybook helps you compose such data from the \"args\" of child\n\t\t\t\t\t\tcomponent stories\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tAssemble data in the page component from your services. You can mock these services out using Storybook.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>\n\t\t\t\t\tGet a guided tutorial on component-driven development at{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/tutorials/' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tStorybook tutorials\n\t\t\t\t\t</a>\n\t\t\t\t\t. Read more in the{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/docs' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tdocs\n\t\t\t\t\t</a>\n\t\t\t\t\t.\n\t\t\t\t</p>\n\t\t\t\t<div className='tip-wrapper'>\n\t\t\t\t\t<span className='tip'>Tip</span> Adjust the width of the canvas with the{' '}\n\t\t\t\t\t<svg width='10' height='10' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td='M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z'\n\t\t\t\t\t\t\t\tid='a'\n\t\t\t\t\t\t\t\tfill='#999'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</svg>\n\t\t\t\t\tViewports addon in the toolbar\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</article>\n\t)\n}"],"names":[],"mappings":"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"}
@@ -20,8 +20,8 @@
20
20
  "Courier New", monospace;
21
21
  --color-red-500: oklch(63.7% .237 25.331);
22
22
  --color-green-500: oklch(72.3% .219 149.579);
23
- --color-blue-500: oklch(62.3% .214 259.815);
24
23
  --color-pink-400: oklch(71.8% .202 349.761);
24
+ --color-white: #fff;
25
25
  --default-font-family: var(--font-sans);
26
26
  --default-mono-font-family: var(--font-mono);
27
27
  }
@@ -310,17 +310,17 @@
310
310
  background-color: var(--color-pink-400) !important;
311
311
  }
312
312
 
313
- .bg-red-500\! {
314
- background-color: var(--color-red-500) !important;
315
- }
316
-
317
- .text-blue-500\! {
318
- color: var(--color-blue-500) !important;
313
+ .bg-red-500 {
314
+ background-color: var(--color-red-500);
319
315
  }
320
316
 
321
317
  .text-green-500 {
322
318
  color: var(--color-green-500);
323
319
  }
320
+
321
+ .text-white {
322
+ color: var(--color-white);
323
+ }
324
324
  }
325
325
 
326
326
  :root {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bezdenegsvarkinet/ui-library",
3
3
  "private": false,
4
- "version": "0.1.2",
4
+ "version": "0.1.4",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"
@@ -40,9 +40,6 @@
40
40
  "react-dom": "^18.0.0 || ^19.0.0",
41
41
  "tailwindcss": "^4.2.1"
42
42
  },
43
- "dependencies": {
44
- "@tailwindcss/vite": "^4.2.1"
45
- },
46
43
  "devDependencies": {
47
44
  "@changesets/cli": "^2.29.8",
48
45
  "@chromatic-com/storybook": "^5.0.1",
@@ -51,6 +48,7 @@
51
48
  "@storybook/addon-docs": "^10.2.13",
52
49
  "@storybook/addon-vitest": "^10.2.13",
53
50
  "@storybook/react-vite": "^10.2.13",
51
+ "@tailwindcss/vite": "^4.2.1",
54
52
  "@types/node": "^24.10.1",
55
53
  "@types/react": "^19.2.7",
56
54
  "@types/react-dom": "^19.2.3",