Skip to content

Commit

Permalink
Merge pull request #177 from CSCfi/update-documentation
Browse files Browse the repository at this point in the history 
Update docs
  • Loading branch information
@razorfever
razorfever authored Oct 24, 2024
2 parents f25e8b8 + 016b06c commit 717e84f
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 300 deletions.
84 changes: 16 additions & 68 deletions packages/csc-ui-documentation/pages/getting-started/angular.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<p><strong>1. Install the required dependencies</strong></p>

<code-block
code="npm install @cscfi/csc-ui csc-ui-accessor"
theme="atom-one-dark"
lang="bash"
lang="html"
code="npm install @cscfi/csc-ui"
code-block-radius="6px"
highlightjs
persistent-copy-button
Expand All @@ -19,49 +19,11 @@
<p>
This command will install the CSC Design system component library
<code>@cscfi/csc-ui</code>
and the control value accessor
<code>csc-ui-accessor</code>
which allows the components to support 2-way model binding.
</p>

<p class="mt-6">
<strong>
2. Add the following lines to
<code>main.ts</code>
</strong>
</p>

<code-block
:code="mainUsage"
theme="atom-one-dark"
lang="typescript"
code-block-radius="6px"
highlightjs
persistent-copy-button
/>

<p class="mt-6">
<strong>
3. Configure
<code>AppModule</code>
to use the control value accessor and CUSTOM_ELEMENTS_SCHEMA.
</strong>
.
</p>

<code-block
:code="accessorUsage"
theme="atom-one-dark"
lang="typescript"
code-block-radius="6px"
highlightjs
persistent-copy-button
/>

<p>
<strong>
4. Add the following line to
<code>styles.scss</code>
</strong>
<strong>2. Add the following line to your css file.</strong>
</p>

<code-block
Expand All @@ -74,37 +36,23 @@
/>

<p>
Now you should be able to use the CSC Design system components in your
project. Please note that the components require the control value
accessor
<code>cControl</code>
as an additional attribute to enable 2-way binding with
<code>[(ngModel)]</code>
or
<strong>Angular reactive forms</strong>
.
<strong>Working example with 2-way binding</strong>
</p>

<div id="angular-example" />
</c-card-content>
</c-card>
</template>

<script setup lang="ts">
const mainUsage = `import { applyPolyfills, defineCustomElements } from '@cscfi/csc-ui/loader';
// ...
applyPolyfills().then(() => {
defineCustomElements(window);
import sdk from '@stackblitz/sdk';
onMounted(() => {
sdk.embedProjectId('angular-example', 'stackblitz-starters-guwpru', {
forceEmbedLayout: true,
openFile: 'src/main.ts',
height: '1000px',
view: 'preview',
});
});
`;
const accessorUsage = `import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CscUiAccessorModule } from 'csc-ui-accessor';
@NgModule({
imports: [CscUiAccessorModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule { }
`;
</script>
235 changes: 3 additions & 232 deletions packages/csc-ui-documentation/pages/getting-started/react.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,7 @@
/>

<p>
<strong>3. Use in your React components</strong>
</p>

<code-block
theme="atom-one-dark"
lang="typescript"
:code="appTsx"
code-block-radius="6px"
highlightjs
persistent-copy-button
/>

<p>
<strong>Working example</strong>
<strong>Working example with 2-way binding</strong>
</p>

<div id="react-example" />
Expand All @@ -69,224 +56,8 @@ onMounted(() => {
sdk.embedProjectId('react-example', 'vitejs-vite-d6igeu', {
forceEmbedLayout: true,
openFile: 'src/App.tsx',
height: '1000px',
view: 'preview',
});
});
const appTsx = `import { useState } from 'react';
import {
CMain,
CToolbar,
CCscLogo,
CSideNavigation,
CSideNavigationItem,
CSideNavigationTitle,
CSubNavigationItem,
CPage,
CCard,
CCardTitle,
CCardContent,
CCardActions,
CTable,
CAlert,
CButton,
CModal,
CTextField,
CToasts,
} from '@cscfi/csc-ui-react';
import { CAlertType, CToastMessage } from '@cscfi/csc-ui';
import './App.css';
import { useRef } from 'react';
function App() {
const toastRef = useRef<HTMLCToastsElement>(null);
const [users, setUsers] = useState([
{ id: 1, name: 'Jason Miller', age: 23 },
{ id: 2, name: 'Silvia Nyholm', age: 18 },
{ id: 3, name: 'Mark Samsonov', age: 56 },
{ id: 4, name: 'Michael Nielsen', age: 29 },
]);
const [isModalOpen, setIsModalOpen] = useState(false);
const [name, setName] = useState('');
const [age, setAge] = useState(0);
const onAddUser = () => {
setUsers([...users, { name, age, id: users.length + 1 }]);
setIsModalOpen(false);
const message: CToastMessage = {
message: 'New user added',
};
toastRef.current?.addToast(message);
setName('');
setAge(0);
console.log(name, age);
};
const onOpenDialog = () => {
setIsModalOpen(true);
};
const onRemoveUser = (id: number) => {
setUsers(users.filter((user) => user.id !== id));
};
const getCurrentYear = () => new Date().getFullYear();
return (
<>
<CMain>
<CToolbar>
<CCscLogo></CCscLogo>
CSC UI React
</CToolbar>
<CSideNavigation>
<CSideNavigationItem>About</CSideNavigationItem>
<CSideNavigationTitle>Two level navigation</CSideNavigationTitle>
<CSideNavigationItem>
Examples
<CSubNavigationItem>Html</CSubNavigationItem>
<CSubNavigationItem>Javascript</CSubNavigationItem>
</CSideNavigationItem>
<CButton style={{ marginRight: '24px' }} slot="bottom" inverted ghost>
Logout
</CButton>
</CSideNavigation>
<CPage>
<CCard>
<CCardTitle>Dashboard layout</CCardTitle>
<CCardContent>
<CAlert type={'info' as CAlertType}>
<p slot="title">Using the layout</p>
The default layout can be disabled using the 'disable-layout'
prop
</CAlert>
<CTable responsive>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th></th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id}>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.age}</td>
<td>
<div
style={{
display: 'flex',
width: '100%',
justifyContent: 'end',
}}
>
<CButton
size="small"
text
onClick={() => onRemoveUser(user.id)}
>
Delete
</CButton>
</div>
</td>
</tr>
))}
{!users.length && (
<tr>
<td colSpan={4}>No more users to delete</td>
</tr>
)}
</tbody>
</table>
</CTable>
</CCardContent>
<CCardActions>
<CButton onClick={() => onOpenDialog()}>Add user</CButton>
</CCardActions>
</CCard>
<footer
slot="footer"
style={{
width: '100%',
padding: '24px',
backgroundColor: 'var(--c-tertiary-200)',
}}
>
{getCurrentYear()} - CSC Design system
</footer>
</CPage>
<CModal
value={isModalOpen}
onChangeValue={(event: CustomEvent<boolean>) =>
setIsModalOpen(event.detail)
}
>
<CCard>
<CCardTitle>Add a new user</CCardTitle>
<CCardContent>
<p>User Id: {users.length + 1}</p>
<CTextField
label="Name"
value={name}
onChangeValue={(event: CustomEvent<string>) =>
setName(event.detail)
}
></CTextField>
<CTextField
label="Age"
type="number"
value={age.toString()}
onChangeValue={(event: CustomEvent<string>) =>
setAge(+event.detail)
}
></CTextField>
</CCardContent>
<CCardActions justify="end">
<CButton onClick={() => setIsModalOpen(false)} text>
Cancel
</CButton>
<CButton onClick={() => onAddUser()}>Add user</CButton>
</CCardActions>
</CCard>
</CModal>
<CToasts ref={toastRef}></CToasts>
</CMain>
</>
);
}
export default App;
`;
</script>

0 comments on commit 717e84f

Please sign in to comment.