@wazobiatech/wazui 0.0.1

package/jest.setup.tsx

@@ -0,0 +1,276 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import '@testing-library/jest-dom';
+import TimeAgo from 'javascript-time-ago';
+import { TextEncoder as NodeTextEncoder, TextDecoder as NodeTextDecoder } from 'util';
+
+import en from 'javascript-time-ago/locale/en';
+import ru from 'javascript-time-ago/locale/ru';
+
+// Simple polyfill for TextEncoder/TextDecodr with proper typing
+if (typeof global.TextEncoder === 'undefined') {
+  global.TextEncoder = NodeTextEncoder as unknown as typeof TextEncoder;
+  global.TextDecoder = NodeTextDecoder as unknown as typeof TextDecoder;
+}
+Object.defineProperty(global, 'importMeta', {
+  value: {
+    env: {},
+    url: 'file:///test',
+  },
+});
+
+// Mock ResizeObserver IMMEDIATELY
+class MockResizeObserver {
+  callback: ResizeObserverCallback;
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
+  }
+
+  observe = jest.fn();
+  disconnect = jest.fn();
+  unobserve = jest.fn();
+}
+
+// Set up ResizeObserver mock on global objects
+Object.defineProperty(global, 'ResizeObserver', {
+  writable: true,
+  configurable: true,
+  value: MockResizeObserver,
+});
+
+Object.defineProperty(window, 'ResizeObserver', {
+  writable: true,
+  configurable: true,
+  value: MockResizeObserver,
+});
+
+// Mock IntersectionObserver
+class MockIntersectionObserver {
+  callback: IntersectionObserverCallback;
+
+  constructor(callback: IntersectionObserverCallback) {
+    this.callback = callback;
+  }
+
+  observe = jest.fn();
+  disconnect = jest.fn();
+  unobserve = jest.fn();
+}
+
+Object.defineProperty(global, 'IntersectionObserver', {
+  writable: true,
+  configurable: true,
+  value: MockIntersectionObserver,
+});
+
+Object.defineProperty(window, 'IntersectionObserver', {
+  writable: true,
+  configurable: true,
+  value: MockIntersectionObserver,
+});
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+TimeAgo.addDefaultLocale(en);
+TimeAgo.addLocale(ru);
+jest.mock('@/utils/images', () => ({
+  cn: jest.fn((...classes) => classes.filter(Boolean).join(' ')),
+  getImageWithDimensions: jest.fn((url, width, height) => {
+    if (width && height) {
+      return { url: `${url}?w=${width}&h=${height}`, srcset: `${url}?w=${width}&h=${height}` };
+    }
+    if (width) {
+      return {
+        url: `${url}?w=${width}`,
+        srcset: `${url}?w=${width}`,
+      };
+    }
+    return { url, srcset: url };
+  }),
+  getImageTransformationsUrl: jest.fn(({ url }) => {
+    if (!url) {
+      console.warn('getImageTransformationsUrl: No URL provided');
+      return '';
+    }
+    return url;
+  }),
+}));
+
+jest.mock('@/utils/apolloClient', () => ({
+  createApolloClient: jest.fn(() => ({
+    query: jest.fn(),
+    mutate: jest.fn(),
+    subscribe: jest.fn(),
+    cache: {
+      readQuery: jest.fn(),
+      writeQuery: jest.fn(),
+    },
+  })),
+  createApolloUploadClient: jest.fn(() => ({
+    query: jest.fn(),
+    mutate: jest.fn(),
+    subscribe: jest.fn(),
+    cache: {
+      readQuery: jest.fn(),
+      writeQuery: jest.fn(),
+    },
+  })),
+}));
+
+// Mock Apollo Client Provider if needed
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  // ApolloProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  useQuery: jest.fn(() => ({
+    data: null,
+    loading: false,
+    error: null,
+  })),
+  useMutation: jest.fn(() => [jest.fn(), { data: null, loading: false, error: null }]),
+}));
+
+jest.mock('quill', () => {
+  // Mock Quill constructor
+  const MockQuill = function (
+    this: {
+      selector: string;
+      options: any;
+      root: any;
+      container: any;
+      getContents: any;
+      setContents: jest.Mock<any, any, any>;
+      getText: any;
+      getLength: any;
+      insertText: jest.Mock<any, any, any>;
+      deleteText: jest.Mock<any, any, any>;
+      formatText: jest.Mock<any, any, any>;
+      getSelection: any;
+      setSelection: jest.Mock<any, any, any>;
+      focus: jest.Mock<any, any, any>;
+      blur: jest.Mock<any, any, any>;
+      enable: jest.Mock<any, any, any>;
+      disable: jest.Mock<any, any, any>;
+      on: jest.Mock<any, any, any>;
+      off: jest.Mock<any, any, any>;
+      once: jest.Mock<any, any, any>;
+      emit: jest.Mock<any, any, any>;
+      __esModule: true;
+      default: {
+        (selector: string, options: any): any;
+        // Add static methods that Quill might have
+        register: jest.Mock<any, any, any>;
+        find: jest.Mock<any, any, any>;
+        import: jest.Mock<any, any, any>;
+      };
+    },
+    selector: string,
+    options: any
+  ) {
+    // Store the selector and options
+    this.selector = selector;
+    this.options = options;
+    this.root = null;
+    this.container = null;
+
+    // Mock methods that Quill instances typically have
+    this.getContents = jest.fn(() => ({ ops: [] }));
+    this.setContents = jest.fn();
+    this.getText = jest.fn(() => '');
+    this.getLength = jest.fn(() => 0);
+    this.insertText = jest.fn();
+    this.deleteText = jest.fn();
+    this.formatText = jest.fn();
+    this.getSelection = jest.fn(() => null);
+    this.setSelection = jest.fn();
+    this.focus = jest.fn();
+    this.blur = jest.fn();
+    this.enable = jest.fn();
+    this.disable = jest.fn();
+    this.on = jest.fn();
+    this.off = jest.fn();
+    this.once = jest.fn();
+    this.emit = jest.fn();
+
+    // Create mock DOM elements without accessing document directly
+    const mockElement = {
+      id: selector?.replace?.('#', ''),
+      innerHTML: '',
+      textContent: '',
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      appendChild: jest.fn(),
+      removeChild: jest.fn(),
+      querySelector: jest.fn(),
+      querySelectorAll: jest.fn(() => []),
+      classList: {
+        add: jest.fn(),
+        remove: jest.fn(),
+        contains: jest.fn(() => false),
+        toggle: jest.fn(),
+      },
+      style: {},
+      setAttribute: jest.fn(),
+      getAttribute: jest.fn(),
+      removeAttribute: jest.fn(),
+    };
+
+    this.root = mockElement;
+    this.container = mockElement;
+
+    return this;
+  };
+
+  // Add static methods that Quill might have
+  MockQuill.register = jest.fn();
+  MockQuill.find = jest.fn();
+  MockQuill.import = jest.fn();
+
+  return {
+    __esModule: true,
+    default: MockQuill,
+  };
+});
+
+jest.mock('react-responsive-masonry', () => {
+  return {
+    __esModule: true,
+    default: ({
+      children,
+      columnsCount,
+      gutter,
+    }: {
+      children: React.ReactNode;
+      columnsCount: number;
+      gutter: string | number;
+    }) => (
+      <div
+        data-testid='mock-masonry'
+        className='mock-masonry-grid'
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${columnsCount}, 1fr)`,
+          gap: gutter,
+        }}
+      >
+        {children}
+      </div>
+    ),
+    ResponsiveMasonry: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid='mock-responsive-masonry' className='mock-responsive-masonry'>
+        {children}
+      </div>
+    ),
+  };
+});

package/lint-staged.config.js

@@ -0,0 +1,45 @@
+const config = {
+  // For TypeScript files
+  '**/*.ts?(x)': filenames => {
+    const files = filenames.join(' ');
+    return [
+      `eslint --fix ${files}`,
+      `prettier --write ${files}`,
+      // Type check the changed files
+      // Optional: Run affected tests based on changed files
+      // This uses Turborepo's filter feature to only run tests in affected packages
+      // `turbo run test --filter=[origin/main...HEAD] --filter=[${filenames.map((f) => `...${f}`).join(",")}]`,
+    ];
+  },
+  // For JavaScript files
+  '**/*.js?(x)': filenames => {
+    const files = filenames.join(' ');
+    return [`eslint --fix ${files}`, `prettier --write ${files}`];
+  },
+  // For TS files
+  '**/*.ts?(x)': filenames => {
+    const files = filenames.join(' ');
+    return [`eslint --fix ${files}`, `prettier --write ${files}`];
+  },
+  // For styles
+  '**/*.css': filenames => {
+    const files = filenames.join(' ');
+    return [`prettier --write ${files}`];
+  },
+  // For JSON, YAML, etc.
+  '**/*.{json,md,yml,yaml}': filenames => {
+    const files = filenames.join(' ');
+    return [`prettier --write ${files}`];
+  },
+  // For package.json files - to keep them consistent
+  '**/package.json': filenames => {
+    const files = filenames.join(' ');
+    return [
+      `prettier --write ${files}`,
+      // Optionally add sort-package-json
+      // `sort-package-json ${files}`
+    ];
+  },
+};
+
+export default config;

package/package.json

@@ -0,0 +1,167 @@
+{
+  "name": "@wazobiatech/wazui",
+  "version": "0.0.1",
+  "private": false,
+  "description": "`@repo/wazui` is a React component library that provides a set of reusable UI components, hooks, and providers for building modern web applications. It is built with TypeScript, Tailwind CSS, and integrates Shadcn UI components.",
+  "homepage": "https://bitbucket.org/wazobiatech/wazui#readme",
+  "bugs": {
+    "url": "https://bitbucket.org/wazobiatech/wazui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/wazobiatech/wazui.git"
+  },
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "exports": {
+    "./shadcn": "./src/components/shadcn/index.ts",
+    "./styles.css": "./src/index.css",
+    ".": "./src/index.ts"
+  },
+  "main": "index.js",
+  "scripts": {
+    "dev": "storybook dev -p 6007 --no-open",
+    "build": "node --max-old-space-size=16384 ./node_modules/.bin/vite build",
+    "test": "jest --passWithNoTests",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "check-types": "tsc --noEmit",
+    "prepare": "husky install",
+    "lint:staged": "lint-staged",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "node --max-old-space-size=16384 ./node_modules/.bin/storybook build",
+    "plop": "plop",
+    "test:unit": "jest",
+    "test:e2e": "npx playwright test"
+  },
+  "dependencies": {
+    "@apollo/client": "^4.0.9",
+    "@babel/core": "^7.26.10",
+    "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.1.7",
+    "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.4",
+    "@radix-ui/react-select": "^2.1.7",
+    "@radix-ui/react-separator": "^1.1.6",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-toggle": "^1.1.3",
+    "@radix-ui/react-toggle-group": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.2.6",
+    "@tailwindcss/vite": "^4.1.3",
+    "@tanstack/react-query": "^5.90.11",
+    "@tanstack/react-table": "^8.21.2",
+    "@types/react-responsive-masonry": "^2.6.0",
+    "apollo-upload-client": "^19.0.0",
+    "axios": "^1.12.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "context-filter-polyfill": "^0.3.23",
+    "date-fns": "^4.1.0",
+    "graphql": "^16.10.0",
+    "he": "^1.2.0",
+    "javascript-time-ago": "^2.5.11",
+    "jest-transform-stub": "^2.0.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.507.0",
+    "next-themes": "^0.4.6",
+    "quill": "^2.0.3",
+    "react-advanced-cropper": "^0.20.1",
+    "react-day-picker": "8.10.1",
+    "react-hook-form": "^7.56.3",
+    "react-icons": "^5.5.0",
+    "react-intersection-observer": "^9.16.0",
+    "react-responsive-masonry": "^2.7.1",
+    "react-router-dom": "^7.6.2",
+    "react-time-ago": "^7.3.3",
+    "sonner": "^2.0.3",
+    "sortablejs": "^1.15.6",
+    "tailwind-merge": "^3.2.0",
+    "tailwindcss": "^4.1.3",
+    "ts-jest": "^29.3.1",
+    "tw-animate-css": "^1.2.5",
+    "universal-cookie": "^8.0.1",
+    "uuid": "^11.1.0",
+    "zod": "^3.24.4"
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
+    "@babel/types": "^7.27.0",
+    "@changesets/cli": "^2.29.8",
+    "@chromatic-com/storybook": "3",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@eslint/js": "^9.21.0",
+    "@playwright/test": "^1.51.1",
+    "@storybook/addon-essentials": "8.6.12",
+    "@storybook/addon-onboarding": "8.6.12",
+    "@storybook/addon-themes": "^8.6.12",
+    "@storybook/blocks": "8.6.12",
+    "@storybook/experimental-addon-test": "^8.6.12",
+    "@storybook/react": "8.6.12",
+    "@storybook/react-vite": "8.6.12",
+    "@storybook/test": "8.6.12",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@turbo/gen": "^2.5.0",
+    "@types/apollo-upload-client": "^19.0.0",
+    "@types/he": "^1.2.3",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-test-renderer": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.1",
+    "ajv": "^8.17.1",
+    "ajv-draft-04": "^1.0.0",
+    "ajv-keywords": "^5.1.0",
+    "babel-jest": "^29.7.0",
+    "eslint": "^9.21.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^15.15.0",
+    "husky": "^9.1.7",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-stub": "^2.0.0",
+    "lint-staged": "^15.5.0",
+    "plop": "^4.0.1",
+    "prettier": "3.5.3",
+    "storybook": "8.6.12",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.1.1"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.90.11",
+    "@tanstack/react-query-devtools": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

package/plop-templates/Component.tsx.hbs

@@ -0,0 +1,13 @@
+import React from 'react';
+import { {{pascalCase name}}Props } from './types';
+
+
+const {{pascalCase name}}: React.FC<{{pascalCase name}}Props> = ({ children }) => {
+  return (
+    <div>
+      {children}
+    </div>
+  );
+};
+
+export default {{pascalCase name}};

package/plop-templates/ComponentStories.tsx.hbs

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {{pascalCase name}} from "./{{pascalCase name}}";
+
+const meta: Meta<typeof {{pascalCase name}}> = {
+  title: "Components/{{pascalCase name}}",
+  component: {{pascalCase name}},
+  parameters: {
+    layout: "centered",
+    theme: "dark",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    // TODO: Add argTypes here
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof {{pascalCase name}}>;
+
+export const Default: Story = {
+  args: {
+   // TODO: Add args here
+  },
+};

package/plop-templates/ComponentTests.tsx.hbs

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import {{pascalCase name}} from "./{{pascalCase name}}";
+
+describe("{{pascalCase name}} Component", () => {
+  it("renders correctly with text", () => {
+    render(
+      <{{pascalCase name}}>
+        Primary
+      </{{pascalCase name}}>
+    );
+    const element = screen.getByText("Primary");
+    expect(element).toBeInTheDocument();
+  });
+});

package/plop-templates/ComponentTypes.ts.hbs

@@ -0,0 +1 @@
+export interface {{pascalCase name}}Props { children: React.ReactNode; }

package/plopfile.js

@@ -0,0 +1,35 @@
+export default function (plop) {
+  // Plop generator for components
+  plop.setGenerator('component', {
+    description: 'Create a new React component without styles',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'What is the name of the component?',
+      },
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: 'src/components/wazui/{{pascalCase name}}/{{pascalCase name}}.tsx',
+        templateFile: 'plop-templates/Component.tsx.hbs',
+      },
+      {
+        type: 'add',
+        path: 'src/components/wazui/{{pascalCase name}}/{{pascalCase name}}.test.tsx',
+        templateFile: 'plop-templates/ComponentTests.tsx.hbs',
+      },
+      {
+        type: 'add',
+        path: 'src/components/wazui/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
+        templateFile: 'plop-templates/ComponentStories.tsx.hbs',
+      },
+      {
+        type: 'add',
+        path: 'src/components/wazui/{{pascalCase name}}/types.ts',
+        templateFile: 'plop-templates/ComponentTypes.ts.hbs',
+      },
+    ],
+  });
+}

package/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/src/assets/dashboard/book.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3332 13.9501V3.89174C18.3332 2.89174 17.5165 2.15008 16.5248 2.23341H16.4748C14.7248 2.38341 12.0665 3.27508 10.5832 4.20841L10.4415 4.30008C10.1998 4.45008 9.79984 4.45008 9.55817 4.30008L9.34984 4.17508C7.8665 3.25008 5.2165 2.36674 3.4665 2.22508C2.47484 2.14174 1.6665 2.89174 1.6665 3.88341V13.9501C1.6665 14.7501 2.3165 15.5001 3.1165 15.6001L3.35817 15.6334C5.1665 15.8751 7.95817 16.7917 9.55817 17.6667L9.5915 17.6834C9.8165 17.8084 10.1748 17.8084 10.3915 17.6834C11.9915 16.8001 14.7915 15.8751 16.6082 15.6334L16.8832 15.6001C17.6832 15.5001 18.3332 14.7501 18.3332 13.9501Z" stroke="#6574FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 4.57422V17.0742" stroke="#6574FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.4585 7.07422H4.5835" stroke="#6574FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.0835 9.57422H4.5835" stroke="#6574FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/dashboard/edit.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.1665 1.66602H7.49984C3.33317 1.66602 1.6665 3.33268 1.6665 7.49935V12.4993C1.6665 16.666 3.33317 18.3327 7.49984 18.3327H12.4998C16.6665 18.3327 18.3332 16.666 18.3332 12.4993V10.8327" stroke="#208B02" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3666 2.51639L6.7999 9.08306C6.5499 9.33306 6.2999 9.82472 6.2499 10.1831L5.89157 12.6914C5.75823 13.5997 6.3999 14.2331 7.30823 14.1081L9.81657 13.7497C10.1666 13.6997 10.6582 13.4497 10.9166 13.1997L17.4832 6.63306C18.6166 5.49972 19.1499 4.18306 17.4832 2.51639C15.8166 0.849722 14.4999 1.38306 13.3666 2.51639Z" stroke="#208B02" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.4248 3.45898C12.9831 5.45065 14.5415 7.00898 16.5415 7.57565" stroke="#208B02" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>