commit d1f892739678db66266fb725d5463d322f0c9666
parent 65e800a5090983ea3222048ecea8bc88c1266fe9
Author: MTRNord <mtrnord1@gmail.com>
Date: Thu, 20 Apr 2023 22:27:50 +0200
Fix some issues and organise stories
Diffstat:
11 files changed, 64 insertions(+), 44 deletions(-)
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -2,8 +2,8 @@ import type { Preview } from "@storybook/react";
import React from "react";
import { Provider } from "react-redux";
import { store } from "../src/app/store";
-import './tailwindcss.scss'
import { withThemeByDataAttribute } from '@storybook/addon-styling';
+import './tailwindcss.scss'
const preview: Preview = {
parameters: {
diff --git a/.storybook/tailwindcss.scss b/.storybook/tailwindcss.scss
@@ -1,7 +1,3 @@
@tailwind base;
-@tailwind components;
@tailwind utilities;
-
-body {
- background: #e0e0e0;
-}
-\ No newline at end of file
+@tailwind components;
+\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "typescript.tsdk": "node_modules/typescript/lib"
+}
+\ No newline at end of file
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -1,15 +1,3 @@
.button {
- @apply block uppercase mx-auto shadow text-white text-xs py-3 px-10 rounded;
-}
-
-.primary {
- @apply bg-green-400;
-}
-
-.secondary {
- @apply bg-orange-400;
-}
-
-.abort {
- @apply bg-red-400;
+ @apply block uppercase mx-auto shadow text-black text-xs py-3 px-10 rounded font-medium;
}
\ No newline at end of file
diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx
@@ -1,12 +1,11 @@
import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
import { Provider } from 'react-redux';
import { store } from '../../app/store';
import Button from './button';
import { BADGE } from '@geometricpanda/storybook-addon-badges';
const meta: Meta<typeof Button> = {
- title: 'Button',
+ title: 'Fundamentals/Buttons/BasicButton',
tags: ['autodocs'],
component: Button,
parameters: {
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -21,10 +21,10 @@ type ButtonProps = {
export default function Button({ type = "button", style = "primary", onClick, children }: ButtonProps) {
if (style === "secondary") {
- return <button onClick={onClick} className="button secondary" type={type}>{children}</button>;
+ return <button onClick={onClick} className="button bg-orange-400" type={type}>{children}</button>;
} else if (style === "abort") {
- return <button onClick={onClick} className="button abort" type={type}>{children}</button>;
+ return <button onClick={onClick} className="button bg-red-400" type={type}>{children}</button>;
} else {
- return <button onClick={onClick} className="button primary" type={type}>{children}</button>;
+ return <button onClick={onClick} className="button bg-green-400" type={type}>{children}</button>;
}
}
\ No newline at end of file
diff --git a/src/components/header/header.stories.tsx b/src/components/header/header.stories.tsx
@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Provider } from 'react-redux';
+import { store } from '../../app/store';
+import Header from './header';
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+
+const meta: Meta<typeof Header> = {
+ title: 'Fundamentals/Typography/Header',
+ tags: ['autodocs'],
+ component: Header,
+ parameters: {
+ badges: [BADGE.EXPERIMENTAL]
+ },
+ argTypes: {
+ children: {
+ required: true,
+ name: "Content",
+ description: "The Headertext",
+ },
+ }
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const Default: Story = {
+ args: {
+ children: 'Header',
+ },
+ render: (args) => <Provider store={store}>
+ <Header {...args} />
+ </Provider>,
+};
+\ No newline at end of file
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -0,0 +1,10 @@
+type HeaderProps = {
+ /**
+ * The HeaderText
+ */
+ children: string
+};
+
+export default function Header({ children }: HeaderProps) {
+ return <h1 className='text-black font-bold text-xl'>{children}</h1>;
+}
+\ No newline at end of file
diff --git a/src/components/login/login.scss b/src/components/login/login.scss
@@ -1,13 +0,0 @@
-.loginForm {
- display: flex;
- flex-direction: column;
- gap: 4px;
- border-radius: 15px;
- background: #e0e0e0;
- box-shadow: 22px 22px 44px #cacaca, -22px -22px 44px #f6f6f6;
- padding: 16px;
-}
-
-.errorMsg {
- color: red;
-}
diff --git a/src/components/login/login.tsx b/src/components/login/login.tsx
@@ -1,9 +1,10 @@
import { useState } from 'react';
+import { ApiActions } from '../../app/api/api';
import { getLoginError, setBaseUrl } from '../../app/api/reducers';
import { useAppDispatch, useAppSelector } from '../../app/hooks';
import { RootState } from '../../app/store';
import Button from '../button/button';
-import './login.scss';
+import Header from '../header/header';
export function Login() {
const loginError = useAppSelector((state: RootState) => getLoginError(state));
@@ -13,9 +14,9 @@ export function Login() {
const dispatch = useAppDispatch();
return (
- <div className="loginForm">
- <h1>Login</h1>
- {loginError ? <span className='errorMsg'>{loginError}</span> : <></>}
+ <div className="flex flex-col rounded shadow p-4 bg-slate-200 gap-2">
+ <Header>Login</Header>
+ {loginError ? <h2 className='text-red-500 font-normal text-sm'>{loginError}</h2> : <></>}
<input
value={homeserver}
type="text"
@@ -38,6 +39,7 @@ export function Login() {
<Button
style="primary"
type="button"
+ onClick={() => dispatch({ type: ApiActions.LOGIN })}
>
Login
</Button>
diff --git a/src/pages/LoginPage.stories.tsx b/src/pages/LoginPage.stories.tsx
@@ -1,11 +1,10 @@
import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
import { Provider } from 'react-redux';
import { store } from '../app/store';
import LoginPage from './LoginPage';
const meta: Meta<typeof LoginPage> = {
- title: 'LoginPage',
+ title: 'Pages/LoginPage',
tags: ['autodocs'],
component: LoginPage,
};
