Skip to content

Commit

Permalink
feat(TruncatedList): new component TruncatedList (carbon-design-syste…
Browse files Browse the repository at this point in the history
…m#4139)

* feat: truncatedlist component

* fix: gallery update

* fix: duplicate key

* fix: tests

* fix: run gallery script
  • Loading branch information
paul-balchin-ibm authored Feb 6, 2024
1 parent 8afb1da commit bc54d2f
Show file tree
Hide file tree
Showing 35 changed files with 5,219 additions and 1 deletion.
61 changes: 61 additions & 0 deletions examples/carbon-for-ibm-products/TruncatedList/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# Carbon for IBM Products `TruncatedList` example

This example was initially generated by `@carbon/ibm-products` using the script `update-gallery-config` found in `package.json`.

## Adding an example

If using the `generate` script then a base example should be created for you. If for some reason this is not the case do the following:

1. Duplicate an existing example e.g. `examples/carbon-for-ibm-products/AboutModal` and rename it to your match your component e.g. `MyComponent`
2. Edit `gallery.config.json` which has the following form.

```json
{
"label": "Name of example in gallery",
"package-config": {
"flags": {
"component": {
"MyComponent": true
},
"feature": {
"MyFeature": true
}
"prefix": "alt-prefix",
},
"templates-variation": "templates-react-16"
}
}
```

NOTE: All fields are optional, although most specify a label.

The `package-config` section is used to specify the config used with the example, including prefix and any flags enabled.

The `template-variation` is used to specify an alternative to the default template. This is currently used for React versions only.

3. Edit the `src/Example` folder to show your component.
4. Run the example and replace `thumbnail.png` with a picture of your example.

NOTE 2: The only files retained after each run of the update script are `thumbnail.png`, `gallery.config.json`, and those in `src/Example`, so ensure all of your example source sits in the `src/Example` folder.

## Updating examples

Skip step 1 for `Adding an example` otherwise the same.

## Adding / Updating a template or variant

The simplest way to update a template is as follows.

1. Copy the a generated example to the `scripts/example-gallery-builder/update-example` folder.
2. Update it as necessary.
3. Test that it works.
4. Remove the folder `scripts/example-gallery-builder/update-example/templates` and rename your folder to this.
5. Review the changes made and restore/rectify the template TAGS typically in capitals. These are replaced as part of the build process. E.g. TruncatedList, 2024, import './config'
. For a full set of current tags review the code in `scripts/example-gallery-builder/update-example/index.js`.
6. Remove the files `gallery.config.json`, `thumbnail.png` and the folder `src/Example`.

### If a variant

To reduce maintenance variants only need files which differ from the core `templates` folder. Delete any new files you did not intend to add.

Variants are selected by folder name in the `gallery.config.json` file.
12 changes: 12 additions & 0 deletions examples/carbon-for-ibm-products/TruncatedList/gallery.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"label": "Truncated-List",
"package-config": {
"flags": {
"component": {
"TruncatedList": true
}
}
},
"dependencies": {},
"devDependencies": {}
}
16 changes: 16 additions & 0 deletions examples/carbon-for-ibm-products/TruncatedList/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>

</html>
56 changes: 56 additions & 0 deletions examples/carbon-for-ibm-products/TruncatedList/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
{
"name": "TruncatedList-component-example",
"description": "An example showing use of the TruncatedList component from the @carbon/ibm-products component library.",
"keywords": [
"carbon",
"ibm",
"ibm-products",
"component",
"truncatedlist",
"truncated",
"list"
],
"license": "Apache-2.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@carbon/ibm-products": "^2.21.0",
"@carbon/react": "^1.48.1",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.70.0"
},
"devDependencies": {
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^4.5.2"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"eslintConfig": {
"extends": [
"react-app"
]
}
}
18 changes: 18 additions & 0 deletions examples/carbon-for-ibm-products/TruncatedList/src/App.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import { ThemeProvider } from './ThemeSelector/ThemeContext';
import { ThemeDropdown } from './ThemeSelector/ThemeDropdown';
import './config';
import Example from './Example/Example';

function App() {
return (
<div>
<ThemeProvider>
<Example />
<ThemeDropdown />
</ThemeProvider>
</div>
);
}

export default App;
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// cspell:words grafana

import React from 'react';

// ----------------------------------------------------
// This is an example showing use of the
// AboutModal component
// from the @carbon/ibm-products component library.
// ----------------------------------------------------

import { TruncatedList } from '@carbon/ibm-products';

import './_example.scss';

export const Example = () => {
return <TruncatedList />;
};

export default Example;
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@use '@carbon/react/scss/spacing' as *;

/* example SCSS */
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React, { createContext, useReducer } from 'react';

export const themeData = [
{
text: 'White',
value: 'carbon-theme--white',
},
{
text: 'Gray 10',
value: 'carbon-theme--g10',
},
{
text: 'Gray 90',
value: 'carbon-theme--g90',
},
{
text: 'Gray 100',
value: 'carbon-theme--g100',
},
];

export const ThemeContext = createContext();

const initialState = {
currentTheme: themeData[0],
};

const themeReducer = (state, action) => {
switch (action.type.value) {
case 'carbon-theme--white':
return { currentTheme: action.type };
case 'carbon-theme--g10':
return { currentTheme: action.type };
case 'carbon-theme--g90':
return { currentTheme: action.type };
case 'carbon-theme--g100':
return { currentTheme: action.type };
default:
return state;
}
};

export function ThemeProvider(props) {
const [state, dispatch] = useReducer(themeReducer, initialState);

return (
<ThemeContext.Provider value={{ state, dispatch }}>
{
// eslint-disable-next-line react/prop-types
props.children
}
</ThemeContext.Provider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React, { useContext } from 'react';
import { Dropdown } from '@carbon/react';
import { ThemeContext, themeData } from './ThemeContext';

import './_theme-dropdown.scss';

export const ThemeDropdown = () => {
const theme = useContext(ThemeContext);

const setTheme = (selectedItem) => {
const bodyElement = document.body;
bodyElement.className = selectedItem.value;
theme.dispatch({ type: selectedItem });
};

return (
<div className="carbon-theme-dropdown">
<Dropdown
direction="top"
ariaLabel="Theme dropdown"
id="theme-dropdown"
items={themeData}
itemToString={(item) => (item ? item.text : '')}
onChange={(event) => setTheme(event.selectedItem)}
selectedItem={theme.state.currentTheme}
label="Select a Carbon theme"
titleText="Select a Carbon theme"
/>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/type';
@use '@carbon/styles/scss/config';

.carbon-theme--white {
@include theme(themes.$white, true);
}

.carbon-theme--g10 {
@include theme(themes.$g10, true);
}

.carbon-theme--g90 {
@include theme(themes.$g90, true);
}

.carbon-theme--g100 {
@include theme(themes.$g100, true);
}

.carbon-theme-dropdown {
position: fixed;
bottom: 1rem; // stylelint-disable-line carbon/layout-token-use
left: 1rem; // stylelint-disable-line carbon/layout-token-use
min-width: 11.5rem;
}

.carbon-theme-dropdown .#{config.$prefix}--label {
@include type.type-style('label-01');
}
3 changes: 3 additions & 0 deletions examples/carbon-for-ibm-products/TruncatedList/src/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { pkg } from '@carbon/ibm-products';

pkg.component.TruncatedList = true;
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions examples/carbon-for-ibm-products/TruncatedList/src/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
@use '@carbon/react' with (
$font-path: '@ibm/plex'
);
@use '@carbon/ibm-products/css/index';
12 changes: 12 additions & 0 deletions examples/carbon-for-ibm-products/TruncatedList/src/main.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';
import { createRoot } from 'react-dom';
import App from './App.jsx';
import './index.scss';

const root = createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions examples/carbon-for-ibm-products/TruncatedList/vite.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
jsxRuntime: 'classic',
}),
],
});
Loading

0 comments on commit bc54d2f

Please sign in to comment.