@mailstep/design-system 0.0.6 → 0.0.7

package/package.json

@@ -1,26 +1,25 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "license": "ISC",
   "type": "module",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "build-storybook": "storybook build",
-    "files": [
-      "dist"
-    ],
-    "main": "./dist/index.umd.js",
-    "module": "./dist/index.es.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-      ".": {
-        "import": "./dist/index.es.js",
-        "require": "./dist/index.umd.js"
-      }
-    }
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.3.0",

package/.eslintrc.cjs

@@ -1,16 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    es2020: true
-  },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': ['warn', {
-      allowConstantExport: true
-    }]
-  }
-};

package/dist/Elements/Button/stories/Button.stories.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: ({ isLoading, loadingText, icon, appearance, disabled, sizing, buttonRef, onClick, fullWidth, ...props }: import("../types").Props) => JSX.Element;
-    tags: string[];
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const PrimaryLight: Story;
-export declare const Secondary: Story;
-export declare const Success: Story;
-export declare const Large: Story;
-export declare const Small: Story;
-export declare const DisabledPrimary: Story;
-export declare const DisabledSecondary: Story;
-export declare const Loading: Story;
-export declare const WithIcon: Story;

package/dist/Elements/Icon/stories/Icon.stories.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: ({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("..").IconProps) => JSX.Element;
-    tags: string[];
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Expedition: Story;
-export declare const Spinning: Story;
-export declare const SmallExpedition: Story;
-export declare const BigExpedition: Story;
-export declare const ExpeditionPink: Story;
-export declare const ExpeditionPinkSolid: Story;

package/src/ui/Elements/Button/Button.d.ts

@@ -1,4 +0,0 @@
-import { Props } from './types'
-declare interface Button {
-  (props: Props): JSX.Element
-}

package/src/ui/Elements/Button/Button.tsx

@@ -1,42 +0,0 @@
-import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles'
-import { Props } from './types'
-import Spinner from '../Spinner'
-
-const Button = ({
-  isLoading,
-  loadingText,
-  icon,
-  appearance = 'primary',
-  disabled = false,
-  sizing = 'normal',
-  buttonRef,
-  onClick,
-  fullWidth = false,
-  ...props
-}: Props): JSX.Element => (
-  <StyledButton
-    {...props}
-    onClick={!disabled && !isLoading ? onClick : undefined}
-    data-appearance={appearance}
-    data-sizing={sizing}
-    disabled={disabled}
-    ref={buttonRef}
-    fullWidth={fullWidth}
-  >
-    <StyledWrapper>
-      {icon && (typeof icon === 'string' ? <StyledIcon $addMargin={!!props.children} icon={icon} /> : icon)}
-      {isLoading ? (
-        <>
-          <LoadingIconWrapper $addMargin={!!loadingText || !!props.children}>
-            <Spinner variant="sm" />
-          </LoadingIconWrapper>
-          {loadingText || loadingText === '' ? loadingText : 'Loading'}
-        </>
-      ) : (
-        props.children
-      )}
-    </StyledWrapper>
-  </StyledButton>
-)
-
-export default Button

package/src/ui/Elements/Button/index.d.ts

@@ -1,6 +0,0 @@
-import { Props, AppearanceValue } from './types'
-
-declare const Button: (props: Props) => JSX.Element
-
-export default Button
-export { AppearanceValue, Props }

package/src/ui/Elements/Button/index.ts

@@ -1,5 +0,0 @@
-import Button from './Button'
-import { AppearanceValue } from './types'
-
-export default Button
-export type { AppearanceValue }

package/src/ui/Elements/Button/stories/Button.stories.ts

@@ -1,84 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import Button from '../'
-
-const meta = {
-  title: 'Elements/Button',
-  component: Button,
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof Button>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {
-  args: {
-    children: 'Primary',
-  },
-}
-
-export const PrimaryLight: Story = {
-  args: {
-    children: 'Primary Light',
-    appearance: 'primaryLight',
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    children: 'Secondary',
-    appearance: 'secondary',
-  },
-}
-
-export const Success: Story = {
-  args: {
-    children: 'Success',
-    appearance: 'success',
-  },
-}
-
-export const Large: Story = {
-  args: {
-    children: 'Large',
-    sizing: 'large',
-  },
-}
-
-export const Small: Story = {
-  args: {
-    children: 'Small',
-    sizing: 'normal',
-  },
-}
-
-export const DisabledPrimary: Story = {
-  args: {
-    children: 'Disabled',
-    disabled: true,
-  },
-}
-
-export const DisabledSecondary: Story = {
-  args: {
-    children: 'Disabled',
-    disabled: true,
-    appearance: 'secondary',
-  },
-}
-
-export const Loading: Story = {
-  args: {
-    appearance: 'secondary',
-    loadingText: 'Loading...',
-    isLoading: true,
-  },
-}
-
-export const WithIcon: Story = {
-  args: {
-    label: 'Button',
-    children: 'Small',
-    icon: 'coffee',
-  },
-}

package/src/ui/Elements/Button/styles.ts

@@ -1,289 +0,0 @@
-import { th } from '@xstyled/styled-components'
-import styled from '@xstyled/styled-components'
-import Icon from '../Icon'
-
-export const StyledWrapper = styled.span`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-export const LoadingIconWrapper = styled.div<{
-  $addMargin: boolean
-}>`
-  & svg {
-    margin-right: ${({ $addMargin }: { $addMargin: boolean }): string => ($addMargin ? '0.5em' : '0')};
-  }
-`
-
-export const StyledIcon = styled(Icon)<{
-  $addMargin: boolean
-}>`
-  & svg {
-    height: 1em;
-    margin-right: ${({ $addMargin }): string => ($addMargin ? '0.5em' : '0')};
-  }
-`
-
-export const StyledButton = styled.button<{
-  disabled: boolean
-  columnAlign?: boolean
-  children?: any
-  onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
-  fullWidth: boolean
-  mt?: string | number
-  mr?: string | number
-  mb?: string | number
-  ml?: string | number
-}>`
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'initial')};
-  margin-top: ${({ mt }) => (mt ? mt : 0)};
-  margin-right: ${({ mr }) => (mr ? mr : 0)};
-  margin-bottom: ${({ mb }) => (mb ? mb : 0)};
-  margin-left: ${({ ml }) => (ml ? ml : 0)};
-  height: 2.5em;
-  border: slim;
-  text-align: center;
-  text-decoration: none;
-  display: ${({ columnAlign }) => (columnAlign ? 'flex' : 'inline-flex')};
-  flex-direction: ${({ columnAlign }) => (columnAlign ? 'column' : 'auto')};
-  align-items: ${({ columnAlign }) => (columnAlign ? 'center' : 'auto')};
-  font-family: ${th('fonts.primary')};
-  font-weight: semiBold;
-  border-radius: lg;
-  cursor: pointer;
-  transition-duration: 0.1s;
-  align-items: center;
-  justify-content: center;
-  transition: all 300ms ease-out;
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
-  opacity: ${({ disabled }) => (disabled ? '0.6' : '1')};
-
-  :disabled {
-    color: lightGray5;
-  }
-
-  :focus {
-    outline: none;
-  }
-
-  &[data-appearance='primary'] {
-    background-color: red1;
-    color: white;
-    border-color: red1;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: white;
-        color: red1;
-        border-color: red1;
-      }
-    }
-
-    :active {
-      background-color: red1;
-      color: red1;
-      border: none;
-    }
-
-    :disabled {
-      background-color: bgLightGray;
-      border-color: lightGray5;
-      color: gray3;
-    }
-  }
-
-  &[data-appearance='primaryLight'] {
-    color: red1;
-    background-color: red20;
-    border-color: red20;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: red1;
-        color: white;
-        border-color: red1;
-      }
-    }
-
-    :active {
-      background-color: red1;
-      color: white;
-      border-color: red1;
-    }
-
-    :disabled {
-      background-color: bgLightGray;
-      border-color: lightGray5;
-      color: gray3;
-    }
-  }
-
-  &[data-appearance='success'] {
-    background-color: successColor;
-    color: white;
-    border-color: successColor;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: white;
-        color: successColor;
-      }
-    }
-
-    :active {
-      background-color: white;
-      color: successColor;
-    }
-
-    :disabled {
-      background-color: bgLightGray;
-      border-color: lightGray5;
-      color: gray3;
-    }
-  }
-
-  &[data-appearance='secondary'] {
-    background-color: white;
-    color: red1;
-    border-color: red1;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: red1;
-        color: white;
-        border-color: red1;
-      }
-    }
-
-    :active {
-      background-color: red1;
-      color: red1;
-      border-color: red1;
-    }
-
-    :disabled {
-      background-color: white;
-      border-color: lightGray7;
-    }
-  }
-
-  &[data-appearance='secondaryLg'] {
-    background-color: white;
-    color: typoPrimary;
-    border-color: blue2;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: blue2;
-        color: white;
-        border-color: blue2;
-      }
-    }
-
-    :active {
-      background-color: gray;
-      color: white;
-      border: none;
-    }
-
-    :disabled {
-      background-color: white;
-      border-color: bgLightGray1;
-    }
-  }
-
-  &[data-appearance='primaryLg'] {
-    background-color: blue2;
-    color: white;
-    border-color: blue2;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: white;
-        color: typoPrimary;
-        border-color: blue2;
-      }
-    }
-
-    :active {
-      background-color: gray;
-      color: white;
-      border: none;
-    }
-
-    :disabled {
-      background-color: bgLightGray1;
-      border-color: bgLightGray1;
-    }
-  }
-
-  &[data-appearance='minimal'] {
-    background-color: transparent;
-    border: none !important;
-    color: blue2;
-
-    :disabled {
-      color: blue2;
-    }
-  }
-
-  &[data-appearance='minimalRed'] {
-    background-color: transparent;
-    border: none !important;
-    color: red1;
-
-    @media (hover: hover) {
-      &:hover {
-        color: red3;
-        svg {
-          fill: red3 !important;
-        }
-      }
-    }
-    
-    :disabled,
-    :active {
-      color: red3;
-      svg {
-        fill: red3 !important;
-      }
-    }
-  }
-
-  &[data-sizing='icon'] {
-    aspect-ratio: 4 / 3;
-    padding: 0.5em 0.875em;
-  }
-
-  &[data-sizing='iconLg'] {
-    min-width: 42px;
-    min-height: 38px;
-    padding: 0.5em 0.875em;
-    svg {
-      height: 16px;
-    }
-  }
-
-  &[data-sizing='normal'] {
-    min-width: 7rem;
-    padding: 12px 18px;
-    min-height: 38px;
-    line-height: 14px;
-    font-size: 14px;
-  }
-
-  &[data-sizing='large'] {
-    min-width: 12rem;
-    padding: 0.75em 1.5em;
-    min-height: 34px;
-    font-size: 12px;
-  }
-
-  &[data-sizing='grid'] {
-    min-width: 5rem;
-    padding: 0.5em 1.25em;
-    font-size: 10px;
-    border-radius: 5px;
-  }
-`

package/src/ui/Elements/Button/types.ts

@@ -1,31 +0,0 @@
-export type SizingValue = 'icon' | 'iconLg' | 'normal' | 'large' | 'grid'
-
-export type AppearanceValue =
-  | 'primary'
-  | 'primaryLight'
-  | 'secondary'
-  | 'primaryLg'
-  | 'secondaryLg'
-  | 'minimal'
-  | 'minimalRed'
-  | 'success'
-
-export type Props = React.HTMLProps<HTMLButtonElement> & {
-  children?: React.ReactNode
-  disabled?: boolean
-  appearance?: AppearanceValue
-  buttonRef?: any
-  sizing?: SizingValue
-  isLoading?: boolean
-  name?: string
-  as?: string | React.ComponentType
-  loadingText?: string | JSX.Element
-  columnAlign?: boolean
-  icon?: string | JSX.Element
-  type?: 'button' | 'submit' | 'reset'
-  fullWidth?: boolean
-  mt?: string | number
-  mr?: string | number
-  mb?: string | number
-  ml?: string | number
-}

package/src/ui/Elements/Icon/BadgeIcon.tsx

@@ -1,45 +0,0 @@
-import { useMemo } from 'react'
-import styled from '@xstyled/styled-components'
-import Icon from './Icon'
-import { IconProps } from './types'
-
-type Props = {
-  badge: 'warning'
-} & IconProps
-
-const Badge = styled(Icon)`
-  display: inline-table;
-  vertical-align: middle;
-  position: absolute;
-  top: -10%;
-  right: -10%;
-  font-size: 60%;
-`
-
-const RelativeWrap = styled.div<{ width?: string | number }>`
-  position: relative;
-`
-
-// TODO expad to accet numerical badges
-
-export const BadgeIcon = ({ badge, ...iconProps }: Props): JSX.Element => {
-  const badgeProps = useMemo(() => {
-    if (badge == 'warning') {
-      return {
-        icon: 'warningDual',
-        fill: 'black',
-        secondaryColor: 'yellow2',
-      }
-    }
-    return {} as IconProps
-  }, [badge])
-
-  return (
-    <RelativeWrap>
-      <Badge {...badgeProps} />
-      <Icon {...iconProps} />
-    </RelativeWrap>
-  )
-}
-
-export default BadgeIcon