crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-02 02:30:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Converting app into a library WIP

Browse Source
This commit is contained in:
Hazem Krimi
2025-03-17 17:35:18 +01:00
parent 6176ed357d
commit 13f88a09b3
99 changed files with 3213 additions and 23132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Alert/index.stories.ts
+26
View File
@@ -0,0 +1,26 @@
import type { Meta, StoryObj } from '@storybook/react';
import Alert from '.';
const meta = {
title: 'Alert',
component: Alert,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
text: { control: 'text' },
color: { control: 'color' },
},
} satisfies Meta<typeof Alert>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
text: 'Alert',
color: 'client'
},
};
src/components/GlobalStyles/index.tsx
+20
View File
@@ -0,0 +1,20 @@
import { createGlobalStyle } from 'styled-components';
const GlobalStyles = createGlobalStyle`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
outline: none;
}
ul {
list-style: none
}
`;
export default GlobalStyles;
src/components/Protected/index.tsx
-19
View File
@@ -1,19 +0,0 @@
import { useReactiveVar } from '@apollo/client';
import { Navigate } from 'react-router-dom';
import { tokenVar } from '../../graphql/state';
type Props = {
children: React.ReactNode;
};
const Protected = ({ children }: Props) => {
const token = useReactiveVar(tokenVar);
return (
<>
{token ? children : <Navigate to='/login' />}
</>
);
};
export default Protected;
src/components/Public/index.tsx
-19
View File
@@ -1,19 +0,0 @@
import { useReactiveVar } from '@apollo/client';
import { Navigate } from 'react-router-dom';
import { tokenVar } from '../../graphql/state';
type Props = {
children: React.ReactNode;
};
const Public = ({ children }: Props) => {
const token = useReactiveVar(tokenVar);
return (
<>
{!token ? children : <Navigate to='/' />}
</>
);
};
export default Public;
src/components/Specification/index.tsx
-204
View File
@@ -1,204 +0,0 @@
import { forwardRef } from 'react';
import { Box, Text } from '..';
import { FeatureOutput, SpecificationOutput } from '../../graphql/types';
import { Wrapper } from './styles';
type SpecificationProps = {
specification: SpecificationOutput;
features: Array<FeatureOutput>;
};
const Specification = forwardRef<HTMLDivElement, SpecificationProps>(
({ specification, features }, ref) => {
return (
<Wrapper ref={ref}>
<Box marginBottom='30px'>
<Text variant='title'>Customer Requirements Specifications</Text>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
1. Introduction
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
1.1. Purpose
</Text>
<Text variant='body'>{specification.introduction.purpose}</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
1.2. Document Conventions
</Text>
<Text variant='body'>
{specification.introduction.documentConventions}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
1.3. Intended Audience and Reading Suggestions
</Text>
<Text variant='body'>
{specification.introduction.intendedAudience}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
1.4. Project Scope
</Text>
<Text variant='body'>
{specification.introduction.projectScope}
</Text>
</Box>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
2. Overall Description
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.1. Project Perspective
</Text>
<Text variant='body'>
{specification.overallDescription.perspective}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.2. User Classes and Characteristics
</Text>
<Text variant='body'>
{specification.overallDescription.userCharacteristics}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.3. Operating Environment
</Text>
<Text variant='body'>
{specification.overallDescription.operatingEnvironment}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.4. Design and Implementation Constraints
</Text>
<Text variant='body'>
{specification.overallDescription.designImplementationConstraints}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.5. User Documentation
</Text>
<Text variant='body'>
{specification.overallDescription.userDocumentation}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.6. Assumptions and Dependencies
</Text>
<Text variant='body'>
{specification.overallDescription.assemptionsDependencies}
</Text>
</Box>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
3. System Features
</Text>
</Box>
{features.map((feature, index) => (
<Box marginBottom='5px' key={feature.id}>
<Text variant='subheader' weight='bold' gutterBottom>
3.{index + 1}. {feature.name}
</Text>
<Text variant='body'>{feature.description}</Text>
</Box>
))}
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
4. Other Non-Functional Requirements
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
4.1. Performance Requirements
</Text>
<Text variant='body'>
{specification.nonFunctionalRequirements.performanceRequirements}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
4.2. Safety Requirements
</Text>
<Text variant='body'>
{specification.nonFunctionalRequirements.safetyRequirements}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
4.3. Security Requirements
</Text>
<Text variant='body'>
{specification.nonFunctionalRequirements.securityRequirements}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
4.4. Software Quality Attributes
</Text>
<Text variant='body'>
{
specification.nonFunctionalRequirements
.softwareQualityAttributes
}
</Text>
</Box>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
5. Other Requirements
</Text>
</Box>
<Text variant='body'>{specification.otherRequirements}</Text>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
6. Glossary
</Text>
</Box>
<Text variant='body'>{specification.glossary}</Text>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
6. Analysis Models
</Text>
</Box>
<Text variant='body'>{specification.analysisModels}</Text>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
7. Issues List
</Text>
</Box>
<Text variant='body'>{specification.issuesList}</Text>
</Box>
</Wrapper>
);
}
);
export default Specification;
src/components/Specification/styles.ts
-5
View File
@@ -1,5 +0,0 @@
import styled from 'styled-components';
export const Wrapper = styled.div`
padding: 1rem;
`;
src/components/index.tsx
-65
View File
@@ -1,65 +0,0 @@
import Button from './Button';
import IconButton from './IconButton';
import Box from './Box';
import Text from './Text';
import Link from './Link';
import Input from './Input';
import TextArea from './TextArea';
import Select from './Select';
import Search from './Search';
import Avatar from './Avatar';
import ContextMenu from './ContextMenu';
import Spinner from './Spinner';
import Alert from './Alert';
import CheckBox from './CheckBox';
import Menu from './Menu';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
import Protected from './Protected';
import Public from './Public';
import SectionSelector from './SectionSelector';
import Modal from './Modal';
import SidebarItem from './SidebarItem';
import ImagePreview from './ImagePreview';
import FeatureCard from './FeatureCard';
import FrontendFeatureCard from './FrontendFeatureCard';
import BackendFeatureCard from './BackendFeatureCard';
import Specification from './Specification';
import Chip from './Chip';
import CategoryCard from './CategoryCard';
import TemplateCard from './TemplateCard';
import SupportSidebar from './SupportSidebar';
export {
Button,
IconButton,
Box,
Text,
Link,
Input,
TextArea,
Select,
Search,
Avatar,
ContextMenu,
Menu,
Spinner,
Alert,
CheckBox,
Navbar,
Sidebar,
Protected,
Public,
SectionSelector,
Modal,
SidebarItem,
ImagePreview,
FeatureCard,
FrontendFeatureCard,
BackendFeatureCard,
Specification,
Chip,
CategoryCard,
TemplateCard,
SupportSidebar,
};