@mailstep/design-system 0.0.0

package/.eslintrc.cjs

@@ -0,0 +1,16 @@
+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/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,20 @@
+import withTheme from './withTheme'
+import withRouter from './withRouter'
+
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export const decorators = [withTheme, withRouter];
+
+export default preview;

package/.storybook/withRouter.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { MemoryRouter } from 'react-router-dom'
+
+const withProvider = (Story: React.FC): JSX.Element => (
+  <>
+    <MemoryRouter>
+      <Story />
+    </MemoryRouter>
+  </>
+)
+
+export default withProvider

package/.storybook/withTheme.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { ThemeProvider } from '@xstyled/styled-components'
+import { createGlobalStyle } from 'styled-components'
+import themes from '../src/packages/ui/ThemeProvider/themes'
+
+const GlobalStyle = createGlobalStyle`
+  @import url('${themes.default.fontLinks?.[0]}');
+  body {
+    font-family: ${themes.default.fonts?.primary}
+  }
+  
+`
+
+const withTheme = (Story: React.FC): JSX.Element => {
+  return (
+    <ThemeProvider theme={themes.default}>
+      <GlobalStyle />
+      <Story />
+    </ThemeProvider>
+  )
+}
+
+export default withTheme

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@mailstep/design-system",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "publish": "npm publish --access public",
+    "preview": "vite preview",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
+    "@fortawesome/pro-light-svg-icons": "^6.0.0",
+    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
+    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@xstyled/styled-components": "^3.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.17.0",
+    "styled-components": "^5.3.10"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-interactions": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/react": "^7.5.2",
+    "@storybook/react-vite": "^7.5.2",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-storybook": "^0.6.15",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.5.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

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

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

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

@@ -0,0 +1,42 @@
+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/packages/ui/Elements/Button/index.d.ts

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

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

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

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

@@ -0,0 +1,84 @@
+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/packages/ui/Elements/Button/styles.ts

@@ -0,0 +1,289 @@
+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/packages/ui/Elements/Button/types.ts

@@ -0,0 +1,31 @@
+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/packages/ui/Elements/Icon/BadgeIcon.tsx

@@ -0,0 +1,45 @@
+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