agroptima-design-system 0.6.0 → 0.6.1

package/.github/workflows/run-linters.yml

@@ -25,3 +25,6 @@ jobs:
 
       - name: Lint
         run: npm run lint
+
+      - name: Types
+        run: npm run types

package/.github/workflows/run-tests.yml

@@ -0,0 +1,27 @@
+name: Run tests
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Test
+        run: npm run test

package/jest.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from 'jest'
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  dir: './',
+})
+
+const config: Config = {
+  testEnvironment: 'jsdom',
+  clearMocks: true,
+  moduleNameMapper: {
+    '^.+\\.(svg)$': '<rootDir>/tests/svg.mock.js',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+}
+
+export default createJestConfig(config)

package/jest.setup.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -8,7 +8,9 @@
     "build-storybook": "storybook build",
     "lint": "eslint",
     "lint:fix": "eslint src --fix",
-    "chromatic": "npx chromatic --exit-zero-on-changes"
+    "types": "tsc --noEmit",
+    "chromatic": "npx chromatic --exit-zero-on-changes",
+    "test": "jest"
   },
   "dependencies": {
     "@storybook/addon-designs": "^7.0.5",
@@ -28,6 +30,10 @@
     "@storybook/react": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@types/jest": "^29.5.12",
+    "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.9.4",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
@@ -36,7 +42,11 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-storybook": "^0.6.15",
+    "jest": "^29.7.0",
+    "jest-axe": "^8.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "storybook": "^7.6.6",
+    "ts-node": "^10.9.2",
     "typescript": "^5"
   },
   "description": "Agroptima design system",

package/src/atoms/Select.tsx

@@ -5,7 +5,11 @@ import { Icon } from './Icon'
 export type Variant = 'primary'
 export type Option = { id: string; label: string }
 
-export interface SelectProps extends React.ComponentPropsWithoutRef<'input'> {
+type InputPropsWithoutOnChange = Omit<
+  React.ComponentPropsWithoutRef<'input'>,
+  'onChange'
+>
+export interface SelectProps extends InputPropsWithoutOnChange {
   placeholder?: string
   helpText?: string
   variant?: Variant
@@ -15,6 +19,7 @@ export interface SelectProps extends React.ComponentPropsWithoutRef<'input'> {
   accessibilityLabel?: string
   hideLabel?: boolean
   selected?: Option
+  onChange?: (value: string) => void
 }
 
 export function Select({
@@ -29,6 +34,7 @@ export function Select({
   accessibilityLabel,
   hideLabel = false,
   selected,
+  onChange,
   ...props
 }: SelectProps): React.JSX.Element {
   const [showOptionsList, setShowOptionsList] = useState(false)
@@ -55,7 +61,6 @@ export function Select({
   }
 
   function selectOption(option: Option) {
-    const { onChange } = props
     setSelectedOption(option)
     setShowOptionsList(false)
 

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,11 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.6.1
+
+- Fixed error type in onChange select props
+- Added check types to CI
+
 ## 0.6.0
 
 Checkbox component is added to Storybook.

package/tests/a11y.spec.tsx

@@ -0,0 +1,29 @@
+import { composeStories } from '@storybook/react'
+import { act, render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+import * as components from './library'
+
+expect.extend(toHaveNoViolations)
+
+const stories = Object.values(components).map((component) => {
+  return {
+    title: component.default.title,
+    stories: composeStories(component),
+  }
+})
+
+stories.forEach(({ title, stories }) => {
+  const variations = Object.entries(stories)
+
+  variations.forEach(([variationName, story]: [string, any]) => {
+    it(`${title} ${variationName} should be accessible`, async () => {
+      const { container } = render(story())
+
+      await act(async () => {
+        const results = await axe(container)
+        expect(results).toHaveNoViolations()
+      })
+    })
+  })
+})

package/tests/library.ts

@@ -0,0 +1,9 @@
+export * as Button from '../src/stories/Button.stories'
+export * as CardsTable from '../src/stories/CardsTable.stories'
+export * as CardsTableList from '../src/stories/CardsTableList.stories'
+export * as Checkbox from '../src/stories/Checkbox.stories'
+export * as EmptyState from '../src/stories/EmptyState.stories'
+export * as IconButton from '../src/stories/IconButton.stories'
+export * as Input from '../src/stories/Input.stories'
+export * as Multiselect from '../src/stories/Multiselect.stories'
+export * as Select from '../src/stories/Select.stories'

package/tests/svg.mock.js

@@ -0,0 +1 @@
+export default function () {}