@wishket/design-system 0.8.4 → 0.9.0

package/README.md

@@ -1,36 +1,67 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+> **WDS v1.0 will be coming 🎉** Read the [Latest Release notes](https://github.com/wishket/design-system/releases/tag/v0.8.4)
+>
+
+<h1 align="center">Wishket Design System</h1>
+<p align="center">Wishket Design System (WDS) is the design concept system for Wishket products.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@wishket/design-system" target="_blank"><img src="https://img.shields.io/npm/v/@wishket/design-system.svg?style=for-the-badge&label=Latest&color=black" alt="Package version" /></a>
+  <a href="https://www.npmjs.com/package/@wishket/design-system" target="_blank"><img src="https://img.shields.io/npm/dm/@wishket/design-system?style=for-the-badge&color=black" alt="Downloads per month" /></a>
+</p>
+
+<br /><br />
+
+## Features
+
+- **Steady Components**. Frequently used Components based on the Atomic Design Pattern.
+- **Storybook**. You can explore the components in [Storybook](https://design-system.wishdev.net).
 
 ## Getting Started
 
-First, run the development server:
+### 1. Install
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+```shell
+yarn add @wishket/design-system
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+or
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+npm install @wishket/design-system
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+or
 
-## Learn More
+pnpm add @wishket/design-system
+```
+
+### 2. Setting in tailwind.config.ts
 
-To learn more about Next.js, take a look at the following resources:
+```typescript
+// tailwind.config.ts
+import path from 'path';
+import type { Config } from 'tailwindcss';
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+const config: Config = {
+  content: [
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    path.join(path.dirname(require.resolve('@wishket/design-system')), '**/*.{js,ts,jsx,tsx,mdx}'),
+  ],
+  presets: [require('@wishket/design-system/dist/config/tailwind.config')],
+  plugins: [],
+};
+export default config;
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```
 
-## Deploy on Vercel
+## Usage
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+```typescript
+//Home.tsx
+import { Typography } from '@wishket/design-system';
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+export const Home  = () => {
+  return (
+      <Typography variant="title1" className='bg-w-cyan-500'>Hello, World!</Typography>
+  );
+}
+
+export default Home;
+```

package/dist/Components/Atoms/Button/Button.js

@@ -1 +1,2 @@
+'use client';
 "use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./Button.parts.js");module.exports=function(n){var i=n.type,i=void 0===i?"button":i,u=n.ref,o=n.disabled,o=void 0!==o&&o,d=n.children,c=n.className,a=n.onClick,s=n.size,s=void 0===s?"md":s,l=n.variant,l=void 0===l?"default":l,v=n.rounded,v=void 0!==v&&v,n=n.needThrottle,n=void 0!==n&&n,f=r.useRef(void 0);return r.useEffect(function(){return function(){f&&clearTimeout(f.current)}},[f]),e.jsx(t.ButtonContainer,{ref:u,size:s,type:i,disabled:o,rounded:v,variant:l,className:c,onClick:n?function(e){e.preventDefault(),f.current||(null!=a&&a(e),f.current=setTimeout(function(){f.current=void 0},300))}:a,children:d})};

package/dist/Components/Molecules/CheckboxList/CheckboxListItem.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),s=require("react"),r=require("tailwind-merge"),t=require("../../Atoms/Typography/Typography.js"),a=require("../../Atoms/Checkbox/Checkbox.js"),c=(require("../../Atoms/TextField/TextField.js"),require("next/image"),function(s){var t=s.children,a=s.disabled,c=s.className,s=e.__rest(s,["children","disabled","className"]);return i.jsx("label",e.__assign({className:r.twMerge("grid h-min w-min grid-cols-checkbox-list-item-container grid-rows-checkbox-list-item-container items-center gap-x-3 gap-y-[2px] grid-areas-checkbox-list-item-container",a?"cursor-not-allowed":"cursor-pointer",c)},s,{children:t}))});module.exports=function(e){var r=e.label,d=e.description,n=e.checked,o=e.disabled,o=void 0!==o&&o,l=e.isError,l=void 0!==l&&l,m=e.className,x=e.CheckboxClassName,e=e.onChange,h=s.useState(!1),b=h[0],g=h[1];return i.jsxs(c,{"data-testid":"design-system-checkboxList--item",disabled:o,className:m,onMouseOver:function(){g(!0)},onMouseOut:function(){g(!1)},children:[i.jsx("div",{className:"grid-in-checkbox",children:i.jsx(a,{checked:n,isHover:b,isError:l,disabled:o,onChange:e,className:x})}),i.jsx("div",{className:"mb-px grid-in-label","data-testid":"design-system-checkboxList--item-label-root",children:i.jsx(t,{variant:"body1",className:o?"text-w-gray-300":"text-w-gray-900","data-testid":"design-system-checkboxList--item-label",children:r})}),d&&i.jsx("div",{className:"grid-in-description",children:i.jsx(t,{variant:"body2",className:o?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-checkboxList--item-description",children:d})})]})};
+"use strict";var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),s=require("react"),r=require("tailwind-merge"),t=require("../../Atoms/Typography/Typography.js"),a=require("../../Atoms/Checkbox/Checkbox.js"),c=(require("../../Atoms/TextField/TextField.js"),require("next/image"),function(s){var t=s.children,a=s.disabled,c=s.className,s=e.__rest(s,["children","disabled","className"]);return i.jsx("label",e.__assign({className:r.twMerge("grid h-min w-min grid-cols-checkbox-list-item-container grid-rows-checkbox-list-item-container items-center gap-x-3 gap-y-0.5 grid-areas-checkbox-list-item-container",a?"cursor-not-allowed":"cursor-pointer",c)},s,{children:t}))});module.exports=function(e){var r=e.label,n=e.description,d=e.checked,o=e.disabled,o=void 0!==o&&o,l=e.isError,l=void 0!==l&&l,m=e.className,x=e.CheckboxClassName,e=e.onChange,h=s.useState(!1),u=h[0],g=h[1];return i.jsxs(c,{"data-testid":"design-system-checkboxList--item",disabled:o,className:m,onMouseOver:function(){g(!0)},onMouseOut:function(){g(!1)},children:[i.jsx("div",{className:"flex cursor-pointer items-center justify-center p-px grid-in-checkbox",children:i.jsx(a,{checked:d,isHover:u,isError:l,disabled:o,onChange:e,className:x})}),i.jsx("div",{className:"flex items-center grid-in-label","data-testid":"design-system-checkboxList--item-label-root",children:i.jsx(t,{variant:"body1",className:o?"text-w-gray-300":"text-w-gray-900","data-testid":"design-system-checkboxList--item-label",children:r})}),n&&i.jsx("div",{className:"flex items-center grid-in-description",children:i.jsx(t,{variant:"body2",className:o?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-checkboxList--item-description",children:n})})]})};

package/dist/Components/Molecules/RadioList/RadioListItem.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),r=require("react"),s=require("tailwind-merge"),a=require("../../Atoms/Typography/Typography.js"),t=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Radio/Radio.js")),d=(require("../../Atoms/TextField/TextField.js"),require("next/image"),function(r){var a=r.children,t=r.disabled,d=r.className,r=e.__rest(r,["children","disabled","className"]);return i.jsx("label",e.__assign({className:s.twMerge("grid h-min w-min grid-cols-radio-list-item-container grid-rows-radio-list-item-container items-center gap-x-3 gap-y-[2px] grid-areas-radio-list-item-container",t?"cursor-not-allowed":"cursor-pointer",d)},r,{children:a}))});module.exports=function(e){var s=e.name,n=e.value,o=e.label,l=e.description,c=e.checked,m=e.disabled,m=void 0!==m&&m,u=e.isError,u=void 0!==u&&u,g=e.className,x=e.RadioClassName,e=e.onChange,h=r.useState(!1),v=h[0],b=h[1];return i.jsxs(d,{"data-testid":"design-system-radioList--item",disabled:m,className:g,onMouseOver:function(){b(!0)},onMouseOut:function(){b(!1)},children:[i.jsx("div",{className:"cursor-pointer grid-in-radio",children:i.jsx(t,{name:s,value:n,checked:c,isHover:v,isError:u,disabled:m,onChange:e,className:x})}),i.jsx("div",{className:"grid-in-label",children:i.jsx(a,{variant:"body1",className:m?"text-w-gray-300":"text-w-gray-900","data-testid":"design-system-radioList--item-label",children:o})}),l&&i.jsx("div",{className:"grid-in-description",children:i.jsx(a,{variant:"body2",className:m?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-radioList--item-description",children:l})})]})};
+"use strict";var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),r=require("react"),s=require("tailwind-merge"),a=require("../../Atoms/Typography/Typography.js"),t=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Radio/Radio.js")),d=(require("../../Atoms/TextField/TextField.js"),require("next/image"),function(r){var a=r.children,t=r.disabled,d=r.className,r=e.__rest(r,["children","disabled","className"]);return i.jsx("label",e.__assign({className:s.twMerge("grid h-min w-min grid-cols-radio-list-item-container grid-rows-radio-list-item-container items-center gap-x-3 gap-y-[2px] grid-areas-radio-list-item-container",t?"cursor-not-allowed":"cursor-pointer",d)},r,{children:a}))});module.exports=function(e){var s=e.name,n=e.value,o=e.label,l=e.description,c=e.checked,m=e.disabled,m=void 0!==m&&m,u=e.isError,u=void 0!==u&&u,g=e.className,x=e.RadioClassName,e=e.onChange,h=r.useState(!1),v=h[0],b=h[1];return i.jsxs(d,{"data-testid":"design-system-radioList--item",disabled:m,className:g,onMouseOver:function(){b(!0)},onMouseOut:function(){b(!1)},children:[i.jsx("div",{className:"flex cursor-pointer items-center grid-in-radio",children:i.jsx(t,{name:s,value:n,checked:c,isHover:v,isError:u,disabled:m,onChange:e,className:x})}),i.jsx("div",{className:"flex items-center grid-in-label",children:i.jsx(a,{variant:"body1",className:m?"text-w-gray-300":"text-w-gray-900","data-testid":"design-system-radioList--item-label",children:o})}),l&&i.jsx("div",{className:"flex items-center grid-in-description",children:i.jsx(a,{variant:"body2",className:m?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-radioList--item-description",children:l})})]})};

package/dist/Components/Molecules/TextButton/TextButton.d.ts

@@ -0,0 +1,3 @@
+import { TextButtonProps } from './TextButton.types';
+declare const TextButton: ({ text, isSmall, iconAlign, badgeText, }: TextButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default TextButton;

package/dist/Components/Molecules/TextButton/TextButton.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("../../Atoms/Typography/Typography.js"),s=(require("../../Atoms/Checkbox/Checkbox.js"),require("../../Atoms/Badge/Badge.js")),i=require("../../Atoms/Box/Box.js"),r=(require("../../../_virtual/_tslib.js"),require("tailwind-merge"),require("react"),require("../../Atoms/TextField/TextField.js"),require("next/image"),require("../../Atoms/SystemIcon/SystemIcon.js"));module.exports=function(a){var n=a.text,o=a.isSmall,o=void 0!==o&&o,d=a.iconAlign,d=void 0===d?"none":d,a=a.badgeText;return e.jsxs(i,{"data-testid":"design-system-text-button--container",className:"flex min-h-6 w-fit cursor-pointer items-center justify-center gap-x-0.5",children:["left"===d&&e.jsx(i,{"data-testid":"design-system-text-button--icon--left",className:"w-fit",children:e.jsx(r,{name:o?"small_arrow_left":"medium_arrow_left",className:"text-w-cyan-500"})}),e.jsx(i,{"data-testid":"design-system-text-button--text",className:"w-fit",children:e.jsx(t,{variant:o?"body2":"body1",className:"align-baseline text-w-cyan-500",children:n})}),"right"===d&&e.jsx(i,{"data-testid":"design-system-text-button--icon--right",className:"w-fit",children:e.jsx(r,{name:o?"small_arrow_right":"medium_arrow_right",className:"text-w-cyan-500"})}),!!a&&e.jsx(i,{"data-testid":"design-system-text-button--badge",children:e.jsx(s,{text:null!=a?a:""})})]})};

package/dist/Components/Molecules/TextButton/TextButton.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import TextButton from './TextButton';
+import { TextButtonProps } from './TextButton.types';
+declare const meta: Meta<typeof TextButton>;
+export default meta;
+type Story = StoryObj<TextButtonProps>;
+export declare const Default: Story;

package/dist/Components/Molecules/TextButton/TextButton.types.d.ts

@@ -0,0 +1,6 @@
+export interface TextButtonProps {
+    text: string;
+    isSmall?: boolean;
+    iconAlign?: 'left' | 'right' | 'none';
+    badgeText?: string;
+}

package/dist/Components/Molecules/TextButton/index.d.ts

@@ -0,0 +1,2 @@
+import TextButton from './TextButton';
+export default TextButton;

package/dist/Components/Molecules/TextButton/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./TextButton.js");module.exports=e;

package/dist/Components/Molecules/index.d.ts

@@ -4,3 +4,4 @@ export { default as CheckboxList } from './CheckboxList';
 export { default as CheckboxCard } from './CheckboxCard';
 export { default as RadioList } from './RadioList';
 export { default as IconMessageCard } from './IconMessageCard';
+export { default as TextButton } from './TextButton';

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("./Components/Atoms/Typography/Typography.js"),o=require("./Components/Atoms/Checkbox/Checkbox.js"),s=require("./Components/Atoms/Badge/Badge.js"),t=require("./Components/Atoms/Box/Box.js"),r=require("./Components/Atoms/ProductIcon/ProductIcon.js"),i=require("./Components/Atoms/Radio/Radio.js"),n=require("./Components/Atoms/Button/Button.js"),p=require("./Components/Atoms/LoadingIndicator/LoadingIndicator.js"),a=require("./Components/Atoms/TextField/TextField.js"),m=require("./Components/Atoms/Divider/Divider.js"),x=require("./Components/Atoms/ServiceLogo/ServiceLogo.js"),d=require("./Components/Atoms/Avatar/Avatar.js"),u=require("./Components/Atoms/Switch/Switch.js"),c=require("./Components/Atoms/SystemIcon/SystemIcon.js"),C=require("./Components/Molecules/WithBadge/WithBadge.js"),j=require("./Components/Molecules/GridLayout/GridLayout.js"),q=require("./Components/Molecules/CheckboxList/CheckboxList.js"),g=require("./Components/Molecules/CheckboxCard/CheckboxCard.js"),h=require("./Components/Molecules/RadioList/RadioList.js"),l=require("./Components/Molecules/IconMessageCard/IconMessageCard.js"),A=require("./Components/Organisms/Modal/Modal.js"),L=require("./Components/Organisms/TextTab/TextTab.js");exports.Typography=e,exports.Checkbox=o,exports.Badge=s,exports.Box=t,exports.ProductIcon=r,exports.Radio=i,exports.Button=n,exports.LoadingIndicator=p,exports.TextField=a,exports.Divider=m,exports.ServiceLogo=x,exports.Avatar=d,exports.Switch=u,exports.SystemIcon=c,exports.WithBadge=C,exports.GridLayout=j,exports.CheckboxList=q,exports.CheckboxCard=g,exports.RadioList=h,exports.IconMessageCard=l,exports.Modal=A,exports.TextTab=L;
+"use strict";var e=require("./Components/Atoms/Typography/Typography.js"),o=require("./Components/Atoms/Checkbox/Checkbox.js"),s=require("./Components/Atoms/Badge/Badge.js"),t=require("./Components/Atoms/Box/Box.js"),r=require("./Components/Atoms/ProductIcon/ProductIcon.js"),n=require("./Components/Atoms/Radio/Radio.js"),i=require("./Components/Atoms/Button/Button.js"),p=require("./Components/Atoms/LoadingIndicator/LoadingIndicator.js"),a=require("./Components/Atoms/TextField/TextField.js"),x=require("./Components/Atoms/Divider/Divider.js"),u=require("./Components/Atoms/ServiceLogo/ServiceLogo.js"),m=require("./Components/Atoms/Avatar/Avatar.js"),d=require("./Components/Atoms/Switch/Switch.js"),c=require("./Components/Atoms/SystemIcon/SystemIcon.js"),C=require("./Components/Molecules/WithBadge/WithBadge.js"),j=require("./Components/Molecules/GridLayout/GridLayout.js"),q=require("./Components/Molecules/CheckboxList/CheckboxList.js"),g=require("./Components/Molecules/CheckboxCard/CheckboxCard.js"),l=require("./Components/Molecules/RadioList/RadioList.js"),h=require("./Components/Molecules/IconMessageCard/IconMessageCard.js"),A=require("./Components/Molecules/TextButton/TextButton.js"),B=require("./Components/Organisms/Modal/Modal.js"),L=require("./Components/Organisms/TextTab/TextTab.js");exports.Typography=e,exports.Checkbox=o,exports.Badge=s,exports.Box=t,exports.ProductIcon=r,exports.Radio=n,exports.Button=i,exports.LoadingIndicator=p,exports.TextField=a,exports.Divider=x,exports.ServiceLogo=u,exports.Avatar=m,exports.Switch=d,exports.SystemIcon=c,exports.WithBadge=C,exports.GridLayout=j,exports.CheckboxList=q,exports.CheckboxCard=g,exports.RadioList=l,exports.IconMessageCard=h,exports.TextButton=A,exports.Modal=B,exports.TextTab=L;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishket/design-system",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "Wishket Design System",
   "main": "dist/index.js",
   "module": "dist/index.es.js",