Skip to content

Commit df0e3eb

Browse files
mnajdovamnajdova
authored
Merge pull request #12 from mnajdova/feat/update-buildAPI-css
refactored
2 parents 07f0078 + 57f0419 commit df0e3eb

File tree

4 files changed

+63
-128
lines changed

4 files changed

+63
-128
lines changed

‎docs/data/css/slider-styled-css.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"root": { "class": ".MuiSlider-root", "description": "Class name applied to the root element." },
3+
"colorPrimary": { "class": ".MuiSlider-colorPrimary", "description": "Class name applied to the root element if `color=\"primary\"`." },
4+
"colorSecondary": { "class": ".MuiSlider-colorSecondary", "description": "Class name applied to the root element if `color=\"secondary\"`." },
5+
"marked": { "class": ".MuiSlider-marked", "description": "Class name applied to the root element if `marks` is provided with at least one label." },
6+
"vertical": { "class": ".MuiSlider-vertical", "description": "Class name applied to the root element if `orientation=\"vertical\"`." },
7+
"disabled": { "class": ".Mui-disabled", "description": "Pseudo-class applied to the root and thumb element if `disabled={true}`." },
8+
"rail": { "class": ".MuiSlider-rail", "description": "Class name applied to the rail element." },
9+
"track": { "class": ".MuiSlider-track", "description": "Class name applied to the track element." },
10+
"trackFalse": { "class": ".MuiSlider-trackFalse", "description": "Class name applied to the track element if `track={false}`." },
11+
"trackInverted": { "class": ".MuiSlider-trackInverted", "description": "Class name applied to the track element if `track=\"inverted\"`." },
12+
"thumb": { "class": ".MuiSlider-thumb", "description": "Class name applied to the thumb element." },
13+
"thumbColorPrimary": { "class": ".MuiSlider-thumbColorPrimary", "description": "Class name applied to the thumb element if `color=\"primary\"`." },
14+
"thumbColorSecondary": { "class": ".MuiSlider-thumbColorSecondary", "description": "Class name applied to the thumb element if `color=\"secondary\"`." },
15+
"active": { "class": ".MuiSlider-active", "description": "Pseudo-class applied to the thumb element if it's active." },
16+
"focusVisible": { "class": ".Mui-focusVisible", "description": "Pseudo-class applied to the thumb element if keyboard focused." },
17+
"valueLabel": { "class": ".MuiSlider-valueLabel", "description": "Class name applied to the thumb label element." },
18+
"mark": { "class": ".MuiSlider-mark", "description": "Class name applied to the mark element." },
19+
"markActive": { "class": ".MuiSlider-markActive", "description": "Class name applied to the mark element if active (depending on the value)." },
20+
"markLabel": { "class": ".MuiSlider-markLabel", "description": "Class name applied to the mark label element." },
21+
"markLabelActive": { "class": ".MuiSlider-markLabelActive", "description": "Class name applied to the mark label element if active (depending on the value)." }
22+
}

‎docs/pages/api-docs/slider-styled.md‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -62,26 +62,26 @@ Any other props supplied will be provided to the root element (native element).
6262

6363
| Rule name | Global class | Description |
6464
|:-----|:-------------|:------------|
65-
| <span class="prop-name">root</span> | <span class="prop-name">.MuiSlider-root</span> | Class name applied to the root element.
66-
| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiSlider-colorPrimary</span> | Class name applied to the root element if `color="primary"`.
67-
| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiSlider-colorSecondary</span> | Class name applied to the root element if `color="secondary"`.
68-
| <span class="prop-name">marked</span> | <span class="prop-name">.MuiSlider-marked</span> | Class name applied to the root element if `marks` is provided with at least one label.
69-
| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiSlider-vertical</span> | Class name applied to the root element if `orientation="vertical"`.
70-
| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root and thumb element if `disabled={true}`.
71-
| <span class="prop-name">rail</span> | <span class="prop-name">.MuiSlider-rail</span> | Class name applied to the rail element.
72-
| <span class="prop-name">track</span> | <span class="prop-name">.MuiSlider-track</span> | Class name applied to the track element.
73-
| <span class="prop-name">trackFalse</span> | <span class="prop-name">.MuiSlider-trackFalse</span> | Class name applied to the track element if `track={false}`.
74-
| <span class="prop-name">trackInverted</span> | <span class="prop-name">.MuiSlider-trackInverted</span> | Class name applied to the track element if `track="inverted"`.
75-
| <span class="prop-name">thumb</span> | <span class="prop-name">.MuiSlider-thumb</span> | Class name applied to the thumb element.
76-
| <span class="prop-name">thumbColorPrimary</span> | <span class="prop-name">.MuiSlider-thumbColorPrimary</span> | Class name applied to the thumb element if `color="primary"`.
77-
| <span class="prop-name">thumbColorSecondary</span> | <span class="prop-name">.MuiSlider-thumbColorSecondary</span> | Class name applied to the thumb element if `color="secondary"`.
78-
| <span class="prop-name">active</span> | <span class="prop-name">.MuiSlider-active</span> | Pseudo-class applied to the thumb element if it's active.
79-
| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the thumb element if keyboard focused.
80-
| <span class="prop-name">valueLabel</span> | <span class="prop-name">.MuiSlider-valueLabel</span> | Class name applied to the thumb label element.
81-
| <span class="prop-name">mark</span> | <span class="prop-name">.MuiSlider-mark</span> | Class name applied to the mark element.
82-
| <span class="prop-name">markActive</span> | <span class="prop-name">.MuiSlider-markActive</span> | Class name applied to the mark element if active (depending on the value).
83-
| <span class="prop-name">markLabel</span> | <span class="prop-name">.MuiSlider-markLabel</span> | Class name applied to the mark label element.
84-
| <span class="prop-name">markLabelActive</span> | <span class="prop-name">.MuiSlider-markLabelActive</span> | Class name applied to the mark label element if active (depending on the value).
65+
| <span class="prop-name">root</span> | <span class="prop-name">.MuiSlider-root</span> | Class name applied to the root element.
66+
| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiSlider-colorPrimary</span> | Class name applied to the root element if `color="primary"`.
67+
| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiSlider-colorSecondary</span> | Class name applied to the root element if `color="secondary"`.
68+
| <span class="prop-name">marked</span> | <span class="prop-name">.MuiSlider-marked</span> | Class name applied to the root element if `marks` is provided with at least one label.
69+
| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiSlider-vertical</span> | Class name applied to the root element if `orientation="vertical"`.
70+
| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root and thumb element if `disabled={true}`.
71+
| <span class="prop-name">rail</span> | <span class="prop-name">.MuiSlider-rail</span> | Class name applied to the rail element.
72+
| <span class="prop-name">track</span> | <span class="prop-name">.MuiSlider-track</span> | Class name applied to the track element.
73+
| <span class="prop-name">trackFalse</span> | <span class="prop-name">.MuiSlider-trackFalse</span> | Class name applied to the track element if `track={false}`.
74+
| <span class="prop-name">trackInverted</span> | <span class="prop-name">.MuiSlider-trackInverted</span> | Class name applied to the track element if `track="inverted"`.
75+
| <span class="prop-name">thumb</span> | <span class="prop-name">.MuiSlider-thumb</span> | Class name applied to the thumb element.
76+
| <span class="prop-name">thumbColorPrimary</span> | <span class="prop-name">.MuiSlider-thumbColorPrimary</span> | Class name applied to the thumb element if `color="primary"`.
77+
| <span class="prop-name">thumbColorSecondary</span> | <span class="prop-name">.MuiSlider-thumbColorSecondary</span> | Class name applied to the thumb element if `color="secondary"`.
78+
| <span class="prop-name">active</span> | <span class="prop-name">.MuiSlider-active</span> | Pseudo-class applied to the thumb element if it's active.
79+
| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the thumb element if keyboard focused.
80+
| <span class="prop-name">valueLabel</span> | <span class="prop-name">.MuiSlider-valueLabel</span> | Class name applied to the thumb label element.
81+
| <span class="prop-name">mark</span> | <span class="prop-name">.MuiSlider-mark</span> | Class name applied to the mark element.
82+
| <span class="prop-name">markActive</span> | <span class="prop-name">.MuiSlider-markActive</span> | Class name applied to the mark element if active (depending on the value).
83+
| <span class="prop-name">markLabel</span> | <span class="prop-name">.MuiSlider-markLabel</span> | Class name applied to the mark label element.
84+
| <span class="prop-name">markLabelActive</span> | <span class="prop-name">.MuiSlider-markLabelActive</span> | Class name applied to the mark label element if active (depending on the value).
8585

8686
You can override the style of the component thanks to one of these customization points:
8787

‎docs/scripts/buildApi.ts‎

Lines changed: 21 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -192,78 +192,33 @@ async function annotateComponentDefinition(context: {
192192
writeFileSync(typesFilename, typesSourceNew, { encoding: 'utf8' });
193193
}
194194

195-
function trimComment(comment: string) {
196-
let i = 0;
197-
for (; i < comment.length; i += 1) {
198-
if (comment[i] !== '*' && comment[i] !== ' ') {
199-
break;
200-
}
201-
}
202-
return comment.substr(i, comment.length - 1);
195+
const camelCaseToKebabCase = (inputString: string) => {
196+
const str = inputString.charAt(0).toLowerCase() + inputString.slice(1)
197+
return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
203198
}
204199

205200
async function updateStylesDefinition(context: { api: ReactApi; component: { filename: string } }) {
201+
const workspaceRoot = path.resolve(__dirname, '../../');
206202
const { api, component } = context;
207203

208-
const typesFilename = component.filename.replace(/\.js$/, '.d.ts');
209-
const typesSource = readFileSync(typesFilename, { encoding: 'utf8' });
210-
const typesAST = await babel.parseAsync(typesSource, {
211-
configFile: false,
212-
filename: typesFilename,
213-
presets: [require.resolve('@babel/preset-typescript')],
214-
});
215-
216-
if (typesAST === null) {
217-
throw new Error('No AST returned from babel.');
218-
}
219-
220-
if (api.styles.classes.length === 0) {
221-
const componentName = path.basename(typesFilename).replace(/\.d\.ts$/, '');
222-
223-
traverse(typesAST, {
224-
ExportNamedDeclaration(babelPath) {
225-
const { node } = babelPath;
226-
const declaration = node.declaration as babel.types.TSTypeAliasDeclaration;
204+
const componentName = path.basename(component.filename).replace(/\.js$/, '');
205+
const cssFilename = `${workspaceRoot}/docs/data/css/${camelCaseToKebabCase(componentName)}-css.json`;
227206

228-
const name = declaration.id?.name;
229-
230-
const typeAnnotation = declaration.typeAnnotation as babel.types.TSUnionType;
231-
232-
if (name === `${componentName}ClassKey` && typeAnnotation.types) {
233-
const classes: string[] = [];
234-
235-
const nodeLeadingComments = declaration.typeAnnotation.leadingComments || [];
236-
237-
typeAnnotation.types.forEach((typeNode) => {
238-
const value = (typeNode as babel.types.TSLiteralType).literal.value as string;
239-
240-
classes.push(value);
241-
242-
let leadingComments = typeNode.leadingComments;
243-
if (leadingComments) {
244-
leadingComments = leadingComments.concat(nodeLeadingComments);
245-
} else {
246-
leadingComments = nodeLeadingComments;
247-
}
248-
249-
if (leadingComments) {
250-
for (let i = 0; i < leadingComments.length; i += 1) {
251-
if (
252-
leadingComments[i].end + 5 ===
253-
(typeNode as babel.types.TSLiteralType).literal.start
254-
) {
255-
api.styles.descriptions[value] = trimComment(leadingComments[i].value);
256-
}
257-
}
258-
}
259-
260-
return '';
261-
});
262-
263-
api.styles.classes = classes;
264-
}
265-
},
266-
});
207+
try {
208+
const jsonCSSData = readFileSync(cssFilename, { encoding: 'utf8' });
209+
if (jsonCSSData) {
210+
const cssData = JSON.parse(jsonCSSData.toString());
211+
const classes = Object.keys(cssData);
212+
api.styles.classes = classes;
213+
214+
api.styles.descriptions = classes.reduce((acc, key) => {
215+
acc[key] = cssData[key].description;
216+
return acc;
217+
}, {} as Record<string, string>);
218+
}
219+
} catch (err) {
220+
// Do nothing if the file doesn't exist
221+
// This is still not supported for all components
267222
}
268223
}
269224

‎packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts‎

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -48,46 +48,4 @@ export const SliderValueLabel: React.FC<SliderValueLabel>;
4848
*/
4949
declare const Slider: ExtendSliderUnstyled<SliderStyledTypeMap>;
5050

51-
export type SliderStyledClassKey =
52-
/** Class name applied to the root element. */
53-
| 'root'
54-
/** Class name applied to the root element if `color="primary"`. */
55-
| 'colorPrimary'
56-
/** Class name applied to the root element if `color="secondary"`. */
57-
| 'colorSecondary'
58-
/** Class name applied to the root element if `marks` is provided with at least one label. */
59-
| 'marked'
60-
/** Class name applied to the root element if `orientation="vertical"`. */
61-
| 'vertical'
62-
/** Pseudo-class applied to the root and thumb element if `disabled={true}`. */
63-
| 'disabled'
64-
/** Class name applied to the rail element. */
65-
| 'rail'
66-
/** Class name applied to the track element. */
67-
| 'track'
68-
/** Class name applied to the track element if `track={false}`. */
69-
| 'trackFalse'
70-
/** Class name applied to the track element if `track="inverted"`. */
71-
| 'trackInverted'
72-
/** Class name applied to the thumb element. */
73-
| 'thumb'
74-
/** Class name applied to the thumb element if `color="primary"`. */
75-
| 'thumbColorPrimary'
76-
/** Class name applied to the thumb element if `color="secondary"`. */
77-
| 'thumbColorSecondary'
78-
/** Pseudo-class applied to the thumb element if it's active. */
79-
| 'active'
80-
/** Pseudo-class applied to the thumb element if keyboard focused. */
81-
| 'focusVisible'
82-
/** Class name applied to the thumb label element. */
83-
| 'valueLabel'
84-
/** Class name applied to the mark element. */
85-
| 'mark'
86-
/** Class name applied to the mark element if active (depending on the value). */
87-
| 'markActive'
88-
/** Class name applied to the mark label element. */
89-
| 'markLabel'
90-
/** Class name applied to the mark label element if active (depending on the value). */
91-
| 'markLabelActive';
92-
9351
export default Slider;

0 commit comments

Comments
 (0)