Skip to content

Commit

Permalink
Merge branch 'develop' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
Azanul authored Oct 12, 2023
2 parents 49e3335 + 7084514 commit dc19453
Show file tree
Hide file tree
Showing 22 changed files with 3,601 additions and 787 deletions.
475 changes: 475 additions & 0 deletions dashboard/components/feedback-widget/FeedbackWidget.tsx

Large diffs are not rendered by default.

16 changes: 6 additions & 10 deletions dashboard/components/input/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import { required } from '../../utils/regex';
export type InputEvent = ChangeEvent<HTMLInputElement>;

export type InputProps = {
disabled?: boolean;
id?: number;
name: string;
type?: string;
type: string;
label: string;
required?: boolean;
regex?: RegExp;
error?: string;
value?: string | number | string[];
Expand All @@ -21,16 +23,13 @@ export type InputProps = {
function Input({
id,
name,
type = 'text',
label,
regex = required,
error = 'Please provide a value',
value,
autofocus,
min,
maxLength,
positiveNumberOnly,
action
action,
...otherProps
}: InputProps) {
const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
const inputRef = useRef<HTMLInputElement>(null);
Expand Down Expand Up @@ -66,7 +65,6 @@ function Input({
<div>
<div className="relative">
<input
type={type}
name={name}
className={`peer w-full rounded bg-white px-4 pb-[0.75rem] pt-[1.75rem] text-sm text-black-900 caret-primary outline outline-[0.063rem] outline-black-200 focus:outline-[0.12rem] focus:outline-primary ${
isValid === false && `outline-error-600 focus:outline-error-600`
Expand All @@ -82,13 +80,11 @@ function Input({
}
}}
onKeyDown={e => handleKeyDown(e)}
value={value}
ref={inputRef}
min={min}
maxLength={maxLength}
autoComplete="off"
data-lpignore="true"
data-form-type="other"
{...otherProps}
/>
<span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-black-300 transition-all peer-placeholder-shown:bottom-[1.15rem] peer-placeholder-shown:left-4 peer-placeholder-shown:scale-[87.5%] peer-focus:bottom-[1.925rem] peer-focus:scale-75">
{label}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ function InventoryViewAlertsCreateOrEditAlert({
{selected === 'BUDGET' && (
<Grid gap="sm">
<Input
type="text"
label="Name"
name="name"
action={handleChange}
Expand All @@ -199,6 +200,7 @@ function InventoryViewAlertsCreateOrEditAlert({
{selected === 'USAGE' && (
<Grid gap="sm">
<Input
type="text"
label="Name"
name="name"
action={handleChange}
Expand Down Expand Up @@ -284,6 +286,7 @@ function InventoryViewAlertsCreateOrEditAlert({
)}

<Input
type="text"
label="Secret (optional)"
name="secret"
action={handleChange}
Expand Down
42 changes: 42 additions & 0 deletions dashboard/components/modal/Modal.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import type { Meta, StoryObj } from '@storybook/react';

import Modal, { ModalProps } from './Modal';

function ModalWrapper({
children,
isOpen,
closeModal
}: Pick<ModalProps, 'children' | 'isOpen'> & { closeModal: () => void }) {
return (
<Modal isOpen={isOpen} closeModal={() => closeModal()}>
{children}
</Modal>
);
}

const meta: Meta<typeof Modal> = {
title: 'Komiser/Modal',
component: ModalWrapper,
decorators: [
Story => <div style={{ margin: '3em', height: '200px' }}>{Story()}</div>
],
tags: ['autodocs'],
argTypes: {
isOpen: {
control: 'boolean'
},
children: {
control: 'string'
}
}
};

export default meta;

type Story = StoryObj<typeof Modal>;

export const Primary: Story = {
args: {
children: 'Lorem Ipsum dolor'
}
};
11 changes: 8 additions & 3 deletions dashboard/components/modal/Modal.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { ReactNode, useEffect } from 'react';

type ModalProps = {
export type ModalProps = {
isOpen: boolean;
closeModal: () => void;
children: ReactNode;
id?: string;
};

function Modal({ isOpen, closeModal, children }: ModalProps) {
function Modal({ isOpen, closeModal, id, children }: ModalProps) {
useEffect(() => {
function escFunction(event: KeyboardEvent) {
if (event.key === 'Escape') {
Expand All @@ -26,10 +27,14 @@ function Modal({ isOpen, closeModal, children }: ModalProps) {
{isOpen && (
<>
<div
id={`${id}-wrapper`}
onClick={closeModal}
className="fixed inset-0 z-30 hidden animate-fade-in bg-black-900/10 opacity-0 sm:block"
></div>
<div className="fixed inset-0 z-30 w-full animate-fade-in-down-short bg-white p-8 opacity-0 shadow-2xl sm:bottom-auto sm:top-[15%] sm:m-auto sm:max-w-fit sm:rounded-lg">
<div
id={`${id}-modal`}
className="fixed inset-0 z-30 w-full animate-fade-in-down-short bg-white p-8 opacity-0 shadow-2xl sm:bottom-auto sm:top-[15%] sm:m-auto sm:max-w-fit sm:rounded-lg"
>
{children}
</div>
</>
Expand Down
12 changes: 8 additions & 4 deletions dashboard/components/navbar/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { useContext } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useContext } from 'react';

import useFeedbackWidget from '@components/feedback-widget/FeedbackWidget';
import GlobalAppContext from '../layout/context/GlobalAppContext';

interface NavItem {
Expand All @@ -13,6 +15,8 @@ function Navbar() {
const { displayBanner, betaFlagOnboardingWizard } =
useContext(GlobalAppContext);
const router = useRouter();
const { openFeedbackModal, FeedbackModal } = useFeedbackWidget();

// TODO: (onboarding-wizard) Remove the betaFlagOnboardingWizard conditional when feature is stable
const nav: NavItem[] = [
{ label: 'Dashboard', href: '/dashboard' },
Expand Down Expand Up @@ -117,10 +121,9 @@ function Navbar() {
Changelog
</a>
<a
className="hidden items-center gap-2 transition-colors hover:text-primary md:flex"
href="https://tally.so/r/mZjY40"
target="_blank"
className="hidden cursor-pointer items-center gap-2 transition-colors hover:text-primary md:flex"
rel="noopener noreferrer"
onClick={() => openFeedbackModal()}
>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -168,6 +171,7 @@ function Navbar() {
Join our Discord
</a>
</div>
<FeedbackModal />
</nav>
);
}
Expand Down
Loading

0 comments on commit dc19453

Please sign in to comment.