@veevarts/design-system 0.0.1 → 0.1.0

package/README.md

@@ -2,276 +2,70 @@
 
 This repository contains our **Design System**: a shared library of reusable UI components, design tokens, and utilities built with **React**, **TypeScript**, **Vite**, and **Storybook**.
 
-The goal of this project is to provide:
+## Goals
 
 - A **single source of truth** for UI across products.
 - **Reusable, well-typed, accessible components**.
 - **Discoverable documentation** via Storybook.
 
----
-
 ## Tech Stack
 
-- **React + TypeScript** – Component library implementation.
-- **Vite** – Fast dev server and build tooling.
-- **Storybook** – Component explorer and documentation.
-- **ESLint + TypeScript ESLint** – Linting and type-aware rules.
-- (Optional) **React Compiler** – Can be enabled if needed (see note below).
-
----
+- React + TypeScript
+- Vite
+- Storybook
+- ESLint + TypeScript ESLint
 
 ## Getting Started
 
 ### Prerequisites
 
 - Node.js (LTS, e.g. 18+ recommended)
-- pnpm / npm / yarn (examples below use `npm`)
+- npm / pnpm / yarn
 
-### Install dependencies
+### Install
 
 ```bash
 npm install
 ```
 
-### Run Storybook (recommended entrypoint)
+### Run Storybook
+
 ```bash
 npm run storybook
 ```
 
-This starts Storybook at http://localhost:6006 (or the configured port), where you can browse and interact with all components.
+### Run Dev Server
 
-### Run the Vite dev server (if applicable)
-
-If this repo also includes a small playground app:
 ```bash
 npm run dev
 ```
 
-This will start the Vite dev server (usually at http://localhost:5173).
-
 ### Build
 
-Build the component library / app:
 ```bash
 npm run build
 ```
-Build the Storybook static site (for deployment):
-```bash
-npm run build-storybook
-```
-npm run build-storybook
-```bash
-npm run build-storybook
-```
+
 ### Lint
+
 ```bash
 npm run lint
 ```
 
-## Project Structure (suggested)
+## Project Structure
 
-Your structure may vary slightly, but the Design System generally follows:
 ```
 src/
   components/
-    Button/
-      Button.tsx
-      Button.types.ts
-      Button.stories.tsx
-      Button.test.tsx     # if using tests
-      index.ts
-    Input/
-      ...
   styles/
-    tokens.css            # or tokens.ts, etc.
   utils/
-    ...
 .storybook/
-  main.ts
-  preview.tsx
 ```
 
-## Creating a New Reusable Component
-
-When adding a new component to the Design System, follow these steps:
-1.	Create a folder under src/components
-
-Example: src/components/Button.
-	
-2.	Create the component file
--	Use TypeScript and function components.
-- Export a named component and a typed props interface.
-
-  ```tsx
-  // src/components/Button/Button.tsx
-  import type { ButtonHTMLAttributes, ReactNode } from 'react';
-
-  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'ghost';
-    size?: 'sm' | 'md' | 'lg';
-    isLoading?: boolean;
-    children: ReactNode;
-  }
-
-  export function Button({
-    variant = 'primary',
-    size = 'md',
-    isLoading = false,
-    children,
-    ...rest
-  }: ButtonProps) {
-    return (
-      <button
-        data-variant={variant}
-        data-size={size}
-        aria-busy={isLoading || undefined}
-        {...rest}
-      >
-        {isLoading ? 'Loading…' : children}
-      </button>
-    );
-  }
-  ```
-3. Create an index.ts barrel file
-
-    ```tsx
-    // src/components/Button/index.ts
-    export * from './Button';
-    ```
-4.	Create the Storybook stories
-  - Stories should live next to the component: Button.stories.tsx.
-  - Use Storybook CSF (default export + named stories).
-  - Document variants, states, and usage guidelines via args and docs.
-
-    ```tsx
-    // src/components/Button/Button.stories.tsx
-    import type { Meta, StoryObj } from '@storybook/react';
-    import { Button } from './Button';
-
-    const meta: Meta<typeof Button> = {
-      title: 'Components/Button',
-      component: Button,
-      args: {
-        children: 'Click me',
-        variant: 'primary',
-        size: 'md',
-      },
-    };
-
-    export default meta;
-    type Story = StoryObj<typeof Button>;
-
-    export const Primary: Story = {};
-    export const Secondary: Story = {
-      args: { variant: 'secondary' },
-    };
-    export const Loading: Story = {
-      args: { isLoading: true },
-    };
-    ```
-
-5.	Add tests
-- If the project uses a test runner (e.g. Vitest / Jest), add Button.test.tsx with basic behavior and accessibility tests.
-
-## Guidelines & Best Practices for Reusable Components
-
-1. Design System Principles
-- Generic, not app-specific
-Components must not depend on product-specific business logic. Keep them generic and configurable via props.
-- Composition over configuration
-Prefer small building blocks that can be composed, instead of monolithic components with many boolean flags.
-- Single responsibility
-Each component should do one thing well (e.g. Button, Input, Modal, Tooltip).
-- Stable API
-Avoid frequent breaking changes to props. If a change is necessary, deprecate carefully and communicate it.
-
-2. TypeScript & Props
-- Always export a typed props interface (ButtonProps, ModalProps, etc.).
-- Follow these patterns:
-- Use union types for variants ('primary' | 'secondary').
-- Prefer explicit props over any and broad object types.
-- Extend native HTML attributes when appropriate (e.g. ButtonHTMLAttributes<HTMLButtonElement>).
-- Provide sensible defaults for optional props.
-
-3. Styling & Theming
-- Use design tokens (colors, spacing, typography) instead of hard-coded values.
-- Keep component styling encapsulated and consistent:
-- Prefer using a shared tokens/styles system.
-- Avoid importing product-specific styles into the Design System.
-- Support variants and sizes through props, not through ad-hoc CSS classes.
-
-4. Accessibility (a11y)
-
-Every component should be built with accessibility in mind:
-- Ensure correct semantic elements (<button>, <label>, <input> etc.).
-- Use ARIA attributes only when necessary and correctly (avoid misusing them).
-- Keyboard support:
-- Focus states must be visible.
-- Interactive elements must be reachable and operable via keyboard.
-- Test with screen reader basics when possible (labels, roles, and announcements).
-
-5. Storybook Best Practices
-
-Stories are documentation, not just demos:
-- Provide a “Default” story that shows the most common usage.
-- Include stories for:
-- Different variants and sizes.
-- Loading / disabled / error states.
-- Edge cases that are relevant for consumers.
-- Use args so consumers can experiment via Storybook controls.
-- Use Storybook Docs to write short guidelines:
-- When to use the component.
-- Do’s & Don’ts.
-- Example integration snippets.
-
-6. Dependencies & Side Effects
-- Keep dependencies minimal and generic.
-- Avoid:
-- Direct calls to APIs.
-- Global singletons (e.g. accessing window without guards, global stores).
-- Side effects in component bodies (data fetching, logging, etc.).
-- If integration with external libraries is needed, wrap them in thin, replaceable adapters.
-
-## Linting & Type-Aware Rules
-
-For production-grade usage, we recommend enabling type-aware ESLint rules. A sample configuration using eslint.config.js might look like this:
+## Usage Example
 
 ```js
-// eslint.config.js
-import tseslint from 'typescript-eslint';
-import reactX from 'eslint-plugin-react-x';
-import reactDom from 'eslint-plugin-react-dom';
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Type-aware TypeScript rules
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, stricter rules:
-      // tseslint.configs.strictTypeChecked,
-      // Optional stylistic rules:
-      // tseslint.configs.stylisticTypeChecked,
-
-      // React-specific rules
-      reactX.configs['recommended-typescript'],
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-  },
-]);
+import { Button } from '@veevarts/design-system';
 ```
-Run npm run lint regularly, and ensure no new warnings or errors are introduced in pull requests.
 
-## Contributing
-- Before coding: Check if a similar component already exists or if an existing one can be extended.
-- Follow the guidelines above (types, a11y, tokens, stories).
-- Add or update stories so that your changes are visible in Storybook.
-- Run npm run lint and npm run test (if available) before opening a PR.
-- Keep PRs small and focused (one component or one concern per PR where possible).
+For contributing guidelines, see [CONTRIBUTING.md](./CONTRIBUTING.md).

package/dist/index.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react");var _={exports:{}},p={};var $;function ne(){if($)return p;$=1;var s=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function u(d,l,c){var m=null;if(c!==void 0&&(m=""+c),l.key!==void 0&&(m=""+l.key),"key"in l){c={};for(var h in l)h!=="key"&&(c[h]=l[h])}else c=l;return l=c.ref,{$$typeof:s,type:d,key:m,ref:l!==void 0?l:null,props:c}}return p.Fragment=i,p.jsx=u,p.jsxs=u,p}var b={};var M;function oe(){return M||(M=1,process.env.NODE_ENV!=="production"&&(function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ee?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case x:return"Fragment";case J:return"Profiler";case H:return"StrictMode";case X:return"Suspense";case Z:return"SuspenseList";case K:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case B:return e.displayName||"Context";case q:return(e._context.displayName||"Context")+".Consumer";case G:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Q:return t=e.displayName||null,t!==null?t:s(e.type)||"Memo";case E:t=e._payload,e=e._init;try{return s(e(t))}catch{}}return null}function i(e){return""+e}function u(e){try{i(e);var t=!1}catch{t=!0}if(t){t=console;var n=t.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),i(e)}}function d(e){if(e===x)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===E)return"<...>";try{var t=s(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function l(){var e=R.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function m(e){if(P.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function h(e,t){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function D(){var e=s(this.type);return C[e]||(C[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function U(e,t,n,o,g,y){var a=n.ref;return e={$$typeof:O,type:e,key:t,props:n,_owner:o},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:D}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:g}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:y}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,t,n,o,g,y){var a=t.children;if(a!==void 0)if(o)if(re(a)){for(o=0;o<a.length;o++)A(a[o]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else A(a);if(P.call(t,"key")){a=s(e);var f=Object.keys(t).filter(function(te){return te!=="key"});o=0<f.length?"{key: someKey, "+f.join(": ..., ")+": ...}":"{key: someKey}",z[a+o]||(f=0<f.length?"{"+f.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,a,f,a),z[a+o]=!0)}if(a=null,n!==void 0&&(u(n),a=""+n),m(t)&&(u(t.key),a=""+t.key),"key"in t){n={};for(var T in t)T!=="key"&&(n[T]=t[T])}else n=t;return a&&h(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),U(e,a,n,l(),g,y)}function A(e){S(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===E&&(e._payload.status==="fulfilled"?S(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function S(e){return typeof e=="object"&&e!==null&&e.$$typeof===O}var v=I,O=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),H=Symbol.for("react.strict_mode"),J=Symbol.for("react.profiler"),q=Symbol.for("react.consumer"),B=Symbol.for("react.context"),G=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),Z=Symbol.for("react.suspense_list"),Q=Symbol.for("react.memo"),E=Symbol.for("react.lazy"),K=Symbol.for("react.activity"),ee=Symbol.for("react.client.reference"),R=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,re=Array.isArray,k=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var N,C={},Y=v.react_stack_bottom_frame.bind(v,c)(),F=k(d(c)),z={};b.Fragment=x,b.jsx=function(e,t,n){var o=1e4>R.recentlyCreatedOwnerStacks++;return w(e,t,n,!1,o?Error("react-stack-top-frame"):Y,o?k(d(e)):F)},b.jsxs=function(e,t,n){var o=1e4>R.recentlyCreatedOwnerStacks++;return w(e,t,n,!0,o?Error("react-stack-top-frame"):Y,o?k(d(e)):F)}})()),b}var V;function ae(){return V||(V=1,process.env.NODE_ENV==="production"?_.exports=ne():_.exports=oe()),_.exports}var r=ae();const j=({primary:s=!1,size:i="medium",backgroundColor:u,label:d,...l})=>{const c=s?"storybook-button--primary":"storybook-button--secondary";return r.jsx("button",{type:"button",className:["storybook-button",`storybook-button--${i}`,c].join(" "),style:{backgroundColor:u},...l,children:d})},L=({user:s,onLogin:i,onLogout:u,onCreateAccount:d})=>r.jsx("header",{children:r.jsxs("div",{className:"storybook-header",children:[r.jsxs("div",{children:[r.jsx("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:r.jsxs("g",{fill:"none",fillRule:"evenodd",children:[r.jsx("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),r.jsx("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"}),r.jsx("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),r.jsx("h1",{children:"Acme"})]}),r.jsx("div",{children:s?r.jsxs(r.Fragment,{children:[r.jsxs("span",{className:"welcome",children:["Welcome, ",r.jsx("b",{children:s.name}),"!"]}),r.jsx(j,{size:"small",onClick:u,label:"Log out"})]}):r.jsxs(r.Fragment,{children:[r.jsx(j,{size:"small",onClick:i,label:"Log in"}),r.jsx(j,{primary:!0,size:"small",onClick:d,label:"Sign up"})]})})]})}),se=()=>{const[s,i]=I.useState();return r.jsxs("article",{children:[r.jsx(L,{user:s,onLogin:()=>i({name:"Jane Doe"}),onLogout:()=>i(void 0),onCreateAccount:()=>i({name:"Jane Doe"})}),r.jsxs("section",{className:"storybook-page",children:[r.jsx("h2",{children:"Pages in Storybook"}),r.jsxs("p",{children:["We recommend building UIs with a"," ",r.jsx("a",{href:"https://componentdriven.org",target:"_blank",rel:"noopener noreferrer",children:r.jsx("strong",{children:"component-driven"})})," ","process starting with atomic components and ending with pages."]}),r.jsx("p",{children:"Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:"}),r.jsxs("ul",{children:[r.jsx("li",{children:'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories'}),r.jsx("li",{children:"Assemble data in the page component from your services. You can mock these services out using Storybook."})]}),r.jsxs("p",{children:["Get a guided tutorial on component-driven development at"," ",r.jsx("a",{href:"https://storybook.js.org/tutorials/",target:"_blank",rel:"noopener noreferrer",children:"Storybook tutorials"}),". Read more in the"," ",r.jsx("a",{href:"https://storybook.js.org/docs",target:"_blank",rel:"noopener noreferrer",children:"docs"}),"."]}),r.jsxs("div",{className:"tip-wrapper",children:[r.jsx("span",{className:"tip",children:"Tip"})," Adjust the width of the canvas with the"," ",r.jsx("svg",{width:"10",height:"10",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("g",{fill:"none",fillRule:"evenodd",children:r.jsx("path",{d:"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",id:"a",fill:"#999"})})}),"Viewports addon in the toolbar"]})]})]})};exports.Button=j;exports.Header=L;exports.Page=se;

package/dist/index.css

@@ -0,0 +1 @@
+.storybook-button{display:inline-block;cursor:pointer;border:0;border-radius:3em;font-weight:700;line-height:1;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button--primary{background-color:#555ab9;color:#fff}.storybook-button--secondary{box-shadow:#00000026 0 0 0 1px inset;background-color:transparent;color:#333}.storybook-button--small{padding:10px 16px;font-size:12px}.storybook-button--medium{padding:11px 20px;font-size:14px}.storybook-button--large{padding:12px 24px;font-size:16px}.storybook-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(0,0,0,.1);padding:15px 20px;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-header svg{display:inline-block;vertical-align:top}.storybook-header h1{display:inline-block;vertical-align:top;margin:6px 0 6px 10px;font-weight:700;font-size:20px;line-height:1}.storybook-header button+button{margin-left:10px}.storybook-header .welcome{margin-right:10px;color:#333;font-size:14px}.storybook-page{margin:0 auto;padding:48px 20px;max-width:600px;color:#333;font-size:14px;line-height:24px;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-page h2{display:inline-block;vertical-align:top;margin:0 0 4px;font-weight:700;font-size:32px;line-height:1}.storybook-page p{margin:1em 0}.storybook-page a{color:inherit}.storybook-page ul{margin:1em 0;padding-left:30px}.storybook-page li{margin-bottom:8px}.storybook-page .tip{display:inline-block;vertical-align:top;margin-right:10px;border-radius:1em;background:#e7fdd8;padding:4px 12px;color:#357a14;font-weight:700;font-size:11px;line-height:12px}.storybook-page .tip-wrapper{margin-top:40px;margin-bottom:40px;font-size:13px;line-height:20px}.storybook-page .tip-wrapper svg{display:inline-block;vertical-align:top;margin-top:3px;margin-right:4px;width:12px;height:12px}.storybook-page .tip-wrapper svg path{fill:#1ea7fd}