@telemetryos/cli 1.7.2 → 1.7.3

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 (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +2 -2
  3. package/templates/vite-react-typescript/src/hooks/store.ts +2 -0
  4. package/templates/vite-react-typescript/src/index.css +4 -6
  5. package/templates/vite-react-typescript/src/views/Render.css +15 -16
  6. package/templates/vite-react-typescript/src/views/Render.tsx +28 -17
  7. package/templates/vite-react-typescript/src/views/Settings.tsx +23 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @telemetryos/cli
2
2
 
3
+ ## 1.7.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Added scale slider to default package and supporting features in SDK, CLI
8
+ - Updated dependencies
9
+ - @telemetryos/development-application-host-ui@1.7.3
10
+
3
11
  ## 1.7.2
4
12
 
5
13
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telemetryos/cli",
3
- "version": "1.7.2",
3
+ "version": "1.7.3",
4
4
  "description": "The official TelemetryOS application CLI package. Use it to build applications that run on the TelemetryOS platform",
5
5
  "type": "module",
6
6
  "bin": {
@@ -25,7 +25,7 @@
25
25
  "license": "",
26
26
  "repository": "github:TelemetryTV/Application-API",
27
27
  "dependencies": {
28
- "@telemetryos/development-application-host-ui": "^1.7.2",
28
+ "@telemetryos/development-application-host-ui": "^1.7.3",
29
29
  "@types/serve-handler": "^6.1.4",
30
30
  "commander": "^14.0.0",
31
31
  "inquirer": "^12.9.6",
package/templates/vite-react-typescript/src/hooks/store.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  import { createUseStoreState } from '@telemetryos/sdk/react'
2
2
 
3
+ export const useUiScaleStoreState = createUseStoreState<number>('ui-scale', 1)
4
+
3
5
  export const useSubtitleStoreState = createUseStoreState<string>('subtitle', 'Change this line in settings ⚙️ ↗️')
package/templates/vite-react-typescript/src/index.css CHANGED
@@ -3,20 +3,18 @@
3
3
  }
4
4
 
5
5
  html {
6
- font-size: 10px;
6
+ font-size: 1vmax;
7
7
  height: 100%;
8
+ overflow: hidden;
8
9
  }
9
10
 
10
11
  body {
11
- display: flex;
12
- flex-direction: column;
13
- font-size: 1.6rem;
14
12
  margin: 0;
15
- min-height: 100%;
13
+ height: 100%;
16
14
  }
17
15
 
18
16
  #app {
19
- flex: 1;
17
+ height: 100%;
20
18
  display: flex;
21
19
  flex-direction: column;
22
20
 
package/templates/vite-react-typescript/src/views/Render.css CHANGED
@@ -4,50 +4,50 @@
4
4
  flex-direction: column;
5
5
  align-items: center;
6
6
  justify-content: space-between;
7
- padding: 3rem 0 5rem;
7
+ gap: 2rem;
8
+ padding: 5vmin;
8
9
  color: hsl(210 40% 88%);
9
10
  background: hsl(212 28% 10%);
10
11
  }
11
12
 
12
13
  .render__logo {
13
- max-width: 35rem;
14
+ width: 30rem;
15
+ max-width: 50%;
14
16
  }
15
17
 
16
18
  .render__hero {
17
19
  display: flex;
18
20
  flex-direction: column;
19
21
  align-items: center;
22
+ gap: 2rem;
20
23
  }
21
24
 
22
25
  .render__hero-title {
23
- font-size: 4rem;
24
- line-height: 1.8em;
25
- margin-bottom: 4rem;
26
+ font-size: 5rem;
26
27
  font-weight: 600;
28
+ text-align: center;
27
29
  }
28
30
 
29
31
  .render__hero-subtitle {
30
- font-size: 2.5rem;
32
+ font-size: 3rem;
33
+ text-align: center;
31
34
  }
32
35
 
33
36
  .render__docs-information {
34
37
  display: flex;
35
38
  flex-direction: column;
36
39
  align-items: center;
40
+ gap: 2rem;
37
41
  }
38
42
 
39
43
  .render__docs-information-title {
40
- font-size: 1.6rem;
41
- line-height: 1.8em;
42
- margin-bottom: 0.8rem;
44
+ font-size: 2rem;
43
45
  font-weight: 600;
44
46
  text-align: center;
45
47
  }
46
48
 
47
49
  .render__docs-information-text {
48
- font-size: 1.3rem;
49
- line-height: 1.4em;
50
- margin-bottom: 2.4rem;
50
+ font-size: 2rem;
51
51
  max-width: 60rem;
52
52
  text-align: center;
53
53
  }
@@ -57,11 +57,10 @@
57
57
  align-items: center;
58
58
  background: rgb(248, 180, 53);
59
59
  text-transform: uppercase;
60
- font-size: 1.5rem;
61
- height: 3.1rem;
60
+ font-size: 2rem;
62
61
  text-decoration: none;
63
62
  color: black;
64
63
  font-weight: bold;
65
- padding: 0 1.75rem;
66
- border-radius: 0.5rem;
64
+ padding: 1rem 2rem;
65
+ border-radius: 1rem;
67
66
  }
package/templates/vite-react-typescript/src/views/Render.tsx CHANGED
@@ -1,33 +1,44 @@
1
1
  import { store } from '@telemetryos/sdk'
2
- import './Render.css'
2
+ import { useUiScaleFactorToSetRem } from '@telemetryos/sdk/react'
3
3
  import wordMarkPath from '../../assets/telemetryos-wordmark.svg'
4
- import { useSubtitleStoreState } from '../hooks/store'
4
+ import { useSubtitleStoreState, useUiScaleStoreState } from '../hooks/store'
5
+ import './Render.css'
5
6
 
6
7
  export function Render() {
8
+ const [_isUiScaleLoading, uiScale] = useUiScaleStoreState(store().instance)
9
+ useUiScaleFactorToSetRem(uiScale)
7
10
  const [isLoading, subtitle] = useSubtitleStoreState(store().instance)
8
11
 
9
12
  return (
10
13
  <div className="render">
11
14
  <img src={wordMarkPath} alt="TelemetryOS" className="render__logo" />
12
15
  <div className="render__hero">
13
- <div className="render__hero-title">Welcome to TelemetryOS SDK</div>
16
+ {uiScale < 1.5 && (
17
+ <div className="render__hero-title">Welcome to TelemetryOS SDK</div>
18
+ )}
14
19
  <div className="render__hero-subtitle">{isLoading ? 'Loading...' : subtitle}</div>
15
20
  </div>
16
21
  <div className="render__docs-information">
17
- <div className="render__docs-information-title">
18
- To get started, edit the Render.tsx and Settings.tsx files
19
- </div>
20
- <div className="render__docs-information-text">
21
- Visit our documentation on building applications to learn more
22
- </div>
23
- <a
24
- className="render__docs-information-button"
25
- href="https://docs.telemetryos.com/docs/sdk-getting-started"
26
- target="_blank"
27
- rel="noreferrer"
28
- >
29
- Documentation
30
- </a>
22
+ {uiScale < 1.2 && (
23
+ <>
24
+ <div className="render__docs-information-title">
25
+ To get started, edit the Render.tsx and Settings.tsx files
26
+ </div>
27
+ <div className="render__docs-information-text">
28
+ Visit our documentation on building applications to learn more
29
+ </div>
30
+ </>
31
+ )}
32
+ {uiScale < 1.35 && (
33
+ <a
34
+ className="render__docs-information-button"
35
+ href="https://docs.telemetryos.com/docs/sdk-getting-started"
36
+ target="_blank"
37
+ rel="noreferrer"
38
+ >
39
+ Documentation
40
+ </a>
41
+ )}
31
42
  </div>
32
43
  </div>
33
44
  )
package/templates/vite-react-typescript/src/views/Settings.tsx CHANGED
@@ -1,18 +1,39 @@
1
1
  import { store } from '@telemetryos/sdk'
2
2
  import {
3
3
  SettingsContainer,
4
+ SettingsDivider,
4
5
  SettingsField,
5
- SettingsLabel,
6
6
  SettingsInputFrame,
7
+ SettingsLabel,
8
+ SettingsSliderFrame,
7
9
  } from '@telemetryos/sdk/react'
8
- import { useSubtitleStoreState } from '../hooks/store'
10
+ import { useSubtitleStoreState, useUiScaleStoreState } from '../hooks/store'
9
11
 
10
12
  export function Settings() {
13
+ const [isLoadingUiScale, uiScale, setUiScale] = useUiScaleStoreState(store().instance)
11
14
  const [isLoading, subtitle, setSubtitle] = useSubtitleStoreState(store().instance)
12
15
 
13
16
  return (
14
17
  <SettingsContainer>
15
18
 
19
+ <SettingsField>
20
+ <SettingsLabel>UI Scale</SettingsLabel>
21
+ <SettingsSliderFrame>
22
+ <input
23
+ type="range"
24
+ min={1}
25
+ max={3}
26
+ step={0.01}
27
+ disabled={isLoadingUiScale}
28
+ value={uiScale}
29
+ onChange={(e) => setUiScale(parseFloat(e.target.value))}
30
+ />
31
+ <span>{uiScale}x</span>
32
+ </SettingsSliderFrame>
33
+ </SettingsField>
34
+
35
+ <SettingsDivider />
36
+
16
37
  <SettingsField>
17
38
  <SettingsLabel>Subtitle Text</SettingsLabel>
18
39
  <SettingsInputFrame>