TypeScript configuration and export setup for packaging the library (#3)

.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 = {

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)

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 --report-unused-disable-directives --max-warnings 0 --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 --modulePathIgnorePatterns=dist ./src/components/**/*.test.tsx",
     "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",
@@ -48,6 +51,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",

project-structure.json

@@ -88,6 +88,10 @@
 								"extension": ["ts"]
 							}
 						]
+					},
+					{
+						"name": "index",
+						"extension": ["ts"]
 					}
 				]
             },
@@ -151,6 +155,7 @@
 					}
 				]
 			},
+			{"name": "dist"},
 			{
 				"name": "test-mocks",
 				"children": []
@@ -212,7 +217,11 @@
 				"extension": ["json"]
 			},
 			{
-				"name": "tsconfig.node",
+				"name": "tsconfig.dev",
+				"extension": ["json"]
+			},
+			{
+				"name": "tsconfig.dist",
 				"extension": ["json"]
 			},
 			{

src/components/Alert/Alert.stories.ts

@@ -1,4 +1,4 @@
-import Alert from './Alert';
+import { Alert } from './Alert';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {

src/components/Alert/Alert.tsx

@@ -5,12 +5,10 @@ type AlertProps = {
 	type?: 'success' | 'info' | 'warning' | 'error';
 }
 
-const Alert: FC<PropsWithChildren<AlertProps>> = ({ type, children }) => {
+export const Alert: FC<PropsWithChildren<AlertProps>> = ({ type, children }) => {
 	return (
 		<StyledAlert data-testid="Alert" type={type ?? 'info'}>
 			{children}
 		</StyledAlert>
 	);
 };
-
-export default Alert;

src/components/Button/Button.stories.ts

@@ -1,7 +1,7 @@
-import Button from './Button';
+import { Button } from './Button';
 import { fn } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/react';
-import { themeColorSubset } from '../../types.ts';
+import { themeColorSubset } from '../../types';
 
 const meta = {
 	title: 'Components/Button',

src/components/Button/Button.style.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { ThemeColor, ThemeElementAppearance, ThemeElementSize } from '../../types.ts';
+import { ThemeColor, ThemeElementAppearance, ThemeElementSize } from '../../types';
 import { readableColor, shade } from 'polished';
 
 type StyledButtonProps = {

src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import { StyledButton } from './Button.style.ts';
-import { ThemeColor, ThemeElementAppearance, ThemeElementSize } from '../../types.ts';
+import { StyledButton } from './Button.style';
+import { ThemeColor, ThemeElementAppearance, ThemeElementSize } from '../../types';
 
 type ButtonProps = {
 	label: string;
@@ -10,7 +10,7 @@ type ButtonProps = {
 	size?: ThemeElementSize;
 }
 
-const Button: FC<ButtonProps> = ({
+export const Button: FC<ButtonProps> = ({
 	label,
 	color = 'primary',
 	onClick,
@@ -23,5 +23,3 @@ const Button: FC<ButtonProps> = ({
 		</StyledButton>
 	);
 };
-
-export default Button;

src/components/Label/Label.stories.ts

@@ -1,4 +1,4 @@
-import Label from './Label';
+import { Label } from './Label';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {

src/components/Label/Label.tsx

@@ -6,12 +6,10 @@ type LabelProps = {
 	text: string;
 }
 
-const Label: FC<LabelProps> = ({ type, text }: LabelProps) => {
+export const Label: FC<LabelProps> = ({ type, text }: LabelProps) => {
 	return (
 		<StyledLabel data-testid="Label" type={type}>
 			{text}
 		</StyledLabel>
 	);
 };
-
-export default Label;

src/components/LinkButton/LinkButton.stories.ts

@@ -1,6 +1,6 @@
-import LinkButton from './LinkButton';
+import { LinkButton } from './LinkButton';
 import type { Meta, StoryObj } from '@storybook/react';
-import { themeColorSubset } from '../../types.ts';
+import { themeColorSubset } from '../../types';
 
 const meta = {
 	title: 'Components/LinkButton',

src/components/LinkButton/LinkButton.style.ts

@@ -1,3 +1,3 @@
 import styled from 'styled-components';
-import { StyledButton } from '../Button/Button.style.ts';
+import { StyledButton } from '../Button/Button.style';
 export const StyledLinkButton = styled(StyledButton).attrs({ as: 'a' })``;

src/components/LinkButton/LinkButton.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { StyledLinkButton } from './LinkButton.style';
-import { ThemeColor, ThemeElementAppearance, ThemeElementSize } from '../../types.ts';
+import { ThemeColor, ThemeElementAppearance, ThemeElementSize } from '../../types';
 
 type LinkButtonProps = {
 	label: string;
@@ -11,7 +11,7 @@ type LinkButtonProps = {
 	target?: '_blank';
 }
 
-const LinkButton: FC<LinkButtonProps> = ({
+export const LinkButton: FC<LinkButtonProps> = ({
 	label,
 	color = 'primary',
 	href = '#',
@@ -25,5 +25,3 @@ const LinkButton: FC<LinkButtonProps> = ({
 		</StyledLinkButton>
 	);
 };
-
-export default LinkButton;

src/components/Table/Table.stories.ts

@@ -1,4 +1,4 @@
-import Table from './Table';
+import { Table } from './Table';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {

src/components/Table/Table.tsx

@@ -1,12 +1,10 @@
 import { FC, PropsWithChildren } from 'react';
 import { StyledTable } from './Table.style';
 
-const Table: FC<PropsWithChildren> = ({ children }) => {
+export const Table: FC<PropsWithChildren> = ({ children }) => {
 	return (
 		<StyledTable data-testid="Table">
 			{children}
 		</StyledTable>
 	);
 };
-
-export default Table;

src/components/TruncatedText/TruncatedText.stories.ts

@@ -1,4 +1,4 @@
-import TruncatedText from './TruncatedText';
+import { TruncatedText } from './TruncatedText';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {

src/components/TruncatedText/TruncatedText.tsx

@@ -6,12 +6,10 @@ type TruncatedTextProps = {
 	lines: number;
 }
 
-const TruncatedText: FC<PropsWithChildren<TruncatedTextProps>> = ({ lines, text }) => {
+export const TruncatedText: FC<PropsWithChildren<TruncatedTextProps>> = ({ lines, text }) => {
 	return (
 		<StyledTruncatedText data-testid="TruncatedText" lines={lines}>
 			{text}
 		</StyledTruncatedText>
 	);
 };
-
-export default TruncatedText;

src/index.ts

@@ -0,0 +1,8 @@
+export * from './providers/RedbackUiThemeProvider/RedbackUiThemeProvider';
+export * from './themes';
+export * from './components/Alert/Alert';
+export * from './components/Button/Button';
+export * from './components/Label/Label';
+export * from './components/LinkButton/LinkButton';
+export * from './components/Table/Table';
+export * from './components/TruncatedText/TruncatedText';

src/providers/RedbackUiThemeProvider/GlobalStyle.tsx

@@ -3,6 +3,8 @@ import { rgba } from 'polished';
 import './fonts.css';
 
 export const GlobalStyle = createGlobalStyle`
+	@import 'https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap';
+	
 	body {
 		margin: 0;
 		padding: 0;

src/providers/RedbackUiThemeProvider/RedbackUiThemeProvider.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import RedbackUiThemeProvider from './RedbackUiThemeProvider';
+import { RedbackUiThemeProvider } from './RedbackUiThemeProvider';
 import { themes } from '../../themes';
 
 describe('<RedbackUiThemeProvider />', () => {

src/providers/RedbackUiThemeProvider/RedbackUiThemeProvider.tsx

@@ -1,15 +1,15 @@
 import { FC, PropsWithChildren, ReactNode } from 'react';
-import { RedbackUiWrapper } from './RedbackUiThemeProvider.style.ts';
-import { RedbackUiTheme } from '../../types.ts';
+import { RedbackUiWrapper } from './RedbackUiThemeProvider.style';
+import { RedbackUiTheme } from '../../types';
 import { ThemeProvider } from 'styled-components';
-import { GlobalStyle } from './GlobalStyle.tsx';
+import { GlobalStyle } from './GlobalStyle';
 
 type RedbackUiThemeProviderProps = {
 	theme: RedbackUiTheme;
 	children: ReactNode;
 }
 
-const RedbackUiThemeProvider: FC<PropsWithChildren<RedbackUiThemeProviderProps>> = ({
+export const RedbackUiThemeProvider: FC<PropsWithChildren<RedbackUiThemeProviderProps>> = ({
 	theme,
 	children
 }) => {
@@ -21,6 +21,4 @@ const RedbackUiThemeProvider: FC<PropsWithChildren<RedbackUiThemeProviderProps>>
 			</RedbackUiWrapper>
 		</ThemeProvider>
 	);
-};
-
-export default RedbackUiThemeProvider;
+};

templates/TemplateName.stories.ts

@@ -1,4 +1,4 @@
-import TemplateName from './TemplateName';
+import { TemplateName } from './TemplateName';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {

templates/TemplateName.tsx

@@ -3,12 +3,10 @@ import { StyledTemplateName } from './TemplateName.style';
 
 type TemplateNameProps = {}
 
-const TemplateName: FC<TemplateNameProps> = () => {
+export const TemplateName: FC<TemplateNameProps> = () => {
 	return (
 		<StyledTemplateName data-testid="TemplateName">
 			TemplateName Component
 		</StyledTemplateName>
 	);
 };
-
-export default TemplateName;

tsconfig.dev.json

@@ -0,0 +1,8 @@
+{
+	"extends": "./tsconfig.json",
+	"root": false,
+	"compilerOptions": {
+		"types": ["@testing-library/jest-dom"]
+	},
+	"include": ["src", "templates"]
+}

tsconfig.dist.json

@@ -0,0 +1,10 @@
+{
+	"extends": "./tsconfig.json",
+	"root": false,
+	"compilerOptions": {
+		"outDir": "dist",
+		"declaration": true,
+	},
+	"include": ["src/**/*.ts", "src/**/*.tsx"],
+	"exclude": ["**/*.test.ts", "**/*.test.tsx", "**/*.stories.tsx", "**/*.stories.ts"]
+}