Update: update...

.eslintrc.json

@@ -32,24 +32,5 @@
         "caughtErrorsIgnorePattern": "^_"
       }
     ]
-    /*     "import/order": [
-      "error",
-      {
-        "groups": ["builtin", "external", "internal"],
-        "pathGroups": [
-          {
-            "pattern": "react",
-            "group": "external",
-            "position": "before"
-          }
-        ],
-        "pathGroupsExcludedImportTypes": ["react"],
-        "newlines-between": "always",
-        "alphabetize": {
-          "order": "asc",
-          "caseInsensitive": true
-        }
-      }
-    ] */
   }
 }

README.md

@@ -70,13 +70,11 @@ yarn run test:coverage``` script
 
 ## Resources
 
-- [Product design](https://www.figma.com/file/3awAF5mKSCZVdhfnmu8R7g/Service-Dey?type=design&node-id=100-42&t=SkxXK9zT64bhFQfD-0)
-
 - [Local URL](http://localhost:3000)
 
-- [Staging URL](https://x10-staging.vercel.app/)
+- [Staging URL](https://x10-staging.netlify.app/)
 
-- [Production URL](https://x10.com)
+- [Production URL](https://x10.dev)
 
 ## PR convention
 
@@ -96,7 +94,7 @@ For example, image 2 and give the images a title e.g New login page
 
 ## Code convention
 
-We use the "next/core-web-vitals" coding standard which is enforced by an eslint-extension we use. So, ensure to go through at least each file within the folders to get an overview of our coding standards like "imports patterns", "export patterns", "named regular functions", "arrow function", "anonymous function, please don't do this one, we want all our functions to be named at least a-named-function-expression :)"
+We try as much as possible to follow the best and latest code standards. So, ensure to go through at least each file within the folders to get an overview of our coding standards like "imports patterns", "export patterns", "named regular functions", "arrow function", "anonymous function, please don't do this one, we want all our functions to be named at least a-named-function-expression :)"
 
 ## Folder naming convention
 

package.json

@@ -22,6 +22,9 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@tanstack/react-query": "^5.28.4",
     "axios": "^1.6.8",
     "js-crypto-hmac": "^1.0.7",
     "react": "^18.2.0",

public/manifest.json

@@ -1,21 +1,21 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "x10",
+  "name": "x10",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
     },
     {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     },
     {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
     }
   ],
   "start_url": ".",

src/design-system/assets/index.ts

@@ -0,0 +1 @@
+export {};

src/design-system/colors/index.stories.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import { StoryObj, Meta } from '@storybook/react';
+
+import { colors } from './index';
+
+type ColorsPropTypes = {
+  color: string;
+};
+
+const Colors = ({ color }: ColorsPropTypes) => (
+  <div
+    style={{
+      width: '100vw',
+      height: '100vh',
+      backgroundColor: '#34BA96',
+      border: 'solid 5px #000',
+    }}
+  >
+    <div
+      style={{
+        backgroundColor: color,
+        borderRadius: '8px',
+        width: '250px',
+        height: '250px',
+      }}
+    ></div>
+  </div>
+);
+
+const meta: Meta<typeof Colors> = {
+  title: 'COLORS',
+  component: Colors,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Colors>;
+
+export const Primary400: Story = { args: { color: colors.primary400 } };
+export const Primary300: Story = { args: { color: colors.primary300 } };
+export const Primary200: Story = { args: { color: colors.primary200 } };
+export const Primary100: Story = { args: { color: colors.primary100 } };
+
+export const Secondary400: Story = { args: { color: colors.secondary400 } };
+export const Secondary300: Story = { args: { color: colors.secondary300 } };
+export const Secondary200: Story = { args: { color: colors.secondary200 } };
+export const Secondary100: Story = { args: { color: colors.secondary100 } };
+
+export const White400: Story = { args: { color: colors.white400 } };
+export const White300: Story = { args: { color: colors.white300 } };
+export const White200: Story = { args: { color: colors.white200 } };
+export const White100: Story = { args: { color: colors.white100 } };
+
+export const Dark500: Story = { args: { color: colors.dark500 } };
+export const Dark400: Story = { args: { color: colors.dark400 } };
+export const Dark300: Story = { args: { color: colors.dark300 } };
+export const Dark200: Story = { args: { color: colors.dark200 } };
+export const Dark100: Story = { args: { color: colors.dark100 } };
+
+export const Grey300: Story = { args: { color: colors.grey300 } };
+export const Grey200: Story = { args: { color: colors.grey200 } };
+export const Grey100: Story = { args: { color: colors.grey100 } };
+
+export const Accent400: Story = { args: { color: colors.accent400 } };
+export const Accent300: Story = { args: { color: colors.accent300 } };
+export const Accent200: Story = { args: { color: colors.accent200 } };
+export const Accent100: Story = { args: { color: colors.accent100 } };
+
+export const Success400: Story = { args: { color: colors.success400 } };
+export const Success300: Story = { args: { color: colors.success300 } };
+export const Success200: Story = { args: { color: colors.success200 } };
+export const Success100: Story = { args: { color: colors.success100 } };
+
+export const Error400: Story = { args: { color: colors.error400 } };
+export const Error300: Story = { args: { color: colors.error300 } };
+export const Error200: Story = { args: { color: colors.error200 } };
+export const Error100: Story = { args: { color: colors.error100 } };
+
+export const Warning400: Story = { args: { color: colors.warning400 } };
+export const Warning300: Story = { args: { color: colors.warning300 } };
+export const Warning200: Story = { args: { color: colors.warning200 } };
+export const Warning100: Story = { args: { color: colors.warning100 } };
+
+export const Magenta400: Story = { args: { color: colors.magenta400 } };
+export const Magenta300: Story = { args: { color: colors.magenta300 } };
+export const Magenta200: Story = { args: { color: colors.magenta200 } };
+export const Magenta100: Story = { args: { color: colors.magenta100 } };
+
+export const Neutral400: Story = { args: { color: colors.neutral400 } };
+export const Neutral300: Story = { args: { color: colors.neutral300 } };

src/design-system/colors/index.test.ts

@@ -0,0 +1,61 @@
+import { colors } from './index';
+
+describe('colors', () => {
+  it('should confirm colors are valid', () => {
+    expect({
+      white400: '#fff',
+      white300: '#FDFEFF',
+      white200: '#F7F7F7',
+      white100: '#F7F7F7',
+
+      warning400: '#FF7A00',
+      warning300: '#FF9534',
+      warning200: '#FFB067',
+      warning100: '#FFD0A5',
+      warning50: '#FFF7EF',
+
+      secondary400: '#181818',
+      secondary300: '#737373',
+      secondary200: '#B0B0B0',
+      secondary100: '#DFDFDF',
+
+      error400: '#FF0000',
+      error300: '#FF5656',
+      error200: '#FDA1A1',
+      error100: '#FCDEDE',
+
+      success400: '#02A543',
+      success300: '#5CC486',
+      success200: '#A2DDB9',
+      success100: '#D4EEDE',
+
+      magenta400: '#CD00D1',
+      magenta300: '#DE5BE0',
+      magenta200: '#EBA1ED',
+      magenta100: '#F4D4F5',
+
+      primary400: '#0038FF',
+      primary300: '#5B7FFE',
+      primary200: '#A1B5FD',
+      primary100: '#D4DDFC',
+
+      dark500: '#000',
+      dark400: '#212121',
+      dark300: '#4D4D4D',
+      dark200: '#999999',
+      dark100: '#C9C9C9',
+
+      grey300: '#242426',
+      grey200: '#4f4e50',
+      grey100: '#cacacb',
+
+      accent400: '#E7E7E7',
+      accent300: '#EEEEEE',
+      accent200: '#F3F3F3',
+      accent100: '#F7F7F7',
+
+      neutral400: '#6f6c90',
+      neutral300: '#d9dbe9',
+    }).toMatchObject(colors);
+  });
+});

src/design-system/colors/index.ts

@@ -0,0 +1,65 @@
+/**
+ * @colors this is our colors token.
+ *
+ * @sample
+ * ```ts
+ * const H1 = styled.h1`
+ *      color: ${(props) => props.theme.colors.warning400};
+ *   `;
+ * ```
+ */
+export const colors = {
+  white400: '#fff',
+  white300: '#FDFEFF',
+  white200: '#F7F7F7',
+  white100: '#F7F7F7',
+
+  warning400: '#FF7A00',
+  warning300: '#FF9534',
+  warning200: '#FFB067',
+  warning100: '#FFD0A5',
+  warning50: '#FFF7EF',
+
+  secondary400: '#181818',
+  secondary300: '#737373',
+  secondary200: '#B0B0B0',
+  secondary100: '#DFDFDF',
+
+  error400: '#FF0000',
+  error300: '#FF5656',
+  error200: '#FDA1A1',
+  error100: '#FCDEDE',
+
+  success400: '#02A543',
+  success300: '#5CC486',
+  success200: '#A2DDB9',
+  success100: '#D4EEDE',
+
+  magenta400: '#CD00D1',
+  magenta300: '#DE5BE0',
+  magenta200: '#EBA1ED',
+  magenta100: '#F4D4F5',
+
+  primary400: '#0038FF',
+  primary300: '#5B7FFE',
+  primary200: '#A1B5FD',
+  primary100: '#D4DDFC',
+
+  dark500: '#000',
+  dark400: '#212121',
+  dark300: '#4D4D4D',
+  dark200: '#999999',
+  dark100: '#C9C9C9',
+
+  grey300: '#242426',
+  grey200: '#4f4e50',
+  grey100: '#cacacb',
+
+  accent400: '#E7E7E7',
+  accent300: '#EEEEEE',
+  accent200: '#F3F3F3',
+  accent100: '#F7F7F7',
+
+  neutral400: '#6f6c90',
+  neutral300: '#d9dbe9',
+} as const;

src/design-system/design-tokens.ts

@@ -0,0 +1,10 @@
+import * as assets from './assets';
+
+import { colors } from './colors';
+import { typography } from './typography';
+
+export const designTokens = {
+  colors,
+  typography,
+  assets,
+};