@cruk/chakra-components 1.0.0-dev.1 → 1.0.0-dev.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +95 -3
  2. package/package.json +22 -21
package/README.md CHANGED
@@ -14,7 +14,7 @@ npm i @cruk/chakra-components
14
14
 
15
15
  Once added to the project, you can use the `ChakraBaseProvider` to wrap your application and provide styled based on the `crukBrand` theme.
16
16
 
17
- ```javascript
17
+ ```typescript
18
18
  import type { AppProps } from "next/app";
19
19
  import { ChakraBaseProvider, crukBrand } from "@cruk/chakra-components";
20
20
 
@@ -27,17 +27,109 @@ const App = ({ Component, pageProps }: AppProps) => (
27
27
  export default App;
28
28
  ```
29
29
 
30
+ ## Releases
31
+
32
+ This library uses semantic-release for automated versioning and publishing. We follow the [Conventional Commits](https://www.conventionalcommits.org/) specification.
33
+
34
+ ### Development Releases
35
+
36
+ Commit to the `dev` branch to create pre-release versions:
37
+
38
+ ```bash
39
+ # Install latest dev version
40
+ npm install @cruk/chakra-components@dev
41
+ ```
42
+
43
+ ### Production Releases
44
+
45
+ Merge to `main` branch to create production releases:
46
+
47
+ ```bash
48
+ # Install latest stable version
49
+ npm install @cruk/chakra-components@latest
50
+ ```
51
+
52
+ ### Skip NPM Release
53
+
54
+ To make changes without triggering an NPM release, add `[skip npm]` to your commit message:
55
+
56
+ ```bash
57
+ git commit -m "feat: add new feature [skip npm]"
58
+ ```
59
+
60
+ See the [Release Process](./docs/releases.md) guide for detailed information about our release strategy and commit conventions.
61
+
62
+ ## Fonts
63
+
64
+ The library uses custom CRUK fonts that need to be included in your application. Copy the required fonts to your project's `public/fonts/` directory.
65
+
66
+ ### Next.js (Recommended)
67
+
68
+ For Next.js applications, use `next/font/local` for optimal font loading and performance:
69
+
70
+ ```typescript
71
+ import { crukBrand, extendBaseTheme } from "@cruk/chakra-components";
72
+ import localFont from "next/font/local";
73
+
74
+ const ProgressFont = localFont({
75
+ src: [
76
+ {
77
+ path: "/../../public/fonts/progress/Progress-Light.woff",
78
+ weight: "300",
79
+ },
80
+ {
81
+ path: "/../../public/fonts/progress/Progress-Regular.woff",
82
+ weight: "400",
83
+ },
84
+ ],
85
+ });
86
+
87
+ const PoppinsFont = localFont({
88
+ src: [
89
+ {
90
+ path: "/../../public/fonts/poppins/Poppins-Regular.woff",
91
+ weight: "400",
92
+ },
93
+ {
94
+ path: "/../../public/fonts/poppins/Poppins-Medium.woff",
95
+ weight: "500",
96
+ },
97
+ ],
98
+ });
99
+
100
+ export const theme = extendBaseTheme(
101
+ {
102
+ fonts: {
103
+ heading: `${ProgressFont.style.fontFamily}, Calibri, Arial, sans-serif`,
104
+ body: `${PoppinsFont.style.fontFamily}, Arial, sans-serif`,
105
+ },
106
+ },
107
+ crukBrand
108
+ );
109
+ ```
110
+
111
+ For detailed font configuration including other weights and CSS setup, see the [Theming Guide](./docs/theming.md#fonts).
112
+
30
113
  ## Documentation
31
114
 
115
+ ### Component Documentation
116
+
32
117
  The Storybook documentation for these components can be found at: https://main-site-components.vercel.app
33
118
 
119
+ ### Guides
120
+
121
+ - [Getting Started](./docs/index.md)
122
+ - [Styling Guide](./docs/styling-guide.md) - Learn about different approaches to styling components
123
+ - [Theming Guide](./docs/theming.md) - Detailed information about themes, semantic tokens, and fonts
124
+ - [Release Process](./docs/releases.md) - Understanding our release strategy and commit conventions
125
+
34
126
  ## Chakra UI
35
127
 
36
128
  The components in this library are based on Chakra UI. Components are being constantly added and will be updated as per the brand teams additions to the new CRUK Design System.
37
129
 
38
- ## Theming Components
130
+ ## Quick Theming Example
39
131
 
40
- Components can be extended using a Chakra Theme provider. Here is an example of how a button can be extended:
132
+ Components can be extended using a Chakra Theme provider. See our [Theming Guide](./docs/theming.md) for comprehensive documentation. Here's a quick example:
41
133
 
42
134
  ```javascript
43
135
  import type { AppProps } from "next/app";
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@cruk/chakra-components",
3
- "version": "1.0.0-dev.1",
4
- "description": "Chakra UI based components for CRUK applications",
3
+ "version": "1.0.0-dev.4",
4
+ "description": "Chakra UI v2 based components for CRUK applications",
5
5
  "license": "MIT",
6
6
  "type": "module",
7
7
  "sideEffects": false,
8
- "main": "./src/index.ts",
9
- "module": "./src/index.ts",
10
- "types": "./src/index.ts",
8
+ "main": "./dist/cjs/index.js",
9
+ "module": "./dist/esm/index.js",
10
+ "types": "./dist/index.d.ts",
11
11
  "src": "./src",
12
12
  "files": [
13
13
  "dist"
@@ -24,8 +24,7 @@
24
24
  "visualtest": "eyes-storybook dev -p 6006",
25
25
  "preview": "vite preview",
26
26
  "build-storybook": "storybook build",
27
- "release": "semantic-release",
28
- "prepare": "npm run build"
27
+ "release": "semantic-release"
29
28
  },
30
29
  "dependencies": {
31
30
  "@chakra-ui/icons": "^2.2.4",
@@ -38,28 +37,30 @@
38
37
  "react-dropzone": "^14.3.6"
39
38
  },
40
39
  "devDependencies": {
41
- "@chromatic-com/storybook": "^3.2.4",
40
+ "@chromatic-com/storybook": "^3.2.5",
42
41
  "@eslint/js": "^9.21.0",
43
42
  "@rollup/plugin-commonjs": "^28.0.2",
44
43
  "@rollup/plugin-node-resolve": "^16.0.0",
45
44
  "@rollup/plugin-terser": "^0.4.4",
46
45
  "@rollup/plugin-typescript": "^12.1.2",
46
+ "@semantic-release/changelog": "^6.0.3",
47
47
  "@semantic-release/commit-analyzer": "^13.0.1",
48
+ "@semantic-release/git": "^10.0.1",
48
49
  "@semantic-release/github": "^11.0.1",
49
50
  "@semantic-release/npm": "^12.0.1",
50
51
  "@semantic-release/release-notes-generator": "^14.0.3",
51
- "@storybook/addon-a11y": "^8.5.8",
52
- "@storybook/addon-essentials": "^8.5.8",
53
- "@storybook/addon-interactions": "^8.5.8",
54
- "@storybook/addon-links": "^8.5.8",
55
- "@storybook/addon-mdx-gfm": "^8.5.8",
56
- "@storybook/addon-themes": "^8.5.8",
57
- "@storybook/blocks": "^8.5.8",
58
- "@storybook/manager-api": "^8.5.8",
59
- "@storybook/react": "^8.5.8",
60
- "@storybook/react-vite": "^8.5.8",
61
- "@storybook/test": "^8.5.8",
62
- "@storybook/theming": "^8.5.8",
52
+ "@storybook/addon-a11y": "^8.6.1",
53
+ "@storybook/addon-essentials": "^8.6.1",
54
+ "@storybook/addon-interactions": "^8.6.1",
55
+ "@storybook/addon-links": "^8.6.1",
56
+ "@storybook/addon-mdx-gfm": "^8.6.1",
57
+ "@storybook/addon-themes": "^8.6.1",
58
+ "@storybook/blocks": "^8.6.1",
59
+ "@storybook/manager-api": "^8.6.1",
60
+ "@storybook/react": "^8.6.1",
61
+ "@storybook/react-vite": "^8.6.1",
62
+ "@storybook/test": "^8.6.1",
63
+ "@storybook/theming": "^8.6.1",
63
64
  "@testing-library/dom": "^10.4.0",
64
65
  "@testing-library/react": "^16.2.0",
65
66
  "@types/node": "^22.13.5",
@@ -77,7 +78,7 @@
77
78
  "rollup-plugin-dts": "^6.1.1",
78
79
  "rollup-plugin-peer-deps-external": "^2.2.4",
79
80
  "semantic-release": "^24.2.3",
80
- "storybook": "^8.5.8",
81
+ "storybook": "^8.6.1",
81
82
  "typescript": "~5.7.3",
82
83
  "typescript-eslint": "^8.24.1",
83
84
  "vite": "^6.1.1",