@5ive-souls/controls 0.0.1

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 +36 -0
  2. package/package.json +65 -0
package/README.md ADDED
@@ -0,0 +1,36 @@
1
+ # @5ive-souls/controls
2
+
3
+ [![Build Status](https://5ivesouls.visualstudio.com/5ive-souls-controls/_apis/build/status%2F5ive-souls-controls?branchName=main)](https://5ivesouls.visualstudio.com/5ive-souls-controls/_build/latest?definitionId=8&branchName=main)
4
+
5
+ ### Usage
6
+
7
+ First you will need to add @5ive-souls/controls to your project.
8
+
9
+ ```sh
10
+ npm install @5ive-souls/controls
11
+ ```
12
+
13
+ To use a component, you first need to set a global theme. This can be done with either the `FluentProvider` within Fluent UI or with the `FiveSoulsProvider`. While the FluentProvider will work, it will not provide the 5ive-souls/controls with any responsive capabilities and the `useDevice()` hook will not function.
14
+
15
+ ```typescript
16
+ import React from "react";
17
+ import ReactDOM from "react-dom";
18
+ import { FiveSoulsProvider, Grid, Section, forestDark } from "@5ive-souls/controls";
19
+
20
+ ReactDOM.render(
21
+ <FiveSoulsProvider theme={forestDark}>
22
+ <Grid>
23
+ <ColumnDefinition />
24
+ <ColumnDefinition />
25
+ <Section cellProps={{ column: 1}}>
26
+ <span>Section content</span>
27
+ </Section>
28
+ </Grid>
29
+ </FiveSoulsProvider>,
30
+ document.getElementById('root'),
31
+ );
32
+ ```
33
+
34
+ ### Documentation
35
+
36
+ Documentation is hosted at [docs](https://icy-ocean-04bfa000f.6.azurestaticapps.net/).
package/package.json ADDED
@@ -0,0 +1,65 @@
1
+ {
2
+ "name": "@5ive-souls/controls",
3
+ "version": "0.0.1",
4
+ "type": "module",
5
+ "main": "dist/main.js",
6
+ "types": "dist/main.d.ts",
7
+ "files": [
8
+ "dist"
9
+ ],
10
+ "scripts": {
11
+ "dev": "storybook dev -p 6006",
12
+ "build": "tsc --p ./tsconfig-build.json && vite build",
13
+ "build::storybook": "storybook build -o ./publish",
14
+ "pack": "npm pack --pack-destination ./dist",
15
+ "test": "vitest",
16
+ "test:coverage": "vitest run --coverage"
17
+ },
18
+ "peerDependencies": {
19
+ "@fluentui/react-components": "^9.60.0",
20
+ "react": "^18.2.0",
21
+ "react-dom": "^18.2.0"
22
+ },
23
+ "devDependencies": {
24
+ "@eslint/js": "^9.21.0",
25
+ "@storybook/addon-essentials": "^8.6.4",
26
+ "@storybook/addon-interactions": "^8.6.4",
27
+ "@storybook/addon-a11y": "^8.6.4",
28
+ "@storybook/addon-links": "^8.6.4",
29
+ "@storybook/blocks": "^8.6.4",
30
+ "@storybook/react": "^8.6.4",
31
+ "@storybook/react-vite": "^8.6.4",
32
+ "@storybook/test": "^8.6.4",
33
+ "@testing-library/jest-dom": "^6.6.3",
34
+ "@testing-library/react": "^16.0.1",
35
+ "@types/jest": "^29.5.14",
36
+ "@types/node": "^22.5.2",
37
+ "@types/react": "^18.3.3",
38
+ "@types/react-dom": "^18.3.0",
39
+ "@vitejs/plugin-react": "^4.3.1",
40
+ "@vitest/coverage-v8": "^2.1.4",
41
+ "eslint": "^9.10.0",
42
+ "eslint-plugin-react": "^7.36.1",
43
+ "eslint-plugin-react-hooks": "^5.1.0-rc.0",
44
+ "eslint-plugin-react-refresh": "^0.4.9",
45
+ "eslint-plugin-storybook": "^0.8.0",
46
+ "glob": "^11.0.0",
47
+ "globals": "^15.9.0",
48
+ "jsdom": "^25.0.1",
49
+ "react": "^18.3.1",
50
+ "react-dom": "^18.3.1",
51
+ "storybook": "^8.6.4",
52
+ "storybook-dark-mode": "^4.0.2",
53
+ "typescript": "^5.5.3",
54
+ "typescript-eslint": "^8.0.1",
55
+ "vite": "^5.4.1",
56
+ "vite-plugin-dts": "^4.1.0",
57
+ "vitest": "^2.1.4"
58
+ },
59
+ "eslintConfig": {
60
+ "extends": [
61
+ "plugin:storybook/recommended"
62
+ ]
63
+ },
64
+ "dependencies": {}
65
+ }