fortanix · nighto · Nov 20, 2024 · Nov 19, 2024 · Nov 19, 2024 · Nov 19, 2024
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -0,0 +1,31 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: CI
+
+on:
+  push:
+    branches: [ "**" ]
+  pull_request:
+    branches: [ "**" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm run ci-project
+    #- run: npm run build --if-present
+    - run: npm test
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -19,4 +19,5 @@
   "editor.trimAutoWhitespace": false,
   "files.eol": "\n",
   "javascript.preferences.quoteStyle": "single",
+  "typescript.tsdk": "node_modules/typescript/lib", // Use the TypeScript SDK from the current project
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
   "scripts": {
     "gen-package": "node package.json.js",
     "install-project": "npm run gen-package && npm install --force",
+    "ci-project": "npm ci --force",
     "node": "node --import=tsx",
     "repl": "tsx",
     "plop": "NODE_OPTIONS=\"--import tsx\" plop",
@@ -41,11 +42,11 @@
     "build": "vite --config=./vite.config.ts --emptyOutDir build",
     "storybook:serve": "storybook dev -p 6006",
     "storybook:build": "storybook build --docs",
-    "check-types": "tsc --noEmit",
+    "check:types": "tsc --noEmit",
     "lint:style": "stylelint 'src/**/*.scss'",
-    "lint:script": "biome",
-    "lint": "npm run list:style && npm run lint:script",
-    "test": "vitest run --root=.",
+    "lint:script": "biome lint",
+    "lint": "npm run lint:style && npm run lint:script",
+    "test": "npm run check:types && npm run lint:style",
     "test-ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "start": "npm run storybook:serve",
@@ -61,6 +62,7 @@
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-svg-icons": "^2.0.1",
     "typescript": "^5.6.3",
+    "@types/node": "^22.9.0",
     "stylelint": "^16.10.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "@biomejs/biome": "^1.9.4",

diff --git a/package.json.js b/package.json.js
@@ -38,7 +38,9 @@ const packageConfig = {
   scripts: {
     // Utilities
     'gen-package': 'node package.json.js', // Update `package.json`
+    // Use --force currently since we're using React v19 rc. Once peer deps are updated remove this.
     'install-project': 'npm run gen-package && npm install --force',
+    'ci-project': 'npm ci --force',
 
     // CLI
     'node': 'node --import=tsx',
@@ -59,14 +61,15 @@ const packageConfig = {
     'storybook:build': 'storybook build --docs',
 
     // Static analysis
-    'check-types': 'tsc --noEmit',
+    'check:types': 'tsc --noEmit',
     'lint:style': `stylelint 'src/**/*.scss'`,
-    'lint:script': 'biome',
-    'lint': 'npm run list:style && npm run lint:script',
+    'lint:script': 'biome lint',
+    'lint': 'npm run lint:style && npm run lint:script',
 
     // Test
     // Note: use `vitest run --root=. src/...` to run a single test file
-    'test': 'vitest run --root=.', // Need to specify `--root=.` since the vite root is set to `./app`
+    //'test': 'vitest run --root=.', // Need to specify `--root=.` since the vite root is set to `./app`
+    'test': 'npm run check:types && npm run lint:style',
     'test-ui': 'vitest --ui',
     'coverage': 'vitest run --coverage',
 
@@ -93,6 +96,7 @@ const packageConfig = {
 
     // Static analysis
     'typescript': '^5.6.3',
+    '@types/node': '^22.9.0',
     'stylelint': '^16.10.0',
     'stylelint-config-standard-scss': '^13.1.0',
     '@biomejs/biome': '^1.9.4',

diff --git a/scripts/import.ts b/scripts/import.ts
@@ -26,8 +26,8 @@ const getServices = () => {
 
 type ScriptArgs = {
   values: {
-    help: boolean | undefined,
-    silent: boolean | undefined,
+    help?: undefined | boolean,
+    silent?: undefined | boolean,
   },
   positionals: Array<string>,
 };

diff --git a/src/components/actions/Link/Link.stories.tsx b/src/components/actions/Link/Link.stories.tsx
@@ -45,7 +45,7 @@ export const Descenders: Story = {
 export const Scroll: Story = {
   render: (args) => (
     <>
-      <a id="anchor"></a>
+      <a id="anchor" href="/" onClick={evt => { evt.preventDefault(); }}>Anchor</a>
       <OverflowTester openDefault/>
       <Link {...args} href="#anchor"/>
       <OverflowTester openDefault/>

diff --git a/src/components/containers/Alert/Alert.stories.tsx b/src/components/containers/Alert/Alert.stories.tsx
@@ -31,10 +31,10 @@ export default {
 
 export const Standard: Story = {};
 
-export const Info: Story = { args: { kind: 'info' } };
-export const Warning: Story = { args: { kind: 'warning' } };
-export const Error: Story = { args: { kind: 'error' } };
-export const Success: Story = { args: { kind: 'success' } };
+export const InfoAlert: Story = { args: { kind: 'info' } };
+export const WarningAlert: Story = { args: { kind: 'warning' } };
+export const ErrorAlert: Story = { args: { kind: 'error' } };
+export const SuccessAlert: Story = { args: { kind: 'success' } };
 
 /** Multiple alerts stacked. */
 export const Stacked: Story = {

diff --git a/src/components/forms/context/Form/Form.stories.tsx b/src/components/forms/context/Form/Form.stories.tsx
@@ -19,9 +19,9 @@ type FormArgs = React.ComponentProps<typeof Form>;
 type Story = StoryObj<FormArgs>;
 
 const FormWithState = (props: React.ComponentProps<typeof Form>) => {
-  const action = async (previousState: unknown, formData: FormData) => {
+  const action = async (previousState: unknown, formData: FormData): Promise<null> => {
     if (typeof props.action === 'function') {
-      return props.action?.(formData);
+      return props.action?.(formData) ?? null;
     }
     return null;
   };

diff --git a/src/components/forms/context/Form/FormOptics.tsx b/src/components/forms/context/Form/FormOptics.tsx
@@ -16,7 +16,7 @@ export { cl as FormClassNames };
 
 export type FormContext<T> = {
   formId: string,
-  accessor: O.OpticFor<T>,
+  //accessor: O.OpticFor<T>,
 };
 export const FormContext = React.createContext<null | FormContext<unknown>>(null);
 export const useFormContext = <T,>(): FormContext<T> => {
@@ -43,7 +43,7 @@ export const Form = (props: FormProps) => {
   const [wrapperRef, setWrapperRef] = React.useState<null | React.ComponentRef<'div'>>(null);
 
   // Memoize to keep a stable reference
-  const context: FormContext = React.useMemo(() => ({ formId }), [formId]);
+  const context: FormContext<unknown> = React.useMemo(() => ({ formId }), [formId]);
 
   const renderForm = ({ children }: { children: React.ReactNode }) => {
     return (

diff --git a/src/components/forms/context/SubmitButton/SubmitButton.tsx b/src/components/forms/context/SubmitButton/SubmitButton.tsx
@@ -45,13 +45,13 @@ export const SubmitButton = (props: SubmitButtonProps) => {
   const isDisabled = !isInteractive;
   const isNonactive = propsButton.nonactive || isPending;
 
-  const handlePress = () => {
+  const handlePress = React.useCallback(() => {
     if (typeof onPress !== 'function') { return; }
 
     startPressTransition(async () => {
       await Promise.race([onPress(), timeout(asyncTimeout)]);
     });
-  };
+  }, [onPress, asyncTimeout]);
 
   const handleClick = React.useCallback(async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     // `onClick` should not be used in most cases, only if the consumer needs low level control over click events.

diff --git a/src/components/forms/controls/SegmentedControl/SegmentedControl.tsx b/src/components/forms/controls/SegmentedControl/SegmentedControl.tsx
@@ -83,7 +83,8 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
         [cl['bk-segmented-control--disabled']]: disabled,
       }, propsRest.className)}
     >
-      {formattedOptions.map((option, index) => 
+      {formattedOptions.map((option, index) =>
+        // biome-ignore lint/suspicious/noArrayIndexKey: no other unique identifier available
         <li key={index} className={cl['bk-segmented-control__item']}>
           <Button
             role="tab"

diff --git a/src/components/navigations/Stepper/Stepper.module.scss b/src/components/navigations/Stepper/Stepper.module.scss
@@ -15,7 +15,7 @@
 
     &.bk-stepper--vertical {
       .bk-stepper__item {
-        &:not(:first-child):not(:first-child) {
+        &:not(:first-child) {
           margin-top: bk.$spacing-9;
 
           .bk-stepper__item__circle {

diff --git a/src/components/navigations/Tabs/Tabs.stories.tsx b/src/components/navigations/Tabs/Tabs.stories.tsx
@@ -31,7 +31,7 @@ type DefaultTabOption = {
   className?: string,
 };
 const defaultTabOptions: DefaultTabOption[] = [1,2,3,4].map(index => { 
-  return { index }
+  return { index };
 });
 
 type TabWithTriggerProps = React.PropsWithChildren<Partial<TabsArgs>> & {

diff --git a/src/components/overlays/Modal/Modal.tsx b/src/components/overlays/Modal/Modal.tsx
@@ -161,7 +161,6 @@ const Modal = ({
   };
 
   return (
-    // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
     <dialog
       ref={dialogRef}
       className={cx(

diff --git a/src/components/overlays/Toast/Toast.module.scss b/src/components/overlays/Toast/Toast.module.scss
@@ -6,10 +6,9 @@
 
 @layer baklava.components {
   .bk-toast {
-    width: auto !important; // Override style for .Toastify__toast-container
     padding: 0 !important; // Override style for .Toastify__toast-container
     width: 400px !important; // Override style for .Toastify__toast-container
-
+    
     &:has(.bk-close--dark) {
       .bk-toast__body {
         margin-right: bk.$spacing-4 !important; // Override style for .Toastify__toast-body

diff --git a/src/components/overlays/Toast/Toast.stories.tsx b/src/components/overlays/Toast/Toast.stories.tsx
@@ -49,7 +49,7 @@ const Actions = () => {
   );
 };
 
-export const Success: Story = {
+export const SuccessToast: Story = {
   args: {
     options: {},
   },
@@ -60,7 +60,7 @@ export const Success: Story = {
   ),
 };
 
-export const Info: Story = {
+export const InfoToast: Story = {
   args: {
     options: {},
   },
@@ -71,7 +71,7 @@ export const Info: Story = {
   ),
 };
 
-export const Error: Story = {
+export const ErrorToast: Story = {
   args: {
     options: {},
   },

diff --git a/src/components/overlays/Toast/ToastyOverride.scss b/src/components/overlays/Toast/ToastyOverride.scss
@@ -2,6 +2,8 @@
 |* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
 |* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* stylelint-disable selector-class-pattern */
+
 @use '../../../styling/defs.scss' as bk;
 
 // Define styling to override react-toastify's styles, as overriding directly from Toast.module.scss is not possible.

diff --git a/src/components/overlays/Tooltip/Tooltip.module.scss b/src/components/overlays/Tooltip/Tooltip.module.scss
@@ -39,7 +39,7 @@
   background: var(--c1);
 
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     z-index: -1;
     inset: 0;
@@ -72,16 +72,16 @@
     100% min(100%,var(--p) + var(--h)*tan(var(--a)/2)),
     calc(100% + var(--h)) var(--p),
     100% max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)));
-  border-image: conic-gradient(var(--c1) 0 0) fill 0/
-    max(0%,var(--p) - var(--h)*tan(var(--a)/2)) 0 max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
+  border-image: conic-gradient(var(--c1) 0 0) fill 0
+    / max(0%,var(--p) - var(--h)*tan(var(--a)/2)) 0 max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
 
   &::before {
     clip-path: polygon(100% 0,0 0,0 100%,100% 100%,
       calc(100% - var(--b)) min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)),
       calc(100% + var(--h) - var(--b)/sin(var(--a)/2)) var(--p),
       calc(100% - var(--b)) max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)));
-    border-image: conic-gradient(var(--c2) 0 0) fill 0/
-      max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) 0 max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
+    border-image: conic-gradient(var(--c2) 0 0) fill 0
+      / max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) 0 max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
   }
 }
 @mixin bk-tooltip-arrow-bottom {
@@ -108,16 +108,16 @@
     0 min(100%,var(--p) + var(--h)*tan(var(--a)/2)),
     calc(-1*var(--h)) var(--p),
     0 max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)));
-  border-image: conic-gradient(var(--c1) 0 0) fill 0/
-    max(0%,var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
+  border-image: conic-gradient(var(--c1) 0 0) fill 0
+    / max(0%,var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
 
   &::before {
     clip-path: polygon(0 0,100% 0,100% 100%,0 100%,
       var(--b) min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)),
       calc(var(--b)/sin(var(--a)/2) - var(--h)) var(--p),
       var(--b) max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)));
-    border-image: conic-gradient(var(--c2) 0 0) fill 0/
-      max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
+    border-image: conic-gradient(var(--c2) 0 0) fill 0
+      / max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
   }
 }
 

diff --git a/src/layouts/AppLayout/Sidebar/Sidebar.module.scss b/src/layouts/AppLayout/Sidebar/Sidebar.module.scss
@@ -20,10 +20,6 @@
       transition: all 300ms ease-in-out;
       transition-property: width, grid-template-columns;
 
-      &.-collapsed {
-        width: var(--bk-sizing-5);
-      }
-
       .bk-app-layout-sidebar__action-collapse {
         margin: var(--bk-sizing-2);
         padding: var(--bk-sizing-1) var(--bk-sizing-2);

diff --git a/src/util/storybook/OverflowTester.tsx b/src/util/storybook/OverflowTester.tsx
@@ -13,6 +13,8 @@ type OverflowTesterProps = {
 };
 export const OverflowTester = ({ lines = 50, openDefault = false }: OverflowTesterProps) => {
   const ref = React.useRef<HTMLDetailsElement>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `openDefault` only applies on mount
   React.useEffect(() => {
     if (openDefault && ref.current) {
       ref.current.open = true;
@@ -23,6 +25,7 @@ export const OverflowTester = ({ lines = 50, openDefault = false }: OverflowTest
     <details ref={ref} className="util-overflow-tester">
       <summary>Test overflow</summary>
       {Array.from({ length: lines }).map((_, index) =>
+        // biome-ignore lint/suspicious/noArrayIndexKey: no other unique identifier available
         <p key={index}>...</p>
       )}
     </details>

diff --git a/stylelint.config.mjs b/stylelint.config.mjs
@@ -11,7 +11,7 @@ export default {
   'rules': {
     // Override `stylelint-config-standard-scss` rules
     'scss/load-partial-extension': 'always',
-    'scss/at-import-partial-extension': 'always',
+    //'scss/at-import-partial-extension': 'always',
     'comment-empty-line-before': null,
     'comment-whitespace-inside': null,
     'scss/comment-no-empty': null,