From 016b06c0c9da46256b2c81f89f08ea50be2fc8e8 Mon Sep 17 00:00:00 2001
From: Ville Eriksson <ville.eriksson@csc.fi>
Date: Thu, 24 Oct 2024 14:55:21 +0300
Subject: [PATCH] Update docs

---
 .../pages/getting-started/angular.vue         |  84 ++-----
 .../pages/getting-started/react.vue           | 235 +-----------------
 2 files changed, 19 insertions(+), 300 deletions(-)

diff --git a/packages/csc-ui-documentation/pages/getting-started/angular.vue b/packages/csc-ui-documentation/pages/getting-started/angular.vue
index 653457a0..8ed02cea 100644
--- a/packages/csc-ui-documentation/pages/getting-started/angular.vue
+++ b/packages/csc-ui-documentation/pages/getting-started/angular.vue
@@ -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
@@ -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
@@ -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>
diff --git a/packages/csc-ui-documentation/pages/getting-started/react.vue b/packages/csc-ui-documentation/pages/getting-started/react.vue
index bc44f003..bd8f7a99 100644
--- a/packages/csc-ui-documentation/pages/getting-started/react.vue
+++ b/packages/csc-ui-documentation/pages/getting-started/react.vue
@@ -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" />
@@ -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>