add popup message

README.md

@@ -1,4 +1,4 @@
-# ⚛️⚡ Vite + React + Typescript Component Library Template
+# TBSUI SSR
 
 ## Features
 
@@ -14,13 +14,6 @@
 - 👷 [Github Actions](https://github.com/features/actions) — Releasing versions to NPM
 - Initial components setup using [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)
 
-## Getting Started
-
-1. Create a new repository using this one as template
-2. Clone your repo
-3. Install dependencies with `pnpm i` (first run `corepack enable` to enable pnpm)
-4. Run `pnpm prepare` command to setup [Husky](https://typicode.github.io/husky) pre-commit hooks.
-
 ### Main Scripts
 
 Always prepending pnpm:
@@ -63,15 +56,15 @@ To import the styles the library needs:
 
 ```js
 /* _app.tsx */
-import '<your-library>/dist/style.css'
+import 'tbsui-srr/dist/style.css'
 // More imports and your App component ...
 ```
 
 To import library components:
 
 ```js
 /* pages/index.tsx */
-import { AtButton } from '<your-library>'
+import { AtButton } from 'tbsui-ssr'
 // More imports and your Page component...
 ```
 

src/lib/components/molecules/popup-message/index.tsx

@@ -0,0 +1,29 @@
+import { FC, PropsWithChildren } from 'react'
+import styles from './popup-message.module.scss'
+
+export type PopupMessageVariant = 'INFO' | 'WARNING' | 'ERROR' | 'SUCCESS'
+
+export interface PopupMessageProps {
+  label: string
+  variant?: PopupMessageVariant
+  delay?: 0 | 1 | 5 | 10
+  style?: React.CSSProperties
+}
+
+export const PopupMessage: FC<PropsWithChildren<PopupMessageProps>> = ({
+  label,
+  variant = 'PRIMARY',
+  children,
+  delay = 5,
+  style,
+}) => {
+  return (
+    <div
+      style={style}
+      className={`${styles.popup_message} ${styles[variant.toLowerCase()]} ${styles[`fade_in_delay_${delay}`]}`}
+    >
+      <h3 className={styles.popup_message_label}>{label}</h3>
+      {children}
+    </div>
+  )
+}

src/lib/components/molecules/popup-message/popup-message.module.scss

@@ -0,0 +1,89 @@
+.fade_in_delay_base {
+    @keyframes delayed_fade_in {
+        0%{
+            display: none;
+        }
+        1% {
+            opacity: 0;
+            display: flex;
+            transform: translateY(100px);
+        }
+        5% {
+            opacity: 1;
+            transform: translateX(0px);
+        }
+        95% {
+            opacity: 1;
+            transform: translateX(0px);
+        }
+        99% {
+            opacity: 0;
+            display: flex;
+            transform: translateY(100px);
+        }
+        100% {
+            display: none;
+        }
+    }
+    animation: delayed_fade_in 10s ease-in-out;
+    animation-fill-mode: forwards;
+    opacity: 0;
+}
+
+.fade_in_delay_0 {
+    @extend .fade_in_delay_base;
+    animation-delay: 0s;
+}
+
+.fade_in_delay_1 {
+    @extend .fade_in_delay_base;
+    animation-delay: 1s;
+}
+
+.fade_in_delay_5 {
+    @extend .fade_in_delay_base;
+    animation-delay: 2s;
+}
+
+.fade_in_delay_10 {
+    @extend .fade_in_delay_base;
+    animation-delay: 3s;
+}
+
+.popup_message {
+    z-index: var(--zindex-overlay);
+    width: var(--width-md);
+    border-radius: 0 var(--border-radius) var(--border-radius) 0 ;
+    background-color: var(--card-background-color);
+    color: var(--gray-100);
+    padding: var(--space-sm);
+    transition: scale 0.1s ease-in-out;
+    &:hover {
+        scale: 0.95;
+    }
+}
+
+
+.popup_message_label {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-bold);
+    font-variant-caps: all-petite-caps;
+    color: var(--gray-500);
+    margin: 0;
+    font-family: var(--font-family-label);
+}
+.info {
+    border-left: 5px solid var(--info-color);
+}
+
+.success {
+    border-left: 5px solid var(--success-color);
+}
+
+.warning {
+    border-left: 5px solid var(--warning-color);
+}
+
+.error {
+    border-left: 5px solid var(--error-color);
+}

src/lib/components/molecules/popup-message/popup-message.stories.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { PopupMessageProps, PopupMessageVariant, PopupMessage } from '.'
+import { objectValuesToControls } from '../../../storybook-utils'
+import { Meta } from '@storybook/react'
+import { StoryFn } from '@storybook/react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof PopupMessage> = {
+  title: 'Molecules/PopupMessage',
+  component: PopupMessage,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    label: { control: 'text' },
+    variant: {
+      options: ['INFO', 'WARNING', 'ERROR', 'SUCCESS'],
+      control: {
+        type: 'select',
+        label: {
+          INFO: 'INFO',
+          WARNING: 'WARNING',
+          ERROR: 'ERROR',
+          SUCCESS: 'SUCCESS',
+        },
+      },
+    },
+    delay: { options: [0, 1, 5, 10], control: { type: 'select' }, defaultValue: 1 },
+  },
+}
+
+export default meta
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: StoryFn<typeof PopupMessage> = (args: PopupMessageProps) => (
+  <PopupMessage {...args}>
+    <p className={'font-sans m-0'}>Popup message body goes here lorem ipsum dolor sit amet.</p>
+  </PopupMessage>
+)
+
+export const Primary = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  label: 'Info',
+  variant: 'INFO',
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  label: 'Warning',
+  variant: 'WARNING',
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  label: 'Error',
+  variant: 'ERROR',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  label: 'Success',
+  variant: 'SUCCESS',
+}

src/lib/components/molecules/popup-message/popup-message.test.tsx

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { PopupMessage } from './index'
+
+describe('AtButton', () => {
+  it('should render', async () => {
+    const label = 'test button'
+    render(<PopupMessage label={label} />)
+    expect(screen.getByText(label)).toBeDefined()
+  })
+})

src/lib/styles/variables/defaultvariables.scss

@@ -10,6 +10,20 @@
   --tpcard-background-color: rgba(253, 252, 255, 0.35);
   --background-3d-color: rgb(0,0,0);
   --max-width: 960px;
-  --border-radius: 1rem;
+  --border-radius: 0.5rem;
   --padding: 1rem;
+
+  --info-color: #21f7ec;
+    --success-color: #00ff00;
+    --warning-color: #ffcc00;
+    --error-color: #ff0000;
+
+    --font-family-label: 'Roboto', sans-serif;
+    --font-sans: 'Manrope', sans-serif;
+    --font-serif: 'EB Garamond', serif;
+
+    --font-weight-bold: 700;
+    --font-weight-normal: 400;
+    --font-weight-light: 200;
 }
+

src/lib/styles/variables/tailwind-compatible.scss

@@ -204,6 +204,12 @@ $spaces: (
   72: 18rem,
   80: 20rem,
   96: 24rem,
+  xs: 0.25rem,
+  sm: 0.5rem,
+    md: 1rem,
+    lg: 1.5rem,
+    xl: 2rem,
+    "2xl": 3rem,
 );
 
 @each $size, $value in $spaces {