@manamerge/mana-atomic-ui 0.0.20 → 0.0.21

package/README.md

@@ -2,4 +2,10 @@
 npm run rollup-build-lib
 
 ## to publish the build:
-npm publish
+# 1º we change the version
+npm run build
+npm publish
+
+## to run the storybook
+yarn run storybook
+

package/dist/index.d.ts

@@ -1,9 +1,16 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
-interface ButtonProps {
-    label: string;
+interface ButtonTypes {
+    disabled?: boolean;
+    className: string;
+    image?: string | null;
+    background?: string;
+    alt?: string;
+    children?: ReactNode;
+    onClick?: (e: any) => void;
+    type?: 'button' | 'submit' | 'reset' | undefined;
 }
-declare const Button: ({ label }: ButtonProps) => React.JSX.Element;
+declare const Button: React.FC<ButtonTypes>;
 
 declare const Wrapper1: React.FC;
 

package/dist/index.js

@@ -1,9 +1,102 @@
 import React from 'react';
-import styled from 'styled-components';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
 
-const Button = ({ label }) => {
-    return React.createElement("button", null, label);
+const ButtonStyle = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  outline-color: transparent;
+
+  /*csslint important: false*/
+  ${({ background }) => background &&
+    css `
+      background: center/cover url(${background});
+      background-size: contain;
+      background-repeat: no-repeat;
+    `}
+  /*csslint important: true*/
+  
+  :focus-visible {
+    outline: 2px solid #00a1f1;
+    outline-offset: 2px;
+  }
+`;
+const ImgStyle = styled.svg `
+  width: 1em;
+  height: 1em;
+`;
+
+const Button = ({ className, disabled, image, background, alt, children, onClick, type, }) => {
+    if (!children && !alt) {
+        console.error(`Provide children or alt property to Button ${className}`);
+    }
+    return (React.createElement(ButtonStyle, { disabled: disabled || false, className: classNames('Button', className), type: type || 'submit', "aria-label": alt || '', onClick: (e) => {
+            if (onClick) {
+                onClick(e);
+            }
+        }, background: background || '' },
+        image && (React.createElement(ImgStyle, { viewBox: '0 0 100 100' },
+            React.createElement("defs", null,
+                React.createElement("mask", { id: `${image}-mask` },
+                    React.createElement("image", { xlinkHref: image, width: '100', height: '100' }))),
+            React.createElement("rect", { width: '100', height: '100', style: { fill: 'var(--alt-color, currentColor)' }, mask: `url(#${image}-mask)` }))),
+        children));
+};
+/**
+export const ButtonSettings: ISettings = {
+  states: [State.default, State.active, State.hover, State.disabled],
+  include: [
+    CmsConfig.frame,
+    CmsConfig.border,
+    CmsConfig.text,
+    CmsConfig.color,
+    CmsConfig.altColor,
+    CmsConfig.fill,
+    // CmsConfig.effects,
+    CmsConfig.padding,
+    CmsConfig.flexbox,
+    CmsConfig.cursor,
+    CmsConfig.hmargin,
+    // CmsConfig.display,
+  ],
+  variants: [
+    {
+      className: '&primary',
+      description: 'Button Primary',
+    },
+    {
+      className: '&secondary',
+      description: 'Button Secondary',
+    },
+    {
+      className: '&tertiary',
+      description: 'Button Ternary',
+    },
+    {
+      className: '&quaternary',
+      description: 'Button Quinary',
+    },
+    {
+      className: '&quinary',
+      description: 'Button Quinary',
+    },
+    {
+      className: '&senary',
+      description: 'Button Senary',
+    },
+    {
+      className: '&septenary',
+      description: 'Button Septenary',
+    },
+    {
+      className: '&octonary',
+      description: 'Button Octonary',
+    },
+  ],
 };
+ */
 
 // src/components/Wrapper.tsx
 const Wrapper = styled.div `

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/components/Button/Button.tsx","../src/components/Wrapper/Wrapper.css.tsx","../src/components/Wrapper/Wrapper.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface ButtonProps {\n  label: string;\n}\n\nconst Button = ({ label }: ButtonProps) => {\n  return <button>{label}</button>;\n};\n\nexport default Button;\n","// src/components/Wrapper.tsx\n\nimport styled from \"styled-components\";\n\ninterface WrapperProps {\n  padding?: string;\n  margin?: string;\n  backgroundColor?: string;\n}\n\nconst Wrapper = styled.div<WrapperProps>`\n  padding: ${(props) => props.padding || \"1rem\"};\n  margin: ${(props) => props.margin || \"0 auto\"};\n  background-color: ${(props) => props.backgroundColor || \"red\"};\n`;\n\nexport default Wrapper;\n","import React from \"react\";\nimport Wrapper from \"./Wrapper.css\";\n\nexport interface WrapperProps {\n  children?: string;\n  padding?: string;\n  margin?: string;\n  backgroundColor?: string;\n}\n// const Button = ({ label }: ButtonProps) => {\n\nconst Wrapper1: React.FC = (args: WrapperProps) => {\n  return (\n    <Wrapper\n      padding={args.padding}\n      margin=\"1rem auto\"\n      backgroundColor={args.backgroundColor}\n    >\n      <h1>Hello, World!</h1>\n      <p>This is a simple wrapper component.</p>\n    </Wrapper>\n  );\n};\n\nexport default Wrapper1;\n"],"names":[],"mappings":";;;AAMA,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAe,KAAI;IACxC,OAAO,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,KAAK,CAAU,CAAC;AAClC;;ACRA;AAUA,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAc,CAAA;aAC3B,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,IAAI,MAAM,CAAA;YACnC,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,IAAI,QAAQ,CAAA;sBACzB,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,IAAI,KAAK,CAAA;CAC9D;;ACLD;AAEA,MAAM,QAAQ,GAAa,CAAC,IAAkB,KAAI;AAChD,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,OAAO,IACN,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAC,WAAW,EAClB,eAAe,EAAE,IAAI,CAAC,eAAe,EAAA;QAErC,KAAsB,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,eAAA,CAAA;QACtB,KAA0C,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,qCAAA,CAAA,CAClC,EACV;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../src/components/Atoms/Button/Button.css.ts","../src/components/Atoms/Button/Button.tsx","../src/components/Wrapper/Wrapper.css.tsx","../src/components/Wrapper/Wrapper.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\ninterface ButtonProps {\n  background: string;\n}\n\nexport const ButtonStyle = styled.button<ButtonProps>`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px;\n  outline-color: transparent;\n\n  /*csslint important: false*/\n  ${({ background }) =>\n    background &&\n    css`\n      background: center/cover url(${background});\n      background-size: contain;\n      background-repeat: no-repeat;\n    `}\n  /*csslint important: true*/\n  \n  :focus-visible {\n    outline: 2px solid #00a1f1;\n    outline-offset: 2px;\n  }\n`;\n\nexport const ImgStyle = styled.svg`\n  width: 1em;\n  height: 1em;\n`;\n","import React, { ReactNode } from 'react';\nimport classNames from 'classnames';\n// import { CmsConfig } from '../../../definitions/CmsConfig';\n// import { ISettings } from '../../../definitions/ISettings';\n// import { State } from '../../../definitions/States';\nimport { ButtonStyle, ImgStyle } from './Button.css';\n\n/*\nImplementation examples:\n========================\n\nimport {Button} from '@dexper.events/product-atomic-ui';\n\nconst svgSrc = 'https://dexper-product-development.web.app/static/media/user.2c0a844d.svg';\nconst profilePhoto = 'https://firebasestorage.googleapis.com/v0/b/dexper-product-development.appspot.com/o/assets%2Fimages%2Fprofile-photo.jpg?alt=media&token=bcdeb824-f3a4-4532-821b-34c4b06a56af';\n\n<Button onClick={() => {console.log('click')}}>Click me!</Button>\n\n// Button with text and icon\n\n<Button image={svgSrc}>Click me!</Button>\n\n// When a button only has an icon, provide an alt parameter describing the icon\n// to comply with WCAG\n\n<Button image={svgSrc} alt=\"Icon of person\"/>\n\n// Image as a button. Provide alt parameter.\n\n<Button background={profilePhoto} alt=\"Evelyn Hill\"/>\n\n*/\n\nexport interface ButtonTypes {\n  disabled?: boolean;\n  className: string;\n  image?: string | null;\n  background?: string;\n  alt?: string;\n  children?: ReactNode;\n  onClick?: (e: any) => void;\n  type?: 'button' | 'submit' | 'reset' | undefined;\n}\n\nexport const ButtonStory = {\n  className: 'primary',\n  disabled: false,\n  image:\n    'https://dexper-product-development.web.app/static/media/user.2c0a844d.svg',\n  background:\n    'https://firebasestorage.googleapis.com/v0/b/dexper-product-development.appspot.com/o/assets%2Fimages%2Fprofile-photo.jpg?alt=media&token=bcdeb824-f3a4-4532-821b-34c4b06a56af',\n  children: 'Click me',\n  alt: 'Icon of person',\n  onClick: () => {\n    console.log('story assigned event');\n  },\n};\n\nexport const Button: React.FC<ButtonTypes> = ({\n  className,\n  disabled,\n  image,\n  background,\n  alt,\n  children,\n  onClick,\n  type,\n}) => {\n  if (!children && !alt) {\n    console.error(`Provide children or alt property to Button ${className}`);\n  }\n\n  return (\n    <ButtonStyle\n      disabled={disabled || false}\n      className={classNames('Button', className)}\n      type={type || 'submit'}\n      aria-label={alt || ''}\n      onClick={(e) => {\n        if (onClick) {\n          onClick(e);\n        }\n      }}\n      background={background || ''}\n    >\n      {image && (\n        <ImgStyle viewBox='0 0 100 100'>\n          <defs>\n            <mask id={`${image}-mask`}>\n              <image xlinkHref={image} width='100' height='100' />\n            </mask>\n          </defs>\n          <rect\n            width='100'\n            height='100'\n            style={{ fill: 'var(--alt-color, currentColor)' }}\n            mask={`url(#${image}-mask)`}\n          />\n        </ImgStyle>\n      )}\n      {children}\n    </ButtonStyle>\n  );\n};\n/**\nexport const ButtonSettings: ISettings = {\n  states: [State.default, State.active, State.hover, State.disabled],\n  include: [\n    CmsConfig.frame,\n    CmsConfig.border,\n    CmsConfig.text,\n    CmsConfig.color,\n    CmsConfig.altColor,\n    CmsConfig.fill,\n    // CmsConfig.effects,\n    CmsConfig.padding,\n    CmsConfig.flexbox,\n    CmsConfig.cursor,\n    CmsConfig.hmargin,\n    // CmsConfig.display,\n  ],\n  variants: [\n    {\n      className: '&primary',\n      description: 'Button Primary',\n    },\n    {\n      className: '&secondary',\n      description: 'Button Secondary',\n    },\n    {\n      className: '&tertiary',\n      description: 'Button Ternary',\n    },\n    {\n      className: '&quaternary',\n      description: 'Button Quinary',\n    },\n    {\n      className: '&quinary',\n      description: 'Button Quinary',\n    },\n    {\n      className: '&senary',\n      description: 'Button Senary',\n    },\n    {\n      className: '&septenary',\n      description: 'Button Septenary',\n    },\n    {\n      className: '&octonary',\n      description: 'Button Octonary',\n    },\n  ],\n};\n */\n","// src/components/Wrapper.tsx\n\nimport styled from \"styled-components\";\n\ninterface WrapperProps {\n  padding?: string;\n  margin?: string;\n  backgroundColor?: string;\n}\n\nconst Wrapper = styled.div<WrapperProps>`\n  padding: ${(props) => props.padding || \"1rem\"};\n  margin: ${(props) => props.margin || \"0 auto\"};\n  background-color: ${(props) => props.backgroundColor || \"red\"};\n`;\n\nexport default Wrapper;\n","import React from \"react\";\nimport Wrapper from \"./Wrapper.css\";\n\nexport interface WrapperProps {\n  children?: string;\n  padding?: string;\n  margin?: string;\n  backgroundColor?: string;\n}\n// const Button = ({ label }: ButtonProps) => {\n\nconst Wrapper1: React.FC = (args: WrapperProps) => {\n  return (\n    <Wrapper\n      padding={args.padding}\n      margin=\"1rem auto\"\n      backgroundColor={args.backgroundColor}\n    >\n      <h1>Hello, World!</h1>\n      <p>This is a simple wrapper component.</p>\n    </Wrapper>\n  );\n};\n\nexport default Wrapper1;\n"],"names":[],"mappings":";;;;AAMO,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAa,CAAA;;;;;;;;AAQjD,EAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KACf,UAAU;AACV,IAAA,GAAG,CAAA,CAAA;qCAC8B,UAAU,CAAA;;;AAG1C,IAAA,CAAA,CAAA;;;;;;;CAOJ,CAAC;AAEK,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;CAGjC;;MC0BY,MAAM,GAA0B,CAAC,EAC5C,SAAS,EACT,QAAQ,EACR,KAAK,EACL,UAAU,EACV,GAAG,EACH,QAAQ,EACR,OAAO,EACP,IAAI,GACL,KAAI;AACH,IAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG,EAAE;AACrB,QAAA,OAAO,CAAC,KAAK,CAAC,8CAA8C,SAAS,CAAA,CAAE,CAAC,CAAC;AAC1E,KAAA;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,QAAQ,EAAE,QAAQ,IAAI,KAAK,EAC3B,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,EAC1C,IAAI,EAAE,IAAI,IAAI,QAAQ,EACV,YAAA,EAAA,GAAG,IAAI,EAAE,EACrB,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,YAAA,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,CAAC,CAAC,CAAC;AACZ,aAAA;AACH,SAAC,EACD,UAAU,EAAE,UAAU,IAAI,EAAE,EAAA;AAE3B,QAAA,KAAK,KACJ,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,OAAO,EAAC,aAAa,EAAA;AAC7B,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACE,gBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,CAAG,EAAA,KAAK,CAAO,KAAA,CAAA,EAAA;AACvB,oBAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,KAAK,EAAE,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAA,CAAG,CAC/C,CACF;YACP,KACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,KAAK,EAAE,EAAE,IAAI,EAAE,gCAAgC,EAAE,EACjD,IAAI,EAAE,QAAQ,KAAK,CAAA,MAAA,CAAQ,EAC3B,CAAA,CACO,CACZ;QACA,QAAQ,CACG,EACd;AACJ,EAAE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDG;;AC5JH;AAUA,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAc,CAAA;aAC3B,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,IAAI,MAAM,CAAA;YACnC,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,IAAI,QAAQ,CAAA;sBACzB,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,IAAI,KAAK,CAAA;CAC9D;;ACLD;AAEA,MAAM,QAAQ,GAAa,CAAC,IAAkB,KAAI;AAChD,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,OAAO,IACN,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAC,WAAW,EAClB,eAAe,EAAE,IAAI,CAAC,eAAe,EAAA;QAErC,KAAsB,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,eAAA,CAAA;QACtB,KAA0C,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,qCAAA,CAAA,CAClC,EACV;AACJ;;;;"}

package/dist/types/components/Atoms/Button/Button.css.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface ButtonProps {
+    background: string;
+}
+export declare const ButtonStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps>> & string;
+export declare const ImgStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;
+export {};

package/dist/types/components/Atoms/Button/Button.d.ts

@@ -0,0 +1,74 @@
+import React, { ReactNode } from 'react';
+export interface ButtonTypes {
+    disabled?: boolean;
+    className: string;
+    image?: string | null;
+    background?: string;
+    alt?: string;
+    children?: ReactNode;
+    onClick?: (e: any) => void;
+    type?: 'button' | 'submit' | 'reset' | undefined;
+}
+export declare const ButtonStory: {
+    className: string;
+    disabled: boolean;
+    image: string;
+    background: string;
+    children: string;
+    alt: string;
+    onClick: () => void;
+};
+export declare const Button: React.FC<ButtonTypes>;
+/**
+export const ButtonSettings: ISettings = {
+  states: [State.default, State.active, State.hover, State.disabled],
+  include: [
+    CmsConfig.frame,
+    CmsConfig.border,
+    CmsConfig.text,
+    CmsConfig.color,
+    CmsConfig.altColor,
+    CmsConfig.fill,
+    // CmsConfig.effects,
+    CmsConfig.padding,
+    CmsConfig.flexbox,
+    CmsConfig.cursor,
+    CmsConfig.hmargin,
+    // CmsConfig.display,
+  ],
+  variants: [
+    {
+      className: '&primary',
+      description: 'Button Primary',
+    },
+    {
+      className: '&secondary',
+      description: 'Button Secondary',
+    },
+    {
+      className: '&tertiary',
+      description: 'Button Ternary',
+    },
+    {
+      className: '&quaternary',
+      description: 'Button Quinary',
+    },
+    {
+      className: '&quinary',
+      description: 'Button Quinary',
+    },
+    {
+      className: '&senary',
+      description: 'Button Senary',
+    },
+    {
+      className: '&septenary',
+      description: 'Button Septenary',
+    },
+    {
+      className: '&octonary',
+      description: 'Button Octonary',
+    },
+  ],
+};
+ */

package/dist/types/components/Atoms/Button/Button.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ButtonTypes } from './Button';
+declare const meta: Meta<ButtonTypes>;
+export default meta;
+type Story = StoryObj<ButtonTypes>;
+export declare const Default: Story;

package/dist/types/components/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Button } from "./Button";
+export { Button } from "./Atoms/Button/Button";
 export { default as Wrapper } from "./Wrapper";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manamerge/mana-atomic-ui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "Mana Merge design system",
   "scripts": {
     "build": "rollup -c",
@@ -47,6 +47,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
+    "classnames": "^2.5.1",
     "styled-components": "^6.1.11"
   }
 }