venice-ui 1.0.0 → 1.0.1

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "venice-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Component library",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rm -rf node_modules/ && rm -rf public/dist/",
     "build": "rm -rf /dist && npm run build:esm && npm run build:cjs",
     "build:esm": "tsc",
     "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
@@ -34,7 +35,14 @@
     "@types/node": "^18.7.15",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
     "babel-loader": "^8.2.5",
+    "eslint": "^8.23.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-storybook": "^0.6.4",
+    "prettier": "2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.8.2"
@@ -43,5 +51,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@storybook/addon-a11y": "^7.0.0-alpha.34",
+    "@storybook/addons": "^7.0.0-alpha.34",
+    "@storybook/theming": "^7.0.0-alpha.34",
+    "@types/styled-components": "^5.1.26",
+    "polished": "^4.2.2",
+    "styled-components": "^5.3.5"
+  }
 }

package/src/Theme/Theme.ts

@@ -0,0 +1,47 @@
+export const Theme = {
+  colors: {
+    primary: "#4c95c5",
+    text: '#333333',
+    disableText: "#cccccc",
+    disableBackground: '#dddddd',
+    white: "#ffffff",
+    black: "#333333",
+    gray_1: "#b7b7b7",
+    overlayer: 'rgba(255,255,255,0.2)'
+  },
+
+  fontSize: {
+    xs: "12px",
+    s: "14px",
+    m: "16px",
+    l: "22px",
+    xl: "32px",
+  },
+  lineHeight: {
+    xs: "14px",
+    s: "16px",
+    m: "18px",
+    l: "24px",
+    xl: "36px",
+  },
+
+  padding: {
+    xs: "2px",
+    s: "4px",
+    m: "8px",
+    l: "16px",
+    xl: "32px",
+    xxl: '48px',
+  },
+  zIndex:{
+    modalOverlayer: 1000,
+  },
+  borderRadius: {
+    s: '2px',
+    m: '4px',
+    l: '8px',
+  },
+  shadow:{
+    m: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);'
+  }
+};

package/src/components/Aligment/Aligment.stories.tsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import { Aligment } from './Aligment.styles'
+import { ExmpleBlock, ExmpleBlockWrapper } from '../../example'
+import { Theme } from '../../Theme/Theme'
+
+export default {
+  title: 'Layout/Aligment',
+  component: Aligment,
+  argTypes: {
+    width: { control: 'text', defaultValue: '100%', default: '100%' },
+    direction: {
+      options: ['row', 'row-reverse', 'column', 'column-reverse'],
+      control: 'select',
+    },
+    align: {
+      options: [
+        'stretch',
+        'flex-start',
+        'flex-end',
+        'center',
+        'baseline',
+        'first baseline',
+        'last baseline',
+        'start',
+        'end',
+        'self-start',
+        'self-end',
+      ],
+      control: 'select',
+    },
+    justify: {
+      options: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+        'start',
+        'end',
+        'left',
+      ],
+      control: 'select',
+    },
+    wrap: {
+      options: ['wrap', 'nowrap', 'wrap-reverse'],
+      control: 'select',
+    },
+    backgroundColor: {
+      control: { type: 'color' },
+    },
+    vPadding: { control: 'text' },
+    hPadding: { control: 'text' },
+  },
+} as ComponentMeta<typeof Aligment>
+
+const Template: ComponentStory<typeof Aligment> = (args) => (
+  <Aligment {...args}>
+    <ExmpleBlockWrapper>
+      <ExmpleBlock width="20px" height="40px">
+        1
+      </ExmpleBlock>
+    </ExmpleBlockWrapper>
+    <ExmpleBlockWrapper>
+      <ExmpleBlock width="60px" height="30px">
+        2
+      </ExmpleBlock>
+    </ExmpleBlockWrapper>
+    <ExmpleBlockWrapper>
+      <ExmpleBlock width="30px" height="60px">
+        3
+      </ExmpleBlock>
+    </ExmpleBlockWrapper>
+    <ExmpleBlockWrapper>
+      <ExmpleBlock width="40px" height="40px">
+        4
+      </ExmpleBlock>
+    </ExmpleBlockWrapper>
+  </Aligment>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  direction: 'row',
+  align: 'center',
+  justify: 'space-between',
+  wrap: 'wrap',
+  backgroundColor: 'transparent',
+  vPadding: '0px',
+  hPadding: '0px',
+}
+
+export const Column = Template.bind({})
+Column.args = {
+  direction: 'column',
+  align: 'center',
+  justify: 'space-between',
+  wrap: 'wrap',
+  backgroundColor: 'transparent',
+  vPadding: '0px',
+  hPadding: '0px',
+}
+
+export const WithColor = Template.bind({})
+WithColor.args = {
+  direction: 'row',
+  align: 'center',
+  justify: 'space-between',
+  wrap: 'wrap',
+  backgroundColor: Theme.colors.primary,
+  vPadding: '0px',
+  hPadding: '0px',
+}
+
+export const WithPadding = Template.bind({})
+WithPadding.args = {
+  direction: 'row',
+  align: 'center',
+  justify: 'space-between',
+  wrap: 'wrap',
+  backgroundColor: Theme.colors.primary,
+  vPadding: Theme.padding.xl,
+  hPadding: Theme.padding.xl,
+}

package/src/components/Aligment/Aligment.styles.ts

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+export interface IAligmentProps {
+  direction?: string
+  justify?: string
+  align?: string
+  width?: string
+  wrap?: string 
+  vPadding?: string
+  hPadding?: string
+  backgroundColor? :string 
+}
+export const Aligment = styled.div<IAligmentProps>`
+  box-sizing: border-box;
+  display: flex;
+  width: ${p => p.width ? p.width : '100%'};
+  flex-direction: ${p => p.direction ? p.direction : 'row'};
+  justify-content: ${p => p.justify ? p.justify : 'space-between'};
+  align-items: ${p => p.align ? p.align : 'center'};
+  flex-wrap: ${p => p.wrap ? p.wrap : 'wrap'};
+  padding: ${p=> p.vPadding ? p.vPadding : '0'} ${p=> p.hPadding ? p.hPadding : '0'};
+  background-color: ${p => p.backgroundColor ? p.backgroundColor : 'transparent'}
+`;

package/src/components/Aligment/index.ts

@@ -0,0 +1 @@
+export { Aligment } from './Aligment.styles'

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import { Button } from './Button'
+
+export default {
+  title: 'Elements/Button',
+  component: Button,
+  argTypes: {
+    text: { control: 'text' },
+    mode: {
+      options: ['primary', 'inverse', 'ghost'],
+      control: 'select',
+    },
+    size: {
+      options: ['regular', 'small', 'flat'],
+      control: 'select',
+    },
+    right: { control: 'boolean' },
+    left: { control: 'boolean' },
+
+
+  },
+  args: {
+    text: 'Click me',
+  },
+} as ComponentMeta<typeof Button>
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args}/>
+
+export const Default = Template.bind({})
+Default.args = {
+  size: 'regular',
+  mode: 'primary',
+  left: false,
+  right: false,
+}
+
+export const Inverse = Template.bind({})
+Inverse.args = {
+  size: 'regular',
+  mode: 'inverse',
+  left: false,
+  right: false,
+}
+
+export const Ghost = Template.bind({})
+Ghost.args = {
+  size: 'regular',
+  mode: 'ghost',
+  left: false,
+  right: false,
+}

package/src/components/Button/Button.styles.tsx

@@ -0,0 +1,76 @@
+import { lighten } from 'polished'
+import styled from 'styled-components'
+import { Theme } from '../../Theme/Theme'
+
+interface IButtonElement {
+  mode: string
+  size: string
+  right: boolean
+  left: boolean
+}
+
+export const ButtonElement = styled.button<IButtonElement>`
+  transition: 300ms;
+  border-radius: ${Theme.borderRadius.s};
+  overflow: hidden;
+  cursor: pointer;
+  box-sizing: border-box;
+  margin-left: ${(p) => (p.right ? Theme.padding.m : '0')};
+  margin-right: ${(p) => (p.left ? Theme.padding.m : '0')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+
+  ${(p) =>
+    p.mode === 'primary' &&
+    `background-color: ${Theme.colors.primary};
+    color: ${Theme.colors.white};
+    border: 1px solid rgba(0,0,0,0.15);`}
+  ${(p) =>
+    p.mode === 'inverse' &&
+    `background-color: ${Theme.colors.white};
+    color: ${Theme.colors.primary};
+    border: 1px solid ${Theme.colors.primary};
+    `}
+  ${(p) =>
+    p.mode === 'ghost' &&
+    `background-color:transparent;
+    color: ${Theme.colors.primary};
+    border:none;`}
+  ${(p) =>
+    p.size === 'regular' &&
+    `font-size: ${Theme.fontSize.m};
+    line-height: ${Theme.lineHeight.m};
+    padding: ${Theme.padding.m} ${Theme.padding.l};`}
+  ${(p) =>
+    p.size === 'small' &&
+    `font-size: ${Theme.fontSize.s};
+    line-height: ${Theme.lineHeight.s};
+    padding: ${Theme.padding.s} ${Theme.padding.m};`}
+  ${(p) =>
+    p.size === 'flat' &&
+    `font-size: ${Theme.fontSize.m};
+    line-height: ${Theme.lineHeight.m};
+    padding: ${Theme.padding.s} ${Theme.padding.s};`}
+  &:hover {
+    transition: 300ms;
+    ${(p) =>
+      p.mode === 'primary' &&
+      `background-color: ${lighten(0.1, Theme.colors.primary)};`}
+    ${(p) =>
+      p.mode === 'inverse' &&
+      `background-color: ${lighten(0.4, Theme.colors.primary)}`};
+    ${(p) =>
+      p.mode === 'ghost' && `color: ${lighten(0.2, Theme.colors.primary)};`}
+  }
+
+  &.disable,
+  button[disabled] {
+    color: ${Theme.colors.disableText};
+    cursor: default;
+    &:hover {
+      color: ${Theme.colors.disableBackground};
+    }
+  }
+`

package/src/components/Button/Button.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react'
+import { ButtonElement } from './Button.styles'
+
+export interface IButtonProps {
+  text: string
+  mode?: string
+  size?: string
+  right?: boolean
+  left?: boolean
+  onClick: () => void
+}
+export const Button: FC<IButtonProps> = ({
+  text,
+  mode = 'primary',
+  size = 'regular',
+  right = false,
+  left = false,
+  onClick,
+}) => {
+  return (
+    <ButtonElement
+      mode={mode}
+      size={size}
+      right={right}
+      left={left}
+      onClick={onClick}
+    >
+      {text}
+    </ButtonElement>
+  )
+}

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export {Button} from './Button'

package/src/components/Icons/Icon.stories.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import { Icon } from './Icon'
+import { Theme } from '../../Theme/Theme'
+import { Aligment } from '../Aligment'
+
+export default {
+  title: 'Elements/Icon',
+
+  component: Icon,
+  argTypes: {
+    name: {
+      options: ['person', 'menu', 'remove', 'add', 'close'],
+      control: 'select',
+    },
+    size: { control: 'number' },
+    color: { control: { type: 'color' } },
+    bgColor: { control: 'boolean' },
+  },
+  args: {
+    onClick: undefined
+  }
+} as ComponentMeta<typeof Icon>
+
+const Template: ComponentStory<typeof Icon> = (args) => (
+  <Icon {...args}/>
+)
+
+export const Default = Template.bind({})
+Default.args ={
+  name: 'person',
+  size: 48
+}
+export const Size = Template.bind({})
+Size.args ={
+  name: 'person',
+  size: 24
+}
+export const Color = Template.bind({})
+Color.args ={
+  name: 'person',
+  size: 48,
+  color: Theme.colors.primary
+}
+export const ActionDefault = Template.bind({})
+ActionDefault.args ={
+  name: 'person',
+  size: 48,
+  onClick: ()=>console.log('click')
+}
+const DarkTemplate: ComponentStory<typeof Icon> = (args) => (
+  <Aligment backgroundColor={Theme.colors.black}><Icon {...args}/></Aligment>
+)
+export const ActionColor = DarkTemplate.bind({})
+ActionColor.args ={
+  name: 'person',
+  size: 48,
+  bgColor: true,
+  color:Theme.colors.white,
+  onClick: ()=>console.log('click')
+}

package/src/components/Icons/Icon.styles.ts

@@ -0,0 +1,29 @@
+import { lighten } from "polished";
+import styled from "styled-components";
+import { Theme } from "../../Theme/Theme";
+
+
+interface IIconElementProps {
+  bgColor?: boolean
+  onClick?: ()=>void
+}
+export const IconElement = styled.div<IIconElementProps>`
+  transition: 300ms;
+  box-sizing: border-box;
+  width:auto;
+  display:inline-flex;
+  border-radius: ${Theme.borderRadius.s};
+  ${p => p.onClick !== undefined && 
+  `
+    padding: ${Theme.padding.s};
+    cursor:pointer;
+    &:hover{
+      background-color: ${p.bgColor ?  `rgba(255,255,255,0.2)` : lighten(0.4, Theme.colors.primary)  };
+      transition: 300ms;
+    }
+    svg{
+      cursor:pointer;
+    }
+  `
+  }
+`

package/src/components/Icons/Icon.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react'
+import { Theme } from '../../Theme/Theme'
+import { IconElement } from './Icon.styles'
+import { iconsPath } from './IconsPath'
+
+export interface IIconActionProps {
+  name: string
+  size?: number
+  color?: string
+  bgColor?: boolean
+  onClick?: () => void
+}
+export const Icon: FC<IIconActionProps> = ({
+  size = 24,
+  name,
+  color = Theme.colors.text,
+  bgColor,
+  onClick,
+}) => {
+  return (
+    <IconElement onClick={onClick} bgColor={bgColor}>
+      <svg
+        width={size}
+        height={size}
+        viewBox={'0 0 48 48'}
+        preserveAspectRatio="xMidYMid meet"
+        x="0"
+        y="0"
+        name={name}
+      >
+        <path d={iconsPath[name]} fill={color} />
+      </svg>
+    </IconElement>
+  )
+}

package/src/components/Icons/Icons.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta } from '@storybook/addon-docs';
+import { ExampleTable, ExampleTableRow, ExampleTableHeader,ExampleTableCell , StoryWrapper } from '../../example'
+import { Icon } from '../Icons'
+
+<Meta title="Basic/Icons" />
+
+<StoryWrapper>
+
+  <h2>Size</h2>
+  <ExampleTable>
+    <ExampleTableRow>
+      <ExampleTableHeader>Size</ExampleTableHeader>
+      <ExampleTableHeader>Sample</ExampleTableHeader>
+    </ExampleTableRow>
+    <ExampleTableRow>
+      <ExampleTableCell>14px</ExampleTableCell>
+      <ExampleTableCell><Icon name="delete" size={14} /></ExampleTableCell>
+    </ExampleTableRow>
+    <ExampleTableRow>
+      <ExampleTableCell>16px</ExampleTableCell>
+      <ExampleTableCell><Icon name="delete" size={16} /></ExampleTableCell>
+    </ExampleTableRow>
+    <ExampleTableRow>
+      <ExampleTableCell>24px</ExampleTableCell>
+      <ExampleTableCell><Icon name="delete" size={24} /></ExampleTableCell>
+    </ExampleTableRow>
+    <ExampleTableRow>
+      <ExampleTableCell>32px</ExampleTableCell>
+      <ExampleTableCell><Icon name="delete" size={32} /></ExampleTableCell>
+    </ExampleTableRow>
+    <ExampleTableRow>
+      <ExampleTableCell>42px</ExampleTableCell>
+      <ExampleTableCell><Icon name="delete" size={42} /></ExampleTableCell>
+    </ExampleTableRow>
+  </ExampleTable>
+
+  <h2>Icons</h2>
+</StoryWrapper>

package/src/components/Icons/IconsPath.ts

@@ -0,0 +1,13 @@
+export const iconsPath = {
+  close: "m12.45 37.65-2.1-2.1L21.9 24 10.35 12.45l2.1-2.1L24 21.9l11.55-11.55 2.1 2.1L26.1 24l11.55 11.55-2.1 2.1L24 26.1Z",
+  add: "M22.5 38V25.5H10v-3h12.5V10h3v12.5H38v3H25.5V38Z",
+  back: "M24 40 8 24 24 8l2.1 2.1-12.4 12.4H40v3H13.7l12.4 12.4Z",
+  delete: "M13.05 42q-1.25 0-2.125-.875T10.05 39V10.5H8v-3h9.4V6h13.2v1.5H40v3h-2.05V39q0 1.2-.9 2.1-.9.9-2.1.9Zm21.9-31.5h-21.9V39h21.9Zm-16.6 24.2h3V14.75h-3Zm8.3 0h3V14.75h-3Zm-13.6-24.2V39Z",
+  remove: "M10 25.5v-3h28v3Z",
+  person: "M24 23.95q-3.3 0-5.4-2.1-2.1-2.1-2.1-5.4 0-3.3 2.1-5.4 2.1-2.1 5.4-2.1 3.3 0 5.4 2.1 2.1 2.1 2.1 5.4 0 3.3-2.1 5.4-2.1 2.1-5.4 2.1ZM8 40v-4.7q0-1.9.95-3.25T11.4 30q3.35-1.5 6.425-2.25Q20.9 27 24 27q3.1 0 6.15.775 3.05.775 6.4 2.225 1.55.7 2.5 2.05.95 1.35.95 3.25V40Zm3-3h26v-1.7q0-.8-.475-1.525-.475-.725-1.175-1.075-3.2-1.55-5.85-2.125Q26.85 30 24 30t-5.55.575q-2.7.575-5.85 2.125-.7.35-1.15 1.075Q11 34.5 11 35.3Zm13-16.05q1.95 0 3.225-1.275Q28.5 18.4 28.5 16.45q0-1.95-1.275-3.225Q25.95 11.95 24 11.95q-1.95 0-3.225 1.275Q19.5 14.5 19.5 16.45q0 1.95 1.275 3.225Q22.05 20.95 24 20.95Zm0-4.5ZM24 37Z",
+  menu: "M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z",
+  expand_more: "m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z",
+  expand_less: "M14.15 30.75 12 28.6l12-12 12 11.95-2.15 2.15L24 20.85Z",
+  
+}
+

package/src/components/Icons/index.ts

@@ -0,0 +1 @@
+export { Icon } from './Icon'

package/src/components/InputText/InputText.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { InputText } from "./InputText";
+
+export default {
+  title: "Form/InputText",
+  component: InputText,
+  args: {
+    type: "text",
+  },
+} as ComponentMeta<typeof InputText>;
+
+const Template: ComponentStory<typeof InputText> = (args) => (
+  <InputText {...args} />
+);
+
+export const Primary = Template.bind({});

package/src/components/InputText/InputText.styles.ts

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+import { Theme } from "../../Theme/Theme";
+
+export const InputTextField = styled.input`
+  background-color: ${Theme.colors.white};
+  border: 1px solid ${Theme.colors.gray_1};
+  width: 100%;
+  border-radius: 2px;
+  box-sizing: border-box;
+  outline: 0;
+  font-family: "Lato", sans-serif;
+  padding: ${Theme.padding.s};
+  margin: 0;
+  font-size: ${Theme.fontSize.m};
+
+  :focus {
+    border-color: ${Theme.colors.primary};
+  }
+`;

package/src/components/InputText/InputText.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from "react";
+import { InputTextField } from "./InputText.styles";
+
+export interface IInputTextProps {
+  label: string;
+  value: string | number;
+  name: string;
+  read?: boolean;
+  disable?: boolean;
+  size?: string;
+  onChange: any;
+}
+
+export const InputText: FC<IInputTextProps> = ({
+  label,
+  value,
+  name,
+  read = false,
+  disable = false,
+  size = "normal",
+  onChange,
+}) => {
+  return <InputTextField />;
+};

package/src/components/InputText/index.ts

@@ -0,0 +1 @@
+export { InputText } from "./InputText";