sat-ds 0.0.4__tar.gz
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.
- sat_ds-0.0.4/LICENSE +0 -0
- sat_ds-0.0.4/PKG-INFO +291 -0
- sat_ds-0.0.4/README.md +279 -0
- sat_ds-0.0.4/pyproject.toml +24 -0
- sat_ds-0.0.4/setup.cfg +4 -0
- sat_ds-0.0.4/src/components/__init__.py +8 -0
- sat_ds-0.0.4/src/components/accordeon_ds/__init__.py +3 -0
- sat_ds-0.0.4/src/components/accordeon_ds/accordeon_ds.py +28 -0
- sat_ds-0.0.4/src/components/button_ds/__init__.py +1 -0
- sat_ds-0.0.4/src/components/button_ds/button_ds.py +80 -0
- sat_ds-0.0.4/src/components/card_dist_ds/__init__.py +1 -0
- sat_ds-0.0.4/src/components/card_dist_ds/card_dist_ds.py +52 -0
- sat_ds-0.0.4/src/components/card_metric_ds/__init__.py +1 -0
- sat_ds-0.0.4/src/components/card_metric_ds/card_metric_ds.py +147 -0
- sat_ds-0.0.4/src/components/identification_field_ds/__init__.py +1 -0
- sat_ds-0.0.4/src/components/identification_field_ds/identification_field_ds.py +46 -0
- sat_ds-0.0.4/src/components/info_bar_ds/__init__.py +1 -0
- sat_ds-0.0.4/src/components/info_bar_ds/info_bar_ds.py +40 -0
- sat_ds-0.0.4/src/components/panel_ds/__init__.py +1 -0
- sat_ds-0.0.4/src/components/panel_ds/panel_ds.py +58 -0
- sat_ds-0.0.4/src/components/tabs_ds/__init__.py +1 -0
- sat_ds-0.0.4/src/components/tabs_ds/tabs_ds.py +35 -0
- sat_ds-0.0.4/src/sat_ds.egg-info/PKG-INFO +291 -0
- sat_ds-0.0.4/src/sat_ds.egg-info/SOURCES.txt +27 -0
- sat_ds-0.0.4/src/sat_ds.egg-info/dependency_links.txt +1 -0
- sat_ds-0.0.4/src/sat_ds.egg-info/requires.txt +1 -0
- sat_ds-0.0.4/src/sat_ds.egg-info/top_level.txt +2 -0
- sat_ds-0.0.4/src/theme/__init__.py +43 -0
- sat_ds-0.0.4/src/theme/colors.py +122 -0
sat_ds-0.0.4/LICENSE
ADDED
|
File without changes
|
sat_ds-0.0.4/PKG-INFO
ADDED
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
Metadata-Version: 2.4
|
|
2
|
+
Name: sat-ds
|
|
3
|
+
Version: 0.0.4
|
|
4
|
+
Summary: Biblioteca de componentes reutilizáveis
|
|
5
|
+
Author: lpozza
|
|
6
|
+
License: MIT
|
|
7
|
+
Requires-Python: >=3.9
|
|
8
|
+
Description-Content-Type: text/markdown
|
|
9
|
+
License-File: LICENSE
|
|
10
|
+
Requires-Dist: streamlit>=1.35.0
|
|
11
|
+
Dynamic: license-file
|
|
12
|
+
|
|
13
|
+
# SAT Design System — `sat-ds`
|
|
14
|
+
|
|
15
|
+
> Biblioteca de componentes reutilizáveis para aplicações Streamlit embarcadas no sistema SAT via MainFrame.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## 🇧🇷 Português
|
|
20
|
+
|
|
21
|
+
### Sobre o projeto
|
|
22
|
+
|
|
23
|
+
O **SAT Design System** (`sat-ds`) é uma biblioteca de componentes Python construída sobre o [Streamlit](https://streamlit.io), criada para padronizar a interface visual das aplicações embarcadas no sistema **SAT** via MainFrame.
|
|
24
|
+
|
|
25
|
+
A biblioteca nasceu da necessidade de reutilizar componentes com identidade visual consistente em aplicações subsequentes que são embedadas dentro do sistema principal. Em vez de recriar estilos e lógica de UI em cada projeto, o `sat-ds` centraliza esses elementos em um único pacote instalável via `pip`.
|
|
26
|
+
|
|
27
|
+
Cada componente foi cuidadosamente redesenhado seguindo as diretrizes do Design System exclusivo do SAT, garantindo coesão visual e experiência de uso uniforme entre todas as aplicações da plataforma.
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
### Instalação
|
|
32
|
+
|
|
33
|
+
#### Requisitos
|
|
34
|
+
|
|
35
|
+
- Python >= 3.9
|
|
36
|
+
- Streamlit instalado no projeto consumidor
|
|
37
|
+
|
|
38
|
+
#### Via pip (repositório interno / local)
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
pip install sat-ds
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
#### Via pip apontando para o repositório Git
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
pip install git+https://github.com/seu-org/sat-ds.git
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
#### Via arquivo local (durante desenvolvimento)
|
|
51
|
+
|
|
52
|
+
Clone o repositório e instale em modo editável:
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
git clone https://github.com/seu-org/sat-ds.git
|
|
56
|
+
cd sat-ds
|
|
57
|
+
pip install -e .
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
### Componentes disponíveis
|
|
63
|
+
|
|
64
|
+
| Componente | Função principal | Descrição |
|
|
65
|
+
|---|---|---|
|
|
66
|
+
| `button_ds` | `button_ds(title, bg_color, ...)` | Botão estilizado em formato pílula com ícone SVG opcional |
|
|
67
|
+
| `card_dist_ds` | `card_dist_ds(title, value, percent, ...)` | Card de distribuição com valores monetários e percentuais |
|
|
68
|
+
| `card_metric_ds` | `card_metric_ds(title, value, icon, ...)` | Card de métrica com suporte a delta, tooltip e variação de tamanho |
|
|
69
|
+
| `identification_field_ds` | `identification_field_ds(label, placeholder, ...)` | Campo de texto estilizado para entrada de identificadores |
|
|
70
|
+
| `info_bar_ds` | `info_bar_ds(text, bg_color, ...)` | Barra de informação/alerta com cor e borda customizáveis |
|
|
71
|
+
| `panel_ds` | `with panel_ds(key, ...)` | Container com borda estilizada, usado como gerenciador de contexto |
|
|
72
|
+
| `tabs_ds` | `tabs_ds(["Aba A", "Aba B"])` | Wrapper estilizado sobre `st.tabs()` |
|
|
73
|
+
| `accordeon_ds` | `with accordeon(label, expanded)` | Seção expansível estilizada sobre `st.expander()` |
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
### Uso básico
|
|
78
|
+
|
|
79
|
+
```python
|
|
80
|
+
from components import (
|
|
81
|
+
button_ds,
|
|
82
|
+
card_metric_ds,
|
|
83
|
+
panel_ds,
|
|
84
|
+
tabs_ds,
|
|
85
|
+
accordeon_ds,
|
|
86
|
+
info_bar_ds,
|
|
87
|
+
)
|
|
88
|
+
|
|
89
|
+
# Botão
|
|
90
|
+
if button_ds("Consultar", bg_color="#375C38", enabled_icon=False, icon="", key="btn_1"):
|
|
91
|
+
st.write("Clicado!")
|
|
92
|
+
|
|
93
|
+
# Card de métrica
|
|
94
|
+
card_metric_ds(
|
|
95
|
+
title="Total Apurado",
|
|
96
|
+
value="R$ 1.250.000,00",
|
|
97
|
+
icon="📊",
|
|
98
|
+
enabled_icon=True,
|
|
99
|
+
category_type="HIGH",
|
|
100
|
+
size="md",
|
|
101
|
+
key="metric_1",
|
|
102
|
+
)
|
|
103
|
+
|
|
104
|
+
# Panel (container com borda)
|
|
105
|
+
with panel_ds(key="painel_principal"):
|
|
106
|
+
st.write("Conteúdo dentro do painel")
|
|
107
|
+
|
|
108
|
+
# Tabs
|
|
109
|
+
aba_a, aba_b = tabs_ds(["Resumo", "Detalhes"])
|
|
110
|
+
with aba_a:
|
|
111
|
+
st.write("Conteúdo da aba Resumo")
|
|
112
|
+
|
|
113
|
+
# Accordeon
|
|
114
|
+
with accordeon(":material/bar_chart: Distribuição por Ano", expanded=False):
|
|
115
|
+
st.write("Conteúdo expandível")
|
|
116
|
+
|
|
117
|
+
# Barra de informação
|
|
118
|
+
info_bar_ds("Dados referentes ao exercício fiscal vigente.")
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
### Estrutura do pacote
|
|
124
|
+
|
|
125
|
+
```
|
|
126
|
+
sat_ds/
|
|
127
|
+
├── myproject.toml
|
|
128
|
+
└── src/
|
|
129
|
+
└── components/
|
|
130
|
+
├── __init__.py
|
|
131
|
+
├── accordeon_ds/
|
|
132
|
+
├── button_ds/
|
|
133
|
+
├── card_dist_ds/
|
|
134
|
+
├── card_metric_ds/
|
|
135
|
+
├── identification_field_ds/
|
|
136
|
+
├── info_bar_ds/
|
|
137
|
+
├── panel_ds/
|
|
138
|
+
└── tabs_ds/
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
Cada componente segue a estrutura:
|
|
142
|
+
```
|
|
143
|
+
component_name/
|
|
144
|
+
├── __init__.py # exporta a função principal
|
|
145
|
+
├── component_name.py # implementação Python
|
|
146
|
+
└── css/
|
|
147
|
+
└── component_name.css # estilos do componente
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
### Licença
|
|
152
|
+
|
|
153
|
+
MIT © lpozza
|
|
154
|
+
|
|
155
|
+
## 🇺🇸 English
|
|
156
|
+
|
|
157
|
+
### About the project
|
|
158
|
+
|
|
159
|
+
**SAT Design System** (`sat-ds`) is a Python component library built on top of [Streamlit](https://streamlit.io), created to standardize the visual interface of applications embedded in the **SAT** system via MainFrame.
|
|
160
|
+
|
|
161
|
+
The library was born from the need to reuse UI components with a consistent visual identity across subsequent applications that are embedded inside the main platform. Instead of recreating styles and UI logic in each individual project, `sat-ds` centralizes these elements into a single pip-installable package.
|
|
162
|
+
|
|
163
|
+
Each component was carefully redesigned following the exclusive SAT Design System guidelines, ensuring visual cohesion and a uniform user experience across all platform applications.
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
### Installation
|
|
168
|
+
|
|
169
|
+
#### Requirements
|
|
170
|
+
|
|
171
|
+
- Python >= 3.9
|
|
172
|
+
- Streamlit installed in the consuming project
|
|
173
|
+
|
|
174
|
+
#### Via pip (internal / local registry)
|
|
175
|
+
|
|
176
|
+
```bash
|
|
177
|
+
pip install sat-ds
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
#### Via pip pointing to a Git repository
|
|
181
|
+
|
|
182
|
+
```bash
|
|
183
|
+
pip install git+https://github.com/your-org/sat-ds.git
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
#### Via local file (during development)
|
|
187
|
+
|
|
188
|
+
Clone the repository and install in editable mode:
|
|
189
|
+
|
|
190
|
+
```bash
|
|
191
|
+
git clone https://github.com/your-org/sat-ds.git
|
|
192
|
+
cd sat-ds
|
|
193
|
+
pip install -e .
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
---
|
|
197
|
+
|
|
198
|
+
### Available components
|
|
199
|
+
|
|
200
|
+
| Component | Main function | Description |
|
|
201
|
+
|---|---|---|
|
|
202
|
+
| `button_ds` | `button_ds(title, bg_color, ...)` | Pill-shaped styled button with optional SVG icon |
|
|
203
|
+
| `card_dist_ds` | `card_dist_ds(title, value, percent, ...)` | Distribution card showing monetary values and percentages |
|
|
204
|
+
| `card_metric_ds` | `card_metric_ds(title, value, icon, ...)` | Metric card with delta, tooltip, and size variation support |
|
|
205
|
+
| `identification_field_ds` | `identification_field_ds(label, placeholder, ...)` | Styled text input for identifier entry |
|
|
206
|
+
| `info_bar_ds` | `info_bar_ds(text, bg_color, ...)` | Info/alert bar with customizable color and border |
|
|
207
|
+
| `panel_ds` | `with panel_ds(key, ...)` | Styled border container, used as a context manager |
|
|
208
|
+
| `tabs_ds` | `tabs_ds(["Tab A", "Tab B"])` | Styled wrapper over `st.tabs()` |
|
|
209
|
+
| `accordeon_ds` | `with accordeon(label, expanded)` | Styled collapsible section over `st.expander()` |
|
|
210
|
+
|
|
211
|
+
---
|
|
212
|
+
|
|
213
|
+
### Basic usage
|
|
214
|
+
|
|
215
|
+
```python
|
|
216
|
+
from components import (
|
|
217
|
+
button_ds,
|
|
218
|
+
card_metric_ds,
|
|
219
|
+
panel_ds,
|
|
220
|
+
tabs_ds,
|
|
221
|
+
accordeon_ds,
|
|
222
|
+
info_bar_ds,
|
|
223
|
+
)
|
|
224
|
+
|
|
225
|
+
# Button
|
|
226
|
+
if button_ds("Search", bg_color="#375C38", enabled_icon=False, icon="", key="btn_1"):
|
|
227
|
+
st.write("Clicked!")
|
|
228
|
+
|
|
229
|
+
# Metric card
|
|
230
|
+
card_metric_ds(
|
|
231
|
+
title="Total Collected",
|
|
232
|
+
value="R$ 1,250,000.00",
|
|
233
|
+
icon="📊",
|
|
234
|
+
enabled_icon=True,
|
|
235
|
+
category_type="HIGH",
|
|
236
|
+
size="md",
|
|
237
|
+
key="metric_1",
|
|
238
|
+
)
|
|
239
|
+
|
|
240
|
+
# Panel (bordered container)
|
|
241
|
+
with panel_ds(key="main_panel"):
|
|
242
|
+
st.write("Content inside the panel")
|
|
243
|
+
|
|
244
|
+
# Tabs
|
|
245
|
+
tab_a, tab_b = tabs_ds(["Summary", "Details"])
|
|
246
|
+
with tab_a:
|
|
247
|
+
st.write("Summary tab content")
|
|
248
|
+
|
|
249
|
+
# Accordion
|
|
250
|
+
with accordeon(":material/bar_chart: Distribution by Year", expanded=False):
|
|
251
|
+
st.write("Expandable content")
|
|
252
|
+
|
|
253
|
+
# Info bar
|
|
254
|
+
info_bar_ds("Data refers to the current fiscal year.")
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
---
|
|
258
|
+
|
|
259
|
+
### Package structure
|
|
260
|
+
|
|
261
|
+
```
|
|
262
|
+
sat_ds/
|
|
263
|
+
├── myproject.toml
|
|
264
|
+
└── src/
|
|
265
|
+
└── components/
|
|
266
|
+
├── __init__.py
|
|
267
|
+
├── accordeon_ds/
|
|
268
|
+
├── button_ds/
|
|
269
|
+
├── card_dist_ds/
|
|
270
|
+
├── card_metric_ds/
|
|
271
|
+
├── identification_field_ds/
|
|
272
|
+
├── info_bar_ds/
|
|
273
|
+
├── panel_ds/
|
|
274
|
+
└── tabs_ds/
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
Each component follows this structure:
|
|
278
|
+
```
|
|
279
|
+
component_name/
|
|
280
|
+
├── __init__.py # exports the main function
|
|
281
|
+
├── component_name.py # Python implementation
|
|
282
|
+
└── css/
|
|
283
|
+
└── component_name.css # component styles
|
|
284
|
+
|
|
285
|
+
Make sure the SAT theme package is installed alongside `sat-ds`.
|
|
286
|
+
|
|
287
|
+
---
|
|
288
|
+
|
|
289
|
+
### License
|
|
290
|
+
|
|
291
|
+
MIT © lpozza
|
sat_ds-0.0.4/README.md
ADDED
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
# SAT Design System — `sat-ds`
|
|
2
|
+
|
|
3
|
+
> Biblioteca de componentes reutilizáveis para aplicações Streamlit embarcadas no sistema SAT via MainFrame.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 🇧🇷 Português
|
|
8
|
+
|
|
9
|
+
### Sobre o projeto
|
|
10
|
+
|
|
11
|
+
O **SAT Design System** (`sat-ds`) é uma biblioteca de componentes Python construída sobre o [Streamlit](https://streamlit.io), criada para padronizar a interface visual das aplicações embarcadas no sistema **SAT** via MainFrame.
|
|
12
|
+
|
|
13
|
+
A biblioteca nasceu da necessidade de reutilizar componentes com identidade visual consistente em aplicações subsequentes que são embedadas dentro do sistema principal. Em vez de recriar estilos e lógica de UI em cada projeto, o `sat-ds` centraliza esses elementos em um único pacote instalável via `pip`.
|
|
14
|
+
|
|
15
|
+
Cada componente foi cuidadosamente redesenhado seguindo as diretrizes do Design System exclusivo do SAT, garantindo coesão visual e experiência de uso uniforme entre todas as aplicações da plataforma.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
### Instalação
|
|
20
|
+
|
|
21
|
+
#### Requisitos
|
|
22
|
+
|
|
23
|
+
- Python >= 3.9
|
|
24
|
+
- Streamlit instalado no projeto consumidor
|
|
25
|
+
|
|
26
|
+
#### Via pip (repositório interno / local)
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
pip install sat-ds
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
#### Via pip apontando para o repositório Git
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
pip install git+https://github.com/seu-org/sat-ds.git
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
#### Via arquivo local (durante desenvolvimento)
|
|
39
|
+
|
|
40
|
+
Clone o repositório e instale em modo editável:
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
git clone https://github.com/seu-org/sat-ds.git
|
|
44
|
+
cd sat-ds
|
|
45
|
+
pip install -e .
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
### Componentes disponíveis
|
|
51
|
+
|
|
52
|
+
| Componente | Função principal | Descrição |
|
|
53
|
+
|---|---|---|
|
|
54
|
+
| `button_ds` | `button_ds(title, bg_color, ...)` | Botão estilizado em formato pílula com ícone SVG opcional |
|
|
55
|
+
| `card_dist_ds` | `card_dist_ds(title, value, percent, ...)` | Card de distribuição com valores monetários e percentuais |
|
|
56
|
+
| `card_metric_ds` | `card_metric_ds(title, value, icon, ...)` | Card de métrica com suporte a delta, tooltip e variação de tamanho |
|
|
57
|
+
| `identification_field_ds` | `identification_field_ds(label, placeholder, ...)` | Campo de texto estilizado para entrada de identificadores |
|
|
58
|
+
| `info_bar_ds` | `info_bar_ds(text, bg_color, ...)` | Barra de informação/alerta com cor e borda customizáveis |
|
|
59
|
+
| `panel_ds` | `with panel_ds(key, ...)` | Container com borda estilizada, usado como gerenciador de contexto |
|
|
60
|
+
| `tabs_ds` | `tabs_ds(["Aba A", "Aba B"])` | Wrapper estilizado sobre `st.tabs()` |
|
|
61
|
+
| `accordeon_ds` | `with accordeon(label, expanded)` | Seção expansível estilizada sobre `st.expander()` |
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
### Uso básico
|
|
66
|
+
|
|
67
|
+
```python
|
|
68
|
+
from components import (
|
|
69
|
+
button_ds,
|
|
70
|
+
card_metric_ds,
|
|
71
|
+
panel_ds,
|
|
72
|
+
tabs_ds,
|
|
73
|
+
accordeon_ds,
|
|
74
|
+
info_bar_ds,
|
|
75
|
+
)
|
|
76
|
+
|
|
77
|
+
# Botão
|
|
78
|
+
if button_ds("Consultar", bg_color="#375C38", enabled_icon=False, icon="", key="btn_1"):
|
|
79
|
+
st.write("Clicado!")
|
|
80
|
+
|
|
81
|
+
# Card de métrica
|
|
82
|
+
card_metric_ds(
|
|
83
|
+
title="Total Apurado",
|
|
84
|
+
value="R$ 1.250.000,00",
|
|
85
|
+
icon="📊",
|
|
86
|
+
enabled_icon=True,
|
|
87
|
+
category_type="HIGH",
|
|
88
|
+
size="md",
|
|
89
|
+
key="metric_1",
|
|
90
|
+
)
|
|
91
|
+
|
|
92
|
+
# Panel (container com borda)
|
|
93
|
+
with panel_ds(key="painel_principal"):
|
|
94
|
+
st.write("Conteúdo dentro do painel")
|
|
95
|
+
|
|
96
|
+
# Tabs
|
|
97
|
+
aba_a, aba_b = tabs_ds(["Resumo", "Detalhes"])
|
|
98
|
+
with aba_a:
|
|
99
|
+
st.write("Conteúdo da aba Resumo")
|
|
100
|
+
|
|
101
|
+
# Accordeon
|
|
102
|
+
with accordeon(":material/bar_chart: Distribuição por Ano", expanded=False):
|
|
103
|
+
st.write("Conteúdo expandível")
|
|
104
|
+
|
|
105
|
+
# Barra de informação
|
|
106
|
+
info_bar_ds("Dados referentes ao exercício fiscal vigente.")
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
### Estrutura do pacote
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
sat_ds/
|
|
115
|
+
├── myproject.toml
|
|
116
|
+
└── src/
|
|
117
|
+
└── components/
|
|
118
|
+
├── __init__.py
|
|
119
|
+
├── accordeon_ds/
|
|
120
|
+
├── button_ds/
|
|
121
|
+
├── card_dist_ds/
|
|
122
|
+
├── card_metric_ds/
|
|
123
|
+
├── identification_field_ds/
|
|
124
|
+
├── info_bar_ds/
|
|
125
|
+
├── panel_ds/
|
|
126
|
+
└── tabs_ds/
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
Cada componente segue a estrutura:
|
|
130
|
+
```
|
|
131
|
+
component_name/
|
|
132
|
+
├── __init__.py # exporta a função principal
|
|
133
|
+
├── component_name.py # implementação Python
|
|
134
|
+
└── css/
|
|
135
|
+
└── component_name.css # estilos do componente
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
### Licença
|
|
140
|
+
|
|
141
|
+
MIT © lpozza
|
|
142
|
+
|
|
143
|
+
## 🇺🇸 English
|
|
144
|
+
|
|
145
|
+
### About the project
|
|
146
|
+
|
|
147
|
+
**SAT Design System** (`sat-ds`) is a Python component library built on top of [Streamlit](https://streamlit.io), created to standardize the visual interface of applications embedded in the **SAT** system via MainFrame.
|
|
148
|
+
|
|
149
|
+
The library was born from the need to reuse UI components with a consistent visual identity across subsequent applications that are embedded inside the main platform. Instead of recreating styles and UI logic in each individual project, `sat-ds` centralizes these elements into a single pip-installable package.
|
|
150
|
+
|
|
151
|
+
Each component was carefully redesigned following the exclusive SAT Design System guidelines, ensuring visual cohesion and a uniform user experience across all platform applications.
|
|
152
|
+
|
|
153
|
+
---
|
|
154
|
+
|
|
155
|
+
### Installation
|
|
156
|
+
|
|
157
|
+
#### Requirements
|
|
158
|
+
|
|
159
|
+
- Python >= 3.9
|
|
160
|
+
- Streamlit installed in the consuming project
|
|
161
|
+
|
|
162
|
+
#### Via pip (internal / local registry)
|
|
163
|
+
|
|
164
|
+
```bash
|
|
165
|
+
pip install sat-ds
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
#### Via pip pointing to a Git repository
|
|
169
|
+
|
|
170
|
+
```bash
|
|
171
|
+
pip install git+https://github.com/your-org/sat-ds.git
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
#### Via local file (during development)
|
|
175
|
+
|
|
176
|
+
Clone the repository and install in editable mode:
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
git clone https://github.com/your-org/sat-ds.git
|
|
180
|
+
cd sat-ds
|
|
181
|
+
pip install -e .
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
### Available components
|
|
187
|
+
|
|
188
|
+
| Component | Main function | Description |
|
|
189
|
+
|---|---|---|
|
|
190
|
+
| `button_ds` | `button_ds(title, bg_color, ...)` | Pill-shaped styled button with optional SVG icon |
|
|
191
|
+
| `card_dist_ds` | `card_dist_ds(title, value, percent, ...)` | Distribution card showing monetary values and percentages |
|
|
192
|
+
| `card_metric_ds` | `card_metric_ds(title, value, icon, ...)` | Metric card with delta, tooltip, and size variation support |
|
|
193
|
+
| `identification_field_ds` | `identification_field_ds(label, placeholder, ...)` | Styled text input for identifier entry |
|
|
194
|
+
| `info_bar_ds` | `info_bar_ds(text, bg_color, ...)` | Info/alert bar with customizable color and border |
|
|
195
|
+
| `panel_ds` | `with panel_ds(key, ...)` | Styled border container, used as a context manager |
|
|
196
|
+
| `tabs_ds` | `tabs_ds(["Tab A", "Tab B"])` | Styled wrapper over `st.tabs()` |
|
|
197
|
+
| `accordeon_ds` | `with accordeon(label, expanded)` | Styled collapsible section over `st.expander()` |
|
|
198
|
+
|
|
199
|
+
---
|
|
200
|
+
|
|
201
|
+
### Basic usage
|
|
202
|
+
|
|
203
|
+
```python
|
|
204
|
+
from components import (
|
|
205
|
+
button_ds,
|
|
206
|
+
card_metric_ds,
|
|
207
|
+
panel_ds,
|
|
208
|
+
tabs_ds,
|
|
209
|
+
accordeon_ds,
|
|
210
|
+
info_bar_ds,
|
|
211
|
+
)
|
|
212
|
+
|
|
213
|
+
# Button
|
|
214
|
+
if button_ds("Search", bg_color="#375C38", enabled_icon=False, icon="", key="btn_1"):
|
|
215
|
+
st.write("Clicked!")
|
|
216
|
+
|
|
217
|
+
# Metric card
|
|
218
|
+
card_metric_ds(
|
|
219
|
+
title="Total Collected",
|
|
220
|
+
value="R$ 1,250,000.00",
|
|
221
|
+
icon="📊",
|
|
222
|
+
enabled_icon=True,
|
|
223
|
+
category_type="HIGH",
|
|
224
|
+
size="md",
|
|
225
|
+
key="metric_1",
|
|
226
|
+
)
|
|
227
|
+
|
|
228
|
+
# Panel (bordered container)
|
|
229
|
+
with panel_ds(key="main_panel"):
|
|
230
|
+
st.write("Content inside the panel")
|
|
231
|
+
|
|
232
|
+
# Tabs
|
|
233
|
+
tab_a, tab_b = tabs_ds(["Summary", "Details"])
|
|
234
|
+
with tab_a:
|
|
235
|
+
st.write("Summary tab content")
|
|
236
|
+
|
|
237
|
+
# Accordion
|
|
238
|
+
with accordeon(":material/bar_chart: Distribution by Year", expanded=False):
|
|
239
|
+
st.write("Expandable content")
|
|
240
|
+
|
|
241
|
+
# Info bar
|
|
242
|
+
info_bar_ds("Data refers to the current fiscal year.")
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
---
|
|
246
|
+
|
|
247
|
+
### Package structure
|
|
248
|
+
|
|
249
|
+
```
|
|
250
|
+
sat_ds/
|
|
251
|
+
├── myproject.toml
|
|
252
|
+
└── src/
|
|
253
|
+
└── components/
|
|
254
|
+
├── __init__.py
|
|
255
|
+
├── accordeon_ds/
|
|
256
|
+
├── button_ds/
|
|
257
|
+
├── card_dist_ds/
|
|
258
|
+
├── card_metric_ds/
|
|
259
|
+
├── identification_field_ds/
|
|
260
|
+
├── info_bar_ds/
|
|
261
|
+
├── panel_ds/
|
|
262
|
+
└── tabs_ds/
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
Each component follows this structure:
|
|
266
|
+
```
|
|
267
|
+
component_name/
|
|
268
|
+
├── __init__.py # exports the main function
|
|
269
|
+
├── component_name.py # Python implementation
|
|
270
|
+
└── css/
|
|
271
|
+
└── component_name.css # component styles
|
|
272
|
+
|
|
273
|
+
Make sure the SAT theme package is installed alongside `sat-ds`.
|
|
274
|
+
|
|
275
|
+
---
|
|
276
|
+
|
|
277
|
+
### License
|
|
278
|
+
|
|
279
|
+
MIT © lpozza
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
[build-system]
|
|
2
|
+
requires = ["setuptools>=61"]
|
|
3
|
+
build-backend = "setuptools.build_meta"
|
|
4
|
+
|
|
5
|
+
[project]
|
|
6
|
+
name = "sat-ds"
|
|
7
|
+
version = "0.0.4"
|
|
8
|
+
description = "Biblioteca de componentes reutilizáveis"
|
|
9
|
+
readme = "README.md"
|
|
10
|
+
authors = [
|
|
11
|
+
{ name="lpozza" }
|
|
12
|
+
]
|
|
13
|
+
license = { text = "MIT" }
|
|
14
|
+
requires-python = ">=3.9"
|
|
15
|
+
|
|
16
|
+
dependencies = [
|
|
17
|
+
"streamlit>=1.35.0",
|
|
18
|
+
]
|
|
19
|
+
|
|
20
|
+
[tool.setuptools]
|
|
21
|
+
package-dir = {"" = "src"}
|
|
22
|
+
|
|
23
|
+
[tool.setuptools.packages.find]
|
|
24
|
+
where = ["src"]
|
sat_ds-0.0.4/setup.cfg
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
from .accordeon_ds import accordeon
|
|
2
|
+
from .button_ds import button_ds
|
|
3
|
+
from .card_dist_ds import card_dist_ds
|
|
4
|
+
from .card_metric_ds import card_metric_ds
|
|
5
|
+
from .identification_field_ds import identification_field_ds
|
|
6
|
+
from .info_bar_ds import info_bar_ds
|
|
7
|
+
from .panel_ds import panel_ds
|
|
8
|
+
from .tabs_ds import tabs_ds
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
from contextlib import contextmanager
|
|
2
|
+
from pathlib import Path
|
|
3
|
+
import streamlit as st
|
|
4
|
+
from theme import inject_theme_css
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
def _load_css() -> None:
|
|
8
|
+
"""Injects component CSS on every render (required for @st.fragment compatibility)."""
|
|
9
|
+
inject_theme_css()
|
|
10
|
+
css_path = Path(__file__).parent / "css" / f"{Path(__file__).stem}.css"
|
|
11
|
+
st.markdown(
|
|
12
|
+
f"<style>{css_path.read_text(encoding='utf-8')}</style>",
|
|
13
|
+
unsafe_allow_html=True,
|
|
14
|
+
)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
@contextmanager
|
|
18
|
+
def accordeon(label: str, expanded: bool = False):
|
|
19
|
+
"""
|
|
20
|
+
Reusable Accordeon component.
|
|
21
|
+
|
|
22
|
+
Args:
|
|
23
|
+
label: Título do expander (suporta ícones Material, ex: `:material/bar_chart: Título`).
|
|
24
|
+
expanded: Se o expander deve iniciar aberto. Padrão: False.
|
|
25
|
+
"""
|
|
26
|
+
_load_css()
|
|
27
|
+
with st.expander(label, expanded=expanded):
|
|
28
|
+
yield
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
from .button_ds import button_ds
|