V2 (#200)

* feat: init v2 strcucture

* feat(deps): add "craco" to resolve global "crypto" use

* feat: add basic connection

* feat: use Vite instead of CRA

* Version 2 (#101)

* Update vite to latest

* Update react to latest

* Change app structure

* Add ThemeProvider

* Add FetchingStatusOwerlay component

* Add i18n

* Add CertificatesProvidersList

* Add clsx & scss

* Add theme colors

* Add table's components

* Components refactoring

* Rename app providers component

* Add CertificatesList component

* add post css & autoprefixer

* add postcss config

* Add Certificates Layout

* Improve app sidebar

* Fix theme

* Refactor app structure

* Add vite-plugin-svgr

* Add vite-plugin-svgr types

* Add --pv-border-radius-base

* Style providers list component

* Fix contact suport url

* Add ESLint & Prettier

* Add empty state to CertificatesList

* Add empty state to CertificatesProvidersList

* Fix body font-family duplication

* Rename getCertificatesByProviderId  to handleProviderChange

* Remove i18next-icu

* Improve CertificatesProvidersList accessibility

* Use Typography in CertificatesProvidersListItem

* Local imports should be at the very bottom

* Let's make options non-optional in CertificatesProvidersListItem

* Don't use object destructuring in function arguments

* Let's remove commented code in App component

* Use Typography in CertificatesList empty state

* Let's make options non-optional in CertificatesList

* Add sticky filters and sticky table header

* Table missed type icon identifier

* Add actions menu to CertificatesList

* Change build dir

* Add Date component

* Add CertificateName component

* Add CertificateSerialNumber component

* Fix CertificatesProvidersList labels

* Fix sidebar footer labels

* Fix CertificatesProvidersList items gap & selected bg

* Truncate long provider name

* Fix providers list scroll

* Remove optional from providers prop

* FetchingStatusOwerlay refactoring

* Improve table row shadow

* Update packages

* The table header and body text are not aligned vertically

* Fix sidebar contact box size

* Row table text is not aligned horizontally

* The certificates list table has not equal padding

* Fix providers list scrollbar

* Add CertificatesTopbar

---------

Co-authored-by: alex-slobodian <[email protected]>

* Add storybook (#121)

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add certificate viewer (#123)

* Add CertificateViewer

* Fix certificate viewer dialog width

* Fix certificate viewer dialog content padding

* Make certificate prop as required dependency in CertificateViewerDialog

* Fix certificate viewer dialog width

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Style fetching statuses (#124)

* Add styles to FetchingStatusOwerlay

* Fix FetchingStatus dialog width

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add delete certificate dialog (#130)

* Create CertificateDeleteButton component

* Create CertificateDeleteButton component

* Create CertificateDeleteDialog

* Add delete dialog to certificates list

* Fix after merge

* Improve Delete button in certificates list

* Improve CertificateDeleteDialog

* Fix CertificatesList action menu items gap

* Fix CertificateDeleteDialog loading state

* Fix CertificateDeleteDialog title

* Improve accessibility for CertificatesList

* Fix naming

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add Certificate creation menu (#136)

* Add Certificate creation menu

* Fix types

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add Certificate download button (#138)

* Add Certificate download button

* Fix file name

* Fix downloadCertificate

* Use downloadFromBuffer method

* Fix downloadCertificate

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add Certificate copy button (#142)

* Add Copy button component

* Fix Copy button component

* Add copyCertificate method

* Fix naming

* Add copy button to list

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add Vitest (#143)

* Add vitest

* fix vite config

* Fix config

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add ci (#145)

* Add ci

* Fix ci

* setup-node

* Fix setup-node

* chore(ci): enable caching

---------

Co-authored-by: alex-slobodian <[email protected]>
Co-authored-by: donskov <[email protected]>

* Version 2: Add import certificate dialog (#132)

* Add CertificatesProvidersSelectList component

* Add CertificateImportDialog component

* Certificate Import Dialog open/close

* Add file drop zone

* Styles drop zone

* Certificate processing

* Fix certificate processing

* Add actions

* Fix title border

* Fix styles

* Fix drop zone styles & behaviour

* Fix styles

* Fix dialog title

* Fix CertificatesProvidersSelectList style

* Add useCertificateImportDialog

* Fix provider selection

* Fix provider select popover

* Fix upload certificate

* Lock fix

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Improve provider list (#147)

* Improve providers list accessibility

* Add loading skeleton

* Add loading to app

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Create Certificate creation Dialog (#144)

* Add CertificateTypeSelect component

* Add KeyUsagesCheckboxGroup component

* Add CountrySelect component

* Fix naming

* Add CertificateKeyPropertiesSelect

* Add CertificateCreateDialog layout

* Add CertificateTypeSelect to dialog

* Fix CertificateTypeSelect

* Add type selection

* Add Card component

* Add CertificateCreateByEmail block

* Fix text field requrid styles

* Add CertificateCreateByCname block

* Add CertificateAlgorithmInfo component

* Add CertificateCreateByCustom component

* Add more fields CertificateCreateByCustom component

* Add CertificateCreateByCustom to CertificateCreateDialog

* Add useCertificateCreateDialog

* Fix useCertificateCreateDialog

* Fix useCertificateCreateDialog

* Fix useCertificateCreateDialog

* Fix dialog content width

* Add create dialog to app

* Fix Certificate Algorithm

* Add type onCreate

* Fix types

* Add certificateSubjectToString method

* Fix scroll in provider list

* Fix overscroll behavior

* Add scroll lock for import & create dialogs

* Fix certificateKeyUsageExtensions

* Fix form

* Fix CertificateTypeSelect styles

* Fix CertificateCreateDialog

* Fix forms & validations

* Fix CertificateCreateByCname

* Fix CertificateCreateByEmail

* Fix CertificateCreateByCustom

* Fix ExtendedKeyUsages

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Improve certificate delete dialog (#151)

* Add useCertificateDeleteDialog

* Fix Certificate Delete Dialog

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add App error boundary (#148)

* Add app error boundary

* Fix sorting of imports

* Move to react-error-boundary package

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add missed stories to storybook (#153)

* Add CertificatesSidebar stories

* Add CertificateName stories

* Add CertificateSerialNumber stories

* Add CertificateTypeLabel stories

* Add Date stories

---------

Co-authored-by: alex-slobodian <[email protected]>

* Remove general block (#156)

Co-authored-by: alex-slobodian <[email protected]>

* Version2: Add sorting to certificate list (#146)

* Add SortButton component

* Add sorting to certificate list

* Fix sort title direction change

* Fix sort button focus

* Fix sort button focus

* Add serch params for sorting

* Fix SortButton disabled

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add certificate creation logic (#149)

* Add certificate creation logic

* Fixed useCertificateCreateDialog

* Fix set ProviderId

* Fix algorithm props

* Fix algorithm props

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Remove certificate logic (#152)

* Remove certificate logic

* Rewfactoring useCertificateDeleteDialog

* Fix handleOpen

* Add list refresh after remove

* Fix dialog render

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Certificates list improvements (#158)

* Add HighlightedText component

* Add highlight to CertificateName

* Add highlighted text for certificate name in CertificatesList

* Add CertificatesListLoading

* Add CertificatesListLoading

* Add Empty Search to  CertificatesList

---------

Co-authored-by: alex-slobodian <[email protected]>

* Fix search input (#160)

Co-authored-by: alex-slobodian <[email protected]>

* Uppdate @peculiar packages (#162)

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Fix certificate import dialog (#150)

* Fix Certificate Import Dialog

* Improve certificate converter

* Delete extra convertation

---------

Co-authored-by: alex-slobodian <[email protected]>

* Add import logic (#164)

Co-authored-by: alex-slobodian <[email protected]>

* Fix providers list readonly label (#165)

Co-authored-by: alex-slobodian <[email protected]>

* Fix copy certificate (#169)

Co-authored-by: alex-slobodian <[email protected]>

* Version2: Add certificate search logic (#167)

* Add certificate search logic

* Fix useSearch

* Fix search input

* Fix search input state

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2:  Update packages (#170)

* Update storybook

* Update vite

* Update vitest

* Update vitest coverage

* Update i18next

* Update postcss & sass

* Update prettier

* Update typescript & eslint

* Update @peculiar/react-components

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add certificate viewer dialog hook (#171)

* Add certificate viewer dialog hook

* Merge branch 'donskov/v2' into aslobodian/v2-certificate-viewer-dialog-hook

* Merge branch 'donskov/v2' into aslobodian/v2-certificate-viewer-dialog-hook

* Fix CertificatesList loading

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Fix certificate name (label) (#174)

* Fix certificate name (label)

* Fix search

* Fix CertificateViewerDialog title

* Fix certificateName for list actions

---------

Co-authored-by: alex-slobodian <[email protected]>

* Add ExtendedKeyUsage for certificate creation (#172)

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Fix readme logo (#180)

* Fix readme logo

* Fix readme logo

---------

Co-authored-by: alex-slobodian <[email protected]>

* Fix certificate import dialog close (#179)

Co-authored-by: alex-slobodian <[email protected]>

* Add cerificates sorting by type (#181)

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add gh-pages (#184)

* Add gh-pages

* fix deploy comand

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Update packages (#191)

* Update vite to v.5.4.2

* Update vite-tsconfig-paths to v.5.0.1

* Update typescript to v.5.5.4

* Update storybook to v.8.2.9

* Update @types/react to v.18.3.4

* Update eslint to v.9.9.1

* Update eact-use to v.17.5.1

* Update i18next to v.23.14.0 & react-i18next to v.15.0.1

* Update postcss to v.8.4.41 & react-autoprefixer to v.10.4.20

* Update vitest to v.2.0.5

* Update @peculiar/x509 to v.1.12.1

* Update @peculiar/react-components to v.0.6.4

* Update @peculiar/fortify-webcomponents-react to v.4.0.7

---------

Co-authored-by: alex-slobodian <[email protected]>

* Version 2: Add "Refresh certificates list" button (#194)

* Move Import Certificate Button to New Certificate Button menu

* Add Update certificatest button to CertificatesTopbar component

* Add action for Update certificates button

* Change labels

---------

Co-authored-by: alex-slobodian <[email protected]>

---------

Co-authored-by: Oleksandr Slobodian <[email protected]>
Co-authored-by: alex-slobodian <[email protected]>

.editorconfig

@@ -12,4 +12,4 @@ trim_trailing_whitespace = true
 
 [*.md]
 insert_final_newline = false
-trim_trailing_whitespace = false
+trim_trailing_whitespace = false

.github/workflows/main.yaml

@@ -0,0 +1,22 @@
+name: Main CI
+on: [workflow_dispatch, push]
+jobs:
+  tests_checks_build:
+    runs-on: ubuntu-latest
+    name: Tests, checks, build
+    steps:
+      - uses: actions/checkout@v4
+        name: Checkout
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+        name: Setup node
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Run linter
+        run: yarn lint
+      - name: Run tests
+        run: yarn test:ci
+      - name: Run build
+        run: yarn build

.gitignore

@@ -1,13 +1,28 @@
-.vscode
-node_modules
-out
-dist
-
-.webcrypto
-.keystorage
-.certstorage
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/dist
+
+# misc
 .DS_Store
-*.log
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.vercel
+
+*storybook.log
 
-.idea
-scripts/compiled_env.json
+src/coverage

.prettierrc.json

@@ -0,0 +1,21 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "singleAttributePerLine": false,
+  "bracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "embeddedLanguageFormatting": "auto",
+  "vueIndentScriptAndStyle": false
+}

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-actions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {},
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import { ThemeProvider, ToastProvider } from "@peculiar/react-components";
+import { theme } from "../src/config/theme";
+import i18n from "../src/i18n";
+import "../public/assets/styles/reset.css";
+import "../src/global.scss";
+import "./storybook.css";
+
+const preview: Preview = {
+  parameters: {
+    i18n,
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    actions: { argTypesRegex: "^on.*" },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        <ToastProvider>
+          <Story />
+        </ToastProvider>
+      </ThemeProvider>
+    ),
+  ],
+  tags: ["autodocs"],
+};
+
+export default preview;

.storybook/storybook.css

@@ -0,0 +1,3 @@
+body {
+  background-color: var(--pv-color-white);
+}

LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -1,16 +1,16 @@
 <p align="center">
-  <a href="https://fortifyapp.com/" rel="noopener" target="_blank"><img width="128" src="src/assets/favicons/android-chrome-192x192.png" alt="Fortify logo"></a></p>
+  <a href="https://fortifyapp.com/" rel="noopener" target="_blank"><img width="128" src="./public/assets/favicons/android-chrome-192x192.png" alt="Fortify logo"></a></p>
 </p>
 
 <h1 align="center">Fortify Tools</h1>
 
-[Fortify](https://fortifyapp.com/) enables web applications to use smart cards, local certificate stores and do certificate enrollment. This repository contains a sample [application](https://tools.fortifyapp.com/) based on Fortify that is also useful as tool to enable users view the contents of certificate stores, and create certificate requests/self signed certificates. 
+[Fortify](https://fortifyapp.com/) enables web applications to use smart cards, local certificate stores and do certificate enrollment. This repository contains a sample [application](https://tools.fortifyapp.com/) based on Fortify that is also useful as tool to enable users view the contents of certificate stores, and create certificate requests/self signed certificates.
 
 ### Development Start
 
-* Clone latest version this repository
-* `yarn install`
-* `yarn start`
+- Clone latest version this repository
+- `yarn install`
+- `yarn start`
 
 ## Thanks