Merge branch 'Redback-Operations:main' into main

.babelrc

@@ -1,9 +1,11 @@
 {
 	"presets": [
-		"@babel/preset-env",
-		["@babel/preset-react", {
-			"runtime": "automatic"
-		}],
+		["@babel/preset-env", { "targets": { "node": "current" } }],
+		["@babel/preset-react", { "runtime": "automatic" }],
 		"@babel/preset-typescript"
+	],
+	"plugins": [
+		"babel-plugin-styled-components",
+		"react-magnetic-di/babel-plugin"
 	]
 }

.eslintrc.json

@@ -25,12 +25,14 @@
 	"rules": {
 		"project-structure/file-structure": "error",
 		"storybook/default-exports": "off",
-		"indent": ["warn", "tab", {
+		"indent": ["error", "tab", {
 			"SwitchCase": 2,
 			"FunctionExpression": {
-				"parameters": 2,
+				"parameters": 1,
 				"body": 1
-            }
+			},
+			"MemberExpression": 1,
+			"offsetTernaryExpressions": true
 		}],
 		"quotes": [
 			"warn",
@@ -56,6 +58,7 @@
 		"@typescript-eslint/no-var-requires": "off",
 		"@typescript-eslint/no-inferrable-types": "off",
 		"@typescript-eslint/ban-ts-comment": "off",
+		"@typescript-eslint/no-unused-vars": "warn",
 		"react-refresh/only-export-components": [
 			"warn",
 			{

.github/workflows/pr-checks.yaml

@@ -0,0 +1,34 @@
+name: Pull Request Checks
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  tests-and-file-checks:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18'
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Linting
+      run: npm run lint
+
+    - name: Project structure
+      run: npm run lint:structure
+
+    - name: Unit tests
+      run: npm run test:unit
+
+    - name: Build
+      run: npm run build

.gitignore

@@ -25,3 +25,6 @@ dist-ssr
 
 *storybook.log
 storybook-static
+
+# Jest coverage
+coverage

.storybook/preview.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
 import { Title, Subtitle, Description, Primary, Controls, Stories, DocsContainer, Unstyled } from '@storybook/blocks';
-import RedbackUiThemeProvider from '../src/providers/RedbackUiThemeProvider/RedbackUiThemeProvider';
+import { RedbackUiThemeProvider } from '../src/providers/RedbackUiThemeProvider/RedbackUiThemeProvider';
 import { themes } from '../src/themes';
 
 const preview: Preview = {

CODEOWNERS

@@ -2,4 +2,4 @@
 # the repo. Unless a later match takes precedence,
 # @global-owner1 and @global-owner2 will be requested for
 # review when someone opens a pull request.
-*	@Redback-Operations/wearable-tech @Redback-Operations/tutors 
+*	@doubleedesign @Redback-Operations/tutors 

docs/About.mdx

@@ -1,4 +1,4 @@
-import LinkButton from '../src/components/LinkButton/LinkButton.tsx';
+import { LinkButton } from '../src';
 
 # About Redback Operations
 Redback Operations is a capstone project company within the School of Information Technology at Deakin University. Students nearing the end of their degrees work on a capstone project for two trimesters with the guidance of professional and academic mentors.
@@ -15,5 +15,5 @@ Redback UI is a library of common React components designed to be used across al
 
 Utilising [styled-components](https://styled-components.com/) for theming and styling, Redback UI components are designed to be easily reusable, and are customisable at the top level by wrapping applications in the `RedbackUiThemeProvider` component. (This uses the [ThemeProvider](https://styled-components.com/docs/advanced) from styled-components under the hood.) Simply pass a theme object to the `theme` prop of the `RedbackUiThemeProvider` component to customise the look and feel of all Redback UI components inside it. Example themes are included in Redback UI, but consuming applications can pass their own if it matches the expected structure as found in the [default theme](https://github.com/Redback-Operations/redback-ui/blob/main/src/themes/default.ts).
 
-<LinkButton label="How to use Redback UI" href="/?path=/docs/usage--docs" size="lg"/>
-<LinkButton label="How to contribute components" href="/?path=/docs/usage--docs" size="lg" color="secondary"/>
+<LinkButton label="How to use Redback UI" href="/redback-ui/docs/usage--docs" size="lg"/>
+<LinkButton label="How to contribute components" href="/redback-ui/?path=/docs/usage--docs" size="lg" color="secondary"/>

docs/Contributing.mdx

@@ -74,6 +74,8 @@ A new folder named with your component name will be created in the `src/componen
 - `ComponentName.stories.tsx`: the [Storybook](https://storybook.js.org/) file used to see, test, and document the component
 - `ComponentName.test.tsx`: the unit test file. A basic example is included. Please add further tests as relevant to your component.
 
+**Important!** To enable your component to be used by other apps or websites using the short `import { YourComponent } from '@redbackops/redback-ui'` syntax, you will need to export it from `src/index.ts`. Please add it to the list following the same format as the other components, and in alphabetical order.
+
 ### Theme and design tokens
 Design tokens are used to maintain consistency across the design system and applications that use it. The tokens are defined in a JavaScript object.
 
@@ -106,17 +108,45 @@ npx generate-react-cli component ComponentName --type=doc
 
 ## Before submitting your change
 
-Test the built version of Storybook to make sure everything works as expected, so that when your PR is approved and merged into the main branch you can be confident that you haven't introduced any errors such as incorrect file paths.
+1. Test the built version of Storybook to make sure everything works as expected, so that when your PR is approved and merged into the main branch you can be confident that you haven't introduced any errors such as incorrect file paths.
+
+	- Build Storybook
+		```bash
+		npm run build
+		```
+	- Preview the built version locally
+		```bash
+		npm run preview
+		```
+
+2. Run ESLint to check for any formatting or quality issues in your code according to the project's ESLint configuration.
 
-1. Build Storybook
 	```bash
-	npm run build
+	npm run lint
 	```
-2. Preview the built version locally
+
+	Some issues can be fixed automatically:
+	```bash
+	npm run lint:fix
+	```
+
+	It is recommended to enable running ESLint on save in your IDE to catch issues and reformat code as you work.
+
+	If you would like to add or edit a rule in the ESLint configuration, please raise a pull request with your change and include the reasoning in the description.
+
+
+3. Ensure your files follow the expected structure
+
 	```bash
-	npm run preview
+	npm run lint:structure
 	```
 
+	_**Note**: This will also run the general ESLint checks from step 2, so it's a good idea to run that first so you can fix any issues before running the structure check._
+
+4. If you created a new component, ensure it is exported by opening `src/index.ts` and add your component to the list following the same format as the other components, and in alphabetical order.
+
+5. Bump the version number in `package.json` according to the [Semantic Versioning](https://semver.org/) guidelines.
+
 ## Submitting your change
 
 1. Stage your changes
@@ -137,7 +167,7 @@ Test the built version of Storybook to make sure everything works as expected, s
 	```bash
 	git push
 	```
-4. Create a pull request on GitHub, ensuring your include a clear description of your changes and any relevant context for reviewers.
+4. Create a pull request on GitHub, in [the main Redback UI repository](https://github.com/Redback-Operations/redback-ui), ensuring your include a clear description of your changes and any relevant context for reviewers.
 
 ## Video tutorials
 1. [Local setup](https://www.loom.com/share/d77050ce968e4c3690f1760988318de3?sid=d2426caa-3dbf-4477-97a3-0e6beb4391d9) (5 minutes)

docs/components/ColourDemo/ColourDemo.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react';
 import { ColourDemoBlock, ColourDemoGrid, StyledColourDocs } from './ColourDemo.style';
-import { RedbackUiTheme, RedbackUiThemeName } from '../../../src/types';
-import RedbackUiThemeProvider from '../../../src/providers/RedbackUiThemeProvider/RedbackUiThemeProvider';
-import { themes } from '../../../src/themes';
-import Alert from '../../../src/components/Alert/Alert';
+import { RedbackUiTheme, RedbackUiThemeName, ThemeColor } from '../../../src/types';
+import { RedbackUiThemeProvider } from '../../../src';
+import { themes } from '../../../src';
+import { Alert } from '../../../src';
 
 const ColourDemo: FC = () => {
 	const themeName = localStorage.getItem('ui-theme') as RedbackUiThemeName;
@@ -18,7 +18,7 @@ const ColourDemo: FC = () => {
 			<StyledColourDocs data-testid="Colour Docs">
 				<ColourDemoGrid>
 					{Object.entries(theme.colors).map(([key, value]) => (
-						<ColourDemoBlock key={key} $color={key}>
+						<ColourDemoBlock key={key} $color={key as ThemeColor}>
 							<div></div>
 							<span>{key} <strong>{value}</strong></span>
 						</ColourDemoBlock>

docs/components/TypographyDemo/TypographyDemo.tsx

@@ -1,11 +1,11 @@
 import { FC } from 'react';
 import { StyledTypographyDemo } from './TypographyDemo.style';
 import { RedbackUiTheme, RedbackUiThemeName } from '../../../src/types';
-import { themes } from '../../../src/themes';
-import RedbackUiThemeProvider from '../../../src/providers/RedbackUiThemeProvider/RedbackUiThemeProvider';
-import Alert from '../../../src/components/Alert/Alert';
-import Table from '../../../src/components/Table/Table';
-import TruncatedText from '../../../src/components/TruncatedText/TruncatedText';
+import { themes } from '../../../src';
+import { RedbackUiThemeProvider } from '../../../src';
+import { Alert } from '../../../src';
+import { Table } from '../../../src';
+import { TruncatedText } from '../../../src';
 
 type TypographyDemoProps = {
 	name: string;

jest.config.js

@@ -1,7 +1,7 @@
 export default {
 	testEnvironment: 'jsdom',
 	transform: {
-		'^.+\\.[t|j]sx?$': 'babel-jest',
+		'^.+\\.(tsx?|jsx?)$': 'babel-jest',
 	},
-	setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 };

jest.setup.ts

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom';
+
+jest.mock('./src/providers/RedbackUiThemeProvider/GlobalStyle.tsx', () => ({
+	GlobalStyle: () => null
+}));
+

jest.utils.tsx

@@ -0,0 +1,22 @@
+import { DiProvider, injectable } from 'react-magnetic-di';
+import { ThemeProvider } from 'styled-components';
+import { ReactNode } from 'react';
+import { themes } from './src';
+import { RedbackUiThemeProvider } from './src';
+import { render } from '@testing-library/react';
+
+const commonDeps = [
+	injectable(RedbackUiThemeProvider, ({ theme, children }) => {
+		return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+	}),
+];
+
+
+export const renderWithDeps = (component: ReactNode) => {
+	return render(
+		<DiProvider use={commonDeps}>
+			<RedbackUiThemeProvider theme={themes.default}>
+				{component}
+			</RedbackUiThemeProvider>
+		</DiProvider>);
+};

package.json

@@ -3,14 +3,17 @@
   "version": "0.0.1",
   "type": "module",
   "license": "MIT",
+  "exports": "./dist/index.js",
   "scripts": {
     "dev": "storybook dev --port 6006",
     "lint": "eslint ./src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+	"lint:fix": "eslint ./src --ext ts,tsx --fix",
     "lint:structure": "eslint --parser ./node_modules/eslint-plugin-project-structure/dist/parser.js --rule project-structure/file-structure:error --ext .js,.jsx,.ts,.tsx,.html,.css,.svg,.png,.jpg,.json,.md .",
-    "test:unit": "jest ./src/components/**/*.test.tsx",
+    "test:unit": "jest ./src/components/**/*.test.tsx --coverage",
     "storybook": "storybook dev --port 6006",
     "build": "storybook build",
-    "preview": "npx http-server ./storybook-static"
+    "preview": "npx http-server ./storybook-static",
+    "package": "tsc -p tsconfig.dist.json"
   },
   "dependencies": {
     "@storybook/addon-docs": "^8.0.5",
@@ -50,6 +53,7 @@
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "babel-jest": "^29.7.0",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8.57.0",
     "eslint-plugin-project-structure": "^1.4.7",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -59,6 +63,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-magnetic-di": "^3.1.2",
     "storybook": "^8.0.5",
     "storybook-dark-mode": "^4.0.1",
     "typescript": "^5.2.2",